Crear la estructura base de una tienda online comienza por organizar correctamente el HTML antes de aplicar cualquier estilo visual. En esta sesión se construye paso a paso el esqueleto de una vista principal compuesta por cards de productos, preparando todo para que en una etapa posterior se apliquen estilos con CSS Grid y Flexbox.
¿Cómo se organiza el HTML de una vista con cards de productos?
El punto de partida es definir una jerarquía clara de contenedores dentro del <body>. La estrategia consiste en anidar elementos con responsabilidades específicas para facilitar el centrado y la distribución de las cards [00:55].
- Se crea una etiqueta
<section> con la clase mainContainer, que funciona como el contenedor externo encargado de centrar todo el contenido.
- Dentro de esa sección se coloca un
<div> con la clase cards-container, diseñado específicamente para manejar la distribución en grid de los elementos.
- Cada card individual vive en un
<div> con la clase ProductCart.
Esta separación en capas es fundamental: el contenedor externo controla el posicionamiento general, mientras que el contenedor interno se encargará del layout en columnas cuando se aplique CSS Grid.
¿Qué elementos componen cada card de producto?
Cada card se divide en tres bloques principales que replican el diseño esperado tanto en desktop como en mobile [01:40].
- Imagen del producto: se utiliza una etiqueta
<img> con la clase product-img. Inicialmente el atributo src queda vacío hasta que se vinculan las imágenes reales.
- Información textual: un
<div> agrupa dos etiquetas <p>, una para el precio (por ejemplo, $120.00) y otra para el nombre del producto.
- Ícono de acción: se emplea la etiqueta
<figure> para envolver una imagen SVG que representa el botón de agregar al carrito.
La razón de separar textos e ícono en contenedores distintos es que posteriormente se aplicará Flexbox para alinearlos horizontalmente y controlar el espaciado entre ambos bloques [02:10].
¿Por qué se usa la etiqueta figure?
La etiqueta <figure> es un elemento semántico de HTML que indica contenido autocontenido como ilustraciones, diagramas o íconos. Usarla para el SVG del carrito aporta significado al marcado y mejora la accesibilidad del documento [02:30].
¿Cómo replicar cards rápidamente?
Una vez que la primera card está completa, se copia y pega múltiples veces dentro del cards-container para simular un catálogo real. En este caso se generaron aproximadamente quince cards idénticas [03:10]. La cantidad importa porque permite verificar el comportamiento del scroll y la distribución en columnas cuando se aplique el CSS.
¿Cómo agregar imágenes desde Pexels con reemplazo masivo?
Para vincular imágenes reales a todas las cards sin editarlas una por una, se utiliza una técnica muy práctica con el editor de código [03:45].
- Se busca una imagen libre de derechos en pexels.com y se copia su URL.
- En el editor se abre la función de buscar y reemplazar con
Command + F (o Ctrl + F).
- Se busca el patrón
src="" vacío y se reemplaza por src="URL_de_la_imagen".
- Se presiona el botón de reemplazar todo para actualizar todas las cards de una sola vez.
Este flujo de trabajo ahorra tiempo considerable cuando se trabaja con estructuras repetitivas. Las imágenes aparecerán en su tamaño original, que suele ser muy grande, pero eso se corregirá al definir dimensiones con CSS.
¿Qué diferencia habrá entre desktop y mobile?
El diseño contempla una grid responsive: en desktop se muestran más columnas de cards, mientras que en mobile la cantidad de columnas se reduce para adaptarse al ancho de pantalla [00:30]. Esta variación se controla mediante CSS Grid y media queries, temas que se abordan en la clase siguiente.
Con esta estructura HTML sólida, el siguiente paso natural es aplicar los estilos visuales que transformen estos bloques de contenido en un catálogo atractivo. ¿Ya tienes pensado cuántas columnas usarías en tu grid? Comparte tu enfoque en los comentarios.
