🎨 Frontend completo
HTML/CSS moderno, JavaScript profundo, TypeScript, React/Next.js y la capa de ingeniería: testing, accesibilidad, performance y arquitectura.
Frontend🗂️ Índice de sección
Frontend completo
El frontend profesional ya no es «maquetar»: es HTML semántico + CSS a fondo + JavaScript profundo (con TypeScript) + un framework dominante + una capa de ingeniería (testing, accesibilidad, performance, arquitectura). Esta ruta te lleva de la base a nivel de ingeniero frontend.
📌 Contenido completo aquí
Esta sección incluye el contenido completo escrito en el sitio: 🎨 Frontend: contenido cubre HTML semántico, CSS moderno (Flexbox/Grid), JavaScript profundo (closures, async, event loop), TypeScript, React/Next.js, testing, accesibilidad y Core Web Vitals, con código y práctica. Debajo tienes los recursos de todo el mundo.
📌 Mentalidad
Regla de oro: alternar teoría (docs) con práctica auto-corregida (playgrounds/katas) y proyectos reales. La memoria se queda con lo que construyes, no con lo que lees. El orden correcto es: fundamentos web primero (HTML/CSS/JS), framework después.
IdiomaTipoCoste
Nivel 0 · HTML + CSS moderno
Fundamentos sólidos
No solo estética: semántica, layout moderno y diseño responsive.
- MDN Web Docs📘 DocsESGratisLa biblia de la plataforma web, con el MDN Curriculum como ruta estructurada completa. En español, francés, chino y japonés.HTML, CSS, JS: referencia y guías.
- web.dev — Learn HTML / Learn CSS🎓 CursoESGratisCursos de Google: CSS moderno impecable (Grid, Flexbox, cascade layers, container queries). Interfaz en español.CSS moderno de nivel profesional.
- The Odin Project🎓 CursoENGratisCurrículo completo con rutas Advanced HTML/CSS (Grid, Flexbox, BEM, responsive). Lo mejor en fundamentos hands-on.Fundamentos con proyectos guiados.
- CSS-Tricks📝 BlogENGratisGuías canónicas: A Complete Guide to Flexbox, a Grid, custom properties, container queries.El porqué de cada técnica CSS.
- CSS for JavaScript Developers🎓 CursoENPagoEl mejor curso pago de CSS profundo (Josh Comeau): estilos mentales, layout, z-index.CSS que entiende cómo funciona el navegador.
- BEM🧭 GuíaENGratisLa metodología de nomenclatura CSS estándar de la industria.CSS mantenible en equipos.
- Caniuse🔧 HerramientaENGratisTablas de soporte de navegadores. Hábito profesional para decidir qué CSS usar.Compatibilidad real de cada feature.
- HTML5 Boilerplate🧭 GuíaENGratisPlantilla de buenas prácticas de estructura HTML.La base correcta de un proyecto web.
Nivel 1 · JavaScript profundo + TypeScript
El lenguaje a fondo
JavaScript profundo antes de cualquier framework.
- The Modern JavaScript Tutorial (javascript.info)🎓 CursoESGratisEl curso JS definitivo: lenguaje, browser/DOM, eventos, fetch, async. Multilingüe: español, chino, japonés, francés, ruso.JavaScript completo, actualizado.
- Eloquent JavaScript (Marijn Haverbeke)📖 LibroESGratis4ª edición (2024), gratis online con traducción oficial al español.Lenguaje, browser y Node con proyectos.
- You Don't Know JS (Kyle Simpson)📖 LibroENGratisLos matices que casi nadie conoce: this, closures, async, tipos.Los rincones del lenguaje.
- freeCodeCamp🎓 CursoESGratisCertificaciones con cientos de ejercicios auto-corregidos, en español.Práctica validada masiva.
- JavaScript30 (Wes Bos)🎓 CursoENGratis30 mini-proyectos vanilla JS: DOM, fetch, arrays, canvas.Construir sin frameworks para entenderlos.
- TypeScript Handbook📘 DocsESGratisEl punto de partida correcto para TS: narrowing, generics, utility types. Hay versión en español.TypeScript de la fuente oficial.
- Total TypeScript (Matt Pocock)🎓 CursoENMixtoLa referencia moderna de TS avanzado para producción.TS de nivel profesional.
- Airbnb JavaScript Style Guide🧭 GuíaESGratisEl estándar de estilo que usan equipos reales.Código limpio en equipos.
Nivel 2 · Frameworks
React + Next.js (prioridad 1)
El ecosistema más demandado del mercado.
- react.dev — docs oficiales📘 DocsESGratisQuick Start, tutorial y toda la API de hooks. Incluye React 19. Disponible en español y chino.React de la fuente de la verdad.
- Full Stack Open (Universidad de Helsinki)🎓 CursoESGratisMOOC universitario gratuito: React a fondo + hooks + estado global + TypeScript + Node. En español, francés y chino.La mejor inmersión universitaria gratuita.
- The Joy of React (Josh Comeau)🎓 CursoENPagoHooks, render y React a nivel profundo con pedagogía excelente.Entender React, no copiarlo.
- Epic React (Kent C. Dodds)🎓 CursoENPagoHooks, render, performance y patrones avanzados.React avanzado de nivel producción.
- Next.js Docs📘 DocsENGratisApp Router, Server/Client Components, Server Actions, caching, data fetching y testing. V16 actual.El framework React de producción.
- Next.js Learn🎓 CursoENGratisCurso interactivo oficial (dashboard app) que combina Next + React.Aprender Next construyendo.
- TanStack Query📘 DocsENGratisEl estándar para data fetching y caché del servidor en React.Estado del servidor sin dolor.
Vue, Svelte y Angular
Elige según mercado y preferencia.
- Vue.js docs oficiales📘 DocsENGratisVue 3 composition API, reactivity, SFC. Docs excelentes.Vue completo.
- Vue School🎓 CursoENMixtoCursos en vídeo de Vue/Vuex/Nuxt.Aprender Vue en vídeo.
- Svelte tutorial interactivo🎓 CursoENGratisSvelte 5 (runes) con tutorial embebido en el propio sitio.Svelte de la fuente.
- Angular docs oficiales📘 DocsENGratisAngular 17+ (signals, standalone, zoneless). Docs modernizadas.Angular moderno.
Nivel 3 · Ingeniería frontend
Testing, accesibilidad, performance y arquitectura
El frontend de producción.
- Vitest📘 DocsENGratisTest runner unit/integration moderno (Vite, esm nativo).Testing rápido.
- Testing Library📘 DocsENGratisLa filosofía de testing de UI: testea comportamiento, no implementación.Tests que no se rompen por nada.
- Playwright📘 DocsENGratisE2E definitivo: Chromium/WebKit/Firefox, trace viewer, codegen, UI mode.E2E de nivel profesional.
- web.dev — Learn Accessibility🎓 CursoENGratisCurso de Google: WCAG, ARIA (y cuándo no usarlo), foco, color.Accesibilidad de verdad.
- W3C WAI — WCAG 2.2📘 DocsESGratisLa norma. Léela como especificación, no como tutorial.El estándar de accesibilidad.
- web.dev — Learn Performance + Core Web Vitals🎓 CursoESGratisLCP/INP/CLS, cómo medir y optimizar. INP ya es Core Web Vital.Rendimiento real del usuario.
- PageSpeed Insights🔧 HerramientaESGratisMide tu web en campo y laboratorio.Auditar tu rendimiento.
- Patterns.dev🧭 GuíaENGratisPatrones de diseño modernos en React y JavaScript.Patrones de UI y de React.
- Refactoring UI🎓 CursoENPagoDecisiones de diseño de UI sin ser diseñador.UI profesional sin título de diseño.
- Bulletproof React🧭 GuíaENGratisArquitectura de proyectos React en producción: estructura, testing, estado, estilos.La plantilla de arquitectura React.
- frontendchecklist.io🧭 GuíaENGratisChecklist de lanzamiento profesional: HTML, CSS, perf, seguridad, a11y.Revisar tu app antes de desplegar.
- micro-frontends.org🧭 GuíaENGratisConceptos y patrones de microfrontends (del equipo de Martin Fowler).Arquitectura frontend a escala.
- State of JS🗃️ WikiENGratisLa encuesta anual: qué stack domina y hacia dónde va el ecosistema.Elegir stack con datos.
Nivel 3 · Ejercicios y playgrounds
Práctica auto-corregida
Donde se afianzan los reflejos.
- Frontend Mentor🧪 LabENMixto120+ proyectos reales (HTML/CSS/JS a React/Next) con diseño profesional.Construir proyectos con briefs reales.
- CSS Battle🧪 LabENGratisRetos diarios de CSS golf: afina selectores, unidades y layout.CSS de alto nivel jugando.
- Exercism🧪 LabENGratisKatas de JS/TS con mentoría y análisis automático.Práctica con feedback humano.
- Codewars🧪 LabENGratisKatas de lógica/algoritmos en JS/TS.Reflejos algorítmicos.
- CodePen🕹️ PlaygroundENMixtoSandbox social: la mejor comunidad para experimentar y aprender de snippets ajenos.Experimentar y compartir.
- StackBlitz🕹️ PlaygroundENGratisIDE online instantáneo (WebContainers) para probar Vite/React/Next sin instalar nada.Frameworks en el navegador.
💡 Recursos en chino y japonés
Chino: 现代 JavaScript 教程, 阮一峰 ES6 教程, 掘金 前端, MDN 中文. Japonés: Qiita, Zenn, MDN 日本語, Progate. Español: es.javascript.info, Full Stack Open en español, Eloquent JavaScript ES.