Tutorial Completo: Tienda Online de Libros

Aprende paso a paso a crear "El Túnel" - Una tienda de libros con HTML5 y CSS3

Índice del Tutorial

Introducción
Paso 1: Estructura de Carpetas
Paso 2: Estructura HTML Base
Paso 3: Crear el Encabezado
Paso 4: Crear la Portada
Paso 5: Sección de Recomendaciones
Paso 6: Carrusel de Libros
Paso 7: Pie de Página
Paso 8: Estilos CSS
Resultado Final

Introducción

En este tutorial aprenderás a crear una tienda online de libros completa llamada "El Túnel". El proyecto incluye:

Header con logo y búsqueda: Barra superior con funcionalidad de búsqueda y acciones de usuario
Menú de navegación: Navegación horizontal con hover effects
Portada impactante: Banner con imagen y texto superpuesto
Galería de recomendaciones: Grid de 4 columnas con cards de libros
Carrusel horizontal: Scroll de productos con precios y botón de compra
Sección informativa: Descripción de la librería con imagen
Footer completo: Información de contacto, enlaces y suscripción

Tecnologías utilizadas:

HTML5 - Estructura semántica
CSS3 - Estilos, Flexbox y Grid
Google Fonts - Tipografía personalizada
SVG Icons - Iconos vectoriales

Paso 1: Crear la Estructura de Carpetas

Paso 1

Lo primero es organizar nuestro proyecto con una estructura clara de carpetas:

myFirstProject/ ├── index.html ├── css/ │ └── estilos.css └── imagenes/ ├── portada.jpg ├── user-regular.svg ├── heart-regular.svg ├── bag-shopping-solid.svg ├── magnifying-glass-solid.svg ├── location-dot-solid.svg ├── phone-solid.svg ├── envelope-solid.svg ├── facebook-f.svg ├── x-twitter.svg ├── instagram.svg └── youtube.svg

Comandos en la terminal:

BASH
# Crear carpeta del proyecto
mkdir myFirstProject
cd myFirstProject

# Crear subcarpetas
mkdir css
mkdir imagenes

# Crear archivos
touch index.html
touch css/estilos.css
                

Consejo:

Descarga los iconos SVG desde Font Awesome o usa los que vienen en el proyecto original.

Paso 2: Estructura HTML Base

Paso 2

Crea el archivo index.html con la estructura básica:

HTML
<!DOCTYPE html><html lang="es"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="css/estilos.css"/><title>El Túnel - Tienda de Libros</title></head><body><!-- Aquí irá todo el contenido --></body></html>

Paso 3: Crear el Encabezado (Header)

Paso 3.1

Logo, Búsqueda y Acciones de Usuario

El header tiene dos partes: la barra superior con logo, buscador y iconos, y el menú de navegación.

HTML
<header class="encabezado"><!-- Parte superior: Logo + Buscador + Iconos --><div class="encabezado_arriba"><div><h1 class="logo-1">El Túnel</h1></div><!-- Buscador --><div class="buscar"><form class="buscar"><input class="input" type="search" placeholder="Buscar"/><button class="buscar_boton" type="submit"><img src="imagenes/magnifying-glass-solid.svg" alt="buscar"/></button></form></div><!-- Iconos de usuario --><div class="acciones_usuario"><a href="#" class="acciones_usuario_boton"><img src="imagenes/user-regular.svg" alt="usuario"/></a><a href="#" class="acciones_usuario_boton"><img src="imagenes/heart-regular.svg" alt="favoritos"/><span class="cuenta">5</span></a><a href="#" class="acciones_usuario_boton"><img src="imagenes/bag-shopping-solid.svg" alt="bolsa"/><span class="cuenta">3</span></a></div></div></header>

Paso 3.2

Menú de Navegación

Agrega el menú de navegación dentro del header:

HTML
<!-- Menú de navegación (dentro del header) --><div class="encabezado-menu"><nav class="navegador"><ul class="nav_list"><li class="nav_item"><a href="#">Inicio</a></li><li class="nav_item"><a href="#">Libros</a></li><li class="nav_item"><a href="#">Los más leídos</a></li><li class="nav_item"><a href="#">Accesorios</a></li><li class="nav_item"><a href="#">Sucursal</a></li></ul></nav></div>

Nota sobre el Header:

