25 min CSS

Ejercicio final: maqueta una landing page responsive

Has completado las 10 lecciones de CSS. Sabes seleccionar elementos, controlar el box model, elegir tipografía y colores, crear layouts con flexbox y grid, hacer todo responsive, usar variables CSS, animar con transiciones y keyframes, y organizar tu código de forma profesional. Es hora de juntar todo.

El proyecto: la landing de Vinyl Paradise con estilo

Recuerdas la landing que construiste en el ejercicio final de HTML? Ahora le vas a dar vida con CSS. Si no la hiciste, puedes elegir cualquier producto o servicio: una app de productividad, un estudio de diseño, una cafetería, un festival de música...

El resultado final debe verse profesional, ser responsive y tener personalidad.

Requisitos obligatorios

1. Sistema de diseño

Variables CSS en :root: colores (bg, surface, border, text, text-muted, brand), tipografía (font-sans, font-mono), spacing (al menos 5 valores), border-radius y sombras
Dark mode con @media (prefers-color-scheme: dark) o un tema dark por defecto
Reset moderno al inicio del CSS

2. Layout

Layout general de página con CSS Grid (grid-template-areas): header, main, footer
Al menos un grid de cards con repeat(auto-fit, minmax(...))
Al menos un componente con flexbox (navbar, toolbar, footer links)
Contenedor centrado con max-width y margin-inline: auto

3. Responsive design

Mobile first: estilos base para móvil, media queries con min-width para ampliar
Al menos 2 breakpoints (tablet ~640px, desktop ~1024px)
Navegación que cambie de layout en móvil vs desktop
Cards: 1 col en móvil, 2 en tablet, 3+ en desktop
Título hero con clamp() para tamaño fluido
Al menos una container query
Imágenes con max-width: 100% y object-fit: cover

4. Tipografía

Jerarquía tipográfica clara: títulos grandes, subtítulos, cuerpo, labels
Interlineado óptimo: ~1.1 para títulos, ~1.6-1.7 para cuerpo
Ancho de lectura máximo: max-width: 65ch en textos largos
text-wrap: balance en títulos

5. Componentes

Botones con al menos 2 variantes (primary, secondary) usando variables internas del componente
Cards con hover effect (transición de sombra y/o transform)
Al menos un badge o etiqueta
Formulario estilizado con estados :focus-visible y :user-valid/:user-invalid

6. Animaciones

Transiciones suaves en botones y cards (hover/active)
Al menos una animación @keyframes (entrada de elementos, pulse en badge, etc.)
Entrada escalonada de cards con animation-delay
Bloque @media (prefers-reduced-motion: reduce)

7. Código limpio

Naming BEM en todas las clases
Nesting nativo de CSS
Logical properties (margin-block, padding-inline)
Cero !important (excepto en utilidades o prefers-reduced-motion)
Cero IDs usados como selectores de estilo
CSS organizado en secciones lógicas

Estructura sugerida

/* ========================================
   VINYL PARADISE — Estilos principales
   ======================================== */

/* === 1. Variables === */
:root {
    /* Colores */
    /* Tipografía */
    /* Spacing */
    /* Radii */
    /* Sombras */
}

/* === 2. Reset === */
/* Reset moderno */

/* === 3. Base === */
/* html, body, headings, links, listas */

/* === 4. Layout === */
/* .page, .container, grid-template-areas */

/* === 5. Componentes === */
/* .navbar, .hero, .card, .btn, .badge, .form, .footer */

/* === 6. Utilidades === */
/* .sr-only, .text-center, .hidden */

/* === 7. Animaciones === */
/* @keyframes, prefers-reduced-motion */

Secciones de la landing

Tu landing debe tener al menos estas secciones:

Navbar: logo + links. En móvil, apilados verticalmente. En desktop, en fila con space-between.
Hero: título grande con clamp(), subtítulo, botón CTA. Centrado vertical con grid o flex. Fondo con gradiente o imagen.
Features/Productos: grid de cards con auto-fit. Cada card con hover effect.
Testimonios o destacados: layout diferente (2 columnas, o una card grande + 2 pequeñas).
Formulario: inputs con estilos de focus, error y valid. Botón de envío estilizado.
Footer: links en columnas con flexbox o grid.

Checklist final

Antes de darte por satisfecho, verifica:

¿Se ve bien en móvil (375px)? Prueba en las DevTools con el modo responsive.
¿Se ve bien en tablet (768px)?
¿Se ve bien en desktop (1280px)?
¿No hay scroll horizontal en ningún tamaño de pantalla?
¿Los colores tienen suficiente contraste? Usa la herramienta de contraste de DevTools.
¿Las animaciones se desactivan con prefers-reduced-motion?
¿Puedes navegar con teclado y ver claramente el foco (:focus-visible)?
¿Todos los valores están en variables, no hardcodeados?
¿El naming es consistente (BEM)?
¿Hay cero !important donde no debería?

Construye (o estiliza) la landing page completa siguiendo todos los requisitos descritos arriba. Crea un archivo styles.css y enlázalo al HTML del ejercicio final de la sección anterior.

Extra (opcional):

Añade un efecto glassmorphism (backdrop-filter: blur()) en la navbar al hacer scroll
Crea una galería tipo masonry con grid-template-rows: masonry (experimental) o con column-count
Implementa scroll-linked animations con animation-timeline: scroll()
Usa color-mix() para generar variaciones de tu color de marca automáticamente
Añade un modo de alto contraste con @media (prefers-contrast: more)

Cuando termines, tu landing debe verse profesional, ser completamente responsive y estar escrita con CSS moderno y limpio.

Pistas

Empieza por las variables y el reset — son la base. Luego el layout general con grid-template-areas. Después componentes de uno en uno: navbar → hero → cards → formulario → footer. Deja las animaciones y los extras para el final. No intentes que sea perfecta a la primera: itera.

Has completado la sección de CSS. Ya sabes dar estilo y vida a cualquier estructura HTML: selectores, box model, tipografía, colores, flexbox, grid, responsive design, variables, animaciones y buenas prácticas. En la siguiente sección vas a aprender JavaScript para añadir comportamiento: que los botones hagan cosas, que los datos se carguen de APIs y que la página reaccione al usuario.

Anterior Buenas prácticas

Siguiente ¿Qué es programar?