Inicio → Roadmap de Frontend

Hoja de Ruta

Roadmap de Frontend Desde Cero

Un camino paso a paso desde cero absoluto hasta tu primer proyecto de portafolio: qué aprender, en qué orden y cuánto tiempo dedicar a cada etapa.

🗺️ 6 etapas 🎯 Desde cero 🔄 Actualizado: 2026

Qué es el desarrollo frontend

Frontend es todo lo que el usuario ve e interactúa en el navegador: la maquetación de la página, botones, formularios, animaciones, el comportamiento de la interfaz. Tres tecnologías se encargan de esto: HTML (estructura), CSS (apariencia) y JavaScript (lógica e interactividad).

💡 Importante: JavaScript es la parte más extensa e importante de este conjunto. Tu nivel con él determina si podrás pasar después a frameworks como React o Vue.

El camino, paso a paso

1-2 semanas

HTML — estructura de la página

Etiquetas, anidamiento, semántica, formularios. Unos pocos días suelen ser suficientes para entender la lógica básica del marcado.

2-3 semanas

CSS — estilos y Flexbox

Tamaños, espaciados, colores, Flexbox para organizar bloques, capacidad de respuesta básica en distintas pantallas.

2-4 meses

JavaScript — fundamentos del lenguaje

Variables, tipos de datos, condicionales, bucles, funciones, arrays y objetos — la base sin la cual no se puede avanzar.

1-2 meses

El DOM y los eventos

Controlar la página desde el código: reaccionar a clics, cambiar el contenido, trabajar con formularios y la entrada del usuario.

1-2 meses

Tus primeros proyectos independientes

Aplicaciones pequeñas pero completamente terminadas — una calculadora, una lista de tareas, un minijuego, una tienda en línea simple.

Opcional

Un framework (React, Vue) y un portafolio

Después de JavaScript sólido, un framework se aprende mucho más rápido. 2-3 proyectos terminados en el portafolio, y estás listo para postular a puestos junior.

Con qué paso empezar ahora mismo

Si ya conoces HTML y CSS al menos a nivel básico, puedes pasar directamente a JavaScript, la etapa más larga e importante de todo el camino. Si no, un par de días para familiarizarte con las etiquetas y Flexbox no se desperdiciarán, pero no demores el paso a JavaScript: es el que determina si el camino hacia frontend realmente funciona.

Qué sigue

🍌 JavaScript para Principiantes
Por dónde empezar la etapa más importante del roadmap
💰 Salario de un Desarrollador JavaScript
Sueldos por nivel y qué los afecta
🎯 Cómo Elegir un Curso de JavaScript
Qué revisar antes de pagar por una formación

¿Listo para la etapa más importante?

Un curso gratis de JavaScript con un ejercicio práctico después de cada lección — la base de todo este roadmap, desde cero hasta un nivel sólido.

🎓 Obtener el curso completo en Udemy ▶️ Probarlo gratis en YouTube

Preguntas frecuentes

? ¿Necesito aprender React u otro framework de inmediato?
No. Los frameworks se construyen sobre JavaScript puro, y sin un dominio sólido de las bases del lenguaje, aprender React será mucho más difícil. Primero cierra las bases de JavaScript, y agrega un framework después.
? ¿Cuánto tiempo lleva todo el camino hasta el primer empleo como desarrollador frontend?
Con práctica regular (1-2 horas al día), HTML/CSS y las bases de JavaScript llevan 2-4 meses, y otros 3-6 meses se dedican a JavaScript más profundo, el DOM y los primeros proyectos. En total, llegar al primer empleo suele llevar de 6 a 12 meses.
? ¿Necesito matemáticas para el desarrollo frontend?
La aritmética de nivel escolar es suficiente para empezar en frontend. Las matemáticas avanzadas se necesitan en otras direcciones (como el machine learning), pero no en el trabajo típico de un desarrollador frontend.