El header usa Flexbox para distribuir los elementos horizontalmente. Los iconos tienen badges circulares con números.

Paso 4: Crear la Portada con Imagen y Texto

Paso 4

La portada usa posicionamiento absoluto para superponer texto sobre la imagen:

HTML
<div class="portada"><img src="imagenes/portada.jpg" class="tunel-portada"><div class="portada-contenido"><h2 class="portada-titulo">
            ...Creando nuevos mundos, historias y recuerdos
        </h2><p class="portada-txt"><i>"Vivir consiste en construir futuros recuerdos"</i></p></div></div>

Técnica de superposición:

Se usa position: absolute en el contenido y transform: translate(-50%, -50%) para centrarlo perfectamente sobre la imagen.

Paso 5: Sección de Recomendaciones (Grid)

Paso 5

Esta sección usa CSS Grid para crear una cuadrícula de 4 columnas:

HTML
<section class="productos"><div class="titulo-b"><h2>Recomendaciones</h2></div><div class="contenedor"><!-- Card 1 --><article class="card"><div class="card-txt"><img src="URL_DE_LA_IMAGEN" class="img-libro"/><h3>Harry Potter y la piedra filosofal</h3><p>J. K. Rowling</p><a href="#" class="btn">Ver más</a></div></article><!-- Repetir para más libros... --></div></section>

CSS para el Grid:

CSS
.contenedor {
    display:grid;
    grid-template-columns:repeat(4, 1fr); /* 4 columnas iguales */gap:2em; /* Espacio entre cards */
}

.card {
    display:flex;
    flex-direction:column;
    transition:300ms ease-in-out;
}

.card:hover {
    transform:scale(1.05); /* Crece al hacer hover */
}
                

Paso 6: Carrusel Horizontal de Libros

Paso 6

El carrusel usa overflow-x: scroll para crear un scroll horizontal:

HTML
<section class="seccion__libros"><div class="barra_libros"><h2 class="titulo-c">Libros</h2><a href="#" class="mas__libros">Ver más</a></div><div class="carrusel__libros"><div class="elemento"><article class="card"><div class="card-txt"><img src="URL_IMAGEN" class="img-libro"/><h3>Fuerte es el silencio</h3><p>Elena Poniatowska</p><div class="box-compra"><span class="precio">$450.00</span><a href="#" class="btn-compra">Comprar</a></div></div></article></div><!-- Más elementos... --></div></section>

CSS para el Carrusel:

CSS
.carrusel__libros {
    display:flex;
    overflow-x:scroll; /* Permite scroll horizontal */padding:0.5em;
}

.box-compra {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:2em;
}
                

Paso 7: Pie de Página (Footer)

Paso 7

El footer usa CSS Grid con 3 columnas para organizar la información:

HTML
<footer class="main-footer"><!-- Columna 1: Información --><div class="footer__section"><h2 class="footer__title">El Túnel</h2><p class="footer__txt">
            Un espacio para los amantes de la literatura...
        </p><!-- Contacto --><div><img src="imagenes/location-dot-solid.svg" alt="ubicación"/><span>Av. Álvaro Obregón 90, Roma Nte., CDMX</span></div><!-- Redes sociales --><div class="redes-sociales"><a href="#" target="_blank"><img src="imagenes/facebook-f.svg" alt="facebook"/></a><!-- Más redes... --></div></div><!-- Columna 2: Enlaces --><div class="footer__section"><h2 class="footer__title">Información</h2><a href="" class="footer__link">Inicio</a><a href="" class="footer__link">Acerca de El Túnel</a><!-- Más enlaces... --></div><!-- Columna 3: Suscripción --><div class="footer__section"><h2 class="footer__title">Suscríbete</h2><p class="footer__txt">Recibe noticias de promociones...</p><div class="footer__subscripcion"><input type="email" class="footer__input" placeholder="Email"/><input type="submit" class="suscripcion__enviar"></div></div><!-- Copyright --><p class="copy">
        2024 © <strong>El Túnel</strong>. Todos los Derechos Reservados.
    </p></footer>

CSS para el Footer:

CSS
.main-footer {
    background-color:rgb(182, 154, 118);
    color:white;
    padding:15px 20px 30px 20px;
    display:grid;
    grid-template-columns:repeat(3, 1fr); /* 3 columnas */grid-gap:20px;
}

