Ruta de aprendizaje recomendada

Hay tantas tecnologías que es fácil perderse. Esta lección es tu mapa: en qué orden aprender, cuánto tiempo dedicar a cada etapa, qué proyectos construir y cómo pasar de estudiante a alguien que cobra por hacer sitios y aplicaciones para clientes.

Concepto

Aprender desarrollo web es como construir una casa: primero los cimientos (fundamentos, HTML, CSS), luego la estructura (JavaScript), después las instalaciones especiales (frameworks, backend). Si saltas directo a React sin dominar JavaScript, es como poner el techo sin paredes.

La ruta por etapas

Los tiempos son orientativos dedicando 1–2 horas diarias.

Etapa 1 — Fundamentos y frontend básico (2–3 meses)

1. Fundamentos — este curso: web, herramientas, terminal, Git.
2. HTML — estructura, semántica, formularios, accesibilidad, SEO.
3. CSS — modelo de caja, Flexbox, Grid, responsive, animaciones.

Proyectos: tu portafolio personal, una landing page de un negocio, la réplica de un sitio que te guste.

Ya puedes ofrecer: landing pages y sitios informativos estáticos.

Etapa 2 — JavaScript (2–3 meses)

4. JavaScript — variables, funciones, arrays, objetos, DOM, eventos, fetch, asincronía, módulos.

Proyectos: menú responsive, galería con lightbox, lista de tareas con localStorage, buscador que consume una API pública, validación de formularios.

Ya puedes ofrecer: sitios interactivos, integraciones con APIs, mejoras en sitios existentes.

Etapa 3 — Elige tu especialización (3–6 meses)

                      ┌──▶ Frontend: TypeScript → React o Vue → Next.js / Nuxt
 HTML + CSS + JS ─────┤
                      └──▶ Backend: PHP → Laravel   o   Node.js → Express
                                    + SQL (MySQL / PostgreSQL)

• Frontend: TypeScript, React o Vue, Next.js.
• Backend: PHP y Laravel, o Node.js; siempre con SQL y una base de datos (MySQL, PostgreSQL o MongoDB).
• Full-stack: ambos caminos, uno después del otro.

Proyectos: blog con panel de administración, sistema de reservas, tienda sencilla, dashboard con gráficas.

Etapa 4 — Profesional (continuo)

• Seguridad web: validación, XSS, inyección SQL, contraseñas.
• Servidores y despliegue: hosting, VPS, dominios, HTTPS, despliegue automático.
• Trabajo profesional: cotizar, contratos, comunicación con clientes, mantenimiento.

Plan de ejemplo: tus primeras 12 semanas

Semanas	Tema	Entregable
1	Fundamentos: web, VS Code, terminal	Entorno instalado y primer index.html
2	Git y GitHub	Repositorio público con tu primera página
3–4	HTML: estructura, texto, enlaces, imágenes, listas, tablas	Página "Sobre mí" con varias secciones
5	HTML: formularios, semántica, accesibilidad, SEO	Formulario de contacto accesible
6	CSS: selectores, colores, tipografía, modelo de caja	Tu página "Sobre mí" con estilos
7	CSS: Flexbox	Navbar y sección de tarjetas
8	CSS: Grid y responsive	Galería y layout que funciona en móvil
9	CSS: variables, transiciones, animaciones	Tema oscuro y microinteracciones
10–11	Proyecto: landing page de un negocio	Sitio publicado con HTTPS
12	Repaso, Lighthouse, portafolio	Portafolio con 2 proyectos publicados

Ajusta el ritmo

Si tienes menos tiempo, duplica las semanas; si tienes más, añade proyectos extra. Lo importante es no saltarte los entregables: son la prueba de que realmente aprendiste.

Proyectos recomendados por nivel

• Principiante: tarjeta de presentación, página de un restaurante, réplica de la portada de un sitio famoso, formulario de registro.
• Intermedio: landing page completa con animaciones, portafolio con modo oscuro, blog estático de varias páginas, clon de una página de precios.
• Avanzado: sitio con CMS para un negocio real, tienda con carrito (JavaScript), aplicación con backend y base de datos, panel de administración.

¿Qué stack elegir para trabajar con clientes?

Si quieres...	Te conviene
Conseguir clientes pyme rápido	HTML/CSS/JS + WordPress, o PHP/Laravel (hosting barato y muy demandado)
Trabajar en startups	TypeScript + React/Next.js + Node.js
Freelance de sitios a medida	Laravel + Vue, o Next.js
Empleo en empresa	Revisa las ofertas de tu ciudad y aprende lo que más se pide

Buena práctica

Antes de elegir, busca 20 ofertas de trabajo o proyectos freelance en tu zona (LinkedIn, Workana, Upwork, bolsas locales) y anota qué tecnologías piden. Deja que el mercado guíe tu especialización.

Tu portafolio

Es tu carta de presentación. Debe tener:

• 3 a 6 proyectos de calidad (mejor pocos y pulidos que muchos a medias).
• Cada uno con: captura, descripción del problema que resuelve, tecnologías, enlace al sitio publicado y al repositorio.
• Al menos un proyecto que parezca "de cliente real": una cafetería, un consultorio, un despacho. Puedes inventar el negocio o hacer uno gratis para un conocido.
• Diseño responsive, rápido y accesible (¡tu portafolio es una demostración de lo que sabes!).

Hábitos de un profesional

• Constancia diaria, aunque sea poco tiempo.
• Publica tu trabajo en GitHub y en tu portafolio.
• Lee documentación antes que tutoriales cuando puedas.
• Comunidad: participa en grupos, meetups y foros; enseñar lo que aprendes consolida tu conocimiento.
• Habilidades blandas: puntualidad, comunicación clara, cumplir lo que prometes. Los clientes valoran tanto esto como el código.

Error común

El "infierno de los tutoriales": ver curso tras curso sin construir nada propio. Regla práctica: por cada hora de tutorial, dos horas construyendo algo tú solo.

Checklist para tu primer cliente

• [ ] Dominas HTML semántico, CSS responsive y JavaScript básico.
• [ ] Sabes usar Git y publicar un sitio con HTTPS.
• [ ] Sabes registrar un dominio y apuntar los DNS.
• [ ] Tienes un portafolio con al menos 3 proyectos.
• [ ] Sabes estimar tiempos y hacer una cotización sencilla.
• [ ] Tienes una plantilla base de proyecto y un checklist de entrega.

Ejercicios

1. Define tu meta en una frase: "En 6 meses quiero...".
2. Escribe tu horario semanal de estudio (días y horas concretas).
3. Elige los 3 primeros proyectos de tu portafolio.
4. Busca 10 ofertas o proyectos en tu zona y anota las 5 tecnologías que más se repiten.

Ver solución

Respuestas personales. Un ejemplo:

1. "En 6 meses quiero hacer sitios web para negocios locales cobrando por proyecto."
2. Lunes a viernes de 7 a 8 p. m. y sábados de 10 a 1.
3. Portafolio personal, landing de una cafetería y un sitio para un consultorio dental con formulario de citas.
4. Por ejemplo: HTML/CSS, JavaScript, WordPress, PHP/Laravel y Git.

Resumen

• Orden recomendado: Fundamentos → HTML → CSS → JavaScript → especialización → profesional.
• Construye proyectos en cada etapa; el portafolio importa más que los certificados.
• Elige tu stack según el mercado de tu zona y el tipo de clientes que buscas.
• Constancia, comunidad y habilidades blandas son tan importantes como el código.

¡Felicidades por terminar los fundamentos! Tu siguiente paso: el curso de HTML.