Hoja de ruta para aprender JavaScript (2026): 8 etapas con proyectos

Esta hoja de ruta para aprender JavaScript te lleva paso a paso desde los fundamentos hasta los frameworks y los proyectos reales. Está pensada para seguirla en orden, en ocho etapas. Cada una tiene un tiempo orientativo y un proyecto que te dice si ya puedes pasar a la siguiente.

¿Prefieres empezar eligiendo dónde estudiar? Echa un vistazo primero a las mejores páginas para aprender JavaScript (gratis y en español) y vuelve aquí para seguir el itinerario. Ten a mano un editor de código y ve escribiendo cada ejemplo: JavaScript se aprende programando, no solo leyendo.

Respuesta rápida: aprende primero lo básico de HTML y CSS. Después, variables y tipos, control de flujo, funciones, el DOM, JavaScript moderno, asincronía y APIs. Cierra con Git, npm y un framework. Con una hora al día, son unos cuatro meses hasta montar proyectos reales.

La hoja de ruta para aprender JavaScript en 8 etapas

Esta es la hoja de ruta completa en una tabla. Los tiempos son mi estimación con una hora diaria de práctica; si dedicas más, vas más rápido. No pases de etapa hasta que puedas hacer su proyecto sin copiarlo.

Etapa	Qué aprendes	Tiempo	Proyecto para comprobarlo
1. Preparación	HTML y CSS básicos, editor y DevTools	1-2 semanas	Una página estática maquetada
2. Fundamentos	Variables, tipos de datos y operadores	1-2 semanas	Calculadora
3. Control de flujo y funciones	if, switch, bucles y funciones	2 semanas	Juego del ahorcado
4. DOM y eventos	Seleccionar, modificar y escuchar elementos	2-3 semanas	Lista de tareas
5. JavaScript moderno	Métodos de array, desestructuración, módulos, objetos y clases	2-3 semanas	Buscador con filtro en vivo
6. Asincronía y APIs	Promesas, async/await y fetch	2-3 semanas	App del tiempo con una API
7. Herramientas	Git, Node.js, npm, código limpio y tests	2 semanas	Tus proyectos en GitHub, con tests
8. Framework	React, Vue o Angular	A partir del 4.º mes	Mini tienda con carrito

Tienes todos los proyectos explicados, con su nivel, en 10 proyectos de JavaScript para practicar. Debajo desarrollo cada etapa con ejemplos de código. Los he probado todos en Node 22 o en el navegador.

Etapa 1: qué es JavaScript y cómo prepararte

¿Qué es JavaScript?

JavaScript es el lenguaje de programación que da interactividad a las páginas web. HTML pone la estructura y CSS el diseño; JavaScript hace que la página reaccione. Con él actualizas contenido sin recargar, validas formularios, creas animaciones y respondes a clics y desplazamientos.

Se ejecuta en el navegador del usuario, así que la respuesta es inmediata. Y desde la llegada de Node.js también se ejecuta en el servidor: con un solo lenguaje puedes trabajar en el frontend y en el backend. Sobre él se han construido frameworks como React, Angular y Vue.js.

Historia de JavaScript, en breve

Brendan Eich lo creó en 1995 en Netscape, en apenas diez días. Se llamó primero Mocha, luego LiveScript y por último JavaScript. Al principio servía para pequeños scripts y validar formularios.

En 1996 Microsoft lanzó JScript, su propia versión para Internet Explorer. Aquella guerra de navegadores obligó a estandarizar el lenguaje, y en 1997 nació ECMAScript, el estándar en el que se basa JavaScript. Después llegaron AJAX y jQuery en los años 2000 y Node.js en 2009. En 2015 llegó ES6, la gran actualización que trajo let, const, las clases y las funciones flecha. Desde entonces sale una versión nueva del estándar cada año.

Editor de código y navegador

Para empezar te basta con un editor y un navegador. Mis recomendaciones:

