Ruta Frontend Web Developer Jr: aprende gratis desde cero en 6 semanas
De cero a resolver tickets sencillos de frontend en un equipo real, con HTML, CSS, TypeScript y React. Con videos gratis en español, explicaciones en palabras simples, retos prácticos, cuestionarios y revisión de un docente.
- Nivel: Principiante
- 6 semanas
- 56 retos
- 33 videos gratis
- 48 preguntas
- Certificado al terminar
El contenido de las rutas está en español.
Temario semana a semana
Semana 1 · HTML semántico, CSS y Git
Esta semana armas tu primera página web. Piensa en una casa: HTML son las paredes y los cuartos (qué hay y dónde), CSS es la pintura y los muebles (cómo se ve) y Git es el álbum de fotos de cada etapa de la obra, para volver atrás si algo sale mal. "Semántico" es poner el rótulo correcto a cada cosa, como marcar "cocina" y "baño" en el plano en vez de "cuarto 1" y "cuarto 2".
Mini ejemplo: un menú de navegación va en <nav>, no en un <div> cualquiera; así el lector de pantalla y Google saben que ahí hay enlaces.
Error típico: poner todo dentro de <div> y usar <br> para separar; la página se ve igual, pero nadie (ni el buscador) entiende su estructura.
Temas de la semana 1
- Estructura de un documento HTML, etiquetas semánticas (
header,nav,main,section,article,footer) - Formularios HTML:
form,label,input(tipos),select,button, atributosrequired,min,pattern - CSS: selectores, especificidad, cascada, box model,
box-sizing: border-box - Unidades (
px,rem,%,vw), colores, tipografía, variables CSS (--color-primario) - Flexbox:
justify-content,align-items,gap,flex-wrap,flex: 1 - Grid:
grid-template-columns,repeat,minmax,auto-fit,grid-template-areas - Responsive: mobile first,
@media (min-width: …), imágenes fluidas - Git:
clone,branch,commit,push,pull, Pull Request, resolver un conflicto simple
Cursos: "CSS La Guía Completa" (Juan Pablo De la Torre) + videos gratis de HTML, CSS y Git.
10 retos · cuestionario de 8 preguntas
Semana 2 · JavaScript esencial y DOM
JavaScript es el cerebro de la página: lo que hace que un botón responda. El DOM es el control remoto: un mapa de la página con el que JavaScript encuentra un elemento (querySelector) y lo cambia, como cambiar de canal o subir el volumen. Los eventos son los botones del control: cada clic o tecla es una señal que tú decides escuchar.
Mini ejemplo: boton.addEventListener('click', () => total.textContent = 'S/ 50') cambia el texto al tocar el botón.
Error típico: usar == en vez de === ('5' == 5 da true) o olvidar el await y guardar una promesa en lugar del dato.
Temas de la semana 2
let/const, tipos, comparación estricta (===), truthy / falsy,??y?.- Funciones, arrow functions, parámetros por defecto, template literals
- Objetos y arreglos: desestructuración, spread (
...),map,filter,reduce,find,some,sort,toSorted - Módulos ES (
import/export) - DOM:
querySelector,createElement,textContent,classList, eventos (addEventListener,submit,input, delegación) - Asincronía: promesas,
async/await,fetch,try/catch localStorageyJSON.stringify/JSON.parse- Formateo de moneda y fechas con
Intl.NumberFormateIntl.DateTimeFormat
Cursos: "JavaScript Moderno: Guía para dominar el lenguaje" (Fernando Herrera) + videos gratis de JavaScript y DOM.
Videos gratis recomendados
9 retos · cuestionario de 8 preguntas
Semana 3 · TypeScript y fundamentos de React
TypeScript es JavaScript con etiquetas en cada caja: si dice "frágil: vidrio", no puedes meterle ladrillos. React arma pantallas con bloques de Lego llamados componentes, y las props son las instrucciones que le das a cada bloque (color, texto, tamaño). El estado (useState) es la memoria de un bloque: cuando cambia, React vuelve a dibujarlo solo.
Mini ejemplo: <Tarjeta titulo="Netflix" monto={39.9} /> reutiliza el mismo bloque con otros datos.
Error típico: modificar el estado directo (lista.push(x)) en vez de crear una copia nueva con setLista([...lista, x]); la pantalla no se entera.
Temas de la semana 3
- TypeScript: tipos primitivos,
typeeinterface, uniones ('INGRESO' | 'GASTO'), opcionales (?), tipar funciones y arreglos - Proyecto React con Vite y TypeScript: estructura,
main.tsx,App.tsx,npm run dev/build - JSX: expresiones,
className, renderizado condicional, listas conmapykey - Componentes y props tipadas,
children, composición - Estado con
useState, eventos (onClick,onChange), estado derivado - Lifting state up: estado arriba, eventos abajo
- React Developer Tools
Cursos: "React: De cero a experto" (Fernando Herrera) — secciones de introducción, TypeScript con React, componentes, props y useState. Apoyo: secciones de tipos básicos de "TypeScript: Tu completa guía".
Videos gratis recomendados
9 retos · cuestionario de 8 preguntas
Semana 4 · React: efectos, formularios, consumo de APIs y rutas
Consumir una API es pedir datos a un servidor como pides comida por delivery: haces el pedido, esperas y mientras tanto ves "preparando" (cargando). Puede llegar bien, llegar mal o no llegar (éxito, error, vacío). useEffect es decirle a React "cuando aparezca esta pantalla, haz este pedido". Las rutas son los pasillos de una tienda: cada URL te lleva a una sección distinta.
Mini ejemplo: useEffect(() => { pedirMovimientos() }, []) hace el pedido una sola vez al abrir la pantalla.
Error típico: olvidar el arreglo de dependencias y provocar un bucle infinito de pedidos.
Temas de la semana 4
useEffect: cuándo sí y cuándo no, dependencias, limpieza,AbortController- Custom hooks (
useMovimientos,useDebounce) - Formularios controlados, validación, errores por campo, deshabilitar envío
fetchconasync/awaity estados de pantalla: cargando, error, vacío, éxito- TanStack Query (React Query) básico:
useQuery,queryKey,isPending,isError,refetch,useMutatione invalidación - React Router: rutas,
Link, parámetros (/movimientos/:id), ruta 404,useNavigate - Mock de API local con
json-server
Cursos: "React: De cero a experto" (Fernando Herrera) — secciones de useEffect, custom hooks, formularios, React Router y TanStack Query.
Videos gratis recomendados
9 retos · cuestionario de 8 preguntas
Semana 5 · Estado global ligero, arquitectura, accesibilidad y rendimiento
El estado global es la pizarra de la cocina: todos pueden leer qué pedidos faltan, sin gritarse de mesa en mesa. Pero no todo va en la pizarra: lo que solo usa una pieza (un input) queda local. Ordenar carpetas por feature es organizar el almacén por secciones (lácteos, bebidas) en vez de amontonar todo. Accesibilidad es que la tienda tenga rampa, letreros claros y funcione también con teclado o lector de pantalla.
Mini ejemplo: <button> se activa con Enter y Espacio gratis; un <div onClick> no, salvo que lo programes.
Error típico: poner todo en estado global "por si acaso"; la app se vuelve difícil de seguir y se re-renderiza de más.
Temas de la semana 5
- Cuándo usar estado local, estado en la URL, estado del servidor (TanStack Query) y estado global
- Context API (
createContext,useContext) y Zustand básico - Estructura de carpetas por feature, componentes de presentación vs. contenedores, componentes reutilizables (
Button,Input,Modal) - Accesibilidad: HTML semántico,
label, foco visible, navegación con teclado,aria-*(solo cuando hace falta), contraste,aria-live - Rendimiento: qué causa un re-render,
React.memo,useMemo,useCallback(y cuándo no usarlos),lazy+Suspense, React Profiler, Lighthouse
Cursos: "React: De cero a experto" (Fernando Herrera) — secciones de Context, Zustand, useMemo / useCallback, lazy y estructura del proyecto.
9 retos · cuestionario de 8 preguntas
Semana 6 · Testing, debugging y simulación de trabajo real
Un test es un inspector de calidad que prueba cada botón antes de despachar el producto, siempre igual y sin cansarse. Se escribe en tres pasos: Arrange (preparas), Act (haces algo) y Assert (compruebas). Debugging es hacer de detective: buscas pistas (consola, Network, breakpoints) en vez de adivinar. Trabajar en equipo es dejar la cocina limpia para el siguiente: commits pequeños y PRs claros.
Mini ejemplo: render(<Boton />); await user.click(screen.getByRole('button')); expect(...) prueba lo que ve y hace el usuario.
Error típico: testear detalles internos (el nombre de una variable) en lugar del comportamiento visible; el test se rompe con cada refactor.
Temas de la semana 6
- Vitest:
describe,it,expect, Arrange / Act / Assert - React Testing Library:
render,screen, consultas por rol (getByRole,findByText),user-event - Mockear red:
vi.fn,vi.spyOny MSW (Mock Service Worker) básico - Debugging: breakpoints en DevTools (Sources),
debugger, React DevTools, pestaña Network - Leer un error de consola y un stack trace hasta la línea culpable
- Buenas prácticas de PR: commits pequeños, descripción, capturas; recibir y responder un code review
Cursos: "React: De cero a experto" (Fernando Herrera) — secciones de testing con Vitest y React Testing Library.
Videos gratis recomendados
10 retos · cuestionario de 8 preguntas
Proyectos para tu portafolio
Cuando buscas tu primer trabajo, casi nadie te pide un título: te piden ver lo que hiciste. Tener proyectos propios en GitHub (y publicados en internet) demuestra que sabes construir cosas de verdad y le da a la empresa algo concreto de qué hablar contigo en la entrevista.
1. Tu página personal
- Qué construyes: tu propio sitio con quién eres, qué te gusta, tus proyectos y cómo contactarte; se ve bien en celular y en computadora.
- Qué practicas: HTML semántico, CSS, diseño responsive, Git, JavaScript para detalles interactivos y accesibilidad (semanas 1, 2 y 5)
- Súbele el nivel: agrega un botón de modo claro y oscuro que recuerde la preferencia de quien visita.
2. Clon de la interfaz de Spotify
- Qué construyes: una app en React que imita la pantalla de Spotify: barra lateral, listas de canciones, buscador y un reproductor abajo (puede usar datos de ejemplo o una API pública de música).
- Qué practicas: componentes y props, TypeScript, consumo de APIs, rutas y estado global para saber qué canción está sonando (semanas 3 a 5)
- Súbele el nivel: que el reproductor funcione con fragmentos de audio reales y se pueda usar solo con el teclado.
3. App de gastos de tu mesada
- Qué construyes: una app donde anotas lo que recibes y lo que gastas (comida, salidas, juegos), ves cuánto te queda y en qué se te va la plata.
- Qué practicas: formularios con validación, manejo de estado, guardado de datos en el navegador y tests (semanas 2 a 6)
- Súbele el nivel: agrega un gráfico por categoría y una meta de ahorro con barra de progreso.
Glosario de Frontend Web Developer Jr en palabras simples
| Palabra | Qué significa |
|---|---|
| HTML | El esqueleto de una página web: dice qué hay (títulos, textos, imágenes, botones), como los planos de una casa. |
| CSS | El estilo de la página: colores, tamaños y posiciones, como la pintura y los muebles de la casa. |
| JavaScript | El idioma que hace que la página reaccione y haga cosas, como la electricidad que enciende las luces al tocar el interruptor. |
| TypeScript | JavaScript con reglas extra que avisan de errores antes de que ocurran, como un corrector ortográfico. |
| Git | Un sistema que guarda cada versión de tu código, como los puntos de guardado de un videojuego. |
| DOM | El mapa de todas las piezas de la página que JavaScript puede leer y cambiar, como el control remoto de una tele. |
| Evento | Algo que pasa en la página y a lo que tu código puede responder, como un clic o una tecla, igual que un timbre que suena. |
| React | Una herramienta para construir páginas con piezas reutilizables, como armar cosas con bloques de Lego. |
| Componente | Una pieza reutilizable de la interfaz, como un botón o una tarjeta, igual que un bloque de Lego que usas muchas veces. |
| Props | Los datos que le pasas a un componente para personalizarlo, como escribir el nombre en una etiqueta de regalo. |
| Estado | La información que un componente recuerda y que puede cambiar, como el marcador de un partido. |
| Hook | Una función especial de React que le da poderes extra a un componente, por ejemplo recordar datos con useState. |
| API | Un servicio al que le pides datos desde tu app, como pedir comida en una app de delivery. |
| JSON | Un formato de texto para ordenar datos en pares nombre-valor, como una ficha con "nombre: Ana, edad: 15". |
| Ruta | Cada "página" o sección de tu app según la dirección, como los pasillos de un supermercado. |
| Responsive | Que la página se adapte a cualquier pantalla, del celular a la computadora, como agua que toma la forma del vaso. |
| Accesibilidad | Que cualquier persona pueda usar la app, incluso con lector de pantalla o solo con el teclado, como una rampa junto a las escaleras. |
| Test | Un pequeño programa que revisa automáticamente que tu app funcione, como un control de calidad antes de vender. |
| Debugging | Buscar y arreglar errores en el código, como un detective siguiendo pistas. |
¿Listo para empezar?
Gratis, sin tarjeta y sin experiencia previa. Entra con Google o sin cuenta.
Empezar Frontend Web Developer Jr gratis