Curso de Desarrollo Web desde cero

En este sprint revisaremos los fundamentos del desarrollo web, así como los conceptos básicos de HTML y CSS. Haremos esto trabajando en una serie de mini proyectos en la plataforma interactiva antes de crear tu primer proyecto independiente.En este sprint, aprenderás cómo: - Crear una estructura de marcado de sitios web usando HTML. - Dar estilo a elementos de sitios web usando CSS.

Tu tarea es sencilla: crear una página web sobre ti. Para hacerlo incluso más simple, la estructura de esta página debe ser idéntica a la página web que acabas de crear en el sprint.

En tu segundo sprint aprenderás cómo trabajar con diseños usando Flexbox y elementos de posicionamiento. También te presentaremos BEM y Git con miras a sprints posteriores y a tus proyectos. En este sprint, aprenderás cómo: - Controlar el diseño de una página web usando Flexbox. - Mostrar y posicionar elementos usando propiedades de posicionamiento. - Estructurar el código usando la metodología BEM. - Navegar por los cambios usando el sistema de control de versiones de Git

En este proyecto vas a crear un sitio web estándar de una sola página de acuerdo con el informe. Este proyecto se enfocará en el diseño Flexbox, el posicionamiento y la semántica HTML.

En este sprint, le darás vida a tu página usando animaciones y contenido embebido. Aprenderás cómo usar formularios para reunir información de los usuarios y desarrollarás tus habilidades en BEM y GIT que aprendiste en el Sprint 2. También aprenderás cómo depurar tus páginas web. Después pondrás todo este conocimiento en práctica para terminar tu página de inicio. En este sprint, aprenderás cómo: - Manipular elementos visualmente usando transformaciones CSS y keyframes. - Crear marcado para formularios de entrada del usuario. - Organizar la estructura de archivos del proyecto de acuerdo con las reglas BEM. - Navegar y usar la línea de comandos para Git.

En este proyecto vas a crear una página de inicio para la cafetería Triple Espresso. Agregarás videos para diversificar el contenido de la página, añadirás animación y transiciones suaves para que resalten los estados hover, conectarás Google fonts y organizarás los archivos por Flat BEM.

Los ingenieros de software deben ser capaces de seguir las especificaciones del diseño y convertirlas en productos reales. En este sprint, harás justamente eso: dar vida a los diseños de Figma y a las hojas de especificaciones. Tus habilidades en Git obtendrán una mejora a medida que te enseñamos algunas características avanzadas. También aprenderás cómo adaptar tu interfaz para diversos dispositivos y a organizar tu página usando grid layout. En este sprint, aprenderás cómo: - Escribir código CSS personalizado para diferentes tamaños de pantalla utilizando consultas de medios. - Crear el diseño de una página web usando columnas y filas de cuadrícula. - Colaborar con otros desarrolladores usando ramas y pull requests de Git.

Esta vez, vas a hacer que una página web muestre las ciudades natales de algunos empleados de TripleTen. Tendrás que asegurarte de que se vea bien en todos los tamaños de pantalla más populares.

Este sprint comienza con un curso intensivo sobre uno de los lenguajes de programación más populares: JavaScript. Con frecuencia, los ingenieros de software usarán JavaScript para manipular el diseño de una página, así que observemos más de cerca a tu navegador para que tengas una mejor idea sobre qué está pasando en el DOM. Cuando hayas establecido tu código, sin duda tendrás algunos errores, así que aprenderás cómo eliminarlos en el capítulo sobre depuración. En este sprint, aprenderás cómo: - Utilizar conceptos básicos de programación de JavaScript. - Manipular código HTML y CSS usando JavaScript en el DOM. - Depurar el código JavaScript usando las herramientas del desarrollador y la consola. - Resolver conflictos de fusión de Git con comandos para gestionar el historial de código.

