Respuesta rápida: Aprende HTML primero (1-2 semanas), luego CSS (2-3 semanas), y después JavaScript básico (3-4 semanas). No toques React ni frameworks hasta que domines las bases. Practica construyendo proyectos pequeños reales, no haciendo tutoriales infinitos.
Qué aprender primero
El orden importa. Mucha gente se pierde porque empieza por lo último o salta pasos. La secuencia correcta es:
- HTML — Es el esqueleto. Define la estructura y el contenido de una web.
- CSS — Es la apariencia. Define colores, tipografía, espaciado, disposición de los elementos.
- JavaScript — Es el comportamiento. Añade interactividad: menús que se abren, formularios que validan, contenido que cambia.
No empieces por JavaScript. No empieces por un framework. Empieza por HTML. Siempre.
Qué no hace falta aprender al principio
Esto es tan importante como lo anterior. Al empezar, ignora todo lo siguiente:
- React, Vue, Angular o cualquier framework.
- Node.js o programación del lado del servidor.
- TypeScript.
- Preprocesadores CSS como SASS (aprende CSS puro primero).
- Bases de datos.
- Testing automatizado.
- Docker, DevOps, CI/CD.
Todo eso viene después. Ahora mismo es ruido que te distrae de las bases.
Orden recomendado de temas
Fase 1: HTML (semanas 1-2)
- Estructura básica de un documento HTML (
<html>,<head>,<body>). - Etiquetas de texto:
<h1>-<h6>,<p>,<strong>,<em>. - Listas:
<ul>,<ol>,<li>. - Enlaces:
<a>. - Imágenes:
<img>. - Formularios:
<form>,<input>,<textarea>,<button>. - HTML semántico:
<header>,<nav>,<main>,<section>,<article>,<footer>.
Fase 2: CSS (semanas 3-5)
- Selectores: elemento, clase, ID, combinadores.
- Propiedades fundamentales: color, background, font, margin, padding, border.
- Modelo de caja (box model).
- Unidades: px, rem, em, %, vh/vw.
- Flexbox (imprescindible).
- CSS Grid (para layouts más complejos).
- Media queries para diseño responsive.
- Variables CSS (custom properties).
- Transiciones y animaciones básicas.
Fase 3: JavaScript (semanas 6-9)
- Variables (
let,const). - Tipos de datos: strings, números, booleanos, arrays, objetos.
- Condicionales (
if,else). - Bucles (
for,forEach). - Funciones.
- DOM: seleccionar elementos, modificar contenido, escuchar eventos.
- Eventos:
click,submit,scroll. - LocalStorage (para guardar datos en el navegador).
Cómo practicar de verdad
La práctica no es repetir los ejercicios de un tutorial. La práctica real es construir algo que funcione y que te obligue a buscar soluciones.
- Replica webs que admires. Elige una web que te guste e intenta copiar su diseño con HTML y CSS. No tiene que ser perfecta, la clave es el proceso.
- Construye proyectos propios. Aunque sean pequeños. Un proyecto que resolvió un problema tuyo vale más que 10 tutoriales.
- Escribe código sin mirar. Después de seguir un tutorial, cierra el vídeo e intenta hacer lo mismo de memoria. Ahí es donde realmente aprendes.
- Lee código de otros. Abre las herramientas de desarrollo (F12) en cualquier web e inspecciona su HTML y CSS. Aprenderás trucos que no salen en los tutoriales.
Proyectos pequeños para ir subiendo nivel
Estos son proyectos progresivos que te recomendamos:
| Nivel | Proyecto | Tecnología |
|---|---|---|
| Principiante | Tarjeta de presentación personal | HTML + CSS |
| Principiante | Página tributo o homenaje | HTML + CSS |
| Intermedio | Portafolio responsive | HTML + CSS + Flexbox/Grid |
| Intermedio | Lista de tareas (todo list) | HTML + CSS + JS |
| Intermedio | Calculadora | HTML + CSS + JS |
| Avanzado | Blog estático con múltiples páginas | HTML + CSS + JS |
| Avanzado | App del tiempo (con API) | HTML + CSS + JS + fetch |
Errores típicos al aprender
- Tutorial hell. Ver tutoriales sin fin y no construir nada propio. Es la trampa más peligrosa. Si llevas más de una semana viendo vídeos sin escribir código, estás en ella.
- Querer aprender todo a la vez. No intentes aprender HTML, CSS, JavaScript, React y Node al mismo tiempo. Ve paso a paso.
- Copiar sin entender. Copiar código está bien si después analizas qué hace cada línea. Si solo copias y pegas, no estás aprendiendo.
- No buscar en la documentación. MDN Web Docs es tu biblia. Acostúmbrate a usarla en vez de depender solo de Stack Overflow.
- Compararse con otros. Cada persona tiene su ritmo. Lo importante es la constancia, no la velocidad.
- Obsesionarse con la perfección. Tu primer proyecto será feo. Tu segundo proyecto será regular. Tu quinto proyecto te sorprenderá. Eso es normal.
Cómo saber si ya estás listo para crear una web real
Estás listo cuando puedes responder "sí" a estas preguntas:
- ¿Puedes crear una página HTML con estructura semántica sin mirar documentación?
- ¿Puedes maquetar un diseño responsive con Flexbox o Grid?
- ¿Puedes hacer que un botón ejecute una función JavaScript cuando se hace clic?
- ¿Puedes seleccionar un elemento del DOM y cambiar su contenido?
- ¿Has construido al menos 2-3 proyectos pequeños por tu cuenta?
Si sí, estás listo. No necesitas más. Lanza tu web: Cómo crear una web desde cero en 2026.
Recursos recomendados
Gratuitos
- MDN Web Docs — La documentación oficial de Mozilla. El recurso definitivo para HTML, CSS y JS.
- freeCodeCamp — Curso interactivo gratuito con certificados. Ideal para practicar.
- The Odin Project — Curriculum completo y gratuito de desarrollo web. Muy práctico.
- CSS-Tricks — Guías y artículos excelentes sobre CSS (ahora parte de DigitalOcean).
- JavaScript.info — El mejor tutorial de JavaScript moderno, gratuito y en profundidad.
De pago (merecen la pena)
- Udemy (cursos de Jonas Schmedtmann) — Sus cursos de HTML/CSS y JavaScript son excelentes. Compra siempre en oferta (10-15€).
- Frontend Masters — Contenido avanzado de calidad para cuando tengas las bases.
Consulta nuestra página de recursos completa.
Plan de 30 días
| Días | Enfoque | Resultado esperado |
|---|---|---|
| 1-4 | HTML básico: estructura, textos, enlaces, imágenes | Crear una página con contenido real |
| 5-7 | HTML avanzado: semántica, formularios, tablas | Crear un formulario de contacto funcional |
| 8-11 | CSS: propiedades, modelo de caja, tipografía | Dar estilo profesional a tu página HTML |
| 12-15 | CSS: Flexbox y Grid | Maquetar un diseño de 2-3 columnas |
| 16-18 | CSS responsive y variables | Tu primera web responsive completa |
| 19-22 | JavaScript: variables, funciones, condicionales | Crear una calculadora simple |
| 23-26 | JavaScript: DOM, eventos, interactividad | Menú hamburguesa y formulario con validación |
| 27-30 | Proyecto final: web personal completa | Tu propia web publicada en Netlify |
¿30 minutos al día? Multiplica los tiempos por 2. ¿2 horas al día? Puedes hacerlo en menos días. El plan es flexible.
Preguntas frecuentes
¿Necesito saber matemáticas?
No para desarrollo web front-end. Sumas, restas y un poco de lógica es todo lo que necesitas.
¿Necesito un buen ordenador?
No. Cualquier ordenador que pueda abrir un navegador y un editor de texto funciona. VS Code es gratuito y ligero.
¿Puedo aprender en el móvil?
No de forma efectiva. Necesitas un ordenador para escribir código y ver resultados. El móvil puede servir para leer documentación o ver vídeos.
¿Ingles es obligatorio?
No obligatorio, pero muy recomendable. La mejor documentación y la mayoría de recursos están en inglés. Con un nivel básico tienes suficiente.
Es hora de crear tu primera web
Si has seguido el plan y ya tienes las bases, el siguiente paso natural es lanzar tu primer proyecto.
Crear mi primera web →