Guía práctica
Etiquetas HTML y utilidades CSS, explicadas con ejemplos que se ven.
Cada página de esta guía muestra el mismo patrón: un ejemplo en vivo a la izquierda, el código que lo genera a la derecha, y por qué te sirve. Está pensada para revisarla en orden o saltar directo al tema que necesites reforzar.
Introducción
Qué es el DOM, anatomía de una etiqueta HTML, sintaxis CSS, el cascade y el pipeline de render.
→01Display
block, inline, inline-block, hidden y cómo cambia el comportamiento de cada uno.
→02Flexbox
flex, justify/items, gap, wrap y el patrón de card con footer pegado abajo.
→03Grid
grid-cols, col-span, layouts responsivos y grillas asimétricas tipo sidebar.
→04Position
static, relative, absolute, fixed, sticky, z-index e inset-0.
→05Margin & Padding
El box model en acción: espacios externos e internos, márgenes negativos, margin collapsing.
→06Border
Grosor, estilo, color, radios y bordes por lado.
→07Sizes
Width, height, min/max, unidades relativas y el atajo size-*.
→08Shadows
shadow-sm a shadow-2xl, sombras de color, inset y drop-shadow.
→09Headings & Typography
h1–h6, jerarquía visual, tamaños, peso, tracking y leading.
→10Sections
HTML semántico: header, nav, main, section, article, aside, footer.
→11Anchor
Estados de link, target, rel de seguridad, anclas internas, descargas.
→12Images & Figure
alt correcto, figure/figcaption, srcset responsivo, lazy loading, object-fit.
→13Accesibilidad
sr-only, aria-label, skip links, foco visible, contraste.
→14Forms
label/for, fieldset, tipos de input, validación, estados de error.
→15Breakpoints
Mobile-first, sm/md/lg/xl/2xl, max-*, y container queries.
→16Dark Mode
El variant dark:, estrategia automática vs. manual, toggle con localStorage.
→