Estructuración HTML para Aplicaciones con Grids y Cards
Contenido del curso
Layout y componentes
Maquetación responsiva: pantallas de autenticación
- 5
Maquetación Responsive de Formulario de Creación de Contraseña
08:49 min - 6
Estilización de Formularios con CSS Grid y Flexbox
18:14 min - 7
Construcción de Pantalla de Confirmación de Email Enviado
11:26 min - 8
Maquetación de Pantalla de Login en HTML y CSS
08:19 min - 9
Maquetación de Formulario para Crear Cuenta en HTML y CSS
10:54 min - 10
Edición de Cuenta: Cambios en Inputs y Botones en Pantalla
04:52 min
Maquetación responsiva: vistas principales
- 11
Estructuración HTML para Aplicaciones con Grids y Cards
Viendo ahora - 12
Estilización de Cartas con CSS y Responsive Design
13:39 min - 13
Creación de Menú Desktop con HTML y CSS Básico
11:47 min - 14
Creación de Menú Responsive en HTML y CSS para Móviles
12:18 min - 15
Maquetación de Pantalla "Mi Orden" en HTML y CSS
05:44 min - 16
Estilos CSS para Pantalla de Orden en HTML
15:08 min - 17
Creación de Pantalla "Mis Órdenes" en HTML y CSS
04:25 min - 18
Estructuración de Navbar con HTML para Desktop y Mobile
04:50 min - 19
Estilos Responsivos para Navbar en HTML y CSS
20:17 min - 20
Maquetación de Detalle de Productos en HTML y CSS
19:18 min - 21
Estructura y Estilo de Pantalla del Carrito de Compras
11:12 min
Próximos pasos
Estructuración HTML para Aplicaciones con Grids y Cards
Resumen
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 clasemainContainer, que funciona como el contenedor externo encargado de centrar todo el contenido. - Dentro de esa sección se coloca un
<div>con la clasecards-container, diseñado específicamente para manejar la distribución en grid de los elementos. - Cada card individual vive en un
<div>con la claseProductCart.
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 claseproduct-img. Inicialmente el atributosrcqueda 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(oCtrl + F). - Se busca el patrón
src=""vacío y se reemplaza porsrc="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.