A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Mi orden: CSS

16/22
Recursos

Aportes 90

Preguntas 14

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

As铆 vamos鈥

esta profesora se confunde cambia el html y lo hace tan rapido que cuesta seguir el paso

Que horrible el desorden para explicar

Siento que va sacando el maquetado del html como le viene a la mente, sin una planeaci贸n anterior, supongo que en un trabajo real suele pasar as铆, pero esto es un curso, debe estar ya dise帽ado, es medio molesto estar refactorizando el c贸digo a cada rato.

HTML:

<body>
  <div class="my-order">
    <div class="my-order-container">
      <h1 class="title">My order</h1>

      <div class="my-order-content">
        <div class="order">
          <p>
            <span>03.25.21</span>
            <span>6 articles</span>
          </p>
          <p>$560.00</p>
        </div>

        <div class="shopping-cart">
          <figure>
            <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="bike">
          </figure>
          <p>Bike</p>
          <p>$30,00</p>
        </div>

        <div class="shopping-cart">
          <figure>
            <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="bike">
          </figure>
          <p>Bike</p>
          <p>$30,00</p>
        </div>

        <div class="shopping-cart">
          <figure>
            <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="bike">
          </figure>
          <p>Bike</p>
          <p>$30,00</p>
        </div>
      </div>
    </div>
  </div>
</body>

Yo opino que quienes se fijan mas en si la profesora utiliza 鈥渂uenas practicas鈥 o 鈥渘o tiene todo hecho鈥, no estan aprovechando realmente la oportunidad de aprender, si bien en ocasiones es un poco confuso, no hay nada que con lo que hemos aprendido no podamos solucionar, he realizado todo el proyecto con archivos html y css por aparte y no he tenido ningun lio, animo a todos menos excusas y mas ganas de aprender 馃槂

Me est谩 costando terminar este curso, hay demasiado desorden.

Estilos CSS

/*my order styles*/

.my-order {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
}

.my-order-container {
    display: grid;
    grid-template-rows: auto 1fr auto;
    width: 300px;
} 

.my-order-content {
    display: flex;
    flex-direction: column;
}

.order {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
    align-items: center;
    background-color: var(--text-input-field);
    margin-bottom: 24px;
    border-radius: 8px;
    padding: 0 24px;
}

.order p:nth-child(1) {
    display: flex;
    flex-direction: column;
}

.order p:nth-child(2) {
    text-align: end;
    font-weight: bold;
}

.order p span:nth-child(1) {
    font-size: 14px;
    font-weight: bold;
}

.order p span:nth-child(2) {
    font-size: 12px;
    color: var(--very-light-pink);
}

.title-order {
    font-size: 16px;
    margin-bottom: 40px;
}

.shopping-cart {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: 16px;
    margin-bottom: 24px;
    align-items: center;
}

.shopping-cart figure {
    margin: 0;
}

.shopping-cart figure img {
    width: 100px;
    height: 100px;
    border-radius: 20px;
    object-fit: cover;
}

.shopping-cart p:nth-child(2) {
    color: var(--very-light-pink);
}

.shopping-cart p:nth-child(3) {
    font-size: 14px;
    font-weight: bold;
}

Veo muchos comentarios diciendo que as铆 se maqueta en la industria y del mismo modo se estiliza, yo creo que no porque por alguna raz贸n existen los Sistemas de dise帽os y las Arquitecturas, como BEM y SASS excelente compatibilidad entre ellas (son mis favoritas). No critico a la profesora, pero tampoco es la de mi mayor gusto, y tampoco juzgo a los estudiantes que presentan su inconformidad con el desorden, porque s铆 hay desorden, en la manera de trabajar en la profe, y eso dificulta el proceso de aprendizaje de los y las estudiantes, y m谩s si es un novato. Al menos contamos con el gran repertorio de cursos que ofrece Platzi, y podemos prepararnos con esos para as铆 continuar en nuestro aprendizaje. Sigamos adelante chicos y chicas, que la profesora no sea de nuestro agrado no significa que debamos desertar, dejemos eso de lado y continuemos con el proceso.

En el minuto 11:28 otra forma de poner el texto debajo del otro con solo HTML es
<span>04.25.2021</span><br>
<span class=鈥渙rder-text-article鈥>6 articles</span>
La magia est谩 en la etiqueta de <br> que produce un salto de l铆nea en el texto y se obtiene el mismo resultado de una manera m谩s sencilla

Que tal campeon, buen dia鈥omo que cada vez mas, la Estefany, en sus explicaciones revuelve mucho y no llega a entender la gran parte de lo que hace en su codigo鈥 Bueno imaginate fronten developer???

mas organizado, si se puede.

dejo mi aporte.

Para los que igual que yo no conoc铆a object-fit a continuaci贸n dejo link donde se explica a detalle y con que otros valores se puede utilizar. =>
https://developer.mozilla.org/es/docs/Web/CSS/object-fit

Hasta la clase 14 llegue bien. pero desde aqu铆 se ve muy desordenado la forma de maquetar, adem谩s de que va volando y me toca estar pausando la clase todo el tiempo. incluso hay l铆neas que me toca ponerme a buscar para que sirve cada propiedad porque simplemente del af谩n se me escapa para que sirve y eso que uso doble pantalla y el live server para ver los cambios inmediatamente. me parece que el curso deber铆a extenderse mas ya que algunos necesitamos entender lo que hace cada propiedad y etiqueta en la marcha. sigo avanzando pero con dificultad.

Me encanta el uso constante de Grid. Lo usual es que siempre usen flexbox pues tiene mas tiempo pero el grid es un display realmente potente y el que lo usen tanto ayuda a verlo mpas familiar, perderle el miedo.

Todo bien, pude realizar con 茅xitos la clase, el problema es que es muy confuso, hace demasiados cambios como si fuera algo obvio pero ser铆a genial si lo explicar谩 m谩s detalladamente.
Quise subir mi foto pero no se como :c

En buena onda.

Todos estamos aprendiendo ingl茅s.

La expresi贸n --font-weight 鈥 en ingles, se lee m谩s o menos font uueigt

Esto es diferente a lo que se escucha en el video, pues se escucha algo as铆 como font width.

Dejo la imagen para quien la quiera utilizar

馃槂

Compa帽eros, les recomiendo que antes de ver c贸mo lo hace la profe es bueno que lo intentemos hacer nosotros por nuestra cuenta. Eso vine haciendo desde hace unas clases y realmente se aprende mucho m谩s. No importa si hacen un c贸digo desordenado, mientras m谩s de estas pr谩cticas hagan mejor les va a quedar.

Ahi vamos鈥

Recomiendo que para entender mejor hagan primero el curso de grid , hay varios en la escuela web. este curso es mejor para practicar esos conceptos

Me sorprende los comentarios, el proyecto apenas crece un poco y la gente se confunde, existe el poner pausa, la velocidad de 0.75 y hasta inclusive, en la descripci贸n, esta el link para conseguir el proyecto GitHub. (y)

Decid铆 poner los iconos a los lados

Pues as铆 vamos

El mio. 馃槂

div.order + enter = <div class=鈥渙rder鈥></div>

No entendi nada de lo que hizo. El c贸digo es muy chico, no se entiende.

No entiendo por qu茅 muchos se quejan de que la profe va cambiando el c贸digo en media clase, as铆 debe ser en el mundo real, nadie debe tener todo el codigo 100% claro desde el principio como para no modificarlo en medio camino.

