Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Página de inicio: HTML

11/22
Recursos

Aportes 35

Preguntas 14

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Les dejo el link de la imagen de la bicicleta que usó la profe por si lo quieren hacer igual que ella

este comando es util cada vez que se crea un nuevo archivo html, el cual se basa en un gran porcentaje sobre un archivo de una clase pasada. en vez de copiar y pegar manualmente simplemente copiamos el archivo completo y lo editamos a nuestra necesidad

$ cp clase5.html clase6.html

Esto creara el archivo clase6.html copiando el archivo clase5.html

me gusta mucho la profe, explica muy bien, pero no puedo evitar sentir un poco de molestia al ver que cada pagina tiene sus propios estilos y no estan todos en un solo archivo de css.
En los otros cursos se recalca hasta mas no poder que tener los archivos separados son las buenas practicas…

Yo después de ver el tip del min 6:23 —> 😱🤯😍

alt + shift + arrowDown = Copia y pega el texto seleccionado

Mas atajos Windows

Seria genial que desde un principio todo el proyecto tuviese una estructura de archivos adecuada.

Descarga imágenes en el tamaño personalizado:
Una sugerencia es descargar la imagen en un tamaño adecuado al uso que le vas a dar en tú página web.

Es un tema de optimización y velocidad de carga de tu website.

Aunque con CSS puedes cambiar el tamaño final que se va a mostrar, esto no evita que el navegador cargue los archivos con su tamaño real desde el servidor.

Adicional a esto puedes usar servicios online para reducir el peso de tu archivo con pocas perdidas de calidad, redimensionar, recortar, entre otros procesos.

Servicios como:
tinypng.com
iloveimg.com/es

En la página de pexels.com
puedes especificar el tamaño en el que deseas la imagen en la flecha hacia abajo del botón “Descarga gratuita”

Les dejo un icono del carrito por si lo quieren usar. Yo le agregue un fondo y lo hice circular.

Si llegan a trabajar con React o Vue.js los archivos suelen estar así como los de la profe (los estilos van en <style> </style>). Claro que es todo un sistema donde se crean componentes para evitar que se repita todo.

Terminado

Para crear toda la estructura en una sola linea pueden escribir esto:

section.main-container>div.card-container>div.product-card>img.product-img+(div>p{$120,00}+p{Biker})+figure>img

Les dejo una forma de abreviar y no tener que copiar y pegar cada elemento, espero les sirva:
div.product-card*14{<img src="" alt=""><div><p>$120,00</p><p>Bike</p></div><figure><img src="./icons/bt_add_to_cart.svg" alt=""></figure>$}

En este enlace pueden encontrar muchas mas formas de ahorrar tiempo:
https://coderslink.com/talento/blog/ahorra-tiempo-al-escribir-codigo-html-en-visual-studio-code-utilizando-emmet/

Que facil hace todo!! 😲

Si alguno tiene un servidor xampp, laragon es decir que instala php, pueden hacer esto para no pegar 15 veces el product-card. Pero el archivo debe ser extension .php no .html

            <?php for ($i = 0; $i < 16; $i++) {?>
                <div class="product-card">
                    <img src="./img/bike.jpg" alt="bike">
                    <div>
                        <p>$120,00</p>
                        <p>Bike</p>
                    </div>
                    <figure>
                        <img src="./icons/bt_add_to_cart.svg" alt="add">
                    </figure>
                </div>
            <?php }?>

para Windows, el comando que la profesora usó en el minuto 6:02 fue presionando Ctrl + H

Les comparto las fotos que se encuentran en los diseños en Figma y la imagen que utiliza la profe.

Link

Un pequeño aporte: recuerden cerrar la etiqueta head (</head>) En el copy-paste se pasó por alto.

PD. Para todos los compañeros que están incómodos con los métodos de maquetación… Es solo una clase práctica de cómo maqueta un diseño. Las clases de mejores prácticas y desarrollo están en otros cursos. Por eso es una escuela de lo más básico a lo más avanzado. Paciencia. Saludos

Herramienta en VSC para buscar y reemplazar texto en el código.

ok esto a sido un poco mas complicado, pero mas o menos va quedando, aun falta que mejorar
https://kaleidoscopic-rugelach-8f7aef.netlify.app/

Estos atajos - min 23 - son unos salvavidas

