🎨 Módulo 2 - Maquetación

Maquetación con HTML5, CSS3 y Bootstrap

¿Quieres crear páginas web modernas y responsivas desde cero? En esta guía aprenderás a usar HTML5, CSS3, diseño responsive y Bootstrap 5 para acelerar tu desarrollo.

⏱️ ~10 min de lectura 🎯 Nivel: Principiante 💻 Con ejemplos de código

Todo proyecto web comienza con una estructura limpia y semántica. En esta guía aprenderás los fundamentos de HTML5, CSS3 y cómo usar Bootstrap para maquetar rápido sin sacrificar calidad.

🗺️ En esta guía
  1. Estructura básica de HTML5
  2. Etiquetas semánticas
  3. Diseño responsive con media queries
  4. Maquetar rápido con Bootstrap

Estructura básica de un documento HTML5

Todo proyecto web comienza con una estructura limpia:

📄 Ejemplo: Estructura HTML5 básica
<!DOCTYPE html>
<html lang="es">
<head>    
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mi primera página</title>                
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>    
  <header class="bg-primary text-white p-3">
    <h1>Bienvenido</h1>
  </header>
  <main class="container mt-4">
    <p>Este es el contenido principal.</p>
  </main>
</body>
</html>

Resultado: Una página básica con Bootstrap incluido para estilos rápidos.

Etiquetas semánticas: más que divs

HTML5 introdujo etiquetas que describen el contenido:

✅ Beneficios de usar etiquetas semánticas

Mejoran la accesibilidad para lectores de pantalla, optimizan el SEO y hacen tu código más legible para otros desarrolladores. 

<header>, <nav>, <main>, <section>, <article>, <footer>

Usarlas mejora la accesibilidad y SEO. Ejemplo:

<header>
  <h1>Mi sitio web</h1>
</header>
<nav>
  <ul>
    <li><a href="#">Inicio</a></li>
    <li><a href="#">Sobre mí</a></li>
    <li><a href="#">Contacto</a></li>
  </ul>
</nav>
<main>
  <section>
    <h2>Blog</h2>   
    <article>
      <h3>Primer post</h3>
      <p>Contenido del post...</p>
    </article>
  </section>
</main>
<footer>
  <p>© 2026 Mi sitio web</p>
</footer>

Esto estructura tu página claramente:

  • <header>: encabezado con logo y navegación
  • <nav>: menú de navegación principal
  • <main>: contenido principal de la página
  • <section>: sección temática dentro del contenido
  • <article>: contenido independiente (post, noticia)
  • <footer>: pie de página con información legal

Diseño responsivo con media queries

Para que tu sitio se vea bien en móviles, tablets y desktop:

@media (max-width: 768px) {
  .container {
    padding: 10px;
  }
  h1 {
    font-size: 1.5rem;
  }
  .nav-menu {
    flex-direction: column;
  }
}
💡 Consejo profesional

Usa el enfoque mobile-first: diseña primero para móvil y luego escala hacia arriba con min-width. Es más eficiente y mejora el rendimiento en dispositivos móviles.

Usar Bootstrap para maquetar rápido

Bootstrap te da clases listas para usar que aceleran el desarrollo:

🔹 Sistema de grillas

<div class="row">
  <div class="col-md-6">Columna 1</div>
  <div class="col-md-6">Columna 2</div>
</div>

🔹 Componentes predefinidos

<button class="btn btn-primary">Click aquí</button>
<div class="alert alert-success">¡Éxito!</div>
<nav class="navbar navbar-expand-lg">...</nav>

🔹 Iconos con FontAwesome

<i class="fas fa-home"></i> Inicio
<i class="fas fa-user"></i> Perfil
<i class="fas fa-cog"></i> Configuración
⚠️ Nota importante

Bootstrap es excelente para prototipos y proyectos rápidos, pero para producción considera personalizar los estilos o usar solo el sistema de grillas para mantener el CSS ligero.

¿Qué sigue después de maquetar?

Este es solo el segundo paso del desarrollo full-stack. En el siguiente módulo, aprenderás a darle vida a tus páginas con JavaScript y jQuery.

📚 ¿Quieres la versión completa del libro?

Esta guía es una versión resumida del libro "Programación Full-Stack", que incluye ejercicios resueltos, códigos listos y explicaciones profundas.

Comprar en Amazon →

¿Tienes dudas sobre HTML5, CSS3 o Bootstrap? ¡Déjalas en los comentarios! 👇