En este y los próximos sprints, vas a trabajar en un proyecto llamado "Alrededor de los EE. UU.", una página interactiva en la que los usuarios pueden añadir, eliminar o dar "me gusta" a las fotos. En este sprint, vas a crear un sitio responsivo usando HTML y CSS, a escribir código JS para establecer su comportamiento y publicar tu proyecto en Git.

En el sexto sprint, profundizarás en las bases de la programación, incluyendo primitivos, condicionales, bucles, arrays y funciones. Te basarás en tu nuevos conocimientos sobre el DOM y aprenderás cómo usarlo y agregar nuevos niveles de interactividad a tus páginas web. En este sprint, aprenderás cómo: - Manipular distintas estructuras de datos en JavaScript. - Crear contenido HTML usando JavaScript y los métodos del DOM. - Crear detectores de eventos para manejar eventos del navegador.

En este proyecto, se te pedirá que agregues una nueva funcionalidad a tu página web: añadir y eliminar fotos, dar "like" a las fotos de otros usuarios, crear una sección separada para el modal de imágenes y garantizar una apertura y cierre suaves de los elementos.

En este sprint, podrás familiarizarte con los conceptos de programación más avanzados, tales como objetos y eventos. También aprenderás a trabajar con formularios y a validarlos usando JavaScript. Este sprint concluye con una lección extra sobre depuración en JavaScript. En este sprint, aprenderás cómo: - Manipular objetos en JavaScript. - Controlar eventos del teclado y del mouse. - Accesar elementos de formulario y validar la entrada del usuario.

En este proyecto, se te pedirá que agregues validación para todos los formularios en el proyecto y mejores la experiencia de usuario de las ventanas emergentes.

En este punto, podrás programar algunas páginas web bastante impresionantes. Al igual que con la mayoría de los proyectos, pronto crecerán rápidamente y querrás dividirlas en fragmentos más manejables. En este sprint, profundizarás en la programación orientada a objetos al tiempo que aprendes a crear eficiente código reutilizable. También te mostraremos cómo separar tu JavaScript en módulos para poder reutilizar código en otros proyectos y solo importar lo que necesites. En este sprint, aprenderás cómo: - Implementar características orientadas a objetos en JavaScript utilizando principios de la POO. - Modificar contenido del marcado dentro de las clases. - Dividir código JavaScript en módulos usables.

En este proyecto, te enfocarás en la refactorización, la creación de tarjetas y validación de formularios en clases separadas.

En este sprint, aprenderás cómo desempaquetar arrays y objetos usando sintaxis desestructurante. Te sumergirás en la programación orientada a objetos mientras aprendes más sobre interfaces. Después, vas a aprender cómo usar Webpack para empaquetar tu código. En este sprint, aprenderás cómo: - Gestionar objetos y arrays usando sintaxis desestructurante. - Organizar código de acuerdo con el diseño orientado a objetos. - Configurar Webpack para automatizar las tareas build.

En este proyecto, te enfocarás en la refactorización, en crear clases adicionales y acoplarlas, y configurar el empaquetamiento y construcción con Webpack.

Al llegar al sprint 10, serás una eminencia en JavaScript. A estas alturas, ya podrás aprender otra técnica avanzada: la programación asíncrona. Aprenderás cómo trabajar con APIs para extraer datos de fuentes de toda la red. Y para concluir, comenzarás a prepararte para entrevistas con nuestra primera lección en la serie de preparación de entrevistas, en donde profundizarás en los prototipos de objeto. En este sprint, aprenderás cómo: - Escribir código JavaScript asíncrono con promesas. - Hacer peticiones HTTP a un servidor usando la API Fetch. - Actualizar el marcado usando la obtención de datos. - Desplegar sitios web en un servidor remoto.

En este proyecto, recuperarás información del servidor y almacenarás datos en el servidor. Después, conectarás tu sitio web "Alrededor de los EE. UU." al servidor.

En este sprint, aprenderás cómo: - Crear elementos de la interfaz de usuario usando JSX. - Crear componentes React reutilizables. - Gestionar el estado y ciclo de vida de los componentes usando hooks de React.

