← Volver / roadmaps / frontend
RUTA · 16 SEMANAS · 6 FASES
— roadmap

Frontend Master.

HTML, CSS y JavaScript de base, luego React con hooks y estado. Proyectos reales desplegados desde la semana 2. El roadmap asume que empiezas desde cero y que vas a atascarte — está diseñado para eso.

Empezar esta ruta Descargar PDF →
// RESUMEN
16 semanas
6 fases
5 proyectos
0€ para empezar
// STACK
HTML CSS JavaScript React Tailwind Git Vite Vercel
// VISTA GENERAL
01 · WK 01–02
Bases
02 · WK 03–06
JavaScript real
03 · WK 07–10
React
04 · WK 11–12
React avanzado
05 · WK 13–14
Portfolio
06 · WK 15–16
Empleo
Semana 01 Tu progreso: Bases Semana 16
— fase a fase

Qué construyes cada semana.

01
WK 01–02
EMPIEZA AQUÍ

Bases: HTML, CSS y Git

HTML semántico, CSS moderno, Git. Las dos semanas más tranquilas del roadmap — aprovéchalas para instalar el flujo de trabajo antes de que llegue JavaScript.

// SEMANA 1
HTML semántico + CSS moderno
  • Estructura semántica: header, main, footer, article, section
  • Flexbox y CSS Grid desde cero
  • Variables CSS y diseño responsive con media queries
  • Formularios con validación nativa del navegador
// MINI PROYECTO
Página de receta de cocina
Estructura semántica completa, responsive en móvil y escritorio, foto y lista de ingredientes. HTML y CSS puros, sin JavaScript todavía.
// SEMANA 2
Git + GitHub + primer deploy
  • Git: init, add, commit, push — el flujo básico que usarás siempre
  • GitHub: repositorio público, README con descripción real
  • Deploy con Netlify: de carpeta local a URL pública
  • Animaciones CSS: transiciones y hover states
// PROYECTO FASE
Landing personal online
Tu sitio con nombre, foto y redes. En GitHub y desplegado con URL real. El proyecto más simple del roadmap, pero el primero que alguien puede ver.
02
WK 03–06

JavaScript real

DOM, eventos, fetch, async/await. La fase más dura de las primeras ocho semanas. Las promesas y el asincronismo rompen a casi todo el mundo — cuenta con ello y no te rindas en la semana 5.

// SEMANA 3
DOM y eventos
  • querySelector, getElementById — seleccionar elementos del HTML
  • addEventListener: click, submit, input, keydown
  • Manipular clases y estilos desde JavaScript
  • localStorage: guardar y recuperar datos entre sesiones
// MINI PROYECTO
Lista de tareas con persistencia
Añadir, completar y borrar tareas. Guardado en localStorage para que no desaparezca al recargar la página.
// SEMANA 4
JS moderno: arrays, objetos y ES6+
  • map, filter, reduce — los tres que más vas a usar en React después
  • Desestructuración, spread operator, template literals
  • Módulos ES6: import/export
  • Arrow functions y su diferencia con function()
// MINI PROYECTO
Calculadora de gastos
Añade gastos por categoría, calcula totales, filtra por mes. Primer uso real de arrays y objetos con datos que el usuario introduce.
// SEMANAS 5–6
Fetch API + async/await + APIs externas
  • fetch() y el ciclo petición–respuesta–render
  • async/await: el asincronismo es difícil de entender al principio — es normal
  • Manejo de errores con try/catch y estados de carga
  • Debounce: esperar a que el usuario deje de escribir antes de llamar a la API
// PROYECTO FASE
Buscador de películas con TMDB
Búsqueda con debounce, paginación y página de detalle. El primer proyecto donde el contenido viene de internet, no de tu código.
03
WK 07–10

React

Componentes, hooks y estado. La curva de React es real: espera perder una semana entera solo entendiendo por qué el estado no se actualiza como crees. Es parte del proceso.

// SEMANA 7
Componentes, props y JSX
  • Vite + React: entorno listo en minutos
  • Componentes funcionales: dividir la UI en piezas reutilizables
  • Props: pasar datos de padre a hijo
  • JSX: HTML dentro de JavaScript y sus reglas propias
// MINI PROYECTO
Tarjeta de perfil reutilizable
Componente que acepta nombre, foto y bio por props. El primer ejercicio donde el concepto de componente hace clic.
// SEMANA 8
useState + useEffect
  • useState: por qué mutar el estado directamente no funciona
  • useEffect: cuándo se ejecuta y por qué el array de dependencias importa
  • Listas con .map() y la prop key — por qué React la pide
  • Formularios controlados: el input que React controla
// MINI PROYECTO
App del tiempo con API
Busca ciudad, muestra temperatura y estado. Gestión de carga y error en pantalla. El primer componente que hace una petición real.
// SEMANAS 9–10
React Router + Tailwind + portfolio v1
  • React Router v6: rutas, Link, useNavigate, useParams
  • Tailwind CSS: clases en lugar de CSS manual
  • Deploy en Vercel desde el repositorio de GitHub
// PROYECTO FASE
Portfolio v1 en React
Página principal y sección de proyectos con filtro por tecnología. Desplegado en Vercel. No tiene que ser perfecto — tiene que estar online.
04
WK 11–12

Estado global y primer test

