Frontend desde la base · en castellano · 2026
Aprende a programar para la web de verdad.
Teoría con ejemplos reales, quiz por capítulo, un playground para programar en la propia página y ejercicios con soluciones comentadas en tres niveles: que funcione, que esté pulido y que sea excelente. Progresivo, sin humo y centrado en lo que de verdad se usa hoy en las empresas.
El roadmap
Cada nivel asume lo aprendido en el anterior. El track de IA es transversal: se puede tocar en cualquier momento del recorrido.
-
Empieza aquí
Cómo funciona este curso
Antes de programar: cómo está montado cada capítulo y cómo sacarle partido a la teoría, el quiz, el playground y los ejercicios.
- Cómo funciona este curso disponible La estructura de cada capítulo y cómo usar sus herramientas para aprender de verdad.
-
Nivel 0
Cómo funciona la web y montar tu taller
Construir el modelo mental de la web y dejar el entorno de trabajo listo antes de escribir una sola línea de producto.
- Qué pasa al escribir una URL disponible El viaje de una petición: cliente, servidor, DNS, request y response explicados sin magia.
- El navegador por dentro disponible Cómo el navegador pinta una página: HTML, CSS y JS desde que llegan hasta que se ven.
- Instala tu entorno de desarrollo disponible El editor, Node.js y Git instalados y comprobados, para que cuando lleguen JS, TS y React no te frene nada.
- Configurar VSCode como un profesional disponible Atajos, extensiones imprescindibles y ajustes de calidad de vida que te ahorran horas.
- Perderle el miedo a la terminal disponible Navegar carpetas, mover ficheros y lanzar comandos desde la línea de órdenes.
- Git básico: clone, commit, push, pull disponible Guardar tu trabajo y sincronizarlo con un repositorio remoto sin romper nada.
- DevTools: inspeccionar, red y consola disponible Abrir las herramientas del navegador para ver el DOM, las peticiones y los errores.
-
Nivel 1
HTML y CSS: la estructura y la piel
Maquetar páginas accesibles y responsive con HTML semántico y CSS moderno, sin frameworks que escondan los fundamentos.
- Qué es HTML: tu primera página disponible Qué es una etiqueta, cómo se monta el esqueleto de una página y cómo abrir tu primer .html en el navegador. Empezamos de cero.
- Texto y enlaces disponible Encabezados, párrafos, énfasis y enlaces: el contenido de texto que sostiene cualquier página.
- Imágenes, listas y tablas disponible Mostrar imágenes con su alt, ordenar contenido en listas y cuándo (y cuándo no) usar una tabla.
- HTML semántico y estructura de carpetas disponible Etiquetas con significado y un proyecto ordenado: no 490 ficheros tirados en la raíz.
- Formularios y validación disponible Inputs, labels y validación nativa del navegador antes de tocar una línea de JavaScript.
- Qué es CSS: aplicarlo y la cascada disponible Qué es una hoja de estilos, cómo se engancha al HTML y la anatomía de una regla: selector, propiedad y valor.
- Selectores CSS disponible Apuntar a los elementos correctos: selectores de tipo, clase e id, combinadores y pseudo-clases.
- Color, unidades y tipografía disponible Color, unidades (px, rem, %) y tipografía: las propiedades que dan aspecto al texto y al fondo.
- El flujo normal: bloque, en línea y display disponible Cómo coloca el navegador los elementos sin que toques nada, la diferencia entre bloque y en línea, y la propiedad display que lo cambia. El cimiento que va debajo de flexbox y grid.
- Box model y Flexbox disponible Cómo ocupa espacio cada caja y cómo alinear y distribuir elementos en una dimensión.
- CSS Grid y custom properties disponible Layouts en dos dimensiones y variables CSS para un diseño consistente y mantenible.
- Posicionamiento: position, z-index y overflow disponible Sacar elementos del flujo para superponerlos, fijar barras al hacer scroll y controlar el contenido que se desborda: position, z-index y overflow.
- Responsive y mobile-first sin frameworks disponible Media queries y unidades fluidas para que tu web funcione en cualquier pantalla.
- Accesibilidad: WCAG, contraste, aria y foco disponible Construir interfaces que cualquiera pueda usar, también con teclado y lector de pantalla.
- BONUS: Acabado visual — sombras, degradados, transiciones y fuentes disponible Extra opcional: lo que separa una web correcta de una con cara y ojos. Sombras, degradados y fondos, transiciones de hover y cargar una fuente web. No es imprescindible para que funcione; profundiza en el remate.
- Proyecto: la home del Team Builder disponible Mega-tarea de cierre: maquetar la home del Team Builder entera —cabecera, grid de cartas y pie— juntando semántica, box model, flexbox, grid, responsive y accesibilidad en una sola entrega.
- BONUS: La barra de progreso de scroll, en CSS puro disponible Extra avanzado: el truco detrás de la barra que se llena arriba en cada capítulo de este curso. Animaciones con @keyframes y animation-timeline (scroll-driven), sin una línea de JavaScript.
-
Nivel 2
JavaScript: fundamentos del lenguaje
Aprender el lenguaje desde cero: valores, lógica, funciones y manipular la página con el DOM.
- Variables y tipos: let, const y los primitivos disponible Declarar valores, entender los tipos básicos y por qué casi nunca usarás var.
- Valores, referencias y comparaciones disponible Valor vs referencia, igualdad estricta y coerción: por qué dos cosas que parecen iguales a veces no lo son.
- Template literals: construir strings disponible Interpolar valores y escribir varias líneas sin pelearte con la concatenación. La base para montar texto y HTML desde JS.
- Condicionales y bucles disponible Tomar decisiones y repetir acciones: if, switch, for y while con sentido.
- Funciones, scope y closures disponible Declaración, expresión, arrow functions, parámetros, retorno y el alcance de las variables.
- Arrays y objetos disponible Las dos estructuras que sostienen casi todos los datos del frontend.
- Transformar datos con array methods disponible map, filter y reduce: la forma declarativa de trabajar con colecciones de datos.
- El DOM y los eventos disponible Seleccionar, modificar y reaccionar: querySelector, mutaciones y listeners.
- Clases y POO en JavaScript disponible Clases, this y herencia: la otra forma de organizar código que leerás en proyectos reales, aunque React sea funcional.
- BONUS: this a fondo — quién es this según cómo lo llamas disponible Extra para dominar this de verdad: su valor lo decide cómo llamas la función. Los casos uno a uno (suelto, como método, call/apply/bind, arrow léxico, new y en un evento del DOM) y cuándo usar cada forma.
- BONUS: Animaciones al ritmo del scroll (CSS + una pizca de JS) disponible Extra: liga cualquier animación al scroll de forma que funciona en TODOS los navegadores, con una pizca de JavaScript. La otra cara de las scroll-driven animations, con su trade-off.
- Proyecto: el Team Builder cobra vida con JavaScript disponible Mega-tarea de cierre: sobre la home del Nivel 1, añade JavaScript para pintar los héroes desde datos, filtrar, buscar y rankear por winrate, sin que el HTML semántico ni el CSS responsive y accesible se queden atrás.
-
Nivel 3
JavaScript moderno y asíncrono
El JavaScript del día a día que React da por sentado: la sintaxis moderna (destructuring, spread, copias y acceso seguro), módulos, las colecciones y sus métodos, el manejo de errores y la asincronía con su modelo mental —el event loop—, más la librería estándar.
- Destructuring disponible Extraer valores de objetos y arrays en una línea, también en los parámetros de una función.
- Spread y rest disponible Copiar y combinar estructuras sin mutar el original, y agrupar argumentos sueltos.
- Copias: superficial vs profunda disponible Por qué { ...obj } copia un solo nivel, cómo clonar en profundidad con structuredClone y congelar con Object.freeze. La base de la inmutabilidad real.
- Acceso seguro: ?. y ?? disponible Leer datos que pueden faltar sin reventar (optional chaining) y dar valores por defecto que distinguen ausente de cero o vacío (nullish coalescing).
- Módulos: import y export disponible Partir el código en ficheros: import, export, default vs nombrado y por qué cada cosa vive en su sitio.
- Sets y Maps disponible Dos colecciones que ganan al array y al objeto cuando necesitas claves o valores únicos.
- Métodos modernos de array y objeto disponible El segundo cinturón de métodos (ES2019-2024): transformar objetos con entries/fromEntries, aplanar con flat/flatMap, acceder con at y agrupar con Object.groupBy.
- Errores a fondo disponible Lanzar y capturar errores con criterio: throw, el objeto Error y sus subclases, errores propios con extends y cómo se propagan por la pila hasta quien los atrapa.
- Promesas y async/await disponible De los callbacks a async/await: manejar lo que tarda sin bloquear ni anidar a lo loco, con su manejo de errores.
- El event loop disponible El modelo mental que explica por qué JavaScript no se bloquea y en qué orden corren las cosas: la pila de llamadas, la cola de tareas y la de microtareas.
- JSON y fetch: hablar con el servidor disponible Pedir datos a una API y trabajar con JSON desde el cliente, apoyándote en async/await.
- Más promesas y cancelación disponible Más allá de Promise.all: esperar a todas sin caer al primer fallo (allSettled), competir por la más rápida (race, any), cancelar con AbortController y cargar módulos bajo demanda con import() dinámico.
- Expresiones regulares disponible Un patrón que describes una vez y aplicas a cualquier texto: validar un id, extraer partes de un string o reemplazar. Las flags g/i y los métodos test, match (con grupos nombrados), replace y matchAll.
- Fechas e internacionalización: Date e Intl disponible Cómo trabaja el objeto Date (y sus trampas) y por qué Intl.DateTimeFormat e Intl.NumberFormat son la forma correcta de mostrar fechas, porcentajes y monedas según el idioma del usuario.
- Números: precisión, redondeo y BigInt disponible Por qué 0.1 + 0.2 no da 0.3, cómo evitar que ese error arruine un importe o una comparación, y qué es BigInt para los enteros de 64 bits que no caben en un number normal.
- Proyecto: El puente de un HTML plano a un proyecto real disponible Por qué aparecen npm, package.json y los bundlers cuando el proyecto crece.
-
Extra
JavaScript a fondo (opcional)
Fuera del recorrido obligatorio: el motor de JavaScript por dentro —el modelo de objetos, la iteración y la metaprogramación—. No hace falta para trabajar con soltura; lo das cuando quieras dominar el lenguaje a fondo. Encaja justo después del Nivel 3, con el material de colecciones y objetos aún fresco.
- Iteradores y generadores disponible Qué hace que algo sea recorrible con for...of y spread (el protocolo de iteración) y cómo fabricar secuencias perezosas con generadores.
- Símbolos y metaprogramación disponible Claves únicas que no chocan (Symbol), colecciones de claves débiles (WeakMap/WeakSet), getters/setters y un vistazo a interceptar accesos con Proxy y Reflect.
- Prototipos a fondo disponible El modelo real bajo las clases: cada objeto enlaza a un prototipo del que hereda, y class es azúcar sobre eso.
- Tagged template literals disponible La forma función de los template literals: el mecanismo detrás de styled-components y gql/sql.
-
Nivel 4
Tooling profesional: el entorno de un proyecto serio
Montar y entender la maquinaria que rodea al código: gestores de paquetes, bundlers y linters.
- Gestores de paquetes: npm, pnpm y yarn disponible Qué hacen, en qué se diferencian y cómo gestionan el árbol de dependencias.
- package.json a fondo y semver disponible dependencies, devDependencies, peerDependencies y el lenguaje de versiones: caret, tilde y exact.
- Vite: el servidor de desarrollo moderno disponible Arrancar un proyecto, el dev server con HMR, los builds y por qué es tan rápido: Rolldown, el bundler unificado en Rust de Vite 8.
- Variables de entorno con .env disponible Separar configuración del código y mantener los secretos fuera del repositorio.
- ESLint y Prettier (y un vistazo a oxc) disponible Detectar errores y formatear el código de forma automática y consistente en equipo.
- Clean code: SOLID, KISS, DRY y patrones disponible Principios para escribir código que tu yo del futuro agradecerá, y los patrones de diseño que de verdad se usan (Factory, Singleton, Adapter).
-
Nivel 5
TypeScript: JavaScript con red de seguridad
Añadir tipos al lenguaje para detectar errores antes de ejecutar y documentar el código por sí mismo.
- Tipos básicos y anotaciones disponible string, number, boolean, arrays y el inferidor: qué escribir y qué dejar que adivine.
- Interfaces y type aliases disponible Modelar la forma de los objetos y decidir cuándo usar cada uno.
- Uniones e intersecciones disponible Componer tipos: un valor que puede ser varias cosas, o que es varias a la vez, incluidas las uniones discriminadas (o tagged unions / sum types) que un campo común vuelve seguras de distinguir.
- Narrowing: estrechar tipos disponible typeof, in, guards y cómo TypeScript afina el tipo según el flujo del código, incluido unknown como puerta de entrada segura para los datos externos en los que nunca debes confiar a ciegas.
- Genéricos disponible Escribir funciones y tipos reutilizables que conservan la información de tipo.
- Utility types disponible Partial, Pick, Omit, Record y compañía para transformar tipos sin repetirte.
- tsconfig: configurar el compilador disponible strict, target, module y las opciones que de verdad importan en un proyecto real.
- Tipar fetch y validar con Zod disponible Tipar lo que devuelve una API y validarlo en tiempo de ejecución con Zod, para que un dato inesperado no reviente la app.
- Proyecto: tipar el motor del Team Builder disponible Mega-tarea de cierre: coge el motor de datos de JavaScript (filtrar, rankear y agrupar) y hazlo type-safe de punta a punta, validando la entrada con Zod para que ningún dato inesperado lo rompa.
-
Nivel 6
React de cero a héroe (con TypeScript)
Construir interfaces componibles, reactivas y bien tipadas, con la gestión de estado y datos de un proyecto real.
- JSX y componentes
- Props, estado y destructuring
- Hooks fundamentales
- Custom hooks y context
- Estado complejo y memoización
- React 19: useOptimistic, useTransition y use()
- Gestión de estado: Zustand y Redux Toolkit
- Routing con React Router
- Data fetching y server-state
- Formularios con react-hook-form y Zod
- Patrones de componentes
- Proyecto: Team Builder en React
-
Nivel 7
Calidad: que no se rompa en producción
Garantizar que el código es testeable, rápido, seguro y mantenible a medida que el proyecto crece.
- Testing unitario con Vitest y Testing Library
- Integración y, de concepto, e2e
- Arquitectura: DDD, hexagonal y patrones
- Performance web y Core Web Vitals
- Seguridad en el frontend
- Design systems y Storybook
-
Nivel 8
El ciclo completo: del commit al deploy
Llevar el código desde tu rama hasta producción con un flujo de trabajo profesional y automatizado.
- Git avanzado: PRs, conflictos, rebase y stash
- Bundling a fondo
- CI/CD con GitHub Actions
- Deploy: Vercel, GitHub Pages y secrets
- SPA, SSR, SSG y SEO
- PWA, TWA y el salto a nativo
-
Nivel 9
El otro lado: backend para frontends
Entender qué pasa al otro lado de fetch para montar tú mismo una API y persistir datos.
- Node.js: JavaScript en el servidor
- Express: tu primera API REST
- REST, CORS y HTTP a fondo
- Caché, localStorage y cookies
- SQL y SQLite: persistir de verdad
- Autenticación básica y JWT
-
Nivel 10
Infra y mundo real
Conocer, sobre todo de forma conceptual, dónde y cómo vive tu código una vez sale de tu máquina.
- Principios de Linux y terminal
- Docker básico
- Un VPS: tu propio servidor
- Cloudflare, dominios y hosting
- AWS, de forma conceptual
-
Nivel 11
Cómo es el trabajo de verdad
Entender el día a día de un equipo de producto: la teoría, la realidad y las habilidades que marcan la diferencia.
- Scrum y sus ceremonias
- La bofetada de realidad
- Ownership: hacerte dueño de tu trabajo
- Soft skills
- Entender el producto y el negocio
- La suite Atlassian: Jira y Confluence
-
Transversal
Desarrollo asistido por IA
Integrar la IA como una herramienta más del taller, con criterio y sin delegar el juicio profesional.
- Qué es una IA y qué es un LLM
- Configurar Claude Code en el IDE
- Skills, rules, MCPs, plugins y memorias
- Crear tu propio ecosistema
- Prompt engineering básico
- Tokens y context window
- Modos, permisos y revisar SIEMPRE el código
-
Apéndice A
Astro (opcional)
Extra fuera del recorrido: el framework con el que está hecha esta misma plataforma. Construir sitios rápidos con islas de interactividad y contenido en Markdown.
- Qué es Astro y el modelo de islas
- Sintaxis .astro, layouts y componentes
- Estilos scoped y globales
- Colecciones de contenido y MDX
- Islas e hidratación
- Rutas, imágenes y View Transitions
- SSG, SSR, hybrid y endpoints
-
Apéndice B
Next.js (opcional)
Extra fuera del recorrido: el meta-framework de React más extendido. Server components, rutas por ficheros y renderizado en servidor.
- Qué es Next y el App Router
- Server components vs client components
- Routing, layouts y navegación
- Metadata y SEO
- Data fetching y modos de render
- Server Actions y mutaciones
- Prisma, paginación y autenticación
-
Apéndice C
Python para scripting (opcional)
Extra fuera del recorrido, el último de todos: Python como herramienta de automatización, no como lenguaje del recorrido frontend.
- Sintaxis básica, variables y tipos
- Condicionales, bucles y funciones
- Listas, diccionarios, tuplas y sets
- Ficheros y manejo de errores
- Módulos, pip y entornos virtuales
-
Difícil A
Ingeniería a escala: monorepos y publicación
El primer mundo difícil, fuera del recorrido y de los apéndices: cómo se trabaja cuando un repo deja de ser un proyecto y pasa a ser muchos. Interoperar módulos, organizar un monorepo, acelerarlo y publicar versiones sin romper a quien depende de ti. Material de nivel staff: no hace falta para entrar a trabajar, pero te separa del resto.
- ESM vs CommonJS a fondo
- Monorepos y workspaces
- Nx y Turborepo: builds que escalan
- Changesets y versionado a escala
-
Difícil B
Calidad a escala: testing y observabilidad
Segundo mundo difícil: cómo se mantiene la calidad y la visibilidad cuando el sistema y el equipo crecen. Datos de test que no se vuelven un lastre y observabilidad de producción de verdad, más allá de mirar la consola del navegador.
- Test Data Builder y fixtures que escalan
- OpenTelemetry: trazas, métricas y logs
-
Difícil C
Criterio de ingeniería: priorizar y gestionar deuda
Tercer mundo difícil y cierre: las decisiones que no son de código pero que separan a un senior de un staff. Decidir en qué trabajar con un marco y no a ojo, y tratar la deuda técnica como una herramienta y no como un pecado.
- Priorización: la matriz impacto × coste
- Deuda técnica: los cuadrantes de Fowler