Conceptos básicos del Frontend
Todo roadmap serio de desarrollo web frontend empieza por lo fundamental.
Antes de pensar en frameworks, librerías o herramientas modernas, necesitas dominar las tres bases del frontend.
HTML
HTML es el lenguaje que define la estructura del contenido en la web.
Aquí aprendes a crear títulos, párrafos, listas, enlaces, imágenes, formularios y a organizar una página correctamente.
No se trata solo de “poner etiquetas”, sino de entender cómo y por qué se usan, ya que HTML no es solo visual, sino estructural y semántico:
Estructura semántica
Consiste en usar las etiquetas correctas según el significado del contenido, no solo por cómo se ven.
Por ejemplo, usar<header>,<nav>,<main>,<section>,<article>o<footer>en lugar de llenar todo con<div>.
Esto mejora la legibilidad del código, el SEO y hace que la página sea más comprensible para navegadores, buscadores y otras herramientas.Accesibilidad básica
Significa crear páginas que puedan ser usadas por la mayor cantidad de personas posible, incluyendo usuarios con discapacidades.
Aquí entran cosas como usar correctamente los títulos (<h1>a<h6>), añadir textos alternativos a las imágenes (alt), asociar bien los<label>con los formularios y mantener una estructura lógica del contenido.
No es algo avanzado, pero sí un hábito que se debe aprender desde el inicio.Buen uso de etiquetas según su propósito
Cada etiqueta HTML tiene una razón de existir.
Un<button>no es lo mismo que un<div>con unonclick, ni un enlace<a>es lo mismo que un botón.
Usar las etiquetas correctas evita problemas de accesibilidad, mejora el comportamiento por defecto del navegador y hace el código más mantenible a largo plazo.
CSS
CSS es lo que da estilo y diseño a la web.
Con CSS aprendes a controlar colores, tipografías, tamaños, layouts y adaptaciones a distintos dispositivos.
En esta etapa es importante entender:
- Selectores y especificidad
- Box model
- Flexbox y Grid
- Responsive design
No necesitas ser diseñador, pero sí saber convertir una idea visual en código.
JavaScript
JavaScript aporta interactividad y lógica.
Es lo que permite responder a eventos, modificar el DOM, validar formularios y crear comportamientos dinámicos.
Aquí se trabajan bases como:
- Variables y funciones
- Condicionales y bucles
- Manipulación del DOM
- Eventos
¿Qué puedes construir en esta etapa?
Con HTML, CSS y JavaScript ya puedes crear proyectos reales, aunque simples:
- Landing pages
- Portafolios personales
- Páginas informativas
- Formularios interactivos
- Sitios estáticos con algo de lógica
Estos proyectos son clave porque:
- Te enseñan cómo funciona realmente la web
- Te obligan a resolver problemas sin frameworks
- Son perfectos para empezar un portafolio
Idea clave de esta sección
Si saltas esta etapa, todo lo demás se vuelve frágil.
Frameworks como React, Vue o Next.js no reemplazan estos conocimientos, solo los construyen encima.
Dominar los conceptos básicos no es perder tiempo:
es lo que te permite avanzar más rápido y con menos frustración después.
Fundamentos de la Web y Redes
Además de HTML, CSS y JavaScript, un desarrollador frontend debe entender cómo funciona la web por debajo.
No a nivel profundo de backend o DevOps, pero sí lo suficiente para saber qué está pasando cuando cargas una página.
HTTP
HTTP es el protocolo que permite la comunicación entre el navegador y el servidor.
Gracias a HTTP, el frontend puede solicitar archivos HTML, CSS, JavaScript, imágenes o datos de una API.
En esta etapa es importante entender:
- Qué es una petición (request) y una respuesta (response)
- Métodos comunes como
GET,POST,PUTyDELETE - Códigos de estado (
200,404,500, etc.) - La diferencia entre HTTP y HTTPS
Esto te ayuda a depurar errores, entender por qué algo no carga y trabajar mejor con APIs.
DNS
DNS es el sistema que traduce un nombre como miweb.com en una dirección IP que los servidores entienden.
No necesitas configurarlo en profundidad, pero sí saber:
- Qué ocurre cuando escribes una URL en el navegador
- Por qué a veces un dominio no responde
- La relación entre dominios, servidores y hosting
Este conocimiento evita que el “no funciona” se convierta en magia negra.
Hosting
El hosting es el lugar donde vive tu aplicación web.
Aunque al inicio solo subas sitios estáticos, necesitas entender el concepto.
Aquí basta con conocer:
- Qué significa desplegar una web
- La diferencia entre hosting estático y dinámico
- Qué es un servidor y para qué sirve
- Por qué tu proyecto funciona localmente pero no en producción
Esto conecta el código con el mundo real.
Browsers (Navegadores)
El navegador es el entorno donde tu código frontend se ejecuta.
No todos los navegadores funcionan exactamente igual, y entender sus bases es clave.
En esta etapa deberías saber:
- Cómo el navegador interpreta HTML y CSS
- Qué es el DOM
- Cómo se ejecuta JavaScript
- Uso básico de las DevTools (inspeccionar elementos, consola, network)
Muchos “bugs de frontend” no son errores de código, sino de cómo el navegador procesa ese código.
Idea clave de esta sección
El frontend no vive aislado.
Entender redes, protocolos y navegadores te convierte en alguien que entiende el sistema completo, no solo escribe código que “a veces funciona”.
Herramientas básicas del desarrollador Frontend
Una vez que ya sabes escribir HTML, CSS y JavaScript, el siguiente paso no es React.
El siguiente paso es aprender a trabajar como desarrollador, no solo a escribir código.
Control de versiones (Git)
Git es indispensable en cualquier proyecto real.
Aquí deberías aprender:
- Crear repositorios
- Commits y mensajes claros
- Branches básicos
git clone,add,commit,push,pull
No para ser experto, sino para no trabajar solo en tu máquina.
GitHub (o similar)
GitHub es donde vive tu código y donde otros lo pueden ver.
Conceptos importantes:
- Repositorios remotos
- README básicos
- Issues
- Pull Requests (a nivel conceptual)
Esto conecta tu aprendizaje con el mundo profesional.
Editor de código
Aprender a usar bien tu editor ahorra muchísimo tiempo.
Deberías dominar:
- Atajos básicos
- Extensiones útiles
- Formateo de código
- Organización de archivos
No importa cuál uses, importa saber usarlo bien.
Debugging básico
Saber depurar es más importante que escribir código rápido.
Aquí entra:
- Uso de
console.log - DevTools del navegador
- Inspección de errores en consola
- Lectura de mensajes de error
Organización y buenas prácticas básicas
Antes de frameworks, es clave aprender a ordenar el código.
- Separar HTML, CSS y JS correctamente
- Nombrar archivos y carpetas de forma clara
- Evitar copiar y pegar sin entender
- Mantener el código legible
Esto prepara el terreno para escalar proyectos más grandes.
Proyectos con JavaScript puro
Antes de usar frameworks, es recomendable crear algunos proyectos con JS puro:
- To-do list
- Galería de imágenes
- Landing con validación de formularios
- Consumo de una API pública simple
Aquí empiezas a entender estado, eventos y flujo de datos, conceptos que luego verás en React, Vue o similares.
¿Por qué esto va antes que los frameworks?
Porque los frameworks:
- Asumen que sabes JavaScript
- Asumen que entiendes el DOM
- Asumen que sabes organizar código
Saltarte este paso hace que dependas del framework sin entender qué hace.
Si quieres, el siguiente paso después de esto ya sería claramente:
- CSS moderno y diseño
- JavaScript moderno (ES6+)
- Primer framework frontend (React, Vue, Svelte, etc.)
Dime si quieres que armemos la siguiente sección completa del roadmap y seguimos paso a paso.