Context API, custom hooks y una introducción a testing. Son las semanas donde más gente se atasca porque se acumula lo anterior. Si llegas aquí con el portfolio v1 funcionando, ya estás por delante de la media.

// SEMANA 11
Context API + custom hooks
  • Context: compartir estado entre componentes sin prop drilling
  • useReducer: cuando useState se queda corto con lógica compleja
  • Custom hooks: extraer lógica repetida en un hook propio
// MINI PROYECTO
Carrito de compras con Context
Añadir/quitar productos, calcular total, persistir en localStorage. Estado global sin librerías externas.
// SEMANA 12
Introducción a testing
  • Vitest: tests unitarios para funciones y lógica pura
  • Testing Library: un test básico que comprueba lo que el usuario ve
  • React.lazy + Suspense: cargar componentes cuando se necesitan
// PROYECTO FASE
Carrito con tests básicos
El carrito del proyecto anterior con tres o cuatro tests que verifican que añadir y quitar productos funciona. Introducción al flujo, no cobertura completa.
05
WK 13–14

Portfolio mejorado

Documentar proyectos y mejorar el portfolio existente. No se añade Next.js aquí — dos semanas no son suficientes para aprender SSR, App Router y MDX a la vez. Eso va después.

// SEMANA 13
Refactorizar y documentar
  • Revisitar el código de las fases anteriores y limpiarlo
  • READMEs con capturas, descripción del problema y decisiones técnicas
  • Añadir un proyecto nuevo al portfolio v1 con lo aprendido en la fase 4
  • Performance básica: lazy loading de imágenes, evitar renders innecesarios
// ENTREGABLE
Proyectos documentados en GitHub
Cada repositorio con README que describe qué hace, por qué lo construiste y cómo ejecutarlo. Lo que distingue un perfil trabajado de uno abandonado.
// SEMANA 14
Portfolio v2 con mejoras visuales
  • Rediseñar o mejorar el portfolio v1 con lo que ya sabes
  • Añadir sección de habilidades con iconos reales
  • Formulario de contacto funcional
  • Optimizar imágenes y revisar que carga bien en móvil
// PROYECTO FASE
Portfolio v2 mejorado
El mismo portfolio pero con más proyectos, mejor documentado y con formulario funcionando. Sin saltar a Next.js todavía — primero consolidar.
06
WK 15–16

Proyecto final

Dos semanas para construir un proyecto completo desde cero, sin guía paso a paso. El objetivo es demostarte que ya puedes hacerlo solo.

// SEMANA 15
Planificación y estructura
  • Elegir un proyecto con lógica propia: una app de recetas, un gestor de hábitos, un clon simple
  • Diseñar la estructura de componentes antes de escribir código
  • Crear el repositorio, rama main, primer commit con la estructura vacía
  • Identificar qué APIs o datos necesita y cómo obtenerlos
// ENTREGABLE
Repositorio con estructura base
Proyecto creado, estructura de carpetas decidida, dependencias instaladas y primera versión en Vercel aunque esté vacía.
// SEMANA 16
Implementación y deploy
  • Construir las funcionalidades principales sin copiar código de proyectos anteriores
  • Gestionar el estado con lo aprendido: useState, Context si hace falta
  • README con descripción, capturas y cómo ejecutarlo localmente
  • Deploy final en Vercel con URL pública
// PROYECTO FINAL
App propia desplegada
Un proyecto que elegiste tú, construido sin ayuda paso a paso, con código tuyo y documentación real. El mejor indicador de que el roadmap funcionó.
— al terminar

Acabas con 5 proyectos en tu portfolio público.

01 WK 01–02

Landing personal

HTML y CSS puros. Estructura semántica, responsive, desplegado en Netlify con URL real.

HTMLCSSNetlify
02 WK 03–06

Buscador de películas

JavaScript vanilla con fetch y debounce. Datos reales de la API de TMDB, paginación y página de detalle.

JS vanillaTMDB APICSS Grid
03 WK 07–10

Portfolio v1 en React

Componentes, estado, React Router y Tailwind. Proyectos con filtro por tecnología, desplegado en Vercel.

ReactViteTailwindVercel
04 WK 11–12

Carrito de compras con tests

Context API, useReducer y persistencia en localStorage. Tests básicos con Vitest que verifican la lógica principal.

ReactContextVitest
05 WK 13–14

Portfolio v2 documentado

Portfolio mejorado con READMEs reales, formulario de contacto funcional y los proyectos anteriores bien presentados.

ReactResendVercel
— las otras rutas

¿No es la tuya? Sin problema.

RUTA · 20 SEMANAS

Backend Pro

Node.js, Java con Spring Boot y PostgreSQL. El stack que usan los bancos y las APIs serias. Robusto, no de juguete.

Node.js Java Spring Boot PostgreSQL JWT
Ver roadmap →
RUTA · 24 SEMANAS

Full-Stack Hero

React arriba, Spring Boot + PostgreSQL abajo, Docker en medio. Un portfolio completo que un recruiter sí va a abrir.

React Spring Boot PostgreSQL Docker
Ver roadmap →
// EMPIEZA AQUÍ

La primera fase
es gratis.

Crea tu cuenta y arranca por la primera fase. Si te engancha, pasas a Pro por 5€/mes. Si no, no pasa nada.

12 personas ya dentro · sin tarjeta · sin spam