Aquí les dejo mi diseño como lo elabore cualquier recomendación o sugerencia me informan posdata que hermoso curso

Para mi yo estructuré el html de la siguiente forma:

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="Yard Sale" content="Ventas de garajes modernos">
    <meta name="robots" content="index,follow">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Yard Sale</title>
    <link rel="stylesheet" href="./style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Quicksand:[email protected];500;700&display=swap" rel="stylesheet">
</head>

<body>
    <section class="main-container">
        <div class="cards-container">

            <div class="product-card">
                <img src="./assets/images/round_shelf.jpg" alt="Product" class="product-image">
                <div class="info-container">
                    <div>
                        <p class="price">$ 35,00</p>
                        <p class="description">Round shelf</p>
                    </div>
                    <div>
                        <i class="icon-add-car"></i>
                    </div>
                </div>
            </div>

            <div class="product-card">
                <img src="./assets/images/retro_refrigerator.jpg" alt="Product" class="product-image">
                <div class="info-container">
                    <div>
                        <p class="price">$ 120,00</p>
                        <p class="description">Retro refrigerator</p>
                    </div>
                    <div>
                        <i class="icon-add-car"></i>
                    </div>
                </div>
            </div>

        </div>
    </section>
</body>

</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Quicksand:[email protected];500;700&display=swap" rel="stylesheet">
    <title>Document</title>
    <style>

 :root {
      --white: #FFFFFF;
      --black: #000000;
      --very-light-pink: #C7C7C7;
      --text-input-field: #F7F7F7;
      --hospital-green: #ACD9B2;
      --sm: 14px;
      --md: 16px;
      --lg: 18px;
    }
        body{
            margin: 0;
        }

        .cards-container{
            display: grid;
            grid-template-columns:repeat(auto-fill,240px) ;
            gap: 26px;
            place-content: center;
        }
        .product-card{

            width: 240px;
        }

        .product-card  img {

        width: 240px;
        height: 240px;
        border-radius: 20px;
        object-fit: cover;

        }

        .product-info figure img {
         
         width: 5px;
        height: 5px;
      
        }

        .product-info{
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 12px;

        }
        .product-info figure  {
         
        margin: 0;
        }

        .product-info figure img {
         
         width: 35px;
        height: 35px;
      
        }

        .product-info div p:nth-child(1){
            font-weight: bold;
            font-size: var(--md);
            margin-top: 0;
            margin-bottom: 16px;
        }
        .product-info div p:nth-child(2){
            
            font-size: var(--sm);
            margin-top: 0;
            margin-bottom: 0;
            color: var(--very-light-pink);
        }

        @media (max-width:640px) {

            .cards-container{
         
            grid-template-columns:repeat(auto-fill,240px) ;
          
        }
        .product-card{

            width: 140px;
        }

        .product-card  img {

        width: 140px;
        height: 140px;
        

        }
            
        }
