PASO 1: creamos un archivo html con la estructura básica en VScode, si se quiere, agregamos un fondo al body, para que sea mas atractivo, asi.👇
PASO 2: en el body creamos un un div para el contenedor, en el class el nombre es opcional, dentro de ese div creamos otros div, con la intención de hacer 4 columnas con sus respectivas imágenes, esta puede ser extraídas de un sitio web o desde su PC,_ aunque desde el pc es complicado_ para ver esas imágenes, entonces lo hacemos para poder ver las columnas al usar flex, en VScode se verían así.👇
PASO 3: creamos un archivo CSS, desde allí lo primero es agregar un (box-sizing: border-box) para que los width y heights, se adapten a nuestro gusto, al final también podemos agregar un … @media (max-width:) para las diferentes dimensiones de pantallas, yo lo puse que unos des 800px y otro de 600px, para que son se amontonen cuando se cambie de dimensión, así.👇
PASO 4: aunque si estamo haciendo el proyecto vemos como va quedando el mismo, aquí una muestra de como se ve en le navegador el resultado final, así.👇
FINAL: ahora vemos como se ve el trabajo con dimensiones diferentes, una desde 800px y la otra desde 600px, así…👇
