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
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%
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
Fundamental JavaScript intro
Fundamental Expresiones y sentencias
Fundamental Variables
Fundamental Tipos
Fundamental Operadores
Fundamental Comparaciones
Fundamental Estructuras de control
Fundamental Funciones y closures
Fundamental Algoritmo ≠ programa – notación O(n) y O(1)
Fundamental El contexto y his
Fundamental Manipulación y DOM events
Fundamental Módulos ES
Fundamental Unit testing JSDOM intro
Fundamental //@ts‑check + JSDoc
Fundamental VSCode power workflow
Fundamental Imperativo vs declarativo
Fundamental Tu propia metodológía (II)
Fundamental Stacking context
Fundamental CSS Vars
Fundamental CSS Functions: cacl, clamp, min, max, etc
Fundamental Layers
Fundamental Depuración con DevTools
Fundamental AI - Depuración asistida
Clave Mindset y síndrome del impostor
Clave Cómo matenerte motivado
Proyecto Interactive game
Proyecto Dynamic form
Proyecto TodoList + locale state
Proyecto Image gallery + filter
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
Fundamental Basic flow
Fundamental Remotes
Fundamental Branches
Fundamental Conflictos
Fundamental Pull Request
Fundamental Hook pre-commit Stylelint + Prettier (husky/lint-staged)
Fundamental IA – Commit message perfecto
Fundamental API intro
Fundamental Asincronia JS single threaded
Fundamental Event loop
Fundamental Promesas y thenables
Fundamental async / await
Fundamental Persistencia client-side
Fundamental Tu propia metodológía (III)
Fundamental Entender “legacy” code con AI
Fundamental Refactorizar con IA (guiada)
Fundamental CORS
Fundamental Auth tokens (JWT)
Fundamental Variables de entorno
Fundamental Seguridad: XSS y CSRF
Fundamental Deployment en GH pages
Proyecto Mini‑lab Edge + deploy
Clave Cómo superar obstáculos
Clave Soft‑skill feedback efectivo
Proyecto App del clima con OpenWeather API
Proyecto Formulario de contacto con envío a API simulada
Proyecto Listado de usuarios con filtros locales
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
Fundamental Unix comandos básicos
Fundamental Unix permisos
Fundamental NPM intro + scripts productivos
Fundamental GitFlow
Fundamental TypeScript intro
Fundamental Tipos básicos
Fundamental Tipado de variables y constantes
Fundamental Funciones tipadas
Fundamental Objetos y tipado estructural
Fundamental Interfaces y tipos (interface vs type)
Fundamental Arrays y tipado de colecciones
Fundamental Uniones y tipos literales
Fundamental Enum y alternativas prácticas
Fundamental Tipado de funciones asíncronas
Fundamental Tipado del DOM básico
Fundamental Type Assertions y Type Narrowing
Fundamental Genéricos
Fundamental tsconfig estricto
Fundamental ESLint TS
Fundamental Testing pyramid
Fundamental Mocks, stubs, spy
Fundamental Buenas prácticas y errores comunes en testing
Fundamental IA - Escribir pruebas unitarias
Fundamental Accesibilidad intro
Fundamental Performance intro
Fundamental Tailwind: utilidad, atomicidad y flujo
Proyecto UI clone con Tailwind
Fundamental Playwright e2e intro
Fundamental CD/CI Intro
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
Proyecto Formulario complejo con validación tipada
Proyecto Mini blog estático con arquitectura por carpetas
Fundamental System design para Frontend
Fundamental IA - Assisted tools (terminal, Git)
Fundamental Internacionalización 101
Fundamental Design patterns & clean code
Fundamental Semantic releases
Fundamental Containers intro
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
Fundamental Node para Frontends
Proyecto Construye tu propio Vue (reactividad)
Fundamental Vite config & HMR
Fundamental Vue intro
Fundamental Single File Components
Fundamental Composition API
Fundamental Reactive vs ref
Fundamental Directivas
Fundamental Watch vs WatchEffect
Fundamental Vue Router
Fundamental Composable patterns
Fundamental Pinia global state
Fundamental Suspense & async components
Proyecto Panel de encuestas en tiempo real con Vue y Firebase
Proyecto Construyendo un plugin Vue
Proyecto Construye tu propio v-model
Fundamental Nuxt intro
Fundamental Routing
Fundamental Layouts & middleware
Fundamental Data fetching
Fundamental Patrones de estado
Fundamental SSR / SSG / ISR
Fundamental DB serverless (PostgreSQL + Supabase)
Fundamental Magic Link & JWT auth
Fundamental Deploy Vercel/Netlify
Proyecto Construir un módulo Nuxt
Proyecto Dashboard de hábitos con Nuxt y Firebase
Fundamental AI - Generar boilerplate de componentes
Fundamental DevTools extra tabs
Fundamental AI - PR avanzada (component + review)
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
Fundamental useState + eventos controlados
Fundamental Props y lifting state
Fundamental useEffect & lifecycle equivalente
Fundamental Componentes controlados vs no controlados
Fundamental Composición declarativa
Fundamental Custom Hooks
Proyecto Formulario reactivo + validación
Fundamental useContext y prop drilling
Fundamental useReducer (patrón global state ligero)
Proyecto CRUD simple + context
Fundamental useRef y refs en formularios
Proyecto Refactor ToDo en React
Fundamental Testing de componentes con Vitest
Fundamental IA – Generar hook personalizado
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
Fundamental IA - Preparación de entrevistas técnicas
Fundamental IA - Mentor asíncrono
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
Clave Demo & negociación salarial
Clave ATS keywords & CV
Clave LinkedIn branding
Clave Portfolio KPI
Clave Growth mindset continuo