• Visual Studio Code: gratis, de Microsoft, con autocompletado, Git integrado y miles de extensiones. Es el estándar y el que te recomiendo.
• WebStorm: el IDE de JetBrains para desarrollo web. Desde octubre de 2024 es gratis para uso no comercial, así que te sirve para aprender.
• Sublime Text: ligero y muy rápido, si tu equipo va justo de recursos.

Si ves Atom en guías antiguas, descártalo: GitHub lo dio por terminado en diciembre de 2022. Y si quieres programar con ayuda de IA, en mis herramientas de IA para diseño web tienes las opciones actuales.

En el navegador, abre las herramientas de desarrollo con Ctrl+Mayús+I (Windows y Linux) o Cmd+Opción+I (Mac). Funciona igual en Chrome, Firefox y Edge. Vas a vivir en dos pestañas: la Consola, donde ves errores y pruebas código, y Elementos, donde inspeccionas el HTML y el CSS.

¿Te falta base? Repasa las 20 etiquetas HTML esenciales y sigue la hoja de ruta de CSS hasta tener una página maquetada. Ese es el proyecto de esta etapa.

Etapa 2: fundamentos de JavaScript

Variables: let, const y var

Una variable guarda un dato con un nombre. Hay tres formas de declararla, y la diferencia importa:

• const: para valores que no vas a reasignar. Úsala por defecto.
• let: para valores que cambian, como un contador.
• var: la forma antigua. Evítala: su alcance es de función, no de bloque, y provoca errores difíciles de ver.

Mira la diferencia en la práctica. Con var, la variable de dentro del if pisa a la de fuera:

function ejemploVar() {
  var mensaje = "Hola, mundo";
  if (true) {
    var mensaje = "Hola, bloque";
    console.log(mensaje); // "Hola, bloque"
  }
  console.log(mensaje); // "Hola, bloque": se ha sobrescrito
}

function ejemploLet() {
  let mensaje = "Hola, mundo";
  if (true) {
    let mensaje = "Hola, bloque";
    console.log(mensaje); // "Hola, bloque"
  }
  console.log(mensaje); // "Hola, mundo": cada una vive en su bloque
}

Ojo con const: impide reasignar la variable, pero no congela su contenido. Si es un objeto o un array, puedes cambiar lo de dentro:

const persona = { nombre: "Juan", edad: 30 };
persona.edad = 31; // válido
console.log(persona.edad); // 31

const numeros = [1, 2, 3];
numeros.push(4); // válido
console.log(numeros); // [1, 2, 3, 4]

Tipos de datos

JavaScript tiene siete tipos primitivos y un tipo complejo, el objeto. Con typeof preguntas de qué tipo es un valor:

Tipo	Ejemplo	typeof
String (texto)	'Hola', `Hola, ${nombre}`	'string'
Number (número)	42, 3.14	'number'
BigInt (enteros enormes)	9007199254740993n	'bigint'
Boolean	true, false	'boolean'
Undefined	variable declarada sin valor	'undefined'
Null	null, ausencia intencionada de valor	'object' (un error histórico del lenguaje)
Symbol	Symbol('id'), identificador único	'symbol'
Object	{ nombre: 'Ana' }, arrays y funciones	'object' (y 'function' para funciones)

Dos detalles que confunden a todo el mundo al empezar. typeof [] devuelve 'object', así que para saber si algo es un array usa Array.isArray(). Y 0.1 + 0.2 da 0.30000000000000004, por cómo se guardan los decimales: con dinero, trabaja en céntimos.

Los strings se escriben con comillas simples, dobles o invertidas. Las invertidas (las template literals) permiten meter variables dentro y escribir en varias líneas:

const nombre = "Juan";
const saludo = 'Hola';
const mensaje = `${saludo}, ${nombre}`; // "Hola, Juan"

