Desafío 2 - Layout de e-commerce con Grid

En este desafío validaremos nuestros conocimientos de la propiedad grid en la creación de

layouts responsivos. Para lograrlo, deberás ocupar todos tus conocimientos a partir de los
requerimientos entregados.

Lee todo el documento antes de comenzar el desarrollo individual, para asegurarte de tener el
máximo de puntaje y enfocar bien los esfuerzos.

Descripción

En este desafío deberás maquetar la vista de una tienda online básica, que cuenta con: un menú
de navegación, una barra lateral con la cantidad de productos por categoría, una grilla de
productos y un pie de página.

Imagen 1. Mi E-commerce.
Fuente: Desafío Latam.
Requerimientos

1. Crear un layout con CSS Grid y su propiedad grid-template-areas.

(4 Puntos)

2. Crear una grilla de productos con CSS Grid.

(4 Puntos)

3. Utilizar Flexbox para la distribución de elementos de la barra lateral.

(1 Punto)

4. Utilizar Flexbox para la construcción de las tarjetas de productos.

(1 Punto)

¡Mucho éxito!

Consideraciones y recomendaciones
Puedes utilizar tu propia paleta de colores, imágenes, tipografías, e incluso la temática de la
tienda Online, lo importante será mantener el layout de referencia.

Recomendaciones:

Antes de iniciar con el desarrollo del desafío, te recomendamos analizar cómo está
compuesta la página web y cuáles son sus elementos.
Utiliza las siguientes imágenes como guía para identificar los componentes de nuestra tienda
online:
● Layout General: Diseño del layout y distribución de elementos
 Imagen 2. Layout General.
Fuente: Desafío Latam.

● Barra lateral: Contenedor flexible con orientación vertical.

Imagen 3. Barra lateral.

Fuente: Desafío Latam.
● Tarjeta de producto: Contenedor flexible con orientación vertical.

Imagen 4. Tarjeta de producto.

Fuente: Desafío Latam.