</style>
<body>
    <section class="main-container">
        <div class="cards-container">
            <div class="product-card">
                <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?cs=srgb&dl=pexels-pixabay-276517.jpg&fm=jpg" alt="">
                <div class="product-info">
                    <div>
                        <p>$120,00</p>
                        <p>Bike</p>

                    </div>
                    <figure>
                        <img src="./icons/casco.png" alt="">
                    </figure>
                    
                </div>
                
            </div>
            <div class="product-card">
                <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?cs=srgb&dl=pexels-pixabay-276517.jpg&fm=jpg" alt="">
                <div class="product-info">
                    <div>
                        <p>$120,00</p>
                        <p>Bike</p>

                    </div>
                    <figure>
                        <img src="./icons/casco.png" alt="">
                    </figure>
                    
                </div>
               

            </div>
            <div class="product-card">
                <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?cs=srgb&dl=pexels-pixabay-276517.jpg&fm=jpg" alt="">
                <div class="product-info">
                    <div>
                        <p>$120,00</p>
                        <p>Bike</p>

                    </div>
                    <figure>
                        <img src="./icons/casco.png" alt="">
                    </figure>
                    
                </div>
               

            </div>
            <div class="product-card">
                <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?cs=srgb&dl=pexels-pixabay-276517.jpg&fm=jpg" alt="">
                <div class="product-info">
                    <div>
                        <p>$120,00</p>
                        <p>Bike</p>

                    </div>
                    <figure>
                        <img src="./icons/casco.png" alt="">
                    </figure>
                    
                </div>
               

            </div>
            <div class="product-card">
                <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?cs=srgb&dl=pexels-pixabay-276517.jpg&fm=jpg" alt="">
                <div class="product-info">
                    <div>
                        <p>$120,00</p>
                        <p>Bike</p>

                    </div>
                    <figure>
                        <img src="./icons/casco.png" alt="">
                    </figure>
                    
                </div>
               

            </div>
            <div class="product-card">
                <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?cs=srgb&dl=pexels-pixabay-276517.jpg&fm=jpg" alt="">
                <div class="product-info">
                    <div>
                        <p>$120,00</p>
                        <p>Bike</p>

                    </div>
                    <figure>
                        <img src="./icons/casco.png" alt="">
                    </figure>
                    
                </div>
               

            </div>
            <div class="product-card">
                <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?cs=srgb&dl=pexels-pixabay-276517.jpg&fm=jpg" alt="">
                <div class="product-info">
                    <div>
                        <p>$120,00</p>
                        <p>Bike</p>

                    </div>
                    <figure>
                        <img src="./icons/casco.png" alt="">
                    </figure>
                    
                </div>
               

            </div>
            <div class="product-card">
                <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?cs=srgb&dl=pexels-pixabay-276517.jpg&fm=jpg" alt="">
                <div class="product-info">
                    <div>
                        <p>$120,00</p>
                        <p>Bike</p>

                    </div>
                    <figure>
                        <img src="./icons/casco.png" alt="">
                    </figure>
                    
                </div>
               

            </div>
            <div class="product-card">
                <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?cs=srgb&dl=pexels-pixabay-276517.jpg&fm=jpg" alt="">
                <div class="product-info">
                    <div>
                        <p>$120,00</p>
                        <p>Bike</p>

                    </div>
                    <figure>
                        <img src="./icons/casco.png" alt="">
                    </figure>
                    
                </div>
               

            </div>
            <div class="product-card">
                <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?cs=srgb&dl=pexels-pixabay-276517.jpg&fm=jpg" alt="">
                <div class="product-info">
                    <div>
                        <p>$120,00</p>
                        <p>Bike</p>

                    </div>
                    <figure>
                        <img src="./icons/casco.png" alt="">
                    </figure>
                    
                </div>
               

            </div>
            <div class="product-card">
                <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?cs=srgb&dl=pexels-pixabay-276517.jpg&fm=jpg" alt="">
                <div class="product-info">
                    <div>
                        <p>$120,00</p>
                        <p>Bike</p>

                    </div>
                    <figure>
                        <img src="./icons/casco.png" alt="">
                    </figure>
                    
                </div>
               

            </div>
            <div class="product-card">
                <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?cs=srgb&dl=pexels-pixabay-276517.jpg&fm=jpg" alt="">
                <div class="product-info">
                    <div>
                        <p>$120,00</p>
                        <p>Bike</p>

                    </div>
                    <figure>
                        <img src="./icons/casco.png" alt="">
                    </figure>
                    
                </div>
               

            </div>
            <div class="product-card">
                <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?cs=srgb&dl=pexels-pixabay-276517.jpg&fm=jpg" alt="">
                <div class="product-info">
                    <div>
                        <p>$120,00</p>
                        <p>Bike</p>

                    </div>
                    <figure>
                        <img src="./icons/casco.png" alt="">
                    </figure>
                    
                </div>
               

            </div>
            <div class="product-card">
                <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?cs=srgb&dl=pexels-pixabay-276517.jpg&fm=jpg" alt="">
                <div class="product-info">
                    <div>
                        <p>$120,00</p>
                        <p>Bike</p>

                    </div>
                    <figure>
                        <img src="./icons/casco.png" alt="">
                    </figure>
                    
                </div>
               

            </div>
            <div class="product-card">
                <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?cs=srgb&dl=pexels-pixabay-276517.jpg&fm=jpg" alt="">
                <div class="product-info">
                    <div>
                        <p>$120,00</p>
                        <p>Bike</p>

                    </div>
                    <figure>
                        <img src="./icons/casco.png" alt="">
                    </figure>
                    
                </div>
               

            </div>
            
       
            
           


        </div>

    </section>
</body>