.copy {
    grid-column-start:span 3; /* Ocupa las 3 columnas */text-align:center;
}
                

Paso 8: Archivo CSS Completo (estilos.css)

Paso 8.1

Reset y Fuentes

CSS
/* Importar fuente de Google Fonts */@importurl('https://fonts.googleapis.com/css2?family=Caveat:wght@700&display=swap');

/* Reset general */* {
    margin:0;
    padding:0;
    box-sizing:border-box;
    text-decoration:none;
    list-style:none;
}
                

Paso 8.2

Estilos del Header

CSS
header {
    width:100%;
    background:white;
}

.encabezado_arriba {
    display:flex;
    justify-content:center;
    align-items:center;
}

.logo-1 {
    color:rgb(110, 46, 8);
    font-family:'Caveat', cursive;
    font-size:80px;
}

/* Barra de navegación */.encabezado-menu .navegador ul {
    display:flex;
    justify-content:center;
    background-color:rgb(182, 154, 118);
    padding:13px;
}

.encabezado-menu .navegador ul li {
    margin:0 50px;
}

.encabezado-menu .navegador ul li a:hover {
    color:rgb(110, 46, 8);
}
                

Paso 8.3

Estilos de la Portada

CSS
.tunel-portada {
    width:100%;
    height:25rem;
}

.portada-contenido {
    position:absolute;
    top:55%;
    left:50%;
    transform:translate(-50%, -50%);
    color:white;
    text-align:center;
    z-index:999;
}
                

Conceptos Clave del CSS:

Flexbox: Usado en header, cards, footer para alineación horizontal
Grid: Usado en la sección de recomendaciones (4 columnas) y footer (3 columnas)
Position Absolute: Para el texto superpuesto en la portada
Overflow-x scroll: Para el carrusel horizontal
Hover effects: transform: scale() en las cards
Responsive units: rem, em, % para adaptabilidad

Tabla de Propiedades Principales

Sección	Técnica CSS	Propiedades Clave
Header	Flexbox	display: flex, justify-content, align-items
Navegación	Flexbox + Hover	display: flex, :hover
Portada	Position Absolute	position: absolute, transform: translate()
Recomendaciones	CSS Grid	display: grid, grid-template-columns
Carrusel	Flexbox + Scroll	display: flex, overflow-x: scroll
Cards	Flexbox + Hover	flex-direction: column, transform: scale()
Footer	CSS Grid	display: grid, grid-template-columns: repeat(3, 1fr)

¡Resultado Final!

Si seguiste todos los pasos correctamente, ahora tendrás una tienda online de libros completamente funcional con:

✅ Header con logo, buscador y navegación
✅ Portada atractiva con texto superpuesto
✅ Galería de recomendaciones en grid 4x1
✅ Carrusel horizontal de productos con scroll
✅ Sección informativa sobre la librería
✅ Footer completo con contacto y suscripción
✅ Efectos hover en cards y menú
✅ Diseño semi-responsive

Para mejorar el proyecto:

Agrega media queries para hacerlo totalmente responsive
Implementa JavaScript para el carrusel y funcionalidad del carrito
Añade más animaciones CSS (transitions, keyframes)
Optimiza las imágenes para mejor rendimiento
Agrega formularios funcionales con validación

Comandos para visualizar tu proyecto:

BASH
# En la terminal, ve a tu proyecto
cd myFirstProject

# Abre el archivo en el navegador (Mac)
open index.html

# O usa un servidor local (si tienes Python)
python3 -m http.server 8000
# Luego abre: http://localhost:8000

Recursos Adicionales

Google Fonts: fonts.google.com
Font Awesome (iconos SVG): fontawesome.com
Imágenes de libros: Casa del Libro, Amazon, o crear mockups
CSS Grid Guide: CSS-Tricks
Flexbox Guide: CSS-Tricks

Próximos pasos:

Ahora que dominas la estructura HTML y CSS de una tienda online, puedes:

Agregar más páginas (catálogo, producto individual, carrito)
Implementar un backend con Node.js o PHP
Conectar a una base de datos (MySQL, MongoDB)
Agregar pasarela de pagos
Implementar sistema de autenticación de usuarios

¡Felicidades!

Has completado el tutorial de creación de una tienda online de libros.

Sigue practicando y experimentando con el código para mejorar tus habilidades.