const persona = {
  nombre: "Juan",
  edad: 30,
  cursos: ["Matemáticas", "Inglés"],
  saludar() {
    return `Hola, soy ${this.nombre}`;
  }
};
console.log(persona.saludar()); // "Hola, soy Juan"

Operadores

Los operadores hacen cálculos y comparaciones. Estos son los que vas a usar a diario:

Tipo	Operadores	Ejemplo
Aritméticos	+ - * / % **	5 % 2 → 1 (resto) · 2 ** 3 → 8 (potencia)
Incremento	++ --	contador++ suma 1
Asignación	= += -= *= /= %=	x += 3 equivale a x = x + 3
Comparación	=== !== > < >= <=	5 === 5 → true
Lógicos	&& || !	edad >= 18 && tieneCarnet
Ternario	condición ? a : b	edad >= 18 ? 'adulto' : 'menor'

La regla más importante: compara siempre con === y !==. Los dobles (== y !=) convierten tipos antes de comparar, y dan resultados como estos:

console.log(5 == "5");   // true: convierte el texto en número
console.log(5 === "5");  // false: distinto tipo
console.log(0 == "");    // true (sorpresa)
console.log(0 === "");   // false

Y un ejemplo que junta varios operadores:

function evaluarEdad(edad) {
  const esAdulto = edad >= 18;
  const mensaje = esAdulto ? 'Eres mayor de edad' : 'Eres menor de edad';
  const esAdolescente = edad >= 13 && edad <= 17;
  console.log(mensaje, '| ¿adolescente?', esAdolescente, '| el doble:', edad * 2);
}

evaluarEdad(15); // Eres menor de edad | ¿adolescente? true | el doble: 30

Etapa 3: control de flujo y funciones

Condicionales: if…else y switch

if...else ejecuta un bloque u otro según una condición. Con else if encadenas varias:

const edad = 20;

if (edad < 18) {
  console.log("Eres menor de edad.");
} else if (edad < 65) {
  console.log("Eres un adulto.");
} else {
  console.log("Eres un adulto mayor.");
}

switch compara una misma variable con varios valores. Es más legible que una cadena de if cuando todos preguntan por lo mismo. No olvides el break: sin él, sigue ejecutando los casos siguientes.

const dia = 3;
let nombreDia;

switch (dia) {
  case 1: nombreDia = "Lunes"; break;
  case 2: nombreDia = "Martes"; break;
  case 3: nombreDia = "Miércoles"; break;
  case 4: nombreDia = "Jueves"; break;
  case 5: nombreDia = "Viernes"; break;
  default: nombreDia = "Fin de semana o día inválido";
}

console.log(nombreDia); // "Miércoles"

Mi regla: if para rangos y condiciones combinadas (puntuacion >= 90), switch para una variable con valores concretos (días, opciones de un menú).

Bucles

Un bucle repite un bloque de código. Cada uno tiene su sitio:

Bucle	Cuándo usarlo
for	Sabes cuántas vueltas das o necesitas el índice
while	Repites mientras se cumpla una condición, sin saber cuántas veces
do...while	Como while, pero se ejecuta al menos una vez
for...of	Recorrer los elementos de un array o un string. El más cómodo
for...in	Recorrer las propiedades (claves) de un objeto

const numeros = [1, 2, 3, 4, 5];

// for clásico, con índice
for (let i = 0; i < numeros.length; i++) {
  console.log(numeros[i]);
}

// for...of: el elemento directamente
for (const numero of numeros) {
  console.log(numero);
}

// while: busca el primer número mayor que 3
let i = 0;
while (numeros[i] <= 3) {
  i++;
}
console.log(`El primer número mayor que 3 es: ${numeros[i]}`); // 4

// for...in: las claves de un objeto
const persona = { nombre: "Juan", edad: 30, ciudad: "Madrid" };
for (const clave in persona) {
  console.log(`${clave}: ${persona[clave]}`);
}

