Tu camino hacia el Frontend Profesional. 205 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 19% contenido publicado
39 de 205 unidades disponibles 166 próximamente
Seguir el Roadmap
Fase 0
Realizada

Orientación y primeros pasos

  • Descubrirás qué es FrontendLeap y cómo está estructurado el programa.
  • Aprenderás a utilizar el Roadmap para avanzar de forma ordenada y medir tu progreso.
  • Te familiarizarás con las herramientas esenciales del entorno de desarrollo: navegador, editor de código, terminal y repositorio.
  • Darás tus primeros pasos prácticos poniendo en marcha un proyecto simple con HTML y CSS.
  • Entenderás la importancia de la comunidad y el acompañamiento en tu proceso de aprendiza
7 de 7 disponibles 100%
Fase 1
En desarrollo

Comprender la estructura y la semántica

  • Aprenderás a estructurar contenido web de forma clara, accesible y profesional.
  • Te adentrarás en los fundamentos visuales del desarrollo web: layout, jerarquía y adaptabilidad.
  • Conocerás cómo piensa el navegador al renderizar estilos y cómo trabajar con él, no contra él.
  • Construirás una base sólida de trabajo, integrando buenas prácticas, herramientas modernas y tus propios criterios.
  • Terminarás esta fase habiendo creado tus primeros proyectos con estructura y diseño realistas.
32 de 37 disponibles 86%
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 Subgrid
CSS
Fundamental CSS Container Queries
CSS
Fundamental Stylelint + Prettier (VSCode)
CSS HERRAMIENTAS
Fundamental Selector :has() y combinaciones avanzadas
CSS
Fundamental Formularios
HTML CSS
Fundamental IA – genera N variantes de layout
CSS AI
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

  • Te adentrarás en los fundamentos del lenguaje JavaScript y su aplicación en el navegador.
  • Aprenderás a trabajar con estructuras, funciones, eventos y manipulación del DOM.
  • Entenderás cómo organizar tu lógica y aplicar patrones reales en tu código.
  • Comenzarás a escribir código testeable con las herramientas adecuadas.
  • Incorporarás el uso de herramientas modernas, incluyendo inteligencia artificial.
  • Abordarás bloqueos comunes como el síndrome del impostor o la falta de motivación.
  • Desarrollarás proyectos con lógica, UI dinámica y organización del estado.
  • Empezarás a pensar como desarrollador frontend con una mentalidad técnica y sostenible.
0 de 30 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 y closures
JAVASCRIPT
Fundamental Algoritmo ≠ programa – notación O(n) y O(1)
CONCEPTOS
Fundamental El contexto y his
JAVASCRIPT
Fundamental Manipulación y DOM events
JAVASCRIPT
Fundamental Módulos ES
JAVASCRIPT
Fundamental Unit testing JSDOM intro
CONCEPTOS
Fundamental //@ts‑check + JSDoc
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 AI - Depuración asistida
AI
Clave Mindset y síndrome del impostor
Clave Cómo matenerte motivado
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

  • Aprenderás a trabajar con Git y GitHub de forma profesional, gestionando ramas, conflictos y pull requests.
  • Automatizarás tareas del flujo de desarrollo con herramientas como hooks pre-commit y linters.
  • Comprenderás el funcionamiento del event loop, promesas y async/await con enfoque práctico.
  • Consumirás APIs reales y trabajarás con datos externos gestionando correctamente CORS.
  • Aplicarás patrones de persistencia con localStorage y variables de entorno.
  • Entenderás los fundamentos de seguridad en el frontend y cómo prevenir ataques comunes.
  • Practicarás despliegues sencillos en plataformas como GitHub Pages y servicios edge.
  • Usarás IA para mejorar la calidad del código, desde commits hasta refactorización.
  • Desarrollarás habilidades blandas clave como recibir feedback y superar bloqueos.
  • Construirás proyectos funcionales conectados a servicios reales y listos para producción.
0 de 28 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 Hook pre-commit Stylelint + Prettier (husky/lint-staged)
CSS HERRAMIENTAS GIT/GITHUB
Fundamental IA – Commit message perfecto
AI 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 Auth tokens (JWT)
CONCEPTOS
Fundamental Variables de entorno
CONCEPTOS
Fundamental Seguridad: XSS y CSRF
CONCEPTOS
Fundamental Deployment en GH pages
GIT/GITHUB
Proyecto Mini‑lab Edge + deploy
HERRAMIENTAS
Clave Cómo superar obstáculos
Clave Soft‑skill feedback efectivo
Proyecto App del clima con OpenWeather API
JAVASCRIPT
Proyecto Formulario de contacto con envío a API simulada
JAVASCRIPT
Proyecto Listado de usuarios con filtros locales
JAVASCRIPT
Fase 4
Pendiente