En este proyecto, vas a transferir el sitio web "Alrededor de los EE. UU." a React. Se te pedirá que transfieras el marcado y los estilos, y que configures las ventanas emergentes y las tarjetas.

En este sprint, seguirás trabajando con React mientras revisamos otros temas más complejos, tales como React Router, cómo trabajar con datos en Reacat, y técnicas React avanzadas. La lección sobre preparación de entrevistas para este sprint te introducirá a la programación de pizarra. En este sprint, aprenderás cómo: - Agregar y accesar rutas a una aplicación React usando React Router. - Pasar datos entre componentes React usando contexto. - Usar componentes controlados para controlar elementos de formulario.

En este proyecto, seguirás transfiriendo tu sitio web "Alrededor de los EE. UU." a React y aprenderás a enviar datos y otra información a la API.

Para convertirte en un desarrollador web full-stack, necesitas aprender desarrollo del lado del servidor. En este sprint, aprenderás a configurar un servidor simple usando Node.js, y a cómo desplegarlo en el back-end usando Express.js. También seguirás preparándote para entrevistas, esta vez, con un capítulo sobre análisis de complejidad algorítmica. En este sprint, aprenderás cómo: - Construir un servidor con Node.js. - Desplegar el back-end en una máquina remota usando Express.js y usarla para servir datos y respuestas a peticiones del cliente.

En el proyecto de este sprint, vas a ajustar su estructura y hacerla más modular, a configurar un servidor que distribuirá contenido estático, y en el proceso, empezarás a crear tu propia API.

En el sprint anterior, aprendiste cómo crear un servidor. Ahora, vamos a ver cómo prepararlo para trabajar con el front end. Comenzaremos analizando los principios de la API REST y aprendiendo cómo trabajar con bases de datos. En este sprint, aprenderás cómo: - Crear una API REST y usarla para conectar bases de datos al servidor. - Almacenar, manipular y recuperar datos en un servidor usando MongoDB y Mongoose. - Usar expresiones regulares para validar y extraer datos de strings. - Implementar el manejo de errores.

En el proyecto, construirás una API REST para tu proyecto "Alrededor de los EE. UU." y la conectarás a la base de datos.

En este sprint, aprenderás cómo crear una aplicación completamente funcional y dividirás a los usuarios en grupos con distintos niveles de acceso disponible. Para hacerlo, repasaremos los aspectos esenciales de la autenticación back-end, y después cambiaremos al front-end e implementaremos la autenticación del usuario usando React. Para terminar, al final del sprint, hablaremos sobre la seguridad de la aplicación web y cómo cualquier intercambio de datos entre el front-end y el back-end expone tu aplicación a varios problemas de vulnerabilidad. En este sprint, aprenderás cómo: - Trabajar con el almacenamiento de datos del navegador. - Registrar y autorizar usuarios, y configurar el acceso al front-end con React. - Implementar la autenticación del usuario con React. - Configurar la seguridad básica de la aplicación web.

En este proyecto, se te pedirá que implementes el registro y la autorización para tu aplicación React.

Primero, aprenderás sobre cómo crear la autenticación del lado del servidor. Te mostraremos cómo crear un usuario (registro, autenticación) y cómo crear un token. En el sprint anterior, trabajaste con un back-end prefabricado, pero esta vez, lo escribirás por tu cuenta. Después, tendremos dos largos capítulos sobre cómo tratar con las pruebas automatizadas y el despliegue del back-end en el servidor remoto. En este sprint, aprenderás cómo: - Realizar pruebas básicas en tu código, incluyendo en APIs y bases de datos. - Implementar la autorización back-end usando tokens JWT. - Implementar un manejador de errores centralizado. - Crear tu propio dominio. - Desplegar una aplicación web en Google Cloud.

En este proyecto, vas a conectar el lado del cliente al lado del servidor de la aplicación, escribirás un manejador de errores centralizado y desplegarás el proyecto.