Con arrays, en la práctica usarás más los métodos map, filter o forEach que los bucles. Los ves en la etapa 5. Si quieres practicar bucles y condicionales sin aburrirte, prueba las plataformas para aprender JavaScript jugando.

Funciones

Una función agrupa código para reutilizarlo. Hay tres formas de escribirla:

// 1. Declaración de función
function saludar(nombre) {
  return `Hola, ${nombre}`;
}

// 2. Expresión de función
const sumar = function (a, b) {
  return a + b;
};

// 3. Función flecha (ES6)
const multiplicarPorDos = (x) => x * 2;

console.log(saludar("Carlos")); // "Hola, Carlos"
console.log(sumar(2, 3)); // 5
console.log(multiplicarPorDos(4)); // 8

Las diferencias que importan son dos. La primera es el hoisting: una declaración de función se puede llamar antes de la línea donde está escrita, y una expresión no:

decirAdios("Ana"); // funciona: la declaración se eleva
function decirAdios(nombre) {
  console.log(`Adiós, ${nombre}`);
}

console.log(restar(5, 3));
// ReferenceError: Cannot access 'restar' before initialization
const restar = function (a, b) {
  return a - b;
};

La segunda es this: las funciones flecha no tienen el suyo, heredan el del lugar donde se escriben. Por eso son ideales como callbacks (numeros.map((n) => n * 2)) y no sirven como métodos de un objeto que use this.

Etapa 4: manipulación del DOM

El DOM (Document Object Model) es la representación de tu página que JavaScript puede leer y cambiar. Aquí es donde JavaScript empieza a hacer cosas visibles, y donde la mayoría se engancha.

Seleccionar elementos

Método	Qué devuelve	Cuándo usarlo
getElementById('id')	Un elemento o null	Un elemento concreto con id
querySelector('.clase')	El primer elemento que coincide	Cualquier selector CSS. El más versátil
querySelectorAll('.clase')	Una NodeList estática con todos	Varios elementos; admite forEach
getElementsByClassName('clase')	Una HTMLCollection en vivo	Código antiguo; se actualiza sola si cambia el DOM

En código nuevo, querySelector y querySelectorAll cubren casi todo, porque aceptan cualquier selector CSS que ya conoces:

<div class="contenido">Hola</div>
<div class="contenido">Mundo</div>

<script>
  const primero = document.querySelector('.contenido');
  console.log(primero.textContent); // "Hola"

  const todos = document.querySelectorAll('.contenido');
  todos.forEach((elemento) => console.log(elemento.textContent));
  // "Hola" y "Mundo"
</script>

Cambiar contenido y atributos

Para cambiar lo que hay dentro de un elemento tienes dos propiedades, y elegir bien es una cuestión de seguridad:

• textContent: cambia solo el texto. Úsala siempre que no necesites HTML.
• innerHTML: interpreta HTML. Nunca la uses con texto que escribe el usuario: abre la puerta a inyectar código (XSS).
• setAttribute(): cambia atributos como href, src o alt. Para las clases, mejor classList.add(), remove() y toggle().

<div id="contenido">Contenido inicial</div>
<a id="enlace" href="https://ejemplo.com">Visita el sitio</a>

<script>
  const contenido = document.getElementById('contenido');
  contenido.textContent = 'Nuevo texto';
  contenido.innerHTML = '<p>Nuevo contenido <strong>HTML</strong></p>';

  const enlace = document.getElementById('enlace');
  enlace.setAttribute('href', 'https://nuevodestino.com');
  enlace.setAttribute('target', '_blank');
  enlace.classList.add('destacado');
</script>

Eventos

Los eventos son las acciones del usuario: un clic, enviar un formulario, escribir. Los escuchas con addEventListener, que admite varios manejadores en el mismo elemento sin pisarse:

<button id="boton">Cambiar color</button>
<form id="formulario">
  <input type="text" name="nombre" placeholder="Nombre">
  <button type="submit">Enviar</button>
</form>

