Curso de Desarrollo Web Full Stack

Lección 1 • Cómo Funciona la Web

Cubre los ciclos de solicitud-respuesta HTTP, la resolución de DNS y los pipelines de renderizado del navegador. Establece la base conceptual para cada decisión full-stack que se toma más adelante.

Lección 2 • Herramientas para Desarrolladores y Fundamentos de la Terminal

Introduce la línea de comandos, los gestores de paquetes y los editores de código como herramientas de uso diario. La competencia acá acelera todos los ejercicios prácticos posteriores.

Lección 3 • Estructura de Proyectos y Estándares de Código

Establece convenciones de carpetas, reglas de linting y estándares de formato usados a lo largo del curso. Una estructura coherente reduce la carga cognitiva en proyectos posteriores de múltiples archivos.

Lección 1 • Flexbox y CSS Grid Layouts

Enseña ambos sistemas de layout con casos de uso prácticos para cada uno. Los estudiantes construyen un layout responsivo de dos columnas y una grilla de tarjetas usando solo CSS.

Lección 2 • Fundamentos de CSS y el Modelo de Caja

Explica selectores, especificidad, herencia y el modelo de caja como base de todo el estilo visual. Los estudiantes estilizan una página de múltiples secciones al final de la sección.

Lección 3 • Diseño Responsivo y Media Queries

Aplica principios de diseño mobile-first y estrategias de puntos de quiebre a layouts reales. Los estudiantes adaptan un diseño de escritorio para que funcione en viewports de teléfono, tableta y escritorio.

Lección 4 • Animaciones y Transiciones CSS

Introduce animaciones de keyframes y propiedades de transición para agregar movimiento sin JavaScript. Conecta el pulido visual con los principios de experiencia de usuario presentados en las secciones de layout.

Lección 1 • Módulos y Herramientas Modernas de JavaScript

Introduce módulos ES, bundlers y transpiladores para preparar el código para entornos de producción. Los estudiantes configuran un proyecto Vite e importan/exportan a través de múltiples archivos.

Lección 2 • JavaScript Asíncrono

Explica el event loop, callbacks, Promises y async/await para manejar operaciones con retardo de tiempo. Los estudiantes obtienen datos de una API pública y los renderizan en el DOM.

Lección 3 • Sintaxis Central de JavaScript y Tipos de Datos

Cubre variables, primitivos, operadores y coerción de tipos como bloques fundamentales de todo código JS. El dominio acá previene los errores de principiante más comunes en proyectos posteriores.

Lección 4 • Flujo de Control y Funciones

Enseña condicionales, bucles y declaraciones de funciones, incluyendo arrow functions y closures. Los estudiantes refactorizan código procedural en funciones reutilizables y con buen alcance.

Lección 1 • Estado Global con Context y Reducers

Enseña Context API y useReducer para compartir estado a través de componentes profundamente anidados. Los estudiantes refactorizan estado pasado por props a un almacén de contexto centralizado.

Lección 2 • Conceptos Centrales de React y JSX

Introduce el modelo de componentes, la sintaxis JSX y el DOM virtual como ideas fundacionales de React. Los estudiantes renderizan un árbol de componentes y entienden cómo React actualiza la UI.

Lección 3 • React Router y Navegación

Implementa enrutamiento del lado del cliente con rutas anidadas, segmentos dinámicos y rutas protegidas. Los estudiantes agregan navegación de múltiples páginas a su aplicación React.

Lección 4 • Gestión de Estado con Hooks

Cubre useState, useEffect y hooks personalizados para gestionar el estado local del componente y los efectos secundarios. Los estudiantes construyen un formulario interactivo con validación y devolución en vivo.

Lección 1 • Principios de Diseño de APIs RESTful

Aplica restricciones REST para diseñar endpoints de API consistentes y predecibles con códigos de estado adecuados. Los estudiantes refactorizan una API ad-hoc en una estructura completamente RESTful basada en recursos.

Lección 2 • Framework Express y Enrutamiento

Construye aplicaciones Express estructuradas con manejadores de ruta, parámetros de ruta y cadenas de consulta. Los estudiantes organizan rutas en archivos de enrutador separados siguiendo convenciones REST.

Lección 3 • Entorno de Ejecución de Node.js y Módulos Centrales

Explica la arquitectura orientada a eventos de Node.js, el sistema de módulos y los módulos integrados para I/O de archivos y red. Los estudiantes escriben scripts usando los módulos fs, path y http.

Lección 4 • Validación de Entrada y Manejo de Errores

Implementa validación basada en esquemas y respuestas de error centralizadas para fortalecer la API. Los estudiantes agregan middleware de validación que devuelve mensajes de error estructurados a los clientes.

Lección 1 • Integración de ORM con Prisma

Usa Prisma para definir esquemas, generar un cliente con tipado seguro y realizar operaciones CRUD desde Node.js. Los estudiantes reemplazan las consultas SQL sin procesar en su API con llamadas al cliente Prisma.

Lección 2 • NoSQL con MongoDB y Mongoose

Introduce el modelado de datos orientado a documentos y los esquemas de Mongoose para almacenamiento flexible sin esquema. Los estudiantes construyen un segundo endpoint de API respaldado por MongoDB para contrastar con SQL.

Lección 3 • Elección y Conexión de Bases de Datos

Compara las ventajas y desventajas de SQL y NoSQL y cubre el pooling de conexiones y la configuración basada en entorno. Los estudiantes configuran su API para cambiar de base de datos mediante variables de entorno.

Lección 4 • Configuración de PostgreSQL y Consultas Avanzadas

Aplica habilidades de SQL a PostgreSQL con índices, transacciones y restricciones para integridad de datos de grado de producción. Los estudiantes ejecutan migraciones y scripts de sembrado contra una instancia local de PostgreSQL.

Lección 1 • JSON Web Tokens y Refresh Tokens

Cubre la estructura de JWT, firma, verificación y rotación de refresh tokens para sesiones persistentes. Los estudiantes implementan login, emisión de tokens y refresco silencioso en su API.

Lección 2 • Mejores Prácticas de Seguridad Web

Aborda las principales amenazas de OWASP, incluyendo XSS, CSRF, inyección SQL y encabezados inseguros. Los estudiantes auditan su aplicación y aplican Helmet.js y correcciones de saneamiento de entrada.

Lección 3 • OAuth 2.0 e Inicio de Sesión de Terceros

Integra el flujo de código de autorización OAuth 2.0 para inicio de sesión social usando un proveedor como Google. Los estudiantes agregan un botón funcional de inicio de sesión de terceros a su aplicación full-stack.

Lección 4 • Control de Acceso Basado en Roles

Diseña un modelo de permisos con roles y guardias aplicados como middleware de Express y envoltorios de ruta de React. Los estudiantes restringen endpoints de API y páginas de UI por rol de usuario.

Lección 1 • Integración Full-Stack y Proyecto Final Integrador

Conecta todas las capas—frontend React, API Express, base de datos y autenticación—en una sola aplicación desplegable. Los estudiantes presentan un proyecto vivo con todas las funcionalidades que demuestra competencia de extremo a extremo.

Lección 2 • Configuración de Pipelines de CI/CD

Automatiza las pruebas, la construcción y el despliegue usando un servicio de CI/CD activado por pushes de Git. Los estudiantes configuran un pipeline que ejecuta pruebas y despliega al fusionar a main.

Lección 3 • Contenerización con Docker

Empaqueta la API de Node.js y la base de datos en contenedores Docker para entornos consistentes en todas las máquinas. Los estudiantes escriben Dockerfiles y un archivo Compose para desarrollo local multiservicio.

Lección 4 • Despliegue en la Nube y Hosting

Despliega la API de backend en una plataforma en la nube y el frontend React en un servicio de hosting estático. Los estudiantes configuran dominios personalizados, HTTPS y secretos de entorno.