</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Quicksand:[email protected];500;700&display=swap" rel="stylesheet">
    <title>Document</title>
    <style>

 :root {
      --white: #FFFFFF;
      --black: #000000;
      --very-light-pink: #C7C7C7;
      --text-input-field: #F7F7F7;
      --hospital-green: #ACD9B2;
      --sm: 14px;
      --md: 16px;
      --lg: 18px;
    }
        body{
            margin: 0;
        }
</style>
<body>
    <section class="main-container">
        <div class="cards-container">
            <div class="product-card">
                <img src="" alt="">
                <div>
                    <p>$120,00</p>
                    <p>Bike</p>
                </div>
                <figure>
                    <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?cs=srgb&dl=pexels-pixabay-276517.jpg&fm=jpg" alt="">
                </figure>

            </div>
            <div class="product-card">
                <img src="" alt="">
                <div>
                    <p>$120,00</p>
                    <p>Bike</p>
                </div>
                <figure>
                    <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?cs=srgb&dl=pexels-pixabay-276517.jpg&fm=jpg" alt="">
                </figure>

            </div>
            <div class="product-card">
                <img src="" alt="">
                <div>
                    <p>$120,00</p>
                    <p>Bike</p>
                </div>
                <figure>
                    <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?cs=srgb&dl=pexels-pixabay-276517.jpg&fm=jpg" alt="">
                </figure>

            </div>
            <div class="product-card">
                <img src="" alt="">
                <div>
                    <p>$120,00</p>
                    <p>Bike</p>
                </div>
                <figure>
                    <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?cs=srgb&dl=pexels-pixabay-276517.jpg&fm=jpg" alt="">
                </figure>

            </div>
            <div class="product-card">
                <img src="" alt="">
                <div>
                    <p>$120,00</p>
                    <p>Bike</p>
                </div>
                <figure>
                    <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?cs=srgb&dl=pexels-pixabay-276517.jpg&fm=jpg" alt="">
                </figure>

            </div>
            <div class="product-card">
                <img src="" alt="">
                <div>
                    <p>$120,00</p>
                    <p>Bike</p>
                </div>
                <figure>
                    <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?cs=srgb&dl=pexels-pixabay-276517.jpg&fm=jpg" alt="">
                </figure>

            </div>
            <div class="product-card">
                <img src="" alt="">
                <div>
                    <p>$120,00</p>
                    <p>Bike</p>
                </div>
                <figure>
                    <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?cs=srgb&dl=pexels-pixabay-276517.jpg&fm=jpg" alt="">
                </figure>

            </div>
            <div class="product-card">
                <img src="" alt="">
                <div>
                    <p>$120,00</p>
                    <p>Bike</p>
                </div>
                <figure>
                    <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?cs=srgb&dl=pexels-pixabay-276517.jpg&fm=jpg" alt="">
                </figure>

            </div>


        </div>

    </section>
</body>


</html>

Les comparto lo siguiente para entender para que es <figure> 😊
https://www.oscarblancarteblog.com/2016/11/28/etiqueta-figure-html5/

Mi código 😄

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="This is store of whatever">
    <meta name="robots" content="index, follow">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Quicksand:[email protected];400;500;600;700&family=Roboto:[email protected]&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles/style.css" type="text/css" >
    <link rel="shortcut icon" href="./logos/favicon_bota_fora.svg" type="img">
    <title>Yard Sale</title>
    <style>
        
    </style>
