Tu camino hacia el Frontend Profesional. 158 pasos. Una transformación real.

Este Roadmap está diseñado para que puedas avanzar desde cero hasta construir proyectos reales, con criterio técnico, estructura mental y autonomía profesional. Cada pieza cumple una función. Cada paso te prepara para el siguiente, con el objetivo de que puedas ganarte la vida como Frontend Developer profesional.

Algunas unidades pueden dividirse o reorganizarse en el futuro para ofrecer una experiencia de aprendizaje aún más clara, fluida y efectiva. La estructura y el propósito general se mantienen intactos.

Progreso del Programa 18% contenido publicado
28 de 158 unidades disponibles 130 próximamente
Seguir el Roadmap
Fase 1
En desarrollo

Comprender la estructura y la semántica

  • Construirás páginas HTML bien estructuradas y accesibles desde cero.
  • Dominarás CSS moderno (flexbox, grid, variables, layers).
  • Aprenderás buenas prácticas de semántica, herencia y cascada.
  • Entenderás cómo renderiza el navegador y cómo controlar visualmente tu contenido.
  • Crearás tus primeros proyectos responsive con estructura profesional.
28 de 32 disponibles 88%
Fundamental ¿Qué es Frontend?
CONCEPTOS
Fundamental Aprendizaje con IA
AI
Clave Como encontrarlo todo
Clave Cómo acordarte de todo con Notion
Fundamental VSCode intro
HERRAMIENTAS
Fundamental Semántica HTML
HTML
Fundamental HTML intro
HTML
Fundamental CSS intro
CSS
Fundamental Clases, ID’s, Pseudo-clases y Pseudo-elementos
CSS
Fundamental Pseudo-clases “nth”
CSS
Fundamental Especificidad
CSS
Fundamental Unidades en CSS
CSS
Fundamental Herencia en CSS
CSS
Fundamental Modelo de caja CSS
CSS
Fundamental Cascada CSS
CSS
Fundamental Posicionamiento en CSS
CSS
Fundamental CSS Flexbox
CSS
Fundamental Unidades viewport
CSS
Fundamental Tu propia metodológía (I)
CONCEPTOS
Fundamental Browser DevTools (I)
HERRAMIENTAS
Fundamental Multimedia responsive
CSS
Fundamental CSS Media queries
CSS
Fundamental Introducción a WebStorm
HERRAMIENTAS
Fundamental Metodología BEM
CSS
Proyecto Login card
HTML CSS
Proyecto Advanced profile card
HTML CSS
Proyecto Product widget + responsive
HTML CSS
Fundamental CSS Grid desde cero
CSS
Fundamental Formularios
HTML
Proyecto Landing + form + responsive
HTML CSS
Clave Cómo trazar objetivos
Clave Cómo organizar tu día
Fase 2
Pendiente

