Ruta de desarrollo frontend con cursos gratis: de HTML a React

Antes de empezar: qué necesitas de verdad

Para seguir esta ruta basta con un ordenador normal, un navegador moderno y un editor de código gratuito como Visual Studio Code. No necesitas saber matemáticas avanzadas ni haber programado antes. Lo que sí necesitas es tiempo regular: con cinco o seis horas a la semana, la ruta completa lleva entre seis y nueve meses, y es perfectamente compatible con un trabajo.

Un consejo que ahorra frustración: crea desde el primer día una carpeta de proyectos y guarda todo lo que hagas, aunque sea un ejercicio de diez líneas. Al final de la ruta esa carpeta será tu mejor prueba de progreso.

Etapa 1 — HTML y CSS: estructura y presentación (4-6 semanas)

HTML define qué hay en la página (títulos, párrafos, enlaces, formularios) y CSS decide cómo se ve. Un buen curso de iniciación los enseña juntos y termina con una página completa. Presta especial atención a tres temas que se usan a diario: el modelo de caja (márgenes, bordes y rellenos), Flexbox y Grid para colocar elementos, y el diseño adaptable a móviles con media queries.

Sabes que puedes pasar a la siguiente etapa cuando eres capaz de reproducir, sin copiar código, una página sencilla que veas en internet: una tarjeta de perfil, una portada de producto o una página de receta que se vea bien tanto en el móvil como en el ordenador.

• Escribe HTML semántico: usa header, main, nav, article y button en lugar de div para todo.
• Aprende a usar las herramientas de desarrollo del navegador para inspeccionar y ajustar estilos.
• Cuida la accesibilidad desde el principio: textos alternativos en imágenes, contraste suficiente y formularios con etiquetas.

Etapa 2 — JavaScript: la lógica (8-10 semanas)

JavaScript es el lenguaje que da comportamiento a la página. Es la etapa más larga y la más importante de la ruta, porque aquí aprendes a programar de verdad: variables, tipos de datos, condicionales, bucles, funciones, arrays y objetos. Elige un curso largo de fundamentos que empiece desde cero y síguelo completo antes de tocar ningún framework.

Cuando domines lo básico, céntrate en lo que hace especial a JavaScript en el navegador: manipular el DOM (los elementos de la página), responder a eventos como clics o envíos de formulario, y trabajar con código asíncrono (promesas, async/await y fetch para pedir datos a una API). Estos tres temas son los que más cuestan y los que más se usan después.

• Haz ejercicios cortos a diario: manipular textos, filtrar listas, calcular totales.
• Construye una lista de tareas que guarde los datos en el navegador (localStorage).
• Consume una API pública gratuita (el tiempo, películas, países) y muestra los resultados en la página.

Etapa 3 — Herramientas del oficio (2-3 semanas)

Antes del framework conviene aprender las herramientas que usa cualquier equipo: Git para guardar versiones de tu código, GitHub para publicarlo, la terminal para ejecutar comandos y npm para instalar paquetes. No hace falta dominarlas; basta con el flujo diario: crear un repositorio, hacer commits con mensajes claros, subir cambios y publicar una web estática gratis en servicios como GitHub Pages.

Esta etapa es corta pero cambia tu forma de trabajar: a partir de aquí, cada proyecto que hagas debería vivir en un repositorio público con un README que explique qué es y cómo verlo.

Etapa 4 — Un framework: React u otro (8-10 semanas)

Los frameworks como React, Vue o Angular resuelven un problema concreto: organizar interfaces grandes en componentes reutilizables que se actualizan solos cuando cambian los datos. React es hoy el más demandado en ofertas de empleo, pero cualquiera de ellos sirve para aprender los conceptos, que se transfieren bien de uno a otro.

Busca un curso que construya una aplicación completa y cubra componentes, props, estado, efectos, formularios y enrutado. Si un curso asume conocimientos de JavaScript que aún no tienes (desestructuración, funciones flecha, métodos de arrays como map y filter), vuelve a la etapa 2 un par de días: es la causa más común de atasco en esta etapa.

Cuando te sientas cómodo, añade TypeScript. Añade tipos a JavaScript, evita muchos errores y aparece en una parte creciente de los proyectos profesionales.

Etapa 5 — Proyectos propios y portfolio (continuo)

Con los fundamentos claros, la mejor inversión de tiempo son los proyectos que no salen de ningún curso. Tres ideas que obligan a usar todo lo aprendido: un buscador sobre una API pública con filtros y paginación, un panel con gráficos a partir de datos reales, y una web completa para un negocio real o inventado con varias páginas, formulario y buen rendimiento en móviles.

Publica cada proyecto con su código en GitHub y una versión visitable. Explica en el README qué decisiones tomaste y qué harías distinto. Ese texto dice mucho más de ti que el propio código.

• Ideas de proyectos para consolidar lo aprendido →
• Cómo montar un portfolio sin certificado →

Cómo elegir los cursos de cada etapa

En frontend la fecha importa: las bases (HTML, CSS, JavaScript) envejecen bien, pero los frameworks cambian de versión y de buenas prácticas cada pocos años. Para las etapas 1 y 2 un curso de hace tres o cuatro años sigue siendo válido; para la etapa 4 prioriza cursos recientes y comprueba qué versión usan.

En cada ficha de nuestro catálogo indicamos el nivel, la duración, los requisitos previos y un plan de estudio sugerido. Úsalos para encajar cada curso en su etapa: si los requisitos de un curso incluyen algo que aún no has visto, todavía no es su momento.

• Cursos de programación del catálogo →