Programación Web • ITI-07 •

Actividad práctica: Landing Page Personal (HTML + CSS)

Objetivo

Poner en práctica los fundamentos de maquetación web y estilos CSS, enfocándose en la estructura visual, el uso de Flexbox, tipografías y espaciados consistentes.

Tecnologías a utilizar

  • HTML
  • CSS
  • Google Fonts
  • Flexbox

❌ No se permite el uso de frameworks CSS (Bootstrap, Tailwind, etc.)

Estructura de la página

La landing page debe contener las siguientes secciones:

1 Header

  • Logo o nombre personal
  • Menú de navegación con al menos 3 enlaces

2 Hero

  • Título principal
  • Texto descriptivo
  • Botón de llamada a la acción

3 Servicios

  • Sección con 3 cards
  • Cada card debe incluir:
    • Título del servicio
    • Descripción breve
  • Texto de derechos de autor o enlaces básicos

Código base – Landing Page Personal

Este código sirve como punto de partida para la actividad de maquetación de una landing page usando HTML + CSS y Flexbox.

💡 Nota:
Este código es solo una base inicial. Se espera que el estudiante lo modifique, mejore estilos y agregue responsividad.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Landing Personal</title>

  <!-- Google Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;700&display=swap" rel="stylesheet">

  <!-- CSS -->
  <link rel="stylesheet" href="styles.css">
</head>
<body>

  <!-- Header -->
  <header class="header">
    <div class="logo">TuNombre</div>
    <nav class="nav">
      <a href="#">Inicio</a>
      <a href="#">Servicios</a>
      <a href="#">Contacto</a>
    </nav>
  </header>

  <!-- Hero -->
  <section class="hero">
    <div class="hero-content">
      <h1>Diseño experiencias digitales</h1>
      <p>Creo interfaces limpias, funcionales y centradas en el usuario.</p>
      <button>Ver mi trabajo</button>
    </div>
  </section>

  <!-- Servicios -->
  <section class="services">
    <div class="card">
      <h3>UI Design</h3>
      <p>Interfaces modernas y visualmente atractivas.</p>
    </div>

    <div class="card">
      <h3>UX Research</h3>
      <p>Diseño basado en investigación de usuarios.</p>
    </div>

    <div class="card">
      <h3>Frontend</h3>
      <p>Maquetación clara y responsiva.</p>
    </div>
  </section>

  <!-- Footer -->
  <footer class="footer">
    <p>© 2026 - TuNombre</p>
  </footer>

</body>
</html>

Entregables

  • Archivo index.html
  • Archivo styles.css
  • Estructura semántica correcta
  • Código ordenado y comentado

Resultado esperado

Una landing page funcional, limpia y visualmente atractiva que demuestre el dominio básico de maquetación y estilos CSS, ideal para iniciar un portafolio personal.