</head>
<body>
    <section class="store">
        <section class="filtering"><input type="text" name="" id=""></section>
        <main class="products">
            <div class="item">
                <figure class="image-container"><img src="./images/bike.jpeg" alt="" class="card__img"></figure>
                <div class="item__text">
                    <p class="item__price">$120,00</p>
                    <p class="item__name">Bike</p>
                </div>
                <figure class="image-container"><a href="" class="item__link--addtocart"><img src="./icons/bt_add_to_cart.svg" alt="" class="card__button--addtocart"></a></figure>
            </div>
            <div class="item">
                <figure class="image-container"><img src="./images/bike.jpeg" alt="" class="card__img"></figure>
                <div class="item__text">
                    <p class="item__price">$120,00</p>
                    <p class="item__name">Bike</p>
                </div>
                <figure class="image-container"><a href="" class="item__link--addtocart"><img src="./icons/bt_add_to_cart.svg" alt="" class="card__button--addtocart"></a></figure>
            </div>
            <div class="item">
                <figure class="image-container"><img src="./images/bike.jpeg" alt="" class="card__img"></figure>
                <div class="item__text">
                    <p class="item__price">$120,00</p>
                    <p class="item__name">Bike</p>
                </div>
                <figure class="image-container"><a href="" class="item__link--addtocart"><img src="./icons/bt_add_to_cart.svg" alt="" class="card__button--addtocart"></a></figure>
            </div>
            <div class="item">
                <figure class="image-container"><img src="./images/bike.jpeg" alt="" class="card__img"></figure>
                <div class="item__text">
                    <p class="item__price">$120,00</p>
                    <p class="item__name">Bike</p>
                </div>
                <figure class="image-container"><a href="" class="item__link--addtocart"><img src="./icons/bt_add_to_cart.svg" alt="" class="card__button--addtocart"></a></figure>
            </div>
            <div class="item">
                <figure class="image-container"><img src="./images/bike.jpeg" alt="" class="card__img"></figure>
                <div class="item__text">
                    <p class="item__price">$120,00</p>
                    <p class="item__name">Bike</p>
                </div>
                <figure class="image-container"><a href="" class="item__link--addtocart"><img src="./icons/bt_add_to_cart.svg" alt="" class="card__button--addtocart"></a></figure>
            </div>
            <div class="item">
                <figure class="image-container"><img src="./images/bike.jpeg" alt="" class="card__img"></figure>
                <div class="item__text">
                    <p class="item__price">$120,00</p>
                    <p class="item__name">Bike</p>
                </div>
                <figure class="image-container"><a href="" class="item__link--addtocart"><img src="./icons/bt_add_to_cart.svg" alt="" class="card__button--addtocart"></a></figure>
            </div>
            <div class="item">
                <figure class="image-container"><img src="./images/bike.jpeg" alt="" class="card__img"></figure>
                <div class="item__text">
                    <p class="item__price">$120,00</p>
                    <p class="item__name">Bike</p>
                </div>
                <figure class="image-container"><a href="" class="item__link--addtocart"><img src="./icons/bt_add_to_cart.svg" alt="" class="card__button--addtocart"></a></figure>
            </div>
            <div class="item">
                <figure class="image-container"><img src="./images/bike.jpeg" alt="" class="card__img"></figure>
                <div class="item__text">
                    <p class="item__price">$120,00</p>
                    <p class="item__name">Bike</p>
                </div>
                <figure class="image-container"><a href="" class="item__link--addtocart"><img src="./icons/bt_add_to_cart.svg" alt="" class="card__button--addtocart"></a></figure>
            </div>
            <div class="item">
                <figure class="image-container"><img src="./images/bike.jpeg" alt="" class="card__img"></figure>
                <div class="item__text">
                    <p class="item__price">$120,00</p>
                    <p class="item__name">Bike</p>
                </div>
                <figure class="image-container"><a href="" class="item__link--addtocart"><img src="./icons/bt_add_to_cart.svg" alt="" class="card__button--addtocart"></a></figure>
            </div>
            <div class="item">
                <figure class="image-container"><img src="./images/bike.jpeg" alt="" class="card__img"></figure>
                <div class="item__text">
                    <p class="item__price">$120,00</p>
                    <p class="item__name">Bike</p>
                </div>
                <figure class="image-container"><a href="" class="item__link--addtocart"><img src="./icons/bt_add_to_cart.svg" alt="" class="card__button--addtocart"></a></figure>
            </div>
            <div class="item">
                <figure class="image-container"><img src="./images/bike.jpeg" alt="" class="card__img"></figure>
                <div class="item__text">
                    <p class="item__price">$120,00</p>
                    <p class="item__name">Bike</p>
                </div>
                <figure class="image-container"><a href="" class="item__link--addtocart"><img src="./icons/bt_add_to_cart.svg" alt="" class="card__button--addtocart"></a></figure>
            </div>
            <div class="item">
                <figure class="image-container"><img src="./images/bike.jpeg" alt="" class="card__img"></figure>
                <div class="item__text">
                    <p class="item__price">$120,00</p>
                    <p class="item__name">Bike</p>
                </div>
                <figure class="image-container"><a href="" class="item__link--addtocart"><img src="./icons/bt_add_to_cart.svg" alt="" class="card__button--addtocart"></a></figure>
            </div>
            <div class="item">
                <figure class="image-container"><img src="./images/bike.jpeg" alt="" class="card__img"></figure>
                <div class="item__text">
                    <p class="item__price">$120,00</p>
                    <p class="item__name">Bike</p>
                </div>
                <figure class="image-container"><a href="" class="item__link--addtocart"><img src="./icons/bt_add_to_cart.svg" alt="" class="card__button--addtocart"></a></figure>
            </div>
            <div class="item">
                <figure class="image-container"><img src="./images/bike.jpeg" alt="" class="card__img"></figure>
                <div class="item__text">
                    <p class="item__price">$120,00</p>
                    <p class="item__name">Bike</p>
                </div>
                <figure class="image-container"><a href="" class="item__link--addtocart"><img src="./icons/bt_add_to_cart.svg" alt="" class="card__button--addtocart"></a></figure>
            </div>
            <div class="item">
                <figure class="image-container"><img src="./images/bike.jpeg" alt="" class="card__img"></figure>
                <div class="item__text">
                    <p class="item__price">$120,00</p>
                    <p class="item__name">Bike</p>
                </div>
                <figure class="image-container"><a href="" class="item__link--addtocart"><img src="./icons/bt_add_to_cart.svg" alt="" class="card__button--addtocart"></a></figure>
            </div>
            <div class="item">
                <figure class="image-container"><img src="./images/bike.jpeg" alt="" class="card__img"></figure>
                <div class="item__text">
                    <p class="item__price">$120,00</p>
                    <p class="item__name">Bike</p>
                </div>
                <figure class="image-container"><a href="" class="item__link--addtocart"><img src="./icons/bt_add_to_cart.svg" alt="" class="card__button--addtocart"></a></figure>
            </div>
            <div class="item">
                <figure class="image-container"><img src="./images/bike.jpeg" alt="" class="card__img"></figure>
                <div class="item__text">
                    <p class="item__price">$120,00</p>
                    <p class="item__name">Bike</p>
                </div>
                <figure class="image-container"><a href="" class="item__link--addtocart"><img src="./icons/bt_add_to_cart.svg" alt="" class="card__button--addtocart"></a></figure>
            </div>
            <div class="item">
                <figure class="image-container"><img src="./images/bike.jpeg" alt="" class="card__img"></figure>
                <div class="item__text">
                    <p class="item__price">$120,00</p>
                    <p class="item__name">Bike</p>
                </div>
                <figure class="image-container"><a href="" class="item__link--addtocart"><img src="./icons/bt_add_to_cart.svg" alt="" class="card__button--addtocart"></a></figure>
            </div>
            <div class="item">
                <figure class="image-container"><img src="./images/bike.jpeg" alt="" class="card__img"></figure>
                <div class="item__text">
                    <p class="item__price">$120,00</p>
                    <p class="item__name">Bike</p>
                </div>
                <figure class="image-container"><a href="" class="item__link--addtocart"><img src="./icons/bt_add_to_cart.svg" alt="" class="card__button--addtocart"></a></figure>
            </div>
            <div class="item">
                <figure class="image-container"><img src="./images/bike.jpeg" alt="" class="card__img"></figure>
                <div class="item__text">
                    <p class="item__price">$120,00</p>
                    <p class="item__name">Bike</p>
                </div>
                <figure class="image-container"><a href="" class="item__link--addtocart"><img src="./icons/bt_add_to_cart.svg" alt="" class="card__button--addtocart"></a></figure>
            </div>
        </main>
    </section>
</body>
</html>

que magia se hizo en el minuto 6:23 quede locooooo

que divertido es programar con uds  :D

Muchas gracias Profe!!!

Yo al principio de los estilos como base para las imágenes para que no se desborden y después poderlas manipular sin problemas pongo el siguiente código:
img{
max-width: 100%;
height: auto;
}

Me gustan muchos sus videos de la profesora lo que no me gusta es que empieza maquetando desde escritorio olvidando las buenas prácticas primero movil

*Aquí se arma la estructura en HTML pero también se aprovecha las variables hechas en style de anteriores clases.

Ten en cuenta que la estructura estara formada de la siguiente manera:
section main container
div cards container
[div product card
img
p
p
logo (img)] x4

Y vas agregando la imagen de cada producto.

Este copiado y pegado de articulos se podría hacer con un while pero igual sirve el ejercicio