En esta página

Proyecto final: landing page completa

20 min lectura TextoCap. 5 — CSS moderno

El proyecto final

En esta leccion final vas a construir una landing page completa aplicando todos los conceptos que has aprendido a lo largo del curso. El playground de arriba contiene el HTML base y un esqueleto de CSS. Tu tarea es completar los estilos.

Requisitos

Tu landing page debe implementar los siguientes conceptos:

1. Custom properties

Define una paleta de colores y tokens de espaciado en :root. Todos los estilos deben usar estas variables, no valores hardcodeados.

:root {
  --color-brand: oklch(75% 0.18 85);
  --color-text: oklch(15% 0.01 260);
  --space: 1rem;
  --radius: 12px;
}

2. Navbar con Flexbox y sticky

La barra de navegación debe:

  • Usar display: flex con justify-content: space-between
  • Tener position: sticky para que se quede fija al hacer scroll
  • Incluir un efecto glassmorphism con backdrop-filter: blur()

3. Hero con tipografia fluida

La sección hero debe:

  • Centrar el contenido con max-width y margin: 0 auto
  • Usar clamp() para que el título escale fluidamente
  • Tener botones CTA con gradiente y transiciones al hover

4. Features con CSS Grid

La grilla de funcionalidades debe:

  • Usar display: grid con repeat(auto-fill, minmax(280px, 1fr))
  • Ser completamente responsiva sin media queries
  • Incluir transiciones en las cards al hacer hover

Un footer sencillo con borde superior y texto centrado.

Conceptos que deberias aplicar

Revisa esta lista como checklist de todo lo aprendido en el curso:

Leccion Concepto Donde aplicarlo
Especificidad Selectores simples, sin !important Todo el proyecto
Box model box-sizing: border-box, padding Reset y componentes
Display block, flex, grid Layout general
Flexbox Navbar, botones del hero Alineacion 1D
Grid Cards de features Layout 2D responsivo
Responsive clamp(), auto-fill Sin media queries
Tipografia font-size fluido, line-height Titulos y párrafos
Colores oklch, gradientes Paleta y CTAs
Transiciones hover effects Cards y botones
Custom properties Variables de tema Todo el proyecto
CSS moderno Nesting, text-wrap: balance Organizacion

Pasos sugeridos

  1. Reset básico: aplica box-sizing: border-box y elimina margenes
  2. Variables: define tu paleta de colores, espaciado y tipografia
  3. Navbar: Flexbox horizontal, sticky, glassmorphism
  4. Hero: centrado, tipografia fluida con clamp(), botones CTA
  5. Features: Grid responsivo con auto-fill, cards con borde y hover
  6. Footer: borde superior, texto centrado, color secundario
  7. Transiciones: agrega hover effects a botones y cards
  8. Pulido: verifica responsive, contraste, consistencia visual

Criterios de evaluación

Tu landing page deberia cumplir:

  • Se ve bien en móvil (320px), tablet (768px) y desktop (1280px)
  • Usa custom properties para todos los colores
  • No hay media queries innecesarios (Grid auto-fill + clamp hacen el trabajo)
  • Las transiciones son suaves (200-300ms) y solo en transform/opacity
  • El contraste de texto cumple WCAG AA (4.5:1 mínimo)
  • El código CSS esta organizado y es legible

Ir más alla

Si terminas antes, intenta agregar:

  • Tema oscuro con @media (prefers-color-scheme: dark) o light-dark()
  • CSS nesting para organizar los estilos por componente
  • Scroll-driven animation para que las features aparezcan al hacer scroll
  • Una sección de precios con Grid y cards con variantes

Felicidades, has completado el curso de CSS Fundamentals. Ahora tienes las herramientas para construir cualquier interfaz web moderna con CSS puro.

Como abordar el proyecto
Trabaja sección por sección: primero la navbar (Flexbox + sticky), luego el hero (centrado + tipografia fluida), despues las features (Grid responsivo) y finalmente el footer. No intentes hacerlo todo a la vez.
Checklist de conceptos
Verifica que usaste: custom properties para colores, clamp() para tipografia fluida, Flexbox para la navbar, Grid con auto-fill para las cards, position sticky para la navbar, transiciones en los hovers, y unidades relativas (rem) en lugar de px. 
/* Solucion de referencia - Navbar */
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  position: sticky;
  top: 0;
  background: oklch(98% 0.005 260 / 90%);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid oklch(85% 0 0);
  z-index: 100;
}

nav ul {
  display: flex;
  gap: 1.5rem;
  list-style: none;
  padding: 0;
}

nav a {
  color: inherit;
  text-decoration: none;
  font-weight: 500;
}

/* Hero */
header {
  text-align: center;
  padding: clamp(3rem, 10vw, 8rem) 2rem;
  max-width: 720px;
  margin: 0 auto;
}

header h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.1;
  text-wrap: balance;
  margin-bottom: 1rem;
}

header p {
  font-size: 1.125rem;
  color: oklch(45% 0.01 260);
  margin-bottom: 2rem;
}

header div {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

header a {
  padding: 0.75rem 2rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  transition: transform 150ms ease;
}

header a:first-child {
  background: linear-gradient(135deg, #ff530f, #e6286a);
  color: white;
}

header a:last-child {
  border: 1px solid oklch(85% 0 0);
  color: oklch(15% 0.01 260);
}

/* Features */
#features {
  padding: 4rem 2rem;
  text-align: center;
}

#features h2 {
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  margin-bottom: 2rem;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  max-width: 960px;
  margin: 0 auto;
}

.features-grid article {
  padding: 2rem;
  border: 1px solid oklch(85% 0 0);
  border-radius: 12px;
  text-align: left;
  transition: border-color 200ms ease;
}

.features-grid article:hover {
  border-color: #b056ff;
}

/* Footer */
footer {
  text-align: center;
  padding: 2rem;
  border-top: 1px solid oklch(85% 0 0);
  color: oklch(45% 0.01 260);
}
Playground
Resultado