Integrar los estándares de desarrollo profesional

  • Aprenderás TypeScript desde los fundamentos hasta su aplicación en formularios y estructuras reales.
  • Escribirás pruebas unitarias y end-to-end, entendiendo la testing pyramid y técnicas como mocks y validaciones.
  • Trabajarás con herramientas clave como la terminal, permisos Unix, GitFlow, CI/CD, scripts de automatización y semantic releases.
  • Utilizarás IA como apoyo en tareas de desarrollo: escribir pruebas, refactorizar y mejorar tu código.
  • Profundizarás en temas como performance, accesibilidad, patrones de diseño y clean code.
  • Consolidarás una mentalidad profesional enfocada en la autonomía, el foco y la mejora continua.
  • Desarrollarás proyectos reales en TypeScript con tipado fuerte y arquitectura escalable.
0 de 42 disponibles 0%
Fundamental Terminal intro
HERRAMIENTAS
Fundamental Unix comandos básicos
HERRAMIENTAS
Fundamental Unix permisos
HERRAMIENTAS
Fundamental NPM intro + scripts productivos
HERRAMIENTAS
Fundamental GitFlow
GIT/GITHUB
Fundamental TypeScript intro
TYPESCRIPT
Fundamental Tipos básicos
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
TYPESCRIPT
Fundamental tsconfig estricto
TYPESCRIPT
Fundamental ESLint TS
TYPESCRIPT
Fundamental Testing pyramid
CONCEPTOS
Fundamental Mocks, stubs, spy
CONCEPTOS
Fundamental Buenas prácticas y errores comunes en testing
CONCEPTOS
Fundamental IA - Escribir pruebas unitarias
CONCEPTOS AI
Fundamental Accesibilidad intro
HTML CSS CONCEPTOS
Fundamental Performance intro
CONCEPTOS
Fundamental Tailwind: utilidad, atomicidad y flujo
HERRAMIENTAS
Proyecto UI clone con Tailwind
HERRAMIENTAS
Fundamental Playwright e2e intro
HERRAMIENTAS CONCEPTOS
Fundamental CD/CI Intro
HERRAMIENTAS CONCEPTOS
Clave Cómo elegir en qué enfocarte
Clave Cómo crecer en cualquier circunstancia
Clave Gestión energía (técnica Pomodoro)
Proyecto Refactor de To-do con TypeScript
TYPESCRIPT
Proyecto Formulario complejo con validación tipada
TYPESCRIPT
Proyecto Mini blog estático con arquitectura por carpetas
TYPESCRIPT
Fundamental System design para Frontend
CONCEPTOS
Fundamental IA - Assisted tools (terminal, Git)
AI
Fundamental Internacionalización 101
CONCEPTOS
Fundamental Design patterns & clean code
CONCEPTOS JAVASCRIPT
Fundamental Semantic releases
CONCEPTOS
Fundamental Containers intro
HERRAMIENTAS
Fase 5
Pendiente

Comprender la reactividad y el lado del servidor

  • Aprenderás los principios de la reactividad desde su base, construyéndolos desde cero.
  • Comprenderás el ecosistema Vue y Nuxt para crear interfaces declarativas, modulares y dinámicas.
  • Aplicarás patrones como composables, v-model personalizado, plugins y gestión de estado con Pinia.
  • Te introducirás al desarrollo fullstack moderno: SSR, SSG, ISR, rutas dinámicas, middleware y fetching asincrónico.
  • Conectarás tu frontend con una base de datos serverless (PostgreSQL + Supabase) y flujos de autenticación con JWT.
  • Configurarás despliegues profesionales en Vercel y Netlify.
  • Usarás IA para generar código base, mejorar componentes y revisar pull requests.
  • Construirás dashboards funcionales con Firebase y extenderás Nuxt mediante módulos propios.
