Crea tu primera web con HTML

Al finalizar, podrás aplicar la jerarquía h1-h6 del HTML Living Standard para estructurar una página con un único h1, h2 para secciones y h3-h6 sin saltar niveles, de manera que un lector de pantalla y un crawler puedan reconstruir el outline del documento sin CSS.

Al finalizar, podrás escribir listas semánticas (<ul>, <ol>, <li>) y enlaces seguros (<a href>) aplicando los atributos correctos (rel="noopener noreferrer" en target="_blank") para prevenir Reverse Tabnabbing, según el HTML Living Standard de WHATWG y las recomendaciones OWASP.

Al finalizar, podrás auditar un <img> y reescribirlo en una versión accesible y rápida: alt útil según función (decorativa / informativa / funcional), srcset + sizes con al menos 3 candidatos, loading="lazy" sólo bajo el pliegue, aspect-ratio reservado y fetchpriority="high" en la imagen LCP.

Al finalizar, podrás calcular a mano la especificidad de cualquier selector CSS usando la tupla a-b-c (inline, IDs, clases/atributos/pseudoclases, elementos/pseudoelementos), predecir qué regla gana en un conflicto antes de abrir DevTools, y decidir cuándo usar Cascade Layers (`@layer`) en lugar de subir especificidad con anidamientos o `!important`.

Al finalizar, podrás calcular el tamaño real de una caja HTML aplicando el CSS Box Model (content + padding + border + margin), elegir entre content-box y border-box con criterio, y anticipar el colapso de márgenes verticales para que tus layouts midan exactamente lo que esperas.

Al finalizar, podrás aplicar Flexbox (display: flex + justify-content + align-items + gap) para alinear y distribuir elementos en una sola dirección, y decidir con criterio cuándo Flexbox es la herramienta correcta y cuándo el problema es realmente de Grid.

Al finalizar, podrás componer rejillas reales en dos dimensiones con CSS Grid usando grid-template-columns, grid-template-rows, grid-template-areas, gap, fr unit, repeat() y minmax(), y decidir con criterio cuándo Grid es la herramienta correcta frente a Flexbox.

Al finalizar, podrás definir un sistema tipográfico web de cuerpo legible aplicando una variable font autoalojada, una escala modular consistente y un line-height de ritmo vertical (Bringhurst, 1992), justificando cada decisión por lectura y rendimiento, no por gusto.

Al finalizar, podrás escribir CSS mobile-first usando media queries con min-width y breakpoints elegidos por el contenido (no por dispositivos), e identificar cuándo conviene sustituir un media query por un container query.

Al finalizar, podrás construir un formulario accesible que cumple WCAG 2.2 AA usando label/for, tipos de input semánticos (email, tel, number, date), validación nativa (required, pattern, min, max) y aria-describedby para mensajes de error, sin recurrir a JavaScript ad-hoc.

Al finalizar, podrás publicar tu sitio HTML/CSS en Internet con URL pública, HTTPS válido y deploy automático desde Git, eligiendo entre Netlify, Vercel, GitHub Pages o Cloudflare Pages según el caso, y conectar un dominio propio vía DNS.

Al finalizar, podrás auditar cualquier página HTML estática con Lighthouse y PageSpeed Insights, identificar el elemento LCP, diagnosticar render-blocking resources y aplicar las cuatro palancas (imágenes, fuentes, CSS crítico, fetchpriority) que mueven Core Web Vitals en el campo real, no solo en el laboratorio.