HTML de cero a una página
Estructura, semántica, formularios, medios y accesibilidad básica hasta una página completa.
Aprendizaje práctico
Aprende HTML, CSS, JavaScript, React y Web Components con ejemplos vivos
CSS4HTML es un hub unificado: edita código en el playground, copia patrones listos y sigue rutas claras — del HTML a React, pasando por CSS y JavaScript y Web Components.
Cinco rutas, un hub
Elige por dónde empezar — o combina las cinco.
CSS de cero al layout
De la cascada al layout responsivo, tipografía fluida y accesibilidad CSS.
JavaScript de cero al DOM
Variables, funciones, eventos, arrays y un primer contacto con fetch y el DOM.
React de lo básico al estado
Componentes, hooks, React Query y Zustand — con playground TSX.
Web Components con Vite
Custom Elements agnósticos, Shadow DOM, empaqueta con Vite y consume en React o Vue.
Cómo estudiar
Varios caminos, el mismo objetivo: entender la web en la práctica.
- Sigue una ruta — lecciones cortas ligadas a ejemplos y snippets.
- Rompe cosas en el playground — HTML + CSS (+ JS/TSX) editables con vista previa en vivo.
- Arma tu kit — filtra snippets por ruta y etiquetas.
Ejemplos destacados
Abre, edita y ve el resultado al instante.
Selectores básicos
Selectores de elemento, clase, descendiente y pseudo-clase.
Box model en la práctica
Content, padding, border y margin — el modelo de caja de CSS.
Centrar con Flexbox
Alinea horizontal y verticalmente con pocas utilidades de flex.
Galería con CSS Grid
Cuadrícula responsiva automática con repeat y minmax.
Tipografía fluida con clamp()
Tamaño de fuente que escala entre min y max sin breakpoints.
Animación fade + slide
Simple @keyframes para entrada suave de elementos.
Snippets rápidos
Patrones cortos para pegar y adaptar.
addEventListener
Escuchar clics de forma idiomática.
Anillo de foco visible
Estado :focus-visible sin quitar accesibilidad.
attachShadow
Abrir Shadow DOM e inyectar markup + CSS.
Badge en forma de píldora
Etiqueta redondeada para estados y tags.
Botón primario
Estilo base de CTA con hover.
Card con sombra suave
Elevación ligera para bloques de contenido.
Del blog
DOM + clases CSS: el combo del front-end
Cómo JavaScript y CSS conversan vía classList — sin mezclar estilo inline.
Accesibilidad con CSS: checklist rápido
Foco visible, contraste, motion y formularios — lo que CSS resuelve (y lo que no).
Progressive enhancement: HTML, luego CSS, luego JS
Por qué el orden importa — y cómo el hub CSS4HTML lo refleja en las rutas.