CursosEmpresasBlogLiveConfPrecios

Estructuración HTML para Aplicaciones con Grids y Cards

Clase 11 de 22 • Curso Práctico de Frontend Developer

Clase anteriorSiguiente clase
Resumen

La página de inicio es la página web principal de un sitio web y lo primero que verán las personas al conocer tu marca. En este caso contiene una imagen por cada producto, con su precio y nombre, también un ícono que va a permitir agregar el artículo al carrito de compras.

En este nuevo módulo trabajaremos las vistas principales. Comenzamos con el HTML de la página de inicio, es decir, las cards que ayudan al usuario a revisar cuáles son los productos disponibles en un e-commerce.

cards.png

Cómo crear la estructura HTML de la página de inicio

Estos son los pasos a seguir para maquetar las secciones de un e-commerce. ¡Manos a la obra!

    1. Creamos una sección principal
<section class="main-container"></section>
    1. Dentro colocamos un div que funcionara como contenedor de las tarjetas, permitiéndonos centrarlas
 <div class="cards-container"></div>
    1. Por último estructuramos una tarjeta y la repetimos varias veces
<div class="product-card">
        <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
        <div class="product-info">
          <div>
            <p>$120,00</p>
            <p>Bike</p>
          </div>
          <figure>
            <img src="./icons/bt_add_to_cart.svg" alt="">
          </figure>
        </div>
      </div>

Cómo colocar imágenes en HTML

El elemento HTML img incrusta una imagen dentro de un documento. Su atributo de “src” es para mostrar en dónde se encuentra la imagen. Puede ser en alguna carpeta o una URL.

Por su parte, alt sirve para agregar una descripción a nuestra imagen. Esto es útil por cuestiones de SEO (optimización para buscadores) y también para mejorar la accesibilidad del sitio.

Repasa esta información aquí 👈

¿Qué contenedores usar?

Existen dos etiquetas que nos permiten organizar imágenes de una manera semántica.

Haz clic en su respectivo enlace para descubrir sus principales características y formas de implementación.

Contribución creada por: Guadalupe Monge Barale, con los aportes de María del Pilar Chavez y Brayan Mamani.