0 de 31 disponibles 0%
Fundamental Conventional commits
GIT/GITHUB
Fundamental Node para Frontends
HERRAMIENTAS
Proyecto Construye tu propio Vue (reactividad)
VUE
Fundamental Vite config & HMR
HERRAMIENTAS VUE
Fundamental Vue intro
HERRAMIENTAS
Fundamental Single File Components
VUE
Fundamental Composition API
VUE
Fundamental Reactive vs ref
VUE
Fundamental Directivas
VUE
Fundamental Watch vs WatchEffect
VUE
Fundamental Vue Router
VUE
Fundamental Composable patterns
VUE
Fundamental Pinia global state
VUE
Fundamental Suspense & async components
VUE
Proyecto Panel de encuestas en tiempo real con Vue y Firebase
HERRAMIENTAS VUE
Proyecto Construyendo un plugin Vue
VUE
Proyecto Construye tu propio v-model
VUE
Fundamental Nuxt intro
VUE
Fundamental Routing
VUE
Fundamental Layouts & middleware
VUE
Fundamental Data fetching
VUE
Fundamental Patrones de estado
VUE
Fundamental SSR / SSG / ISR
CONCEPTOS VUE
Fundamental DB serverless (PostgreSQL + Supabase)
HERRAMIENTAS CONCEPTOS
Fundamental Magic Link & JWT auth
CONCEPTOS VUE
Fundamental Deploy Vercel/Netlify
HERRAMIENTAS VUE
Proyecto Construir un módulo Nuxt
VUE
Proyecto Dashboard de hábitos con Nuxt y Firebase
HERRAMIENTAS VUE
Fundamental AI - Generar boilerplate de componentes
AI
Fundamental DevTools extra tabs
HERRAMIENTAS
Fundamental AI - PR avanzada (component + review)
AI GIT/GITHUB
Fase 6
Pendiente

Crear interfaces declarativas y composición

  • Aprenderás a crear interfaces dinámicas y reactivas con React, el framework más utilizado en la industria.
  • Comprenderás JSX, estado local, props, efectos y referencias mediante hooks como useState, useEffect y useRef.
  • Aplicarás composición declarativa, lifting state, contexto global (useContext, useReducer) y hooks personalizados reutilizables.
  • Implementarás patrones reales para formularios, validación, operaciones CRUD y testing con Vitest.
  • Usarás IA para generar hooks personalizados y mejorar tu flujo de trabajo.
  • Construirás proyectos con arquitectura clara, enfocada en producción y mantenibilidad.
0 de 16 disponibles 0%
Clave Soft‑skill: adaptabilidad
Fundamental JSX for the rest of us
HERRAMIENTAS REACT
Fundamental useState + eventos controlados
REACT
Fundamental Props y lifting state
REACT
Fundamental useEffect & lifecycle equivalente
REACT
Fundamental Componentes controlados vs no controlados
REACT
Fundamental Composición declarativa
REACT
Fundamental Custom Hooks
REACT
Proyecto Formulario reactivo + validación
REACT
Fundamental useContext y prop drilling
REACT
Fundamental useReducer (patrón global state ligero)
REACT
Proyecto CRUD simple + context
REACT
Fundamental useRef y refs en formularios
REACT
Proyecto Refactor ToDo en React
REACT
Fundamental Testing de componentes con Vitest
HERRAMIENTAS REACT
Fundamental IA – Generar hook personalizado
AI REACT
Fase 7
Pendiente

Maximizar oportunidades de empleabilidad

  • Aprenderás a presentarte con estrategia en entrevistas técnicas y procesos de selección reales.
  • Construirás un portfolio profesional que demuestre tu trabajo, tu criterio y tu evolución.
  • Comprenderás los fundamentos de marca personal, SEO y presencia en LinkedIn y GitHub.
  • Utilizarás la IA para prepararte de forma autónoma en entrevistas y retos técnicos.
  • Desarrollarás habilidades clave para trabajar en equipo: feedback, negociación y resolución de conflictos.
  • Consolidarás una mentalidad de crecimiento a largo plazo, enfocada en sostenibilidad y mejora continua.
0 de 14 disponibles 0%
Clave Naturaleza humana intro
Fundamental Agile intro
CONCEPTOS
Fundamental IA - Preparación de entrevistas técnicas
AI
Fundamental IA - Mentor asíncrono
AI
Clave Cómo hacer que te encuentren: SEO intro
Clave Cómo resolver conflictos (trabajo en equipo)
Clave Marca personal: cómo influenciar de forma sostenible
Clave Cómo destacar en una entrevista
Proyecto Proyecto 20: Portfolio personal
TYPESCRIPT
Clave Demo & negociación salarial
Clave ATS keywords & CV
Clave LinkedIn branding
Clave Portfolio KPI
Clave Growth mindset continuo