Comprender la lógica e interacción en el navegador

  • Aprenderás los fundamentos reales de JavaScript moderno.
  • Descubrirás cómo escribir funciones limpias, trabajar con DOM y manejar formularios.
  • Incorporarás herramientas de desarrollo (DevTools, AI, code editors/IDE's) para depurar como un profesional.
  • Desarrollarás pequeños proyectos interactivos para reforzar los conceptos aprendidos.
  • Integrarás una mentalidad de aprendizaje técnico, realista y sostenible.
0 de 31 disponibles 0%
Fundamental Que es la Web
CONCEPTOS
Fundamental JavaScript intro
JAVASCRIPT
Fundamental Expresiones y sentencias
JAVASCRIPT
Fundamental Variables
JAVASCRIPT
Fundamental Tipos
JAVASCRIPT
Fundamental Operadores
JAVASCRIPT
Fundamental Comparaciones
JAVASCRIPT
Fundamental Estructuras de control
JAVASCRIPT
Fundamental Funciones
JAVASCRIPT
Fundamental This
JAVASCRIPT
Fundamental DOM operations
JAVASCRIPT
Fundamental Módulos
JAVASCRIPT
Fundamental Unit testing intro
CONCEPTOS
Fundamental Formularios
JAVASCRIPT
Fundamental VSCode power workflow
HERRAMIENTAS
Fundamental Imperativo vs declarativo
CONCEPTOS
Fundamental Tu propia metodológía (II)
CONCEPTOS
Fundamental Stacking context
CSS
Fundamental CSS Vars
CSS
Fundamental CSS Functions: cacl, clamp, min, max, etc
CSS
Fundamental Layers
CSS
Fundamental Depuración con DevTools
HERRAMIENTAS
Fundamental Depuración con AI
AI
Clave Cómo tener la mentalidad adecuada
Clave Cómo matenerte motivado
Clave Cómo aprender inglés
Clave Qué libros leer
Proyecto Interactive game
HTML CSS JAVASCRIPT
Proyecto Dynamic form
HTML CSS JAVASCRIPT
Proyecto TodoList + locale state
HTML CSS JAVASCRIPT
Proyecto Image gallery + filter
HTML CSS JAVASCRIPT
Fase 3
Pendiente

Conectar con el mundo exterior: APIs y asincronía

  • Comprenderás cómo funciona JavaScript asincrónico y el event loop.
  • Aprenderás a consumir APIs reales y trabajar con datos externos.
  • Entenderás seguridad básica (CORS, XSS, CSRF) y cómo proteger tus aplicaciones.
  • Profundizarás en Git y GitHub (remotos, ramas, pull requests, conflictos).
  • Crearás proyectos que interactúan con APIs reales y despliegues sencillos.
0 de 27 disponibles 0%
Fundamental Git / Github intro
GIT/GITHUB
Fundamental Basic flow
GIT/GITHUB
Fundamental Remotes
GIT/GITHUB
Fundamental Branches
GIT/GITHUB
Fundamental Conflictos
GIT/GITHUB
Fundamental Pull Request
GIT/GITHUB
Fundamental API intro
CONCEPTOS
Fundamental Asincronia JS single threaded
JAVASCRIPT
Fundamental Event loop
JAVASCRIPT
Fundamental Promesas y thenables
JAVASCRIPT
Fundamental async / await
JAVASCRIPT
Fundamental Persistencia client-side
JAVASCRIPT
Fundamental Tu propia metodológía (III)
CONCEPTOS
Fundamental Entender “legacy” code con AI
AI
Fundamental Refactorizar con IA (guiada)
AI
Fundamental CORS
CONCEPTOS
Fundamental Seguridad: XSS
CONCEPTOS
Fundamental Seguridad: CSRF
CONCEPTOS
Fundamental WebStorm power workflow
HERRAMIENTAS
Fundamental Deployment en GH pages
GIT/GITHUB
Clave Cómo priorizar tus acciones
Clave Cómo superar obstáculos
Clave Cómo re-ajustar tu perspectiva
Proyecto App del clima con OpenWeather API
HTML CSS JAVASCRIPT
Proyecto Buscador de películas con OMDB API
HTML CSS JAVASCRIPT
Proyecto Formulario de contacto con envío a API simulada
HTML CSS JAVASCRIPT
Proyecto Listado de usuarios con filtros locales
HTML CSS JAVASCRIPT
Fase 4
Pendiente

Integrar los estándares de desarrollo profesional

  • Aprenderás TypeScript desde lo esencial hasta aplicarlo a tus proyectos.
  • Escribirás pruebas unitarias reales y entenderás los principios del testing moderno.
  • Trabajarás como lo harías en un entorno de equipo: terminal, NPM, GitFlow, CI/CD.
  • Comenzarás a integrar IA para mejorar tu productividad como desarrollador.
  • Aplicarás patrones profesionales a proyectos más complejos y tipados.
0 de 32 disponibles 0%
Fundamental Terminal intro
HERRAMIENTAS
Fundamental Unix comandos básicos
HERRAMIENTAS
Fundamental NPM intro
HERRAMIENTAS
Fundamental TypeScript intro
TYPESCRIPT
Fundamental Tipos básicos
TYPESCRIPT
Fundamental Tipado de variables y constantes
TYPESCRIPT
Fundamental Tipado de variables y constantes
TYPESCRIPT
Fundamental Funciones tipadas
TYPESCRIPT
Fundamental Objetos y tipado estructural
TYPESCRIPT
Fundamental Interfaces y tipos (interface vs type)
TYPESCRIPT
Fundamental Arrays y tipado de colecciones
TYPESCRIPT
Fundamental Uniones y tipos literales
TYPESCRIPT
Fundamental Enum y alternativas prácticas
TYPESCRIPT
Fundamental Tipado de funciones asíncronas
TYPESCRIPT
Fundamental Tipado del DOM básico
TYPESCRIPT
Fundamental Type Assertions y Type Narrowing
TYPESCRIPT
Fundamental Genéricos (nivel mínimo)
TYPESCRIPT
Fundamental GitFlow
GIT/GITHUB
Fundamental Real world testing: testing pyramid
CONCEPTOS
Fundamental Real world testing: Técnicas básicas: mocks, stubs, spy
CONCEPTOS
Fundamental Real world testing: Buenas prácticas y errores comunes
CONCEPTOS
Fundamental Escribir pruebas unitarias con ayuda de IA
AI
Fundamental Explicar patrones de arquitectura con IA
AI
Fundamental Permisos
HERRAMIENTAS
Clave Cómo elegir en qué enfocarte
Clave Cómo insonorizarte
Clave Cómo crecer en cualquier circunstancia
Proyecto Refactor de To-do con TypeScript
HTML CSS JAVASCRIPT TYPESCRIPT GIT/GITHUB
Proyecto Formulario complejo con validación tipada
HTML CSS JAVASCRIPT TYPESCRIPT GIT/GITHUB
Proyecto Módulo de comentarios con pruebas unitarias
HTML CSS JAVASCRIPT TYPESCRIPT GIT/GITHUB
Proyecto Mini blog estático con arquitectura por carpetas
HTML CSS JAVASCRIPT TYPESCRIPT GIT/GITHUB
Fundamental AI assisted tools (terminal, Git)
AI
Fase 5
Pendiente

Crear un workflow con herramientas modernas

  • Entenderás cómo usar herramientas modernas como Node, Vercel, Netlify y GitHub Actions.
  • Aprenderás reactividad desde cero y usarás Vue y Nuxt para construir SPAs.
  • Usarás AI para generar componentes, mejorar código y automatizar tareas repetitivas.
  • Desarrollarás proyectos reales con estructura profesional y despliegue automatizado.
  • Te prepararás para trabajar en equipos modernos con estándares actuales.
0 de 16 disponibles 0%
Fundamental Generar boilerplate de componentes con IA
AI
Fundamental DevTools (repasar resto de tabs relevantes)
HERRAMIENTAS
Fundamental Node para Frontends
HERRAMIENTAS
Fundamental Asistencia de IA en Frameworks
AI
Fundamental Tu primera Pull Request
GIT/GITHUB
Fundamental Agile
CONCEPTOS
Fundamental Conventional commits
GIT/GITHUB
Fundamental GitFlow
GIT/GITHUB
Fundamental Deployment Vercel/Netlify
HERRAMIENTAS
Fundamental CD/CI Intro
HERRAMIENTAS CONCEPTOS
Fundamental Reactividad desde 0
CONCEPTOS
Fundamental Vue.js
HERRAMIENTAS
Fundamental Nuxt intro
HERRAMIENTAS
Proyecto Build your own Vue
HTML CSS JAVASCRIPT TYPESCRIPT GIT/GITHUB
Proyecto Panel de encuestas en tiempo real con Vue y Firebase
HTML CSS JAVASCRIPT TYPESCRIPT GIT/GITHUB
Proyecto Dashboard de hábitos con Nuxt y Firebase
HTML CSS JAVASCRIPT TYPESCRIPT GIT/GITHUB
Fase 6
Pendiente

Maximizar oportunidades de empleabilidad

  • Entenderás temas clave como performance, accesibilidad, patrones y system design frontend.
  • Aprenderás cómo presentarte en entrevistas técnicas (incluyendo algoritmos y resolución de retos).
  • Crearás un portfolio profesional con proyectos sólidos y relevantes.
  • Desarrollarás marca personal, estrategia de exposición y SEO.
  • Sabrás cómo crecer dentro de un equipo, comunicarte mejor y destacar como profesional de forma orgánica.
0 de 20 disponibles 0%
Fundamental Semantic releases
CONCEPTOS
Fundamental Algoritmo
CONCEPTOS
Fundamental Internacionalización 101
JAVASCRIPT
Fundamental Design patterns & clean code
CONCEPTOS
Fundamental Usar AI para preparar entrevistas técnicas
AI
Fundamental Containers 101
HERRAMIENTAS
Fundamental IA como mentor asíncrono
AI
Fundamental Performance 101
CONCEPTOS
Fundamental Accesibilidad 101
HTML CSS
Fundamental Time and space complexity (On)
CONCEPTOS
Fundamental Binary Tree
CONCEPTOS
Fundamental System design para Frontend
CONCEPTOS
Clave Cómo trabajar en equipo
Clave Cómo hacer que te encuentren SEO 101
Clave Cómo resolver conflictos
Clave Marca personal: cómo influenciar de forma sostenible
Clave Cómo crear una estrategia de exposición
Clave Cómo destacar en una entrevista
Clave Cómo comprender y recordar tu lugar (jerarquía)
Proyecto Proyecto 20: Portfolio personal
HTML CSS JAVASCRIPT TYPESCRIPT GIT/GITHUB