Proyecto: landing page responsiva

1.Qué vas a construir

Vas a darle estilo completo a la página de inicio de una cafetería. Recibirás el HTML ya escrito (con buena semántica) y tu trabajo es el CSS: que se vea profesional, se adapte desde 320px hasta pantallas grandes, tenga modo oscuro, pequeñas animaciones y buena accesibilidad.

2.Plan antes de escribir

1. Lee el HTML. Identifica los bloques: cabecera, hero, ventajas, galería, contacto, pie.
2. Dibuja un boceto móvil (una sola columna, todo apilado) y luego uno de escritorio (3 columnas de ventajas, galería en cuadrícula).
3. Elige tu paleta: un acento (el color del café, un naranja o marrón), un fondo claro y texto oscuro. Comprueba el contraste (mínimo 4.5:1).
4. Define los espacios: una escala (0.5, 1, 2, 4 rem) y un radio.
5. Decide tus puntos de ruptura a partir de donde el diseño se rompe.

3.Estructura de tu hoja de estilos

/* 1. Variables y tema */
:root { … }
:root[data-tema="oscuro"] { … }

/* 2. Reseteo y base */
*, *::before, *::after { box-sizing: border-box; }
body { … }

/* 3. Componentes (móvil primero) */
.cabecera { … }  .menu { … }  .boton { … }
.hero { … }  .ventajas { … }  .galeria { … }  .contacto { … }  .pie { … }

/* 4. Escritorio */
@media (min-width: 700px) { … }
@media (min-width: 1000px) { … }

/* 5. Preferencias del usuario */
@media (prefers-reduced-motion: reduce) { … }

4.Paso a paso

Paso 1: variables y base

:root {
  --fondo: #fffaf5;      --superficie: #ffffff;
  --texto: #2b1d14;      --texto-suave: #6b5648;
  --acento: #b45309;     --borde: #ecdccc;
  --radio: 14px;         --espacio: 1rem;
  --sombra: 0 1px 2px rgb(0 0 0 / .06), 0 10px 28px rgb(43 29 20 / .12);
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--fondo); color: var(--texto); font: 1.0625rem/1.65 system-ui, sans-serif; }

Paso 2: cabecera pegajosa y menú

Una cabecera con la marca a la izquierda y el menú a la derecha (Flexbox), que se queda arriba al desplazar (position: sticky; top: 0; z-index: 10) y con un fondo para que el contenido no se vea debajo.

Paso 3: hero

Una sección alta (min-height) con un fondo en capas (un degradado y, encima, una capa oscura) y el texto centrado. El título con clamp() y el botón con transición.

Paso 4: ventajas y galería

En móvil, una columna con gap. A partir de 700px, tres columnas (repeat(3, 1fr)). La galería con repeat(auto-fit, minmax(150px, 1fr)) y cada .foto con aspect-ratio: 1 y un degradado.

Paso 5: contacto y pie

El formulario como cuadrícula vertical con gap y campos que ocupan todo el ancho. El pie con display: flex; justify-content: space-between; flex-wrap: wrap.

Paso 6: detalles de calidad

• :focus-visible con un contorno claro en enlaces, botones y campos.
• Transiciones suaves en el botón y las tarjetas (transform, box-shadow).
• Tema oscuro con [data-tema="oscuro"] y @media (prefers-color-scheme: dark).
• @media (prefers-reduced-motion: reduce) para quitar el movimiento.
• El enlace «Saltar al contenido» oculto fuera de pantalla hasta recibir el foco.

5.Revisión de calidad

6.Publicación y siguientes pasos

Cuando tu landing esté lista, tienes dos caminos para mostrarla:

• Publicarla con GitHub Pages, como se explica en la lección 11 de HTML.
• Ponerla en tu portafolio con una captura y el enlace al sitio.

Y para seguir avanzando, el siguiente paso natural es el curso de JavaScript: darle comportamiento a esta misma página (un menú móvil que se abre, un botón de tema claro/oscuro, validación del formulario).

7.Errores frecuentes en proyectos completos

• Empezar por escritorio y luego sufrir para adaptar a móvil.
• Escribir los colores a mano en cada regla en lugar de usar variables.
• Usar px fijos en anchos de contenedores.
• Olvidar el estado :focus-visible.
• No probar entre los puntos de ruptura (por ejemplo, a 800px).
• Animar width/top en vez de transform.
• Dejar selectores gigantes como .contenedor .seccion .caja ul li a.

8.Glosario