A la hora de aprender desarrollo web, los desarrolladores que comienzan suelen frustrarse por no tener una estructura clara sobre que aprender cuando están comenzando. Esto, unido a que a medida que vas avanzando, aparecen más tecnologías y conceptos, es un gran problema para los desarrolladores, que comienzan a saltarse etapas para sentir que no están atascados o que no avanzan.
En este artículo vamos a intentar definir varios roadmap o caminos para profundizar y lograr ese objetivo final de aprender Desarrollo web.
Piramide invertida de aprendizaje
La siguiente piramide invertida muestra el orden de aprendizaje sugerido para desarrolladores que quieren dedicarse de forma profesional a la programación web.
Observa que la piramide muestra una serie de etapas o niveles en los que debes enfocarte antes de pasar al siguiente. Ten en cuenta que en cada etapa aparecen más contenidos y tecnologías por lo que es importante no saltar hasta la siguiente etapa hasta que sientas que lo entiendes y controlas bien:
1️⃣ Nivel 1: Bases de HTML/CSS
En esta primera etapa, el desarrollador debe centrarse en aprender HTML y aprender CSS. Ambos temas son muy amplios y tienen temáticas de diferentes dificultades, lo prioritario sería aprender lo básico como para defenderse medianamente bien.
2️⃣ Nivel 2: Trabajo desde terminal
En la segunda etapa, el desarrollador se centrará en aprender a utilizar una terminal, moverse por carpetas y ejecutar comandos. De la misma forma, debe aprender a utilizar NPM para instalar paquetes, aprender a utilizar Vite y aprender Git para trabajar con un sistema de control de versiones.
⚠️ Ciertos desarrolladores prefieren evitar terminal. Bajo mi punto de vista, es ideal aprenderlo.
3️⃣ Nivel 3: Programación + Javascript
La tercera etapa se centra en aprender fundamentos de programación necesarios antes escribir código de programación, aprender las bases de Javascript y aprender a trabajar con el DOM, que no es más que aprender a crear o gestionar un documento HTML desde Javascript.
4️⃣ Nivel 4: Frameworks de Javascript
Por último, la última etapa del aprendizaje es elegir un framework de Javascript y empezar a trabajar con él. React es de los más populares y tiene mucha comunidad, Vue es muy sencillo de aprender y se adapta muy bien a la filosofía de frontend, Angular es bastante utilizado en empresas y Svelte o WebComponents (no es un framework) son temáticas muy interesantes aunque menos extendidas.
Conviene seguir el orden de esta piramide invertida ya que muchos desarrolladores comienzan por un framework y se les dificulta mucho el aprendizaje, ya que sin saberlo están aprendiendo todo de golpe, mezclando conceptos y confundiendo características, haciendo mucho más frustrante el aprendizaje.
¿Cuánto tiempo necesito?
En general, el tiempo que se necesita para aprender cada nivel depende mucho de cada persona. Mientras que a algunos desarrolladores les puede tomar apenas unos días o semanas, a otros podría llevarles meses.
La mejor recomendación es seguir estos consejos:
- 🔄 No basta con hacerlo una vez, repite ejercicios para afianzar conocimientos.
- 🏗️ Aplica lo que aprendes en proyectos propios para entenderlo mejor.
- 💡 Enfócate en comprender las cosas y no memorices o copies y pegues sin entenderlo.
- 👀 Cuando no funcione algo, lee los errores y buscalos en Google o pídele ayuda a ChatGPT.
- 👨🏫 Explicar a otros lo que has aprendido ayuda a descubrir que cosas no tienes claras.
- 📖 No es lo mismo aprender algo superficialmente que profundizar en ello.
- 📚 La primera vez que aprendemos algo, siempre lo aprendemos muy superficialmente.
- ⏰ Es preferible dedicar pocas horas diarias durante mucho tiempo, que muchas durante poco tiempo.
Sigue tu propio roadmap
En los puntos anteriores se define una orientación de aprendizaje muy superficial para que el futuro desarrollador tenga una pequeña idea de lo que debe aprender. Sin embargo, no suele ser de mucha utilidad que sea tan genérico. Para ello, lo ideal es buscar roadmaps especializados, que estén mucho más detallados.
En nuestro caso, vamos a ofrecerte tres diferentes:
💻 Si te interesa concretamente la programación, echa un vistazo a Javascript Roadmap 2025.
🌈 Si te interesa más el mundo del diseño web, visual y estético, echa un vistazo a CSS Roadmap 2025.
🚀 Si buscas algo más interactivo y orientado a tecnologías de desarrollo web frontend, echa un vistazo al Roadmap de LenguajeJS.