Cuando empece este curso me di cuenta que la profesora iba muy r谩pido. Entonces lo dej茅 pausado y segu铆 tomando otros cursos. Mes y medio regres茅 y m谩s o menos le sigo el paso a la profesora y a entender porque agregaba y met铆a etiquetas, incluso a cuestionar si iba tal cosa, iba en tal lugar.
Si sienten que va muy r谩pido, pueden pausarlo y retomarlo despu茅s. Poderle seguir el paso a la profesora, mientras mi mente visualizaba los cambios que hac铆a, me hizo darme cuenta cuanto he eprendido y me motivo a seguir. No lo vean como un impedimento, sino como un reto un poco m谩s avanzado. Porque de eso se trata鈥 de avanzar.
Salu2 cali2.

Creo que no es desorden de la profe, se siente que es con el prop贸sito de ense帽arnos como es el mundo real, soy titulado de una carrera donde me lo pintaron en orden y con buenas practicas y al llegar al campo de acci贸n me frustre demasiado, puntos para la profe por ponernos todo en modo realista.

Ahora si con esta clase llore, tengo dolor de espalda y de cabeza!!
Ya se que que en un trabajo real esto no es nada, y amo como ense帽a Esteff pero ahora si me hice bolas y lo hice varias veces y no me salio algo estoy haciendo mal.
Steff una gran maestra, va volando lo hace ver taaaan facil y una aqu铆 apenas empezando! =,(

En mi opini贸n los 鈥渆rrores鈥 de organizaci贸n que algunas mencionan son 煤tiles para poder entender como est谩 estructurado el html y cual es la mejor forma de maquetarlo, pienso que esos cambios en el camino nos ayudan a entender mejor lo que estamos haciendo y no solo ir siguiendo el gui贸n de lo que escribe Estefany.

Que facil lo hace ver, no se porque me cuesta tanto :S Pero nunca parare de aprender 馃槃

CSS:

 :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;
      font-family: 'Quicksand', sans-serif;
    }
    .my-order {
      width: 100%;
      height: 100vh;
      display: grid;
      place-items: center;
    }
    .title {
      font-size: var(--lg);
      margin-bottom: 40px;
    }
    .my-order-container {
      display: grid;
      grid-template-rows: auto 1fr auto;
      width: 300px;
    }
    .my-order-content {
      display: flex;
      flex-direction: column;
    }
    .order {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 16px;
      align-items: center;
      background-color: var(--text-input-field);
      margin-bottom: 24px;
      border-radius: 8px;
      padding: 0 24px;
    }
    .order p:nth-child(1) {
      display: flex;
      flex-direction: column;
    }
    .order p span:nth-child(1) {
      font-size: var(--md);
      font-weight: bold;
    }
    .order p span:nth-child(2) {
      font-size: var(--sm);
      color: var(--very-light-pink);
    }
    .order p:nth-child(2) {
      text-align: end;
      font-weight: bold;
    }
    .shopping-cart {
      display: grid;
      grid-template-columns: auto 1fr auto auto;
      gap: 16px;
      margin-bottom: 24px;
      align-items: center;
    }
    .shopping-cart figure {
      margin: 0;
    }
    .shopping-cart figure img {
      width: 70px;
      height: 70px;
      border-radius: 20px;
      object-fit: cover;
    }
    .shopping-cart p:nth-child(2) {
      color: var(--very-light-pink);
    }
    .shopping-cart p:nth-child(3) {
      font-size: var(--md);
      font-weight: bold;
    }

Un consejo, algo que me sirvio a mi fue reforzar un poco las bases de CSS grid para continuar desde aqu铆, en mi caso no lo tenia muy claro y algunas cosas que mensionaba Estefany quedaban en el aire, pero ya que entiendo estas bases mejor puedo decir que entiendo a la perfecci贸n como avanza el curso!

Decid铆 hacerlo primero sin ver la clase

<!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;
            --dark: #232830;
            --very-light-pink: #C7C7C7;
            --text-input-field: #F7F7F7;
            --hospital-green: #ACD9B2;
            --sm: 14px;
            --md: 16px;
            --lg: 18px; 

        }
        body{
            margin: 0;
            font-family: 'Quicksand', sans-serif;
            display: flex;
            justify-content: center;

        }
        .my-order{
            width: 400px;
            display: grid;
            grid-template-columns: 1 400px;
            grid-template-rows: auto;
            gap: 20px;
            padding-top: 20px;
        }
        .my-order-container{
            background-color: var(--text-input-field);
            border-radius: 10px;
        }
        .my-order-content{
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px 0 20px;
            font-weight: bold;
            font-size: var(--lg);
        }
        .my-order-content :last-child{
            color: var(--dark);
        }
        .my-order-content :first-child :last-child{
            display: flex;
            flex-direction: column;
            color: var(--very-light-pink);
            font-size: var(--sm);
            font-weight: lighter;
        }
        .shopping-cart{
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            align-items: center;
            font-weight: bold;
        }
        .shopping-cart :last-child{
            color: var(--dark)
        }

        .shopping-cart figure{
            margin: 0;
        }
        .shopping-cart img{
            align-self: left;
            width: 90px;
            height: 90px;
            border-radius: 10px;
            object-fit: cover;
        }
    </style>
</head>
<body>
    <div class="my-order">
        <h1>My order</h1>
        <div class="my-order-container">
            <div class="my-order-content">
                <p>
                    <span>04.25.21</span>
                    <span>6 articles</span>
                </p>
                <p>$560.00</p>
            </div>
        </div>
        <div class="shopping-cart">
            <figure>
                <img src="https://images.pexels.com/photos/3685523/pexels-photo-3685523.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="bike">
            </figure>
            <p>Nombre del Producto</p>
            <p>$300.00</p>
        </div>
        <div class="shopping-cart">
            <figure>
                <img src="https://images.pexels.com/photos/3670538/pexels-photo-3670538.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="bike">
            </figure>
            <p>Nombre del Producto</p>
            <p>$300.00</p>
        </div>
        <div class="shopping-cart">
            <figure>
                <img src="https://images.pexels.com/photos/7262453/pexels-photo-7262453.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="bike">
            </figure>
            <p>Nombre del Producto</p>
            <p>$300.00</p>
        </div>
        <div class="shopping-cart">
            <figure>
                <img src="https://images.pexels.com/photos/3685523/pexels-photo-3685523.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="bike">
            </figure>
            <p>Nombre del Producto</p>
            <p>$300.00</p>
        </div>
        <div class="shopping-cart">
            <figure>
                <img src="https://images.pexels.com/photos/3670538/pexels-photo-3670538.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="bike">
            </figure>
            <p>Nombre del Producto</p>
            <p>$300.00</p>
        </div>
        <div class="shopping-cart">
            <figure>
                <img src="https://images.pexels.com/photos/7262453/pexels-photo-7262453.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="bike">
            </figure>
            <p>Nombre del Producto</p>
            <p>$300.00</p>
        </div>
    </div>
</body>
</html>

Me esta encantando como va quedando todo el proyecto. Espero al final logremos unir todas las pantallas o algo por el estilo 馃檶馃徎
馃寪 Les comparto mi c贸digo subido a GitHub: https://github.com/iJCode1/frontend_practico_platzi
.
Vista Desktop:


.
Vista M贸vil:

<!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">
    <!-- FONTS -->
    <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>Yard Sale | View 9 - My order: HTML</title>
    <style>
        /* Se agregan los estilos para la pantalla de "New Password" */
        :root{
        --white: #FFFFFF;
        --black: #000000;
        --very-light-pink: #605C5C;
        --text-input-field: #ECECEC;
        --hospital-green: #72a178;
        /* FONT SIZE */
        --sm: 14px;
        --md: 16px;
        --lg: 18px;
        }
        body{
            font-family: 'Quicksand', sans-serif;
            margin: 0;
        }
        .my-order{
            width: 100%;
            height: 100vh;
            display: grid;
            place-items: center;
        }
        .title{
            font-size: var(--lg);
            margin-bottom: 40px;
        }
        .my-order-container{
            display: grid;
            grid-template-rows: auto 1fr auto;
            width: 300px;
        }
        .my-order-content{
            display: flex;
            flex-direction: column;
        }
        .order{
            display: grid;
            grid-template-columns: auto 1fr;
            gap: 16px;
            /* align-content: center; */
            align-items: center;
            background-color: var(--text-input-field);
            margin-bottom: 24px;
            border-radius: 8px;
            padding: 0 24px;
        }
        /* <p> 1 */
        .order p:nth-child(1){
            display: flex;
            flex-direction: column;
        }
        /* SPAN */
        .order p span:nth-child(1){
            font-size: var(--md);
            font-weight: bold;
        }
        .order p span:nth-child(2){
            font-size: var(--sm);
            color: var(--very-light-pink);
        }
        /* <p> 2 */
            .order p:nth-child(2){
            text-align: end;
            font-weight: bold;
        }
        /* CARDS */
        .shopping-card{
            display: grid;
            grid-template-columns: auto 1fr auto auto;
            gap: 16px;
            margin-bottom: 24px;
            align-items: center;
        }
        .shopping-card figure{
            margin: 0;
        }
        .shopping-card figure img{
            width: 70px;
            height: 70px;
            border-radius: 20px;
            object-fit: cover;
        }
        .shopping-card p:nth-child(2){
            color: var(--very-light-pink);
        }
        .shopping-card p:nth-child(3){
            font-size: var(--md);
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="my-order">
        <div class="my-order-container">
            <h1 class="title">My order</h1>
            <div class="my-order-content">

                <!-- ORDER -->
                <div class="order">
                    <p>
                        <span>04.25.21</span>
                        <span>6 articles</span>
                    </p>
                    <p>$560.00</p>
                </div>            

                <!-- CARDS -->
                <div class="shopping-card">
                    <figure>
                        <img src="https://images.pexels.com/photos/7671233/pexels-photo-7671233.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">
                    </figure>
                    <p>Table</p>
                    <p>$30,00</p>
                </div>

                <div class="shopping-card">
                    <figure>
                        <img src="https://images.pexels.com/photos/1866149/pexels-photo-1866149.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">
                    </figure>
                    <p>Table</p>
                    <p>$30,00</p>
                </div>

                <div class="shopping-card">
                    <figure>
                        <img src="https://images.pexels.com/photos/3797991/pexels-photo-3797991.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">
                    </figure>
                    <p>Table</p>
                    <p>$30,00</p>
                </div>

                <div class="shopping-card">
                    <figure>
                        <img src="https://images.pexels.com/photos/6492397/pexels-photo-6492397.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">
                    </figure>
                    <p>Table</p>
                    <p>$30,00</p>
                </div>

                <div class="shopping-card">
                    <figure>
                        <img src="https://images.pexels.com/photos/6527044/pexels-photo-6527044.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">
                    </figure>
                    <p>Table</p>
                    <p>$30,00</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Hasta ahorita as铆 vamos!!

Mi c贸digo:

Estilos

.main-container{
    width: 100%;
    height: 100vh;
    display: grid;
    place-items: center;
}
.shopping-cart{
    width: 90%;
}
.title{
    font-size: var(--font-lg);
    padding-bottom: var(--m-4xs);
    display: none;
}
.product-price{
    font-weight: var(--font-extra-bold);
    color:var(--text-grey);
    font-family: var(--font-roboto);
}
.resume{
    padding: var(--m-5xs);
    background-color: var(--text-input-field);
    border-radius: var(--radius-md);
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: var(--m-5xs) 0;
}
    .date{
        font-weight: var(--font-extra-bold);
    }
    .products-count{
        font-weight: var(--font-thin);
    }
.list-products{
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--m-7xs);
}
    .product{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
        .product-info{
            display: flex;
            align-items: center;
            gap:var(--m-4xs)
        }
            .product-name{
                font-weight: var(--font-thin);
            }
            .product-img{
                position: relative;
                min-width: 100px;
            }
                .product-img:after {
                    content: "";
                    display: block;
                    padding-bottom: 100%;
                }
                .product-img > div{
                    position: absolute;
                    border-radius: var(--radius-lg);
                    overflow: hidden;
                    width: 100%;
                    height: 100%;
                }
                .product-img > div img{
                    width: 100%;
                    height: 100%;
                    object-fit:cover;
            }
@media (min-width: 600px) {
    .shopping-cart{
        width: 600px;
        }
        .title{
            display: block;
        }
}

Estructura

<div class="main-container">
        <div class="shopping-cart">
            <h1 class="title">My order</h1>
            <div class="resume">
                <div>
                    <p class="date">04.25.2021</p>
                    <p class="products-count">6 articles</p>
                </div>
                <div>
                    <p class="product-price">$560,00</p>
                </div>
            </div>
            <div class="list-products">
                <div class="product">
                    <div class="product-info">
                        <figure class="product-img">
                            <div>
                                <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Producto" />
                            </div>
                        </figure>
                        <p class="product-name">Bike PowerOn</p>
                    </div>
                    <p class="product-price">$ 120,00</p>
                </div>
            </div>
        </div>
    </div>

al final logre hacerlo y termine realizando los cambios yo mismo, nuinca pares de aprender.

grid-template-columns: auto 1fr auto auto; /* cada elemento representa una columna con el tama帽o de ancho */

grid-template-columns: auto 1fr auto auto; /* cada elemento representa una columna con el tama帽o de ancho */

Claro que me confund铆 al principio de la clase, pero lo v铆 varias veces antes que me quedara claro esa parte. Poder lograrlo, genial

Quiero compartirles un m茅todo que me ayudo, cuando me pierdo a la hora de seguir a un profesor, en este caso nos han compartido el github donde se encuentra el c贸digo, as铆 que tenemos la opci贸n de copiarlo y pegarlo desvergonzadamente a nuestro archivo. Para despu茅s analizarlo en el navegador, a mi me ayudo a repasar y agarrarle coherencia al c贸digo, espero te sirva bro 馃槉




Chicos para los que consideran que la profesora avanza muy r谩pido pueden bajarle la velocidad al video. 馃槈

La clase anterior me dej贸 pensativa porque no se hab铆an colocado las cards dentro del 鈥渕y-order-container鈥. Y en esta clase veo que la profe Estefany se confunde mucho con la creaci贸n de la estructura de html. Ser铆a bueno corregir esto y tener claro cuantos contenedores son y donde debe ir cada elemento porque uno tambi茅n se confunde por momentos.

hola, bueno asi me quedo

    <style>
      :root {
        --very-ligth-pink: #c7c7c7;
        --text-input-field: #f7f7f7;
        --hostipal-green: #acd9b2;
        --white: #ffffff;
        --black: #000000;
        --sm: 14px;
        --md: 16px;
        --lg: 18px;
      }
      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
      html {
        font-size: 62.5%;
      }
      body {
        font-size: 1.6rem;
        font-family: "Quicksand", sans-serif;
      }
      .main {
        width: 100vw;
        height: 100vh;
      }
      .container {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      .title-order {
        display: none;
      }

      .conten {
        background-color: rgba(211, 211, 211, 0.364);
        border-radius: 0.5rem;
        margin: 1rem;
        width: 95%;
        height: auto;
        padding: 0.6rem;
        height: 6rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .date,
      .price {
        font-size: var(--lg);
        font-weight: bold;
      }
      .num-car {
        font-size: var(--sm);
        color: var(--very-ligth-pink);
        font-weight: bold;
      }
      .articules {
        display: flex;
        justify-content: space-between;
        background-color: initial;
      }
      .articules__image {
        width: 5rem;
        height: 5rem;
        object-fit: cover;
        border-radius: 1rem;
      }
      .articules__info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 80%;
      }
      .articules__title {
        font-size: var(--sm);
        color: var(--very-ligth-pink);
      }
      @media (min-width: 768px) {
        .main {
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .container {
          width: 50%;
          height: auto;
        }
        .title-order {
          width: 95%;
          font-size: var(--lg);
          margin-bottom: 3rem;
          display: initial;
        }
      }
      @media (min-width: 1024px) {
        .container {
          width: 35%;
        }
      }
    </style>
  </head>
  <body>
    <main class="main">
      <div class="container">
        <h2 class="title-order">My order</h2>
        <div class="resumen conten">
          <div>
            <time class="date">04.25.2021</time>
            <p class="num-car">6 articles</p>
          </div>
          <p class="price">$ 560.00</p>
        </div>

        <figure class="articules conten">
          <img
            src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
            alt="articulo-image"
            class="articules__image"
          />

          <div class="articules__info">
            <p class="articules__title">Round shelf</p>
            <p class="price">$ 120,00</p>
          </div>
        </figure>

        <figure class="articules conten">
          <img
            src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
            alt="articulo-image"
            class="articules__image"
          />

          <div class="articules__info">
            <p class="articules__title">Round shelf</p>
            <p class="price">$ 120,00</p>
          </div>
        </figure>

        <figure class="articules conten">
          <img
            src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
            alt="articulo-image"
            class="articules__image"
          />

          <div class="articules__info">
            <p class="articules__title">Round shelf</p>
            <p class="price">$ 120,00</p>
          </div>
        </figure>

        <figure class="articules conten">
          <img
            src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
            alt="articulo-image"
            class="articules__image"
          />

          <div class="articules__info">
            <p class="articules__title">Round shelf</p>
            <p class="price">$ 120,00</p>
          </div>
        </figure>

        <figure class="articules conten">
          <img
            src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
            alt="articulo-image"
            class="articules__image"
          />

          <div class="articules__info">
            <p class="articules__title">Round shelf</p>
            <p class="price">$ 120,00</p>
          </div>
        </figure>
      </div>
    </main>
  </body>

As铆 qued贸 馃槃

Aqu铆 voy. Esto ha sido muy especial y divertido. Estoy muy agradecida con la profe, explica muy bien el proceso.

Creo que muchos no entienden el concepto de un **aporte ** ni lo que este en cuanto a contenido significa , compa帽ero la verdad veo a muchos en lugar de aportar al curso con buenos comentarios o formas de mejorar solo se quejan鈥 Porfavor la idea de este espacio es para ayudarnos no para hundir diciendo hay es que es muy desordenada鈥la鈥la鈥la a ver entonces monten su codigo en esta cajita y veo como resolverian segun ustedes el 鈥渄esorden鈥 de la profesora鈥

Excelente curso., En la practica esto es lo qu ese ve., Aun siguiendole, me salieron muchos errores y me costo encontrarlos e ir aprendiendo a dejar el codigo como deberia quedar.,
Les recomiendo intentar hacer el codigo de la clase y luego experimentar con sus propios proyectos.

Explica lindo y todo pero sinceramente para alguien que va empezando debe ser un poquito frustrante que la profe diga una cosa y luego la cambie, quite y ponga o se confunda mucho con lo que hace, ojal谩 todos sigan bien el paso despu茅s de esta clase. 馃槂

Hola, s茅 que muchos han tenido problemas con el HTML, pero hay una forma de comparar tu codigo con el de la profesora:
-En los archivos de la clase esta clase9.html
-Descargala e inmediatamente se abrir谩 una pesta帽a en tu navegador
-Busca inspeccionar

-En elements se desplegar谩 todo el c贸digo HTML y CSS con la indentaci贸n correcta

Muy complicada la forma de colocar los estilos, se pudo haber hecho mejor con display flex sin complicarse la vida con grid y los nth-child.

Para los que se perdieron con la estructura del HTML. Aqu铆 dejo como quedo la estructura del BODY

<<body>
    <div class="my-order">
      <div class="my-order-container">
        <h1 class="title">My order</h1>
        
        <div class="my-order-content">
          <div class="order">
            <p>
              <span>12.3.2022</span>
              <span>5 articles</span>
            </p>
            <p>$560.00</p>
          </div>
         
          <div class="shopping-cart">
            <figure>
              <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Bicicleta">
            </figure>
            <p>Bike</p>
            <p>$300</p>
          </div>

          <div class="shopping-cart">
            <figure>
              <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Bicicleta">
            </figure>
            <p>Bike</p>
            <p>$300</p>
          </div>

          <div class="shopping-cart">
            <figure>
              <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Bicicleta">
            </figure>
            <p>Bike</p>
            <p>$300</p>
          </div>

          <div class="shopping-cart">
            <figure>
              <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Bicicleta">
            </figure>
            <p>Bike</p>
            <p>$300</p>
          </div>

          <div class="shopping-cart">
            <figure>
              <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Bicicleta">
            </figure>
            <p>Bike</p>
            <p>$300</p>
          </div>
        </div>
      </div>
    </div>
</body>
</html>> 

Pues as铆 vamos 鈥

Mi codigo鈥

<!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;
                   font-family:'Quicksand',sans-serif;
               }

               .my-order{

                width: 100%;
                height: 100vh;
                display: grid;
                place-items:center;
               }
               .title{

                font-size: var(--lg);
                margin-bottom: 40px;

               }
               .my-order-container{

                display: grid;
                grid-template-rows: auto 1fr auto;
                width: 300px;
               }
               .my-order-content{
                   display: flex;
                   flex-direction: column;

               }
               .shopping-cart{

                display: grid;
                grid-template-columns: auto 1fr auto auto;
                gap: 16px;
                margin-bottom: 24px;
                align-items: center;

               }
               .shopping-cart figure {
                   margin: 0;
               }
               .shopping-cart figure img{
                width: 70px;
                height: 70px;
                border-radius: 20px;
                object-fit: cover;


               }
               .shopping-cart p:nth-child(2){
                   color: var(--very-light-pink);
               }
               .shopping-cart p:nth-child(3){
                   font-size: var(--md);
                   font-weight: bold;
               }
               .order{
                   display: grid;
                   grid-template-columns: auto 1fr ;
                   gap: 16px;
                   align-items: center;
                   background-color: var(--text-input-field);
                   margin-bottom: 24px;
                   border-radius: 8px;
                   padding: 0 24px;
               }
               .order p:nth-child(1)  
               {
                   display: flex;
                   flex-direction: column;

               }
               
               .order p span:nth-child(1)  
               {
                   font-size: var(--md);
                   font-weight: bold;


               }
               .order p span:nth-child(2)  
               {
                   font-size: var(--sm);
                   color: var(--very-light-pink);
                   

               }
               .order p:nth-child(2)  
               {
                 text-align: end;
                 font-weight: bold;

               }

               </style>
</head>
<body>

<div  class="my-order">
    <div class="my-order-container">
        <h1 class="title">My order</h1>
        <div class="my-order-content">
            <div class="order">
            <p>
                <span>03.25.21</span>
                
                <span>6 articles</span>
             
            </p>
            <p>$560.00</p>
        
        </div>
        <div class="shopping-cart">
            <figure>
                <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?cs=srgb&dl=pexels-pixabay-276517.jpg&fm=jpg" alt="bike">
            </figure>
            <p>Bike</p>
            <p>$30.00</p>
    
        </div>
        <div class="shopping-cart">
            <figure>
                <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?cs=srgb&dl=pexels-pixabay-276517.jpg&fm=jpg" alt="bike">
            </figure>
            <p>Bike</p>
            <p>$30.00</p>
               
        </div>
        <div class="shopping-cart">
            <figure>
                <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?cs=srgb&dl=pexels-pixabay-276517.jpg&fm=jpg" alt="bike">
            </figure>
            <p>Bike</p>
            <p>$30.00</p>
               
        </div>
        </div>
    </div>
   

</div>    
</body>
</html>

Todo iba bien hasta esta clase 馃槮
Minuto 3:36 -> grid-template-rows: auto 1fr auto;
quise darle alineaci贸n a la fecha, numero de articulo y precio final pero en realidad estaba dandole alineaci贸n a todo eso + el shopping-cart
Me confunde!!!

Me fue m谩s f谩cil usar flexbox para alinear los items que con CSS Grid, y tambi茅n porque hasta el primer minuto el c贸digo de la profesora no me funcionaba a m铆 as铆 que tuve que hacerlo diferente para lograr el mismo resultado.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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>Yard Sale | My order</title>
    <style>
        :root {
              --black: #000000;
              --gray: #777777;
              --white: #FFFFFF;
              --sm: 12px;
              --md: 16px;
              --lg: 20px;
              --very-light-pink: #C7C7C7;
              --text-input-field: #F7F7F7;
              --hospital-green: #ACD9B2;
          }
        body {
            margin: 0;
            font-family: 'Quicksand', sans-serif;
        }
        .main-container {
            width: 100%;
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            place-items: center;
        }
        .order-container {
            width: 480px;
            height: 120px;
        }
        .title {
            font-size: var(--lg);
            margin: 0 0 36px 0;
        }
        .order-info {
            background: var(--text-input-field);
            border-radius: 16px;
            display: flex;
            padding-left: 24px;
            align-items: center;
        }
        span {
            display: inline-block;
            width: 100%;
            text-align: center;
        }
        span:first-child {
            display: flex;
            flex-direction: column;
        }
        .date {
            font-size: var(--lg);
            font-weight: bold;
        }
        .quantity {
            color: var(--very-light-pink);
        }
        .total {
            width: 100%; /* ser铆a lo mismo */
            padding-right: 24px; /* que colocar */
            text-align: right; /* padding-left: 55% */
            font-size: var(--md);
            font-weight: bold;
        }
        .carts-container {
            margin-top: 24px;
        }
        .shopping-cart {
            display: grid;
            grid-template-columns: auto 1fr auto;
            width: 480px;
            height: 128px;
            align-items: center;
        }
        .shopping-cart figure {
            margin: 0;
        }
        .shopping-cart figure img {
            width: 128px;
            height: 128px;
            object-fit: cover;
        }
        .product-info {
            color: var(--very-light-pink);
            padding-left: 16px;
        }
        .product-value {
            padding-right: 16px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="main-container">
        <div class="order-container">
            <h1 class="title">My order</h1>
            <div class="order-info">
                <p>
                    <span class="date">04.25.2021</span>
                    <span class="quantity">6 articles</span>
                </p>
                <p class="total">$ 560.00</p>
            </div>
        </div>
        <div class="carts-container">
            <div class="shopping-cart">
                <figure>
                    <img src="https://www.ghost-bikes.com/fileadmin/_processed_/8/c/csm_ghost-bikes-Riot-Trail-essential-black-black-45_38d9fe71b8.png" alt="bike">
                </figure>
                <p class="product-info">Bike</p>
                <p class="product-value">$ 120.00</p>
            </div>
            <div class="shopping-cart">
                <figure>
                    <img src="https://www.ghost-bikes.com/fileadmin/_processed_/8/c/csm_ghost-bikes-Riot-Trail-essential-black-black-45_38d9fe71b8.png" alt="bike">
                </figure>
                <p class="product-info">Bike</p>
                <p class="product-value">$ 120.00</p>
            </div>
            <div class="shopping-cart">
                <figure>
                    <img src="https://www.ghost-bikes.com/fileadmin/_processed_/8/c/csm_ghost-bikes-Riot-Trail-essential-black-black-45_38d9fe71b8.png" alt="bike">
                </figure>
                <p class="product-info">Bike</p>
                <p class="product-value">$ 120.00</p>
            </div>
            <div class="shopping-cart">
                <figure>
                    <img src="https://www.ghost-bikes.com/fileadmin/_processed_/8/c/csm_ghost-bikes-Riot-Trail-essential-black-black-45_38d9fe71b8.png" alt="bike">
                </figure>
                <p class="product-info">Bike</p>
                <p class="product-value">$ 120.00</p>
            </div>
            <div class="shopping-cart">
                <figure>
                    <img src="https://www.ghost-bikes.com/fileadmin/_processed_/8/c/csm_ghost-bikes-Riot-Trail-essential-black-black-45_38d9fe71b8.png" alt="bike">
                </figure>
                <p class="product-info">Bike</p>
                <p class="product-value">$ 120.00</p>
            </div>
        </div>
    </div>
</body>
</html>

Pero es satisfactorio cuando lo logras =,)

Esa sensacion cuando lograr arreglarlo por que te existen errores con el grid o flex鈥 馃槂

As铆 me quedo, voy un poco lento, pero he entendido y puesto en practica todo. Also Im learning english in Platzi鈥檚 school.

Para los estilos de la clase order, los pude realizar tambien con flex de la siguiente manera :

.order{
        background-color: var(--text-input-field);
        border-radius: 10px;
        display: flex;       
        justify-content: space-between;
        padding: 0 10px;
        margin-bottom: 24px;
    }

Muy buenos trucos con esa magia del display: grid

   <style>
        :root {
            --white: #FFFFFF;
            --black: #000000;
            --very-light-pink: #C7C7C7;
            --text-input-field: #F7F7F7;
            --utility-red: #E80303;
            --sm: 14px;
            --md: 16px;
            --lg: 18px;
        }

        body {
            margin: 0;
            font-family: 'Quicksand', sans-serif;
        }

        .my-order {
            width: 100%;
            height: 100vh;
            display: grid;
            place-items: center;
        }

        .my-order-container {
            display: grid;
            grid-template-rows: auto 1fr auto;
            width: 300px;
        }

        .my-order-content {
            display: flex;
            flex-direction: column;
        }

        .order {
            display: grid;
            grid-template-columns: auto 1fr;
            gap: 16px;
            align-items: center;
            background-color: var(--text-input-field);
            margin-bottom: 24px;
            border-radius: 8px;
            padding: 0 24px;
        }

        .order p:nth-child(1) {
            display: flex;
            flex-direction: column;
        }

        .order p span:nth-child(1) {
            font-size: var(--md);            
            font-weight: bold;

        }

        .order p span:nth-child(2) {            
            font-size: var(--sm);
            color: var(--very-light-pink);
        }

        .order p:nth-child(2) {
            text-align: end;
            font-weight: bold;
        }

        .title {
            font-size: var(--lg);
            margin-bottom: 40px;
        }

        .shopping-cart {
            display: grid;
            grid-template-columns: auto 1fr auto auto;
            gap: 16px;
            margin-bottom: 24px;
            align-items: center;
        }

        .shopping-cart figure {
            margin: 0;
        }

        .shopping-cart figure img {
            width: 70px;
            height: 70px;
            border-radius: 20px;
            object-fit: contain;
            border: 1px solid var(--very-light-pink);
        }

        .shopping-cart p:nth-child(2) {
            color: var(--very-light-pink);
        }

        .shopping-cart p:nth-child(3) {
            font-size: var(--md);
            font-weight: bold;
        }
    </style>

Mi aporte

<!DOCTYPE html>
<html lang=鈥渆n鈥>
<head>
<meta charset=鈥淯TF-8鈥>
<meta http-equiv=鈥淴-UA-Compatible鈥 content=鈥淚E=edge鈥>
<meta name=鈥渧iewport鈥 content=鈥渨idth=device-width, initial-scale=1.0鈥>
<link rel=鈥渟tylesheet鈥 href=鈥渃las9.css鈥>
<link rel=鈥減reconnect鈥 href=鈥https://fonts.googleapis.com鈥>
<link rel=鈥減reconnect鈥 href=鈥https://fonts.gstatic.com鈥 crossorigin>
<link href=鈥https://fonts.googleapis.com/css2?family=Quicksand:[email protected];500;700&family=Source+Serif+4&display=swap鈥 rel=鈥渟tylesheet鈥>
<title>Clas9</title>
</head>
<body>
<div class=鈥渕y-order-detail鈥>
<div class=鈥渂ox-father鈥>
<p class=鈥渢itulo鈥>My order</p>
<div class=鈥渄etail鈥>
<div class=鈥渋nfo-date鈥>
<p>10.02.2022</p>
<p>1 article</p>
</div>
<div class=鈥減recio鈥>
<p>$ 1500,00</p>
</div>
</div>
<div class=鈥渇igure鈥>
<div class=鈥渋mage-date鈥>
<img src=鈥https://i.pinimg.com/564x/dc/a0/a6/dca0a68b8d373d88caafb8802ca64371.jpg鈥 alt="">
<p>Funko </p>
</div>
<div class=鈥渧alue鈥>
<p>$1500,00</p>
</div>
</div>
<div class=鈥渇igure鈥>
<div class=鈥渋mage-date鈥>
<img src=鈥https://i.pinimg.com/564x/dc/a0/a6/dca0a68b8d373d88caafb8802ca64371.jpg鈥 alt="">
<p>Funko </p>
</div>
<div class=鈥渧alue鈥>
<p>$1500,00</p>
</div>
</div>
<div class=鈥渇igure鈥>
<div class=鈥渋mage-date鈥>
<img src=鈥https://i.pinimg.com/564x/dc/a0/a6/dca0a68b8d373d88caafb8802ca64371.jpg鈥 alt="">
<p>Funko </p>
</div>
<div class=鈥渧alue鈥>
<p>$1500,00</p>
</div>
</div>
<div class=鈥渇igure鈥>
<div class=鈥渋mage-date鈥>
<img src=鈥https://i.pinimg.com/564x/dc/a0/a6/dca0a68b8d373d88caafb8802ca64371.jpg鈥 alt="">
<p>Funko </p>
</div>
<div class=鈥渧alue鈥>
<p>$1500,00</p>
</div>
</div>
</div>
</div>
</body>
</html>

:root {
鈥搘hite: #ffffff;
鈥揵lack: #000000;
鈥搗ery-light-pink: #c7c7c7;
鈥搕ext-input-field: #f7f7f7;
鈥揾ospital-green: #acd9b2;
鈥搒m: 14px;
鈥搈d: 16px;
鈥搇g: 18px;
}

body {
font-family: 鈥楺uicksand鈥, sans-serif;
margin: 0;
background-color: var(鈥搘hite);

}

.my-order-detail {
margin: 0px;
}

.box-father {
display: grid;
justify-content: center;
width: 100%;

}

.box-father p {
font-size: var(鈥搇g);
font-weight: bold;
margin-top: 40px;
margin-bottom: 40px;
}

.detail {
display: flex;
justify-content: space-between;
width: 400px;
height: 70px;
background-color: var(鈥搕ext-input-field);
border-radius: 14px;
margin-bottom: 20px;
}

.info-date {
display: grid;
align-items: center;
margin: 5px 0px 5px 15px;
}

.info-date p {
margin: 0px;
}

.info-date p:nth-child(1) {
align-self: flex-end;
font-weight: bold;
font-size: var(鈥搈d);
}

.info-date p:nth-child(2) {
align-self: flex-start;
color: var(鈥搗ery-light-pink);
font-size: var(鈥搒m);

}

.precio {
display: flex;
align-items: center;

}

.precio p {
font-size: var(鈥搈d);
font-weight: bold;
margin-right: 20px;
}

.figure {
display: flex;
height: 90px;
justify-content: space-between;
align-items: center;

}
.figure img{
width: 75px;
height: 70px;
border-radius: 12px;
object-fit: cover;
align-self: center;
}

.image-date {
display: flex;
}
.image-date p {
align-self: center;
margin-left: 14px;
font-size: var(鈥搒m);
color: var(鈥搗ery-light-pink);
font-weight: lighter;
}

.value p {
font-size: var(鈥搈d);
font-weight: bold;
}

@media (max-width: 640px) {
.titulo {
display: none;
}
.box-father {
margin-top: 40px;
margin-left: 20px;
}
.figure {
margin-right: 20px;
}
}

La empec茅 a trabajar desde la clase pasada, y como reto personal, estoy tratando de replicarlo antes de que inicie la clase:

Listo para ver la clase y aprender cosas nuevas que me ayuden en las actividades posteriores.

Mobile:

Desktop:

mi aporte
<body>

<div class="my-order">
    <div class="my-order-container">
        <h1 class="title">My order</h1>
        <div class="my-order-content">
            <div class="order" >
                <p >
                    <span>01/26/22</span>
                    <span>3 articles</span>
                </p>
                <p>$560,00</p> 
            </div> 
                <div class="shopping-cart">
                    <figure>
                        <img src="https://images.pexels.com/photos/1592384/pexels-photo-1592384.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="auto">
                    </figure>
                    <p>Carro</p>
                    <p>$23,400.00</p>
                </div>
        
                <div class="shopping-cart">
                    <figure>
                        <img src="https://images.pexels.com/photos/10257920/pexels-photo-10257920.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="moto">
                    </figure>
                    <p>Moto</p>
                    <p>$8,900.00</p>
                </div> 
                
                <div class="shopping-cart">
                    <figure>
                        <img src="https://images.pexels.com/photos/46148/aircraft-jet-landing-cloud-46148.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="avion">

                    </figure>
                    <p> Avion</p>
                    <p>$1,000,000.00</p>
                </div>                                 
            </div>
        </div>
    </div>
</div>

</body>

Recuerden el consejo que la @teffcode siempre nos brinda, primero miren la clase sin codear, luego vuelvan a verla codeando o escriban el c贸digo lo mas que se acuerden sin ver y de ultimas vuelvan a practicarlo sin ver la clase,鈥 Con eso si te pierdes, siempre puedes volver a la clase ver de nuevo y volver a intentarlo!

Hola Equipo,

Asi es como resolvi mi practica de este video, esta un poco diferente al de la profesora 馃槂.

y este es el codigo
<!DOCTYPE html>
<html lang=鈥渆n鈥>
<head>
<meta charset=鈥淯TF-8鈥>
<meta http-equiv=鈥淴-UA-Compatible鈥 content=鈥淚E=edge鈥>
<meta name=鈥渧iewport鈥 content=鈥渨idth=device-width, initial-scale=1.0鈥>
<link rel=鈥減reconnect鈥 href=鈥https://fonts.googleapis.com鈥>
<link rel=鈥減reconnect鈥 href=鈥https://fonts.gstatic.com鈥 crossorigin>
<link href=鈥https://fonts.googleapis.com/css2?family=Quicksand:[email protected];500;700&display=swap鈥 rel=鈥渟tylesheet鈥>
<title>Document</title>
<style>
:root{
鈥搘hite: #FFFFFF;
鈥揵lack: #000000;
鈥搗ery-light-pink: #C7C7C7;
鈥搕ext-input-field: #F7F7F7;
鈥揾ospital-green: #ACD9B2;
鈥揹ark: #232830;
鈥揹ark-ligth: #5d626a;
鈥搒m: 14px;
鈥搈d: 16px;
鈥搇g: 18px;
}
body {
margin: 0;
font-family: 鈥楺uicksand鈥, sans-serif;
}
.my-order{
width: 100%;
height: 100vh;
display: grid;
place-items: center;
}
.tittle{
font-size: var(鈥搇g);
margin-bottom: 40px;
}
.my-order-container{
width: 100%;
display: grid;
grid-template-rows: auto 1fr auto;
width: 400px;
}
.my-order-content{
display: flex;
flex-direction: row;
justify-content: space-between;
background: var(鈥搕ext-input-field);
border-radius: 10px;
align-items: center;
margin-bottom: 24px;
}
.my-order-content p:nth-child(1){
display: flex;
flex-direction: column;
margin: 20px;
}
.my-order-content p span:nth-child(1){
font-weight: bold;
margin-bottom: 4px;
font-size: var(鈥搇g);
color: var(鈥揵lack);
}
.my-order-content p span:nth-child(2){
color: var(鈥搗ery-light-pink);
}
.my-order-content p:nth-child(2){
margin: 20px;
font-weight: bold;
color: var(鈥揹ark-ligth);
}
.shopping-card{
width: 100%;
display: flex;
flex-direction: row;
justify-content: start;
align-items: center;
}
.shopping-card figure{
margin: 10px 25px 10px 10px;
}
.shopping-card figure img{
width: 80px;
height: 80px;
border-radius: 20px;
object-fit: cover;
}
.parr-shopping{
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.parr-shopping p:nth-child(1){
color: var(鈥搗ery-light-pink);
}
.parr-shopping p:nth-child(2){
font-size: var(鈥搈d);
font-weight: bold;
padding-left: 80px;
color: var(鈥揹ark-ligth);
}
</style>
</head>
<body>
<div class=鈥渕y-order鈥>
<div class=鈥渕y-order-container鈥>
<h1 class=鈥渢ittle鈥>
My orders
</h1>
<div class=鈥渕y-order-content鈥>
<p>
<span>04.25.2021</span>
<span>6 articles</span>
</p>
<p>
$560.00
</p>
</div>
<div class=鈥渟hopping-card鈥>
<figure>
<img src=鈥https://images.pexels.com/photos/2533266/pexels-photo-2533266.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260鈥 alt="">
</figure>
<div class=鈥減arr-shopping鈥>
<p>
Lipstick
</p>
<p>
$120,00
</p>
</div>
</div>
<div class=鈥渟hopping-card鈥>
<figure>
<img src=鈥https://images.pexels.com/photos/1279107/pexels-photo-1279107.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940鈥 alt="">
</figure>
<div class=鈥減arr-shopping鈥>
<p>
Alexa
</p>
<p>
$120,00
</p>
</div>
</div>
<div class=鈥渟hopping-card鈥>
<figure>
<img src=鈥https://images.pexels.com/photos/2633986/pexels-photo-2633986.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940鈥 alt="">
</figure>
<div class=鈥減arr-shopping鈥>
<p>
Make Up
</p>
<p>
$100,00
</p>
</div>
</div>
<div class=鈥渟hopping-card鈥>
<figure>
<img src=鈥https://images.pexels.com/photos/4464481/pexels-photo-4464481.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940鈥 alt="">
</figure>
<div class=鈥減arr-shopping鈥>
<p>
Notebook
</p>
<p>
$140,00
</p>
</div>
</div>
<div class=鈥渟hopping-card鈥>
<figure>
<img src=鈥https://images.pexels.com/photos/5766564/pexels-photo-5766564.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940鈥 alt="">
</figure>
<div class=鈥減arr-shopping鈥>
<p>
Glasses
</p>
<p>
$130,00
</p>
</div>
</div>
<div class=鈥渟hopping-card鈥>
<figure>
<img src=鈥https://images.pexels.com/photos/7428092/pexels-photo-7428092.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940鈥 alt="">
</figure>
<div class=鈥減arr-shopping鈥>
<p>
Natural Oil
</p>
<p>
$150,00
</p>
</div>
</div>
</div>
</div>
</body>
</html>

Saludos

Les comparto mi practica:

HTML

<!DOCTYPE html>
<html lang="es-mex">
  <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" />
    <title>navbar</title>
    <link
      rel="shortcut icon"
      href="./Platzi Yard Sale/Platzi_YardSale_Logos/favicon_yard_sale.svg"
      type="img"
    />
    <link rel="stylesheet" href="./mi_Orden.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];400;500;700&family=Roboto:[email protected]&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <div class="my-order">
      <div class="my-order-container">
        <h1 class="title">My order</h1>
        <div class="my-order-content">
          <p>
            <span>04.25.21</span>
            <span>6 articles</span>
          </p>
          <p>$560.00</p>
        </div>

        <div class="shopping-cart">
          <figure>
            <img
              src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
              alt="bike"
            />
          </figure>
          <p>Bike</p>
          <p>$30,00</p>
        </div>
        <div class="shopping-cart">
          <figure>
            <img
              src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
              alt="bike"
            />
          </figure>
          <p>Bike</p>
          <p>$30,00</p>
        </div>
        <div class="shopping-cart">
          <figure>
            <img
              src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
              alt="bike"
            />
          </figure>
          <p>Bike</p>
          <p>$30,00</p>
        </div>
        <div class="shopping-cart">
          <figure>
            <img
              src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
              alt="bike"
            />
          </figure>
          <p>Bike</p>
          <p>$30,00</p>
        </div>
      </div>
    </div>
  </body>
</html>

CSS

:root {
  --very-light-pink: #c7c7c7;
  --text-input-field: #f7f7f7;
  --hospital-green: #acd9b2;
  --white: #ffffff;
  --black: #000000;
  --dark: #232830;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 62.5%;
}

body {
  font-family: "Quicksand", sans-serif;
}

.my-order {
  width: 100%;
  height: 100vh;
  display: grid;
  place-items: center;
}

.title {
  font-size: 3rem;
  margin-bottom: 40px;
}

.my-order-container {
  display: grid;
  grid-template-rows: auto 1fr auto;
  width: 300px;
}

.my-order-content {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: center;
  background-color: var(--text-input-field);
  margin-bottom: 24px;
  border-radius: 8px;
  padding: 15px 24px;
}

.my-order-content p:nth-child(1) {
  display: flex;
  flex-direction: column;
}
.my-order-content p:nth-child(2) {
  text-align: end;
  font-weight: 700;
}
.my-order-content p span:nth-child(1) {
  font-weight: bold;
}

.shopping-cart {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 16px;
  align-items: center;
  margin-bottom: 24px;
}

.shopping-cart figure img {
  width: 70px;
  height: 70px;
  border-radius: 20px;
  object-fit: cover;
}

.shopping-cart p:nth-child(2) {
  color: var(--very-light-pink);
}
.shopping-cart p:nth-child(3) {
  font-weight: bold;
}


Solo vi el video una vez, lo demas me tome la libertad de hacer mi propio codigo, aunque el video me sirvio muchisimo porque al fin creo que estoy entendiendo esto del grid鈥 y es una ayuuda enorme para posicionar elementos. 鉂わ笍

Me perd铆 un poco al principio as铆 que decid铆 verlo tranquilamente por mi cuenta y llegu茅 a esta estructura del HTML:
/
my-order.html

<body>
<main class="container">
	<section class="order__container">	
		<h1 class="title">My order</h1>
		
		<div class="order__resume">
        		<div>
          			<p class="date">01.05.2022</p>
          			<p class="quantity">4 articles</p>
        		</div>

        		<p class="total">$ 120.00</p>
      		</div>

      		<div class="product">
        		<div>
          			<figure class="product--image__container">
            				<img class="product--image" src="./images/bike.jpeg" alt="Product image">
          			</figure>

          			<p class="product--name">Bike</p>
			</div>

        		<p class="product--price">$ 30,00</p>
		</div>

		<!-- Copias del <div class="product"> -->
	</section>
</main>
</body>

Para los estilos me gui茅 al principio con esta clase, una/dos cosas de clases anteriores y lo dem谩s vino por mi cuenta con lo que sab铆a y lo que fui aprendiendo en el curso:
/
my-order.sass

@use 'modules/global'
@use 'modules/colors'
@use 'modules/fonts'

$image-size: 60px
$separation: 16px

body
    @include global.global

.container
    display: grid
    place-items: center
    width: 100%
    height: 100vh

.order__container
    display: grid
    width: 300px

    .title
        display: none
        margin-top: 0px
        margin-bottom: 3rem
        font-size: fonts.$md

    .order__resume
        display: flex
        justify-content: space-between
        align-items: center
        margin-bottom: $separation
        padding-left: 16px

        div
            .date, .quantity
                font-size: fonts.$sm

            .date
                margin-bottom: 8px
                font-weight: bold

            .quantity
                margin-top: 0
                color: colors.$secondary-color

        .total
            font-size: fonts.$sm
            font-weight: bold

    .product
        display: flex
        justify-content: space-between
        align-items: center
        margin-bottom: $separation

        div
            display: flex
            align-items: center

            .product--image__container
                width: $image-size
                height: $image-size
                margin: 0
                margin-right: $separation

                .product--image
                    width: 100%
                    height: 100%
                    border-radius: 12px
                    object-fit: cover

            .product--name
                font-size: fonts.$sm
                color: colors.$secondary-color

        &--price
            font-size: fonts.$sm
            font-weight: bold

@media (min-width: 640px)
    .order__container
        .title
            display: block

Estoy disfrutando del curso!

Mi resultado 馃槂

Tuve muchos inconvenientes con display grid en el contenerdor principal, dado que el campo del titulo lo crec铆a demasiado, y por ende quedaba rara la interfaz. Decid铆 mejor usar flex, dejo aqu铆 el CSS correspondiente:

.my-order {
    width: 100%;
    height: 100vh;
    display: flex;
    padding: 24px;
    flex-direction: column;
    margin: auto;
}

.my-order h1 {
    font-size: var(--lg);
}

.my-order-container {
    display: grid;
    grid-template-rows: auto 1fr auto;
    margin-top: 24px;
}

Por fin, ya no me vota error:

Pa los que quieran el 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">
    <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>Class 1</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;
            font-family:'Quicksand',sans-serif;
        }
        .my-order{
            width: 100%;
            height: 100vh;
            display: grid;
            place-items: center;
        }   
        @media only screen and (max-width: 500px) and (min-width: 341px) {  
            .my-order{
            width: 100%;
            height: 80vh;
            display: grid;
            place-items: center;
        }   
        } 
        .my-order .title{
            font-size: var(--lg);
            margin: 40px 0;
        } 
        .my-order-container{
            display: grid;
            grid-template-rows: auto 1fr auto;
            width: 300px;
        }
        .my-order-content{
            display: flex;
            flex-direction: column;
        }
        .order{
            display: grid;
            grid-template-columns: auto 1fr;
            gap: 20px;
            align-items: center;
            background-color: var(--text-input-field);
            padding: 0 24px;
            margin-bottom: 24px;
            border-radius: 16px;
        }
        .order p:nth-child(2){
            text-align: right;
        }
        .order p span:nth-child(1){
            font-weight: bold;
        }
        .order p span:nth-child(3){
            font-size: var(--sm);
            font-weight: lighter;
            color: var(--very-light-pink);
        }
        .shopping-cart{
            display: grid;
            grid-template-columns: auto 1fr auto auto;
            gap: 20px;
            margin-top: 20px;
            margin-bottom: 20px;
        }
        .shopping-cart figure {
            margin: 0;
        }
        .shopping-cart figure img{
            width: 70px;
            height: 70px;
            border-radius: 24px;
        }
        .shopping-cart p:nth-child(2){
            color: var(--very-light-pink);
        }
        .shopping-cart p:nth-child(3){
            font-size: var(--md);
            font-weight: bold;
        }
        
    </style>
</head>
<body>
    <div class="my-order">
        <div class="my-order-container">
            <h1 class="title">My order</h1>
            <div class="my-order-content">
                <div class="order">
                    <p>
                        <span>03.25.21</span><br>
                        <span>6 art铆culos</span>
                    </p>
                    <p>$4800.00</p>
                </div>
                <div class="shopping-cart">
                    <figure>
                        <img src="/pexels-nana-dua-4581902.jpg" alt="RTX 2060">
                    </figure>
                    <p>RTX 2080</p>
                    <p>$800</p>
                </div>
                <div class="shopping-cart">
                    <figure>
                        <img src="/pexels-nana-dua-4581902.jpg" alt="RTX 2060">
                    </figure>
                    <p>RTX 2080</p>
                    <p>$800</p>
                </div>
                <div class="shopping-cart">
                    <figure>
                        <img src="/pexels-nana-dua-4581902.jpg" alt="RTX 2060">
                    </figure>
                    <p>RTX 2080</p>
                    <p>$800</p>
                </div>
                <div class="shopping-cart">
                    <figure>
                        <img src="/pexels-nana-dua-4581902.jpg" alt="RTX 2060">
                    </figure>
                    <p>RTX 2080</p>
                    <p>$800</p>
                </div>
                <div class="shopping-cart">
                    <figure>
                        <img src="/pexels-nana-dua-4581902.jpg" alt="RTX 2060">
                    </figure>
                    <p>RTX 2080</p>
                    <p>$800</p>
                </div>
                <div class="shopping-cart">
                    <figure>
                        <img src="/pexels-nana-dua-4581902.jpg" alt="RTX 2060">
                    </figure>
                    <p>RTX 2080</p>
                    <p>$700</p>
                </div>
            </div> 
        </div>
    </div>
</body>
</html>

Nunca pares de aprender y desarrollar nuevas habilidades, y lo aprendido se perfecciona con la practica 馃槂

Hasta ahora todo se ve bien jeje:

Comparto mis resultados:

*{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

Sacado del excelente curso definitivo de HTML y CSS, de esta manera quitan todo el margin y padding por defecto que ponen los navegadores.
border-box sirve para incluir padding y margin dentro de la medida total del elemento, ejemplo:

div{
width: 100px;
height: 100px;
margin: 20px;
} 

Sin el border-box tendrian un div de medidas de 140px X 140px, como si el margin saliera de la caja
Con el border-box tendrian un div de medidas 100px X 100px, como si el margin se restara del tama帽o para que no sobresalga de la caja.

La verdad muy 煤til usar border-box.

As铆 va, la verdad que nunca hab铆a usado grid pero es una maravilla

hay la llevo: