Maquetación con HTML5, CSS3 y Bootstrap: Guía Práctica para Principiantes

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

Estructura básica de un documento HTML5

Todo proyecto web comienza con una estructura limpia:

<!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>

Esto crea una página básica con Bootstrap incluido para estilos rápidos.

El código anterior genera esto:

Mi primera página

Bienvenido

Este es el contenido principal.

Etiquetas semánticas: más que divs

HTML5 introdujo etiquetas que describen el contenido:

<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>© 2025 Mi sitio web</p>
</footer>

Esto estructura tu página claramente:

  • : encabezado
  • : contenido principal
  • : sección temática
  • : contenido independiente
  • : pie de página

Diseño responsivo con media queries

Para que tu sitio se vea bien en móviles:

@media (max-width: 768px) {
  .container {
    padding: 10px;
  }
  h1 {
    font-size: 1.5rem;
  }
}

Usar Bootstrap para maquetar rápido

Bootstrap te da clases listas para usar:


  
Columna 1

  
Columna 2

Y con FontAwesome:

 Inicio

¿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.

Volver a la Guía Full-Stack → Ver Módulo 1: Fundamentos →

¿Quieres la versión completa del libro?

Esta guía es una versión resumida del libro "Programación Full-Stack", que incluye:

  • ✅ Todos los ejercicios resueltos paso a paso
  • ✅ Códigos listos para copiar y probar
  • ✅ Explicaciones profundas de seguridad y buenas prácticas
  • ✅ Acceso a actualizaciones futuras
Comprar en Amazon →

¿Tienes dudas o sugerencias? ¡Déjalas en los comentarios!