Proyecto final

Construye una landing page completa y responsive desde cero.

Has aprendido HTML semántico, formularios, selectores CSS, el modelo de caja, Flexbox, Grid y diseño responsive. Ahora es momento de juntarlo todo en un proyecto real.

Vas a construir una landing page para un producto ficticio: una app de productividad llamada “FocusFlow”. No vas a copiar y pegar. Vas a tomar decisiones, resolver problemas y aplicar todo lo que sabes.

Lo que vas a construir

Una landing page con estas secciones:

Header con logo y navegación
Hero con título, descripción y botón CTA
Features con 3 tarjetas de características
Pricing con tabla de precios
CTA con formulario de registro
Footer con enlaces y copyright

La página será responsive (mobile-first) y usará las técnicas que aprendiste en los capítulos anteriores.

Paso 1: Estructura del proyecto

Abre tu terminal y crea el proyecto:

mkdir focusflow && cd focusflow
touch index.html style.css
code .

Tu proyecto debería verse así:

Directoriofocusflow/
- index.html
- style.css

Paso 2: El HTML completo

Escribe este HTML en tu index.html. Léelo con atención: cada etiqueta tiene un propósito semántico claro.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>FocusFlow — Productividad sin distracciones</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- Header -->
  <header class="header">
    <a href="/" class="logo">FocusFlow</a>
    <nav class="nav">
      <a href="#features">Features</a>
      <a href="#pricing">Precios</a>
      <a href="#registro">Registro</a>
    </nav>
  </header>

  <main>
    <!-- Hero -->
    <section class="hero">
      <h1>Tu tiempo merece <span class="highlight">enfoque</span></h1>
      <p class="hero-subtitle">
        FocusFlow elimina las distracciones y te ayuda a completar
        lo que importa. Sin ruido, sin excusas.
      </p>
      <a href="#registro" class="btn btn-primary">Empieza gratis</a>
    </section>

    <!-- Features -->
    <section id="features" class="features">
      <h2 class="section-title">Todo lo que necesitas</h2>
      <div class="features-grid">
        <article class="feature-card">
          <span class="feature-icon">&#9201;</span>
          <h3>Temporizador Pomodoro</h3>
          <p>Bloques de trabajo de 25 minutos con descansos inteligentes que se adaptan a tu ritmo.</p>
        </article>
        <article class="feature-card">
          <span class="feature-icon">&#9745;</span>
          <h3>Tareas priorizadas</h3>
          <p>Organiza tu día con una lista clara. Primero lo importante, después lo urgente.</p>
        </article>
        <article class="feature-card">
          <span class="feature-icon">&#128202;</span>
          <h3>Estadísticas diarias</h3>
          <p>Mira cuánto avanzas. Gráficos simples que muestran tu productividad real.</p>
        </article>
      </div>
    </section>

    <!-- Pricing -->
    <section id="pricing" class="pricing">
      <h2 class="section-title">Planes simples</h2>
      <div class="pricing-grid">
        <article class="pricing-card">
          <h3>Gratis</h3>
          <p class="price">$0<span>/mes</span></p>
          <ul>
            <li>Temporizador básico</li>
            <li>5 tareas por día</li>
            <li>Estadísticas semanales</li>
          </ul>
          <a href="#registro" class="btn btn-secondary">Empezar</a>
        </article>
        <article class="pricing-card pricing-featured">
          <h3>Pro</h3>
          <p class="price">$9<span>/mes</span></p>
          <ul>
            <li>Temporizador personalizado</li>
            <li>Tareas ilimitadas</li>
            <li>Estadísticas avanzadas</li>
            <li>Integraciones</li>
            <li>Soporte prioritario</li>
          </ul>
          <a href="#registro" class="btn btn-primary">Elegir Pro</a>
        </article>
      </div>
    </section>

    <!-- Registro -->
    <section id="registro" class="registro">
      <h2 class="section-title">Crea tu cuenta</h2>
      <form class="registro-form">
        <label for="nombre">Nombre</label>
        <input type="text" id="nombre" name="nombre" required minlength="2" placeholder="Tu nombre">

        <label for="email">Email</label>
        <input type="email" id="email" name="email" required placeholder="tu@email.com">

        <label for="password">Contraseña</label>
        <input type="password" id="password" name="password" required minlength="8" placeholder="Mínimo 8 caracteres">

        <button type="submit" class="btn btn-primary">Crear cuenta gratis</button>
      </form>
    </section>
  </main>

  <!-- Footer -->
  <footer class="footer">
    <div class="footer-content">
      <p class="footer-logo">FocusFlow</p>
      <nav class="footer-nav">
        <a href="#features">Features</a>
        <a href="#pricing">Precios</a>
        <a href="#">Privacidad</a>
        <a href="#">Términos</a>
      </nav>
      <p class="footer-copy">&copy; 2024 FocusFlow. Hecho como proyecto de aprendizaje.</p>
    </div>
  </footer>
</body>
</html>

Observa cómo cada sección usa etiquetas semánticas: <header>, <main>, <section>, <article>, <nav>, <footer>. Los formularios tienen <label> conectados, los enlaces tienen href significativos, y la estructura es clara.

Paso 3: Los estilos CSS

Ahora escribe tu style.css. Vamos parte por parte.

Reset y base

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: system-ui, -apple-system, sans-serif;
  line-height: 1.6;
  color: #e4e4e7;
  background: #0a0a0f;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  background: #0e0e16;
  border-bottom: 1px solid #1e1e35;
  position: sticky;
  top: 0;
  z-index: 100;
}

.logo {
  font-size: 1.25rem;
  font-weight: 800;
  color: #00ff41;
}

.nav {
  display: flex;
  gap: 1.5rem;
}

.nav a {
  font-size: 0.9rem;
  color: #71717a;
  transition: color 0.2s;
}

.nav a:hover {
  color: #00d4ff;
}

Hero

.hero {
  text-align: center;
  padding: 4rem 1.5rem;
  max-width: 700px;
  margin: 0 auto;
}

.hero h1 {
  font-size: clamp(2rem, 6vw, 3.5rem);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 1.5rem;
}

.highlight {
  color: #00ff41;
}

.hero-subtitle {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  color: #71717a;
  margin-bottom: 2rem;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

Botones

.btn {
  display: inline-block;
  padding: 0.75rem 2rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 1rem;
  border: none;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  text-align: center;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn-primary {
  background: #00ff41;
  color: #0a0a0f;
}

.btn-primary:hover {
  box-shadow: 0 4px 20px rgba(0, 255, 65, 0.3);
}

.btn-secondary {
  background: transparent;
  color: #e4e4e7;
  border: 1px solid #1e1e35;
}

.btn-secondary:hover {
  border-color: #00ff41;
  box-shadow: 0 4px 20px rgba(0, 255, 65, 0.1);
}

Secciones y títulos

.section-title {
  text-align: center;
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  font-weight: 800;
  margin-bottom: 2.5rem;
}

Features

.features {
  padding: 4rem 1.5rem;
}

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

.feature-card {
  background: #13131f;
  border: 1px solid #1e1e35;
  border-radius: 12px;
  padding: 2rem;
  transition: transform 0.3s, border-color 0.3s;
}

.feature-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 255, 65, 0.3);
}

.feature-icon {
  font-size: 2rem;
  display: block;
  margin-bottom: 1rem;
}

.feature-card h3 {
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
}

.feature-card p {
  color: #71717a;
  font-size: 0.95rem;
}

Pricing

.pricing {
  padding: 4rem 1.5rem;
  background: #0e0e16;
}

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

.pricing-card {
  background: #13131f;
  border: 1px solid #1e1e35;
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
}

.pricing-featured {
  border-color: #00ff41;
  box-shadow: 0 0 30px rgba(0, 255, 65, 0.08);
}

.price {
  font-size: 3rem;
  font-weight: 800;
  margin: 1rem 0;
}

.price span {
  font-size: 1rem;
  font-weight: 400;
  color: #71717a;
}

.pricing-card ul {
  text-align: left;
  margin: 1.5rem 0;
}

.pricing-card li {
  padding: 0.5rem 0;
  border-bottom: 1px solid #1e1e35;
  color: #a1a1aa;
  font-size: 0.95rem;
}

.pricing-card li::before {
  content: "✓ ";
  color: #00ff41;
  font-weight: bold;
}

.pricing-card .btn {
  width: 100%;
  margin-top: 1rem;
}

Formulario de registro

.registro {
  padding: 4rem 1.5rem;
}

.registro-form {
  max-width: 400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.registro-form label {
  font-size: 0.9rem;
  font-weight: 600;
  margin-top: 0.5rem;
}

.registro-form input {
  padding: 0.75rem 1rem;
  border: 1px solid #1e1e35;
  border-radius: 8px;
  background: #13131f;
  color: #e4e4e7;
  font-size: 1rem;
  transition: border-color 0.2s;
}

.registro-form input:focus {
  outline: none;
  border-color: #00ff41;
  box-shadow: 0 0 0 3px rgba(0, 255, 65, 0.1);
}

.registro-form .btn {
  margin-top: 1rem;
}

.footer {
  padding: 3rem 1.5rem;
  border-top: 1px solid #1e1e35;
}

.footer-content {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.footer-logo {
  font-size: 1.25rem;
  font-weight: 800;
  color: #00ff41;
  margin-bottom: 1rem;
}

.footer-nav {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.footer-nav a {
  color: #71717a;
  font-size: 0.9rem;
  transition: color 0.2s;
}

.footer-nav a:hover {
  color: #00d4ff;
}

.footer-copy {
  color: #52525b;
  font-size: 0.85rem;
}

Paso 4: Verificación

Abre con Live Server y revisa cada sección visualmente.
Activa el modo responsive en DevTools (el icono de dispositivo móvil) y prueba en 375px, 768px y 1024px.
Verifica la accesibilidad: ¿todos los inputs tienen label? ¿Las imágenes tienen alt? ¿La estructura semántica es correcta?
Prueba el formulario: intenta enviarlo sin llenar los campos obligatorios. ¿Aparecen los mensajes de validación?
Prueba los enlaces internos: los links del header deben hacer scroll suave a cada sección (gracias a scroll-behavior: smooth).

Ideas para mejorar

Tu landing page ya funciona. Si quieres llevarla más lejos, aquí tienes desafíos adicionales:

Agrega un menú hamburguesa que se muestre solo en móvil (recuerda: solo con CSS, usando :checked en un checkbox oculto).
Crea una segunda página (about.html) y enlázala desde el footer.
Agrega animaciones al hacer scroll (puedes usar @keyframes y clases con JavaScript cuando lo aprendas).
Cambia la paleta de colores para crear una versión light mode.
Despliega tu página en GitHub Pages, Netlify o Vercel (lo aprenderás en el libro de Git).

Resumen: lo que has logrado en este libro

Tómate un momento para apreciar lo que aprendiste. Cuando empezaste este libro, sabías hacer un “Hola mundo” en HTML. Ahora puedes construir una landing page profesional y responsive desde cero.

Recapitulemos:

HTML semántico: usas las etiquetas correctas para estructura, accesibilidad y SEO.
Formularios: creas formularios con validación nativa, labels conectados y tipos de input apropiados.
Selectores CSS: entiendes la cascada, especificidad y herencia.
El modelo de caja: controlas margin, padding, border y box-sizing: border-box.
Flexbox: alineas y distribuyes elementos en una dirección.
CSS Grid: creas layouts bidimensionales con filas, columnas y áreas nombradas.
Diseño responsive: tu web se adapta a cualquier pantalla con mobile-first, media queries y clamp().
Proyecto real: construiste una landing page completa aplicando todo lo anterior.

HTML y CSS son la base de todo lo que ves en la web. React, Vue, Astro, Tailwind — todos generan HTML y CSS al final. Lo que acabas de aprender nunca va a dejar de ser relevante.

En el siguiente libro vas a darle vida a tus páginas con JavaScript: interactividad, lógica, datos dinámicos y mucho más.

Siguiente capítuloJavaScript modernoDe variables a async/await, todo lo que necesitas saber.