<script>
  const boton = document.getElementById('boton');
  boton.addEventListener('click', () => {
    document.body.classList.toggle('modo-oscuro');
  });

  const formulario = document.getElementById('formulario');
  formulario.addEventListener('submit', (evento) => {
    evento.preventDefault(); // evita que la página se recargue
    const nombre = formulario.elements.nombre.value;
    console.log(`Enviado por ${nombre}`);
  });
</script>

Otros eventos que usarás pronto: input salta cada vez que cambia un campo, ideal para buscadores en vivo. keydown detecta una tecla, mouseover y mouseout la entrada y salida del ratón, y DOMContentLoaded avisa de que el HTML ya está cargado.

Con esto ya puedes hacer el proyecto de la etapa: una lista de tareas que añade, tacha y borra elementos. Si quieres profundizar en el DOM, el curso de DOM de LenguajeJS está en español y es muy completo.

Etapa 5: JavaScript moderno, objetos y clases

Esta etapa es la que separa el JavaScript de los tutoriales antiguos del que vas a leer en cualquier proyecto actual. Casi todo llegó con ES6 (2015) y las versiones siguientes.

Métodos de array: map, filter, reduce y find

Sustituyen a la mayoría de bucles. No modifican el array original, devuelven uno nuevo o un valor:

const productos = [
  { nombre: 'Taza', precio: 12, categoria: 'hogar' },
  { nombre: 'Camiseta', precio: 20, categoria: 'ropa' },
  { nombre: 'Gorra', precio: 15, categoria: 'ropa' }
];

const nombres = productos.map((p) => p.nombre);
const ropa = productos.filter((p) => p.categoria === 'ropa');
const total = productos.reduce((suma, p) => suma + p.precio, 0);
const gorra = productos.find((p) => p.nombre === 'Gorra');

console.log(nombres); // ['Taza', 'Camiseta', 'Gorra']
console.log(ropa.length); // 2
console.log(total); // 47
console.log(gorra.precio); // 15

Desestructuración, spread y encadenamiento opcional

const usuario = { nombre: 'Ana', ciudad: 'Sevilla', redes: null };

// Desestructuración: sacas propiedades a variables
const { nombre, ciudad } = usuario;

// Spread: copias y amplías sin modificar el original
const actualizado = { ...usuario, ciudad: 'Málaga' };
const colores = ['rojo', 'azul'];
const masColores = [...colores, 'verde'];

// Encadenamiento opcional (?.) y valor por defecto (??)
const instagram = usuario.redes?.instagram ?? 'sin Instagram';

console.log(`${nombre} vive en ${ciudad}`); // Ana vive en Sevilla
console.log(actualizado.ciudad, usuario.ciudad); // Málaga Sevilla
console.log(masColores); // ['rojo', 'azul', 'verde']
console.log(instagram); // sin Instagram

?. evita el error típico «Cannot read properties of null» cuando un dato puede faltar. ?? da un valor por defecto solo si lo de la izquierda es null o undefined. En cambio, || también salta con 0 o un texto vacío.

Módulos: import y export

Los módulos te dejan repartir el código en archivos. Cada archivo exporta lo que quiere compartir e importa lo que necesita:

// utilidades.js
export function formatearPrecio(valor) {
  return `${valor.toFixed(2)} €`;
}

// app.js
import { formatearPrecio } from './utilidades.js';
console.log(formatearPrecio(12)); // "12.00 €"

// En el HTML, carga app.js como módulo:
// <script type="module" src="app.js"></script>

Objetos y clases

Un objeto agrupa datos y funciones (métodos) relacionados. Puedes añadirle propiedades en cualquier momento:

const coche = {
  marca: 'Toyota',
  modelo: 'Corolla',
  arrancar() {
    console.log(`${this.marca} ${this.modelo} arrancado`);
  }
};

coche.arrancar(); // "Toyota Corolla arrancado"
coche.anio = 2020; // propiedad nueva
console.log(coche.anio); // 2020

Cuando necesitas crear muchos objetos con la misma forma, usas una clase. Con extends heredas de otra, y super llama al constructor del padre:

class Animal {
  constructor(nombre) {
    this.nombre = nombre;
  }
  hablar() {
    console.log(`${this.nombre} hace un sonido.`);
  }
}

class Perro extends Animal {
  constructor(nombre, raza) {
    super(nombre); // llama al constructor de Animal
    this.raza = raza;
  }
  hablar() {
    console.log(`${this.nombre} ladra.`);
  }
}

const rex = new Perro('Rex', 'Labrador');
rex.hablar(); // "Rex ladra."

Herencia prototipal: lo que hay debajo de las clases

Las clases son azúcar sintáctico. Por debajo, JavaScript usa prototipos: cada objeto tiene un enlace a otro objeto, su prototipo. Si le pides una propiedad que no tiene, la busca en el prototipo, y luego en el prototipo de este. Es la cadena de prototipos:

const animal = {
  hablar() {
    return `${this.nombre} hace un sonido`;
  }
};

const perro = Object.create(animal); // animal es su prototipo
perro.nombre = 'Rex';

console.log(perro.hablar()); // "Rex hace un sonido"
console.log(Object.getPrototypeOf(perro) === animal); // true
console.log(Object.hasOwn(perro, 'hablar')); // false: lo hereda

No necesitas escribir prototipos a mano en el día a día, pero entenderlos te explica por qué funcionan las clases y muchos errores raros. La guía de herencia y cadena de prototipos de MDN lo explica a fondo. Para atajos de sintaxis moderna, tienes mis trucos de JavaScript.

Etapa 6: asincronía y APIs

JavaScript ejecuta tareas que no terminan al instante (peticiones a un servidor, temporizadores) sin bloquear la página. Para manejarlo tienes tres herramientas, de la más antigua a la moderna: los callbacks, las promesas y async/await, la sintaxis actual, que se lee casi como código secuencial. Aprende también a capturar errores con try...catch y a lanzar varias tareas a la vez con Promise.all.

Guía completa, con el event loop explicado y código probado: asincronía en JavaScript: callbacks, promesas y async/await.

Trabajar con APIs

Una API te permite pedir y enviar datos a un servidor. La forma moderna y nativa es la Fetch API, que sustituye al antiguo XMLHttpRequest. Con ella haces peticiones GET y POST y trabajas con JSON: conviertes la respuesta en objeto con .json() y lo que envías en texto con JSON.stringify(). Ojo con los errores: fetch no falla ante un 404, tienes que comprobar response.ok a mano.

Guía completa: Fetch API: cómo consumir APIs con JavaScript. El proyecto de esta etapa es la app del tiempo.

Etapa 7: herramientas, código limpio y tests

Git, Node.js y npm

Git guarda el historial de tu código y te permite volver atrás. Empieza a usarlo con tu primer proyecto, no al final: tienes lo esencial en los comandos de Git más utilizados. Sube tus proyectos a GitHub; además de copia de seguridad, son tu portfolio.

Node.js ejecuta JavaScript fuera del navegador, y npm es su gestor de paquetes: con él instalas librerías y defines los scripts del proyecto en el package.json. Por debajo de los frameworks verás herramientas como Vite, que empaquetan y sirven tu código; no hace falta configurarlas a mano al empezar. Guía completa: Node.js y npm para principiantes.

Código limpio, patrones y tests

Escribir código que funciona es solo el principio; el objetivo es que se pueda mantener. Eso significa nombres claros y funciones cortas con una sola responsabilidad. También patrones de diseño para organizar el código cuando crece (Singleton, Observer, Factory, Strategy). Y tests, para que tus cambios no rompan lo que ya funcionaba.

Guía completa, con tests en node:test, Vitest y Jest: patrones de diseño en JavaScript y código limpio. También te ayudan las extensiones de Chrome para desarrolladores.

Etapa 8: elige un framework

Cuando domines JavaScript puro, el siguiente salto es un framework. No antes: es el error más común, y lo pagas cada vez que algo falla y no sabes si es el framework o tu JavaScript. Los tres más usados:

Framework	Qué te ofrece	Para quién
React	Librería de interfaces, el ecosistema más grande	Quien busca trabajo: es el más usado y el que más verás en ofertas
Vue	Progresivo, con una curva de entrada suave	Quien viene del diseño y quiere resultados rápidos
Angular	Framework completo, con TypeScript de serie	Proyectos grandes y entornos de empresa

Elige uno y quédate con él hasta terminar el proyecto final, una mini tienda con carrito. Saltar de framework en framework sin base solo ralentiza.

Proyectos y práctica

La teoría se olvida; los proyectos se quedan. La forma más rápida de afianzar JavaScript es construir cosas de dificultad creciente: empieza por una calculadora, una lista de tareas o el juego del ahorcado. Sigue con una app del tiempo que consuma una API o un buscador con filtro en vivo. Y termina con una SPA en un framework o una mini tienda con carrito. Termínalos y súbelos a GitHub: te sirven de portfolio.

Guía completa: 10 proyectos de JavaScript para practicar (de principiante a avanzado).

Recursos adicionales

Para acompañar esta hoja de ruta, apóyate en estos recursos. Si quieres la lista completa y comparada, la tienes en las mejores páginas para aprender JavaScript, con cursos, libros y opciones en español.

• Documentación: MDN Web Docs, la referencia de cabecera.
• Cursos y práctica: freeCodeCamp y The Odin Project.
• Comunidad: Stack Overflow y GitHub.
• Otras rutas del blog: la hoja de ruta para ser desarrollador web y la hoja de ruta de CSS. Cuando domines JavaScript, salta al CSS moderno con las funciones de CSS 2026.

Preguntas frecuentes

¿En qué orden debo aprender JavaScript?

El de esta hoja de ruta: preparación con HTML y CSS, fundamentos, control de flujo y funciones, DOM y eventos, JavaScript moderno, asincronía y APIs, herramientas y, por último, un framework. No saltes a un framework antes de dominar lo básico: es el error más común.

¿Cuánto se tarda en seguir toda la hoja de ruta?

Con una hora al día, unos cuatro meses hasta montar proyectos reales con soltura, según los tiempos de la tabla. Es una estimación: lo que de verdad marca el ritmo es escribir código cada día y terminar los proyectos de cada etapa.

¿Necesito HTML y CSS antes de JavaScript?

Sí, una base de HTML y CSS ayuda mucho, porque JavaScript actúa sobre la página. Con conocer lo esencial de ambos es suficiente para empezar esta ruta.

¿Aprendo JavaScript o TypeScript?

Primero JavaScript. TypeScript es JavaScript con tipos añadidos: todo lo que aprendes aquí te sirve allí. Pásate a TypeScript cuando ya hagas proyectos medianos o cuando te lo pida un framework, como Angular.

¿Qué framework aprendo después?

Cuando domines JavaScript puro, React es la opción más demandada, aunque Vue y Svelte también son buenas puertas de entrada. Elige uno y profundiza; saltar de framework en framework sin base ralentiza el aprendizaje.

¿Puedo aprender JavaScript con ayuda de la IA?

Sí, como profesor particular: pídele que te explique un error o un concepto con otro ejemplo. No como sustituto: si copias el código que te genera sin entenderlo, te atascarás en el primer fallo. Escribe tú los proyectos de la tabla y usa la IA para desbloquearte.

Guarda esta hoja de ruta para aprender JavaScript y vuelve a la tabla cada vez que termines una etapa. Si te ha servido, compártela con quien esté empezando.

Como Afiliada de Amazon, obtengo ingresos por las compras adscritas que cumplen los requisitos. Esto no supone ningún coste adicional para ti.