Módulos y Contenidos:

Mes 1: Fundamentos del Desarrollo Web (4 semanas)

• Clase 1: Cómo Funciona Internet y el Mundo Web
  • Qué es el desarrollo web
  • Frontend vs Backend vs Fullstack
  • Cómo funciona internet
  • Cliente – Servidor
  • Qué es hosting y dominio
  • Instalación de herramientas
• Clase 2: HTML desde Cero – La Estructura de la Web
  • Estructura básica de HTML
  • Etiquetas principales
  • Atributos
  • Buenas prácticas de estructura
• Clase 3: Multimedia y Formularios
  • img
  • video
  • audio
  • Formularios
  • Validaciones básicas
• Clase 4: Estructura Profesional y Mini Proyecto
  • Enlaces y navegación
  • Etiquetas semánticas
  • Mini proyecto: Landing page básica

Mes 2: CSS Profesional y Diseño Responsive (4 semanas)

• Clase 5: Introducción a CSS y Selectores
  • Sintaxis CSS
  • Selectores
  • Clases e ID
  • Aplicar estilos a HTML
• Clase 6: Box Model y Control del Espacio
  • margin
  • padding
  • border
  • width / height
  • Box-sizing
• Clase 7: Flexbox y Layouts Modernos
  • display: flex
  • justify-content
  • align-items
  • flex-direction
  • Crear layouts profesionales
• Clase 8: Responsive Design Profesional
  • Media queries
  • Mobile first
  • Diseño adaptable
  • Proyecto: Landing responsive completa

Mes 3: JavaScript y Control de Versiones (4 semanas)

• Clase 9: JavaScript desde Cero
  • let / const
  • Tipos de datos
  • Operadores
  • Console
• Clase 10: Lógica de Programación
  • Condicionales
  • Bucles
  • Funciones
  • Ejercicios prácticos
• Clase 11: Arrays y Objetos
  • Arrays
  • Objetos
  • map()
  • filter()
  • forEach()
• Clase 12: Git y GitHub Profesional
  • Crear repositorios
  • Commits
  • Push / Pull
  • Subir proyectos
  • Proyecto JS interactivo

Mes 4: JavaScript Avanzado y APIs (4 semanas)

• Clase 13: DOM y Eventos
  • querySelector
  • addEventListener
  • Manipulación básica
• Clase 14: Manipulación Dinámica del DOM
  • createElement
  • innerHTML
  • Eliminar elementos
  • Eventos dinámicos
• Clase 15: Fetch, Promesas y Async/Await
  • Qué es una API
  • Fetch
  • Promesas
  • Async / Await
• Clase 16: Proyecto con API Real
  • Consumir API pública
  • Mostrar datos dinámicamente
  • Manejo de errores

Mes 5: React desde Cero (4 semanas)

• Clase 17: Introducción a React y Vite
  • Qué es React
  • SPA
  • Crear proyecto con Vite
  • Estructura del proyecto
• Clase 18: Componentes y Props
  • JSX
  • Componentes
  • Props
  • Reutilización
• Clase 19: Estado y Eventos
  • useState
  • Eventos en React
  • Renderizado condicional
• Clase 20: Listas y Formularios
  • Listas dinámicas
  • keys
  • Formularios controlados
  • Mini proyecto React

Mes 6: React Profesional (4 semanas)

• Clase 21: useEffect y Ciclo de Vida en React
  • Qué es un efecto secundario
  • Diferencia entre render y efecto
  • Hook useEffect
  • Dependencias del array
  • Ejecución única ([])
  • Ejecución por cambios de estado
  • Cleanup function
  • Casos comunes
  • Buenas prácticas
  • Errores comunes
• Clase 22: Consumir APIs en React Profesionalmente
  • Patrón de carga de datos
  • Estados: loading / error / data
  • Async/await en useEffect
  • Manejo de errores con try/catch
  • Separar lógica en servicios
  • Variables de entorno
  • Introducción a Axios
  • Buenas prácticas de arquitectura
• Clase 23: React Router – Aplicaciones SPA
  • Qué es una SPA
  • Instalación de React Router
  • BrowserRouter
  • Routes y Route
  • Link y NavLink
  • useParams
  • useNavigate
  • Rutas dinámicas
  • Layouts reutilizables
  • 404 Page
  • Estructura de carpetas escalable
• Clase 24: Context API – Estado Global
  • Qué es el prop drilling
  • createContext
  • Provider
  • useContext
  • Estructura modular
  • Patrón provider separado
  • Casos reales
  • Buenas prácticas

Mes 7: REACT AVANZADO Y LIBRERÍAS (4 semanas)

• Clase 25: Redux Toolkit Profesional
  • Qué es Redux
  • Conceptos
  • createSlice
  • configureStore
  • useSelector
  • useDispatch
  • Redux DevTools
  • Estructura escalable
  • Buenas prácticas
• Clase 26: Tailwind CSS Profesional
  • Instalación en React
  • Utility-first
  • Responsive con Tailwind
  • Flex y Grid
  • Hover y estados
  • Dark mode
  • Componentización
  • Optimización para producción
• Clase 27: Librerías UI (Material UI)
  • Instalación
  • Componentes
  • Sistema de temas
  • Personalización
  • Integración con formularios
  • Accesibilidad
• Clase 28: Arquitectura Escalable
  • Organización por features
  • Separación
  • Custom Hooks
  • Principio DRY
  • Código limpio
  • Reutilización
  • Preparación para trabajo en equipo

Mes 8: BACKEND CON NODE Y EXPRESS (4 semanas)

• Clase 29: Introducción a Node.js
  • Qué es Node
  • npm
  • package.json
  • Módulos
  • CommonJS vs ESModules
  • Scripts
  • Crear servidor básico
• Clase 30: Express y Rutas
  • Qué es Express
  • Crear servidor
  • Middlewares
  • Rutas GET / POST
  • JSON
  • Params y Query
  • Estructura MVC básica
• Clase 31: API REST Completa
  • Métodos
  • Controladores
  • Validaciones
  • Manejo de errores
  • Buenas prácticas REST
  • Postman
• Clase 32: Conectar React con Backend
  • CORS
  • Variables de entorno
  • Axios conexión real
  • CRUD desde frontend
  • Manejo de errores en frontend
  • Deploy prueba local completa

Mes 9: BASES DE DATOS Y AUTENTICACIÓN (4 semanas)

• Clase 33: SQL vs NoSQL
  • Diferencias
  • Cuándo usar cada una
  • Modelado básico
  • Introducción a MongoDB
• Clase 34: MongoDB y Mongoose
  • Conexión a MongoDB
  • Modelos y esquemas
  • CRUD con base de datos real
  • Validaciones
  • Relaciones simples
  • Buenas prácticas
• Clase 35: Autenticación con JWT
  • Qué es autenticación
  • Hash de contraseñas (bcrypt)
  • Login y registro
  • JSON Web Token
  • Middleware de autenticación
  • Seguridad básica
• Clase 36: Rutas Protegidas y Roles
  • Middleware de autorización
  • Roles (admin / user)
  • Protección en frontend
  • Guardar token
  • Logout seguro
  • Seguridad profesional básica

Mes 10: PRODUCCIÓN Y PROYECTO FINAL (4 semanas)

• Clase 37: Preparar Proyecto para Producción
  • Variables de entorno
  • Build producción
  • Optimización
  • Seguridad básica
  • Limpieza de código
• Clase 38: Deploy Frontend
  • Deploy en Vercel
  • Variables de entorno online
  • Problemas comunes
  • Configuración dominio
• Clase 39: Deploy Backend
  • Deploy en Render
  • Conectar base de datos en la nube
  • Variables de entorno
  • Pruebas finales
• Clase 40: Dominio, SSL y Presentación Final
  • Comprar dominio
  • Configurar DNS
  • HTTPS
  • Optimización SEO básica
  • Cómo presentar proyecto en entrevista
  • Cómo armar portfolio profesional