🌐 Ruta Web
Guía práctica para construir sitios, dashboards y frontends que se ven bien y se cargan rápido.
¿Qué es el desarrollo web?
Es construir lo que el usuario ve e interactúa en el navegador: páginas, paneles, tiendas. Se divide en tres capas:
- HTML: el esqueleto (títulos, textos, botones).
- CSS: el estilo (colores, espacios, responsive).
- JavaScript / TypeScript: la lógica (interacciones, datos, API).
Tecnologías base
HTML Base
Lenguaje de marcado. Define la estructura y el contenido de la página. También es clave para SEO y accesibilidad.
JavaScript Base
El lenguaje de la web. Permite interactividad, consumir APIs y actualizar contenido sin recargar.
TypeScript Recomendado
JavaScript con tipos. Evita errores tontos y hace el código mantenible. Estándar en proyectos serios.
Frameworks y librerías
Cuando la interfaz crece, un framework ayuda a organizar el código. No necesitas todos: elige uno.
React Popular
Librería de UI más usada del mundo. Componentes reutilizables y enorme ecosistema de empleos/librerías.
Next.js Recomendado
React + servidor: SEO, rutas, API y render rápido listos de fábrica. Ideal para SaaS y blogs.
Vue Suave
Curva de aprendizaje muy suave y sintaxis clara. Perfecto si vienes de JS puro.
Svelte Minimal
Compilado a JS nativo: menos código, alta velocidad. Creciente en popularidad.
Tailwind CSS UI
Clases utility-first: diseñas directo en el HTML sin salir a otro archivo CSS. El estándar actual de UI.
shadcn/ui Componentes
Componentes bonitos (botones, tablas, modales) que copias a tu proyecto y personalizas. Base de muchos dashboards.
UI y diseño: galerías de ejemplo
Antes de programar, mira ejemplos. Aquí galerías oficiales para inspirarte en el diseño:
shadcn/ui Blocks
Secciones completas (hero, pricing, dashboards) listas para copiar.
Ver ejemplos →Material Design
El sistema de diseño de Google: principios, componentes y especificaciones.
Ver ejemplos →Tailwind UI
Plantillas premium de Tailwind (hay secciones free).
Ver ejemplos →UIverse
Botones, toggles y tarjetas hechos por la comunidad, en CSS puro.
Ver ejemplos →Dribbble
Inspiración visual de diseñadores para websites.
Ver ejemplos →Google Fonts
Fuentes gratuitas para web con licencia libre.
Ver fuentes →Stack de gobernanza para este proyecto
Docker Opcional al inicio
Contenedores para igualar entornos. Útil cuando ya tienes backend o base de datos.
Vercel / Cloudflare Pages Free
Deploy automático desde GitHub. Cloudflare te da DNS + CDN en el mismo panel (ideal para pruebas DNS).
Google Analytics 4 Free
Mide visitas y comportamiento. Pégalo en el <head> de tu HTML.
Meta Pixel + TikTok Pixel Free
Si vas a publicitar, instala los píxeles desde el inicio para no perder datos de conversiones.
Checklist de decisión
¿Elegiste tu stack?
Genera el brief de esta ruta y pégalo en tu agente de IA para empezar a construir.
Generar brief de esta ruta →