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.
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
El curso avanza por bloques. Elige un nivel para ver sus capítulos; lo marcado como opcional o avanzado queda fuera del esqueleto, pero suma.
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.
01 Qué pasa al escribir una URL El viaje de una petición: cliente, servidor, DNS, request y response explicados sin magia. 02 El navegador por dentro Cómo el navegador pinta una página: HTML, CSS y JS desde que llegan hasta que se ven. 03 Instala tu entorno de desarrollo El editor, Node.js y Git instalados y comprobados, para que cuando lleguen JS, TS y React no te frene nada. 04 Configurar VSCode como un profesional Atajos, extensiones imprescindibles y ajustes de calidad de vida que te ahorran horas. 05 Perderle el miedo a la terminal Navegar carpetas, mover ficheros y lanzar comandos desde la línea de órdenes. 06 Git básico: clone, commit, push, pull Guardar tu trabajo y sincronizarlo con un repositorio remoto sin romper nada. 07 DevTools: inspeccionar, red y consola Abrir las herramientas del navegador para ver el DOM, las peticiones y los errores.
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.
01 Qué es HTML: tu primera página 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. 02 Texto y enlaces Encabezados, párrafos, énfasis y enlaces: el contenido de texto que sostiene cualquier página. 03 Imágenes, listas y tablas Mostrar imágenes con su alt, ordenar contenido en listas y cuándo (y cuándo no) usar una tabla. 04 HTML semántico y estructura de carpetas Etiquetas con significado y un proyecto ordenado: no 490 ficheros tirados en la raíz. 05 Formularios y validación Inputs, labels y validación nativa del navegador antes de tocar una línea de JavaScript. 06 Qué es CSS: aplicarlo y la cascada Qué es una hoja de estilos, cómo se engancha al HTML y la anatomía de una regla: selector, propiedad y valor. 07 Selectores CSS Apuntar a los elementos correctos: selectores de tipo, clase e id, combinadores y pseudo-clases. 08 Color, unidades y tipografía Color, unidades (px, rem, %) y tipografía: las propiedades que dan aspecto al texto y al fondo. 09 El flujo normal: bloque, en línea y display 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. 10 Box model y Flexbox Cómo ocupa espacio cada caja y cómo alinear y distribuir elementos en una dimensión. 11 CSS Grid y custom properties Layouts en dos dimensiones y variables CSS para un diseño consistente y mantenible. 12 Posicionamiento: position, z-index y overflow Sacar elementos del flujo para superponerlos, fijar barras al hacer scroll y controlar el contenido que se desborda: position, z-index y overflow. 13 Responsive y mobile-first sin frameworks Media queries y unidades fluidas para que tu web funcione en cualquier pantalla. 14 Accesibilidad: WCAG, contraste, aria y foco Construir interfaces que cualquiera pueda usar, también con teclado y lector de pantalla. 15 BONUS: Acabado visual — sombras, degradados, transiciones y fuentes 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. 16 Proyecto: la home del Team Builder 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. 17 BONUS: La barra de progreso de scroll, en CSS puro 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.
JavaScript: fundamentos del lenguaje
Aprender el lenguaje desde cero: valores, lógica, funciones y manipular la página con el DOM.
01 Variables y tipos: let, const y los primitivos Declarar valores, entender los tipos básicos y por qué casi nunca usarás var. 02 Valores, referencias y comparaciones Valor vs referencia, igualdad estricta y coerción: por qué dos cosas que parecen iguales a veces no lo son. 03 Template literals: construir strings Interpolar valores y escribir varias líneas sin pelearte con la concatenación. La base para montar texto y HTML desde JS. 04 Condicionales y bucles Tomar decisiones y repetir acciones: if, switch, for y while con sentido. 05 Funciones, scope y closures Declaración, expresión, arrow functions, parámetros, retorno y el alcance de las variables. 06 Arrays y objetos Las dos estructuras que sostienen casi todos los datos del frontend. 07 Transformar datos con array methods map, filter y reduce: la forma declarativa de trabajar con colecciones de datos. 08 El DOM y los eventos Seleccionar, modificar y reaccionar: querySelector, mutaciones y listeners. 09 Clases y POO en JavaScript Clases, this y herencia: la otra forma de organizar código que leerás en proyectos reales, aunque React sea funcional. 10 BONUS: this a fondo — quién es this según cómo lo llamas 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. 11 BONUS: Animaciones al ritmo del scroll (CSS + una pizca de JS) 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. 12 Proyecto: el Team Builder cobra vida con JavaScript 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.
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.
01 Destructuring Extraer valores de objetos y arrays en una línea, también en los parámetros de una función. 02 Spread y rest Copiar y combinar estructuras sin mutar el original, y agrupar argumentos sueltos. 03 Copias: superficial vs profunda 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. 04 Acceso seguro: ?. y ?? Leer datos que pueden faltar sin reventar (optional chaining) y dar valores por defecto que distinguen ausente de cero o vacío (nullish coalescing). 05 Módulos: import y export Partir el código en ficheros: import, export, default vs nombrado y por qué cada cosa vive en su sitio. 06 Sets y Maps Dos colecciones que ganan al array y al objeto cuando necesitas claves o valores únicos. 07 Métodos modernos de array y objeto 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. 08 Errores a fondo 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. 09 Promesas y async/await De los callbacks a async/await: manejar lo que tarda sin bloquear ni anidar a lo loco, con su manejo de errores. 10 El event loop 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. 11 JSON y fetch: hablar con el servidor Pedir datos a una API y trabajar con JSON desde el cliente, apoyándote en async/await. 12 Más promesas y cancelación 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. 13 Expresiones regulares 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. 14 Fechas e internacionalización: Date e Intl 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. 15 Números: precisión, redondeo y BigInt 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. 16 Proyecto: El puente de un HTML plano a un proyecto real Por qué aparecen npm, package.json y los bundlers cuando el proyecto crece.
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.
01 Iteradores y generadores Qué hace que algo sea recorrible con for...of y spread (el protocolo de iteración) y cómo fabricar secuencias perezosas con generadores. 02 Símbolos y metaprogramación 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. 03 Prototipos a fondo El modelo real bajo las clases: cada objeto enlaza a un prototipo del que hereda, y class es azúcar sobre eso. 04 Tagged template literals La forma función de los template literals: el mecanismo detrás de styled-components y gql/sql.
Tooling profesional: el entorno de un proyecto serio
Montar y entender la maquinaria que rodea al código: gestores de paquetes, bundlers y linters.
01 Gestores de paquetes: npm, pnpm y yarn Qué hacen, en qué se diferencian y cómo gestionan el árbol de dependencias. 02 package.json a fondo y semver dependencies, devDependencies, peerDependencies y el lenguaje de versiones: caret, tilde y exact. 03 Vite: el servidor de desarrollo moderno 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. 04 Variables de entorno con .env Separar configuración del código y mantener los secretos fuera del repositorio. 05 ESLint y Prettier (y un vistazo a oxc) Detectar errores y formatear el código de forma automática y consistente en equipo. 06 Clean code: SOLID, KISS, DRY y patrones 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).
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.
01 Tipos básicos y anotaciones string, number, boolean, arrays y el inferidor: qué escribir y qué dejar que adivine. 02 Interfaces y type aliases Modelar la forma de los objetos y decidir cuándo usar cada uno. 03 Tipos de función a fondo El tipo de una función (call signatures), parámetros opcionales, por defecto y rest, y la semántica de void. 04 Uniones e intersecciones 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. 05 as const y satisfies Por qué TypeScript ensancha los literales, cómo as const los congela y cómo satisfies valida una forma sin perder precisión. 06 Narrowing: estrechar tipos 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. 07 Genéricos Escribir funciones y tipos reutilizables que conservan la información de tipo. 08 typeof, keyof y acceso indexado Derivar tipos a partir de valores con typeof, las claves de un tipo con keyof y el tipo de un campo con el acceso indexado T[K]. 09 Utility types Partial, Pick, Omit, Record y compañía para transformar tipos sin repetirte. 10 tsconfig: configurar el compilador strict, target, module y las opciones que de verdad importan en un proyecto real. 11 Tipar fetch y validar con Zod Tipar lo que devuelve una API y validarlo en tiempo de ejecución con Zod, para que un dato inesperado no reviente la app. 12 Proyecto: tipar el motor del Team Builder 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.
Type-level TypeScript (opcional)
Continuación avanzada y OPCIONAL del Nivel 5, al estilo de Total TypeScript y Type-Level TypeScript: programar dentro del propio sistema de tipos. No es requisito para React ni para entrar a trabajar; es para quien quiere dominar TypeScript de verdad. Hazlo cuando quieras tras terminar el Nivel 5.
01 Conditional types El tipo condicional T extends U ? X : Y y su distributividad sobre uniones: el 'tercer uso' de extends que no aparece en el curso base. 02 infer: extraer tipos Capturar un tipo dentro de un condicional con infer, más allá de ReturnType: construir tus propios extractores de tipos. 03 Mapped types Recorrer las claves de un tipo con { [K in keyof T]: ... } y construir tu propio Partial o Pick: los utility types dejan de ser magia. 04 Key remapping y template literal types Renombrar claves con as dentro de un mapped type y componer tipos de string con template literal types. 05 Tipos recursivos Tipos que se refieren a sí mismos: recursión vía condicionales (como hace Awaited) y recursión sobre tuplas. 06 Testear a nivel de tipos Comprobar tipos con Equal y Expect: tests que fallan en compilación si un tipo deja de ser el esperado. Cierra la gimnasia de tipos. 07 Branded / nominal types Distinguir un UserId de un string con tipos marcados (branding): tipado nominal sobre el estructural, clave en dominios reales como la banca. 08 Varianza: covarianza y contravarianza Por qué un Array<Perro> no siempre vale donde se espera un Array<Animal>: covarianza, contravarianza y los modificadores in/out. 09 strictFunctionTypes y bivarianza El flag strictFunctionTypes, la bivarianza de los métodos y sus trampas al tipar callbacks y manejadores de eventos. 10 Declaration merging y .d.ts Fusionar interfaces, la palabra clave declare y escribir ficheros .d.ts para tipar librerías que no traen sus propios tipos.
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.
01 Qué es React y tu primera app Por qué React y el salto del DOM imperativo al declarativo: qué es un componente, qué es un .tsx y cómo una app de React llega a la pantalla con createRoot y main.tsx. 02 JSX y componentes Describir la interfaz con JSX y dividirla en componentes reutilizables, con el Virtual DOM de React y por qué no es lo mismo que el Shadow DOM de los web components. 03 Props y composición Pasar datos a un componente con props tipadas, componer con children y mantener el flujo de datos en una sola dirección, de padres a hijos. 04 Listas y renderizado condicional Pintar colecciones con .map y su key, y mostrar una cosa u otra según el estado con && y el ternario. Aquí nace el grid de héroes del Team Builder. 05 Estado y eventos Estado local con useState y eventos tipados: actualizar sin mutar, inputs controlados y levantar el estado cuando dos componentes lo comparten. 06 Hooks fundamentales useEffect para sincronizar con el exterior (datos, suscripciones), useRef para guardar referencias y tocar el DOM, y las reglas de los hooks. 07 Custom hooks y context Extraer lógica reutilizable y compartir estado sin pasar props por toda la jerarquía. 08 Estado complejo y memoización useReducer para estado con muchas transiciones y memoización (useMemo, useCallback, memo): identidad referencial, comparación superficial, cuándo NO memoizar y qué cambia con el React Compiler. 09 React 19: useOptimistic, useTransition y use() Las APIs concurrentes de React 19 para interfaces que responden al instante mientras el trabajo pesado ocurre por detrás. 10 Gestión de estado: Zustand y Redux Toolkit Cuándo el estado local no basta y qué resuelve un store global, a nivel conceptual. 11 Routing con React Router Varias pantallas en una SPA: rutas, parámetros y navegación sin recargar la página. 12 Data fetching y server-state TanStack Query y RTK Query: caché, revalidación y estado del servidor bien gestionado. 13 Formularios con react-hook-form y Zod Formularios mantenibles con validación con Zod, sin re-renders innecesarios y con buena experiencia de error. 14 Patrones de componentes Compound components y render props: APIs de componente flexibles donde el consumidor compone las piezas. 15 Accesibilidad en React El mínimo deliberado de accesibilidad: useId para atar etiquetas y errores a sus campos, gestión del foco al validar y navegación por teclado para que un tablist se comporte como tal. 16 Proyecto: Team Builder en React Mega-tarea: reconstruir el Team Builder en React + TypeScript con routing, data-fetching, formularios y estado. El gran proyecto del curso. 17 Salir del playground: tu primer fetch real El epílogo del nivel: cambiar el cargarHeroes() simulado por un fetch real contra una API real, con su latencia, sus errores, CORS y la validación de la respuesta con Zod.
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.
01 Testing unitario con Vitest y Testing Library Probar lógica y componentes aislados, centrándote en el comportamiento y no en la implementación, con la taxonomía de dobles de test (mock, stub, spy y fake) y cuándo usar cada uno.
02 Integración y, de concepto, e2e Probar varias piezas juntas y entender qué cubre un test end-to-end con Playwright, y por qué el frontend de 2026 suele preferir el trofeo de testing (Kent C. Dodds) a la pirámide clásica (Mike Cohn).
03 Arquitectura: DDD, hexagonal y patrones Organizar el código por dominio, reconocer antipatrones y los patrones útiles (Observer, Strategy y el Repository para aislar el acceso a datos). Micro frontends, de concepto.
04 Performance web y Core Web Vitals Lazy loading, code splitting y memoización para una web que vuela, con la diferencia entre medir en laboratorio (synthetic, Lighthouse) y con usuarios reales (RUM, datos de campo).
05 Seguridad en el frontend XSS, sanitización, por qué los secretos nunca viven en el cliente y los patrones peligrosos del código generado por IA.
06 Design systems y Storybook Componentes documentados y consistentes que escalan con el equipo y el producto.
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.
01 Git avanzado: PRs, conflictos, rebase y stash Pull requests, resolver merge conflicts, rebase, stash, tags y cuándo (con cuidado) un force push.
02 Bundling a fondo Vite, webpack, rspack, esbuild y Turbopack comparados —cuándo elegir cada uno— y los ficheros de configuración que orquestan el build.
03 CI/CD con GitHub Actions Automatizar tests, linting y despliegues en cada push con workflows, jobs, secrets y caché.
04 Deploy: Vercel, GitHub Pages y secrets Publicar tu web y gestionar las variables sensibles en el entorno de producción.
05 SPA, SSR, SSG y SEO Dónde se renderiza tu app, qué implica para el SEO y nociones de Next y Astro, de concepto.
06 PWA, TWA y el salto a nativo Apps instalables, service workers y estrategias de caché, con una mención a React Native y a empaquetar tu web como APK.
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.
01 Scrum y sus ceremonias Sprints, dailies, retros y los roles de PO, Scrum Master y agile coach.
02 La bofetada de realidad Lo que dicen los manuales frente a lo que de verdad se acaba haciendo en la práctica.
03 Ownership: hacerte dueño de tu trabajo Responsabilizarte de lo que entregas, de principio a fin, más allá de tu ticket.
04 Soft skills Comunicar, dar y recibir feedback y trabajar en equipo: lo que ningún linter detecta.
05 Entender el producto y el negocio Por qué saber a quién sirves y qué problema resuelves te hace mejor developer; visión, OKRs y métricas que importan.
06 La suite Atlassian: Jira y Confluence Tableros, tickets y documentación: las herramientas donde vive el trabajo en equipo.
Desarrollo asistido por IA
Integrar la IA como una herramienta más del taller, con criterio y sin delegar el juicio profesional.
01 Qué es una IA y qué es un LLM Una idea honesta de cómo funciona un modelo de lenguaje y de lo que puede y no puede hacer.
02 Configurar Claude Code en el IDE Instalar y conectar el asistente a tu editor para que trabaje sobre tu código.
03 Skills, rules, MCPs, plugins y memorias Las piezas con las que se construye un asistente que conoce tu proyecto y tu forma de trabajar.
04 Crear tu propio ecosistema Combinar esas piezas para tener un compañero a medida en lugar de un chatbot genérico.
05 Prompt engineering básico Pedir bien para obtener mejores resultados: contexto, ejemplos y restricciones claras.
06 Tokens y context window Cómo "lee" el modelo, por qué tiene límites y qué implica eso para tu coste y tus prompts.
07 Modos, permisos y revisar SIEMPRE el código Seguridad, control sobre lo que el agente puede hacer y la regla innegociable: validar antes de dar por bueno.
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.
01 ESM vs CommonJS a fondo Los dos sistemas de módulos que conviven en el ecosistema: import/export (ESM) frente a require/module.exports (CommonJS), por qué algunos paquetes dan guerra, el dual package hazard y cómo el campo exports de package.json decide qué se carga.
02 Monorepos y workspaces Un solo repositorio con muchos paquetes: workspaces de pnpm y npm, hoisting de dependencias, polyrepo frente a monorepo y por qué un monorepo y un micro-frontend son ejes distintos que se suelen confundir.
03 Nx y Turborepo: builds que escalan Las herramientas que hacen usable un monorepo grande: el grafo de tareas, los comandos affected para tocar solo lo que cambió, y la caché local y remota para una CI que no tarda media hora.
04 Changesets y versionado a escala Publicar varios paquetes sin volverte loco: versionado semántico aplicado en equipo, changelogs automáticos y releases coordinadas con Changesets.
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.
01 Test Data Builder y fixtures que escalan Cuando duplicar objetos de prueba en cada test se vuelve insostenible: el patrón Test Data Builder y Object Mother para construir datos de test legibles, reutilizables y fáciles de variar caso a caso.
02 OpenTelemetry: trazas, métricas y logs El estándar moderno para instrumentar una aplicación: trazas distribuidas, métricas y logs bajo un mismo modelo, y cómo encajan ahí los conceptos de RUM, synthetic y APM que en el curso base solo se nombran sueltos.
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.
01 Priorización: la matriz impacto × coste Decidir en qué merece la pena invertir con un marco explícito: la matriz de impacto frente a coste (esfuerzo) y variantes como RICE, para defender una decisión con argumentos y no con intuición.
02 Deuda técnica: los cuadrantes de Fowler Entender que no toda la deuda es mala: el cuadrante de Fowler (prudente/imprudente × deliberada/inadvertida), cómo reconocer cada tipo y cómo gestionarla y comunicarla en lugar de esconderla bajo la alfombra.
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.
01 Qué es Astro y el modelo de islas Por qué Astro envía 0 JavaScript por defecto y cuándo conviene hidratar una isla.
02 Sintaxis .astro, layouts y componentes La anatomía de un fichero .astro, reutilizar componentes y compartir un layout con props.
03 Estilos scoped y globales Estilos con scope por componente y cuándo bajar a global con :global.
04 Colecciones de contenido y MDX Servir contenido tipado desde Markdown y MDX: justo como funcionan las lecciones de este curso.
05 Islas e hidratación Las directivas client:load, client:only y client:visible, y cómo pasar props a una isla de React.
06 Rutas, imágenes y View Transitions Páginas dinámicas y paginación, el componente Image y transiciones entre páginas.
07 SSG, SSR, hybrid y endpoints Dónde se renderiza cada página, los adapters y cómo exponer endpoints. Astro DB y auth, de pasada.
Next.js (opcional)
Extra fuera del recorrido: el meta-framework de React más extendido. Server components, rutas por ficheros y renderizado en servidor.
01 Qué es Next y el App Router Qué problema resuelve Next sobre React y cómo se organiza el App Router.
02 Server components vs client components El modelo mental clave de Next moderno: qué se renderiza en el servidor y qué en el cliente.
03 Routing, layouts y navegación Rutas por ficheros, layouts anidados, next/link y el enlace activo con usePathname.
04 Metadata y SEO Metadatos estáticos y dinámicos, y las páginas not-found y de error.
05 Data fetching y modos de render Cargar datos en server components y elegir entre SSG, ISR y SSR con revalidación y caché.
06 Server Actions y mutaciones Mutar datos desde el servidor con Server Actions y UI optimista con useOptimistic.
07 Prisma, paginación y autenticación Conectar una base de datos con Prisma, paginar del lado del servidor y autenticar con proveedores.
El otro lado: backend para frontends
Entender qué pasa al otro lado de fetch para montar tú mismo una API y persistir datos.
01 Node.js: JavaScript en el servidor El mismo lenguaje, fuera del navegador: módulos, el sistema de ficheros y el runtime.
02 Express: tu primera API REST Montar un servidor mínimo con rutas, controladores y respuestas en JSON.
03 REST, CORS y HTTP a fondo Verbos, status codes, headers, query y path params, body y payloads.
04 Caché, localStorage y cookies Dónde y cómo guardar datos en el cliente y por qué la caché ahorra trabajo.
05 SQL y SQLite: persistir de verdad Queries básicas y una base de datos ligera para que los datos sobrevivan al reinicio.
06 Autenticación básica y JWT Identificar usuarios y proteger rutas con tokens; lo avanzado, a nivel conceptual.
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.
01 Principios de Linux y terminal El sistema operativo de los servidores: permisos, procesos y comandos de cabecera.
02 Docker básico Imágenes, contenedores y casos prácticos para que "en mi máquina funciona" deje de ser un problema.
03 Un VPS: tu propio servidor Un servidor Linux real con cron y pm2 para mantener procesos vivos.
04 Cloudflare, dominios y hosting DNS, túneles y cómo se conecta un dominio con la aplicación que sirves.
05 AWS, de forma conceptual Por qué existe la nube y para qué sirven piezas como S3 y sus buckets.
Python para scripting (opcional)
Extra fuera del recorrido, el último de todos: Python como herramienta de automatización, no como lenguaje del recorrido frontend.
01 Sintaxis básica, variables y tipos Lo justo para escribir un script: variables, tipos y entrada/salida por consola.
02 Condicionales, bucles y funciones Tomar decisiones, repetir trabajo y encapsularlo en funciones reutilizables.
03 Listas, diccionarios, tuplas y sets Las estructuras de datos del día a día en Python y cuándo usar cada una.
04 Ficheros y manejo de errores Leer y escribir CSV, JSON y logs, y controlar fallos con try/except. El núcleo de un script útil.
05 Módulos, pip y entornos virtuales Organizar el código en módulos e instalar dependencias sin ensuciar el sistema.
Pulsa un nivel o muévete con ←→ · cada nivel es su propia isla