No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Mi orden: CSS

16/22
Recursos

Estilizaremos el c贸digo HTML que realizamos para la secci贸n my order con las opciones que nos brinda CSS para lograr que usuarios vean su pedido de esta manera:

myorder-desktop.png

C贸mo aplicar CSS en una orden de compra

Una orden de compra tiene una cantidad indefinida de art铆culos y por eso debemos implementar estilos de CSS que funcionen tanto para ventas menores como para ventas mayores de miles de art铆culos.

驴Qu茅 debemos hacer para construir estas dos vistas? Sigue estos pasos:

  1. Define las dimensiones del contendor principal y centra su contenido
.my-order {
      width: 100%;
      height: 100vh;
      display: grid;
      place-items: center;
    }

La medida relativa vh, viewport height, define la altura del contenedor. En este caso le estamos diciendo que sea del total de la pantalla.


  1. Establece el tama帽o de la fuente del t铆tulo y su separaci贸n de la barra de totales
.title {
      font-size: var(--lg);
      margin-bottom: 40px;
    }
  1. Prepara la grilla de CSS Grid
.my-order-container {
      display: grid;
      grid-template-rows: auto 1fr auto;
      width: 300px;
    }
  1. Brinda espacio a los elementos y confecciona otra grilla
.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;
    }
  1. Define la parte visual de 鈥渟hopping cart鈥
    .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;
    }

驴Qu茅 logra object-fit en CSS?

A las im谩genes le aplicamos la propiedad object-fit, ya que resuelve como el contenido se ajustar谩 a su contendor.

Sus valores pueden ser:

  • containmantiene la relaci贸n de aspecto mientras le ajusta dentro del contendedor.
  • covermantiene la realci贸n de aspecto, pero la ajusta para llenar el contenedor.
  • fillmodifica su tama帽o para llenar el contenedor.
  • none 鈫 no se redimensiona.
  • scale-down 鈫 el contenido se dimensiona como si none o contain estuvieran especificados, lo que resulta en un tama帽o de objeto concreto m谩s peque帽o.

Documentaci贸n.


驴Sab铆as que tener en claro estos conceptos te puede favorecer en una entrevista de trabajo?
Mira lo que te pueden preguntar acerca de HTML y CSS para el puesto de frontend developer.


Contribuci贸n creada por: Guadalupe Monge Barale

Aportes 210

Preguntas 27

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

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.

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 馃槂

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>

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

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.

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;
}

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.

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

Ahi vamos鈥

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.

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.

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.

La peor clase que he visto en este curso. Siento que Estefany va maquetando a como se le viene en mente (lo cual puede pasar en el mundo laboral, mas no en un curso donde lo menos que hay que hacer es enredar al estudiante). Igualmente, me parece una buena profe y hasta el momento he entendido, pero a duras penas.

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)

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.

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

Lo siento mucho pero este curso no me gusto para nada en lo absoluto, el desorden y la velocidad con la explica me confunde todo completamente, es una lastima me estaban gustando los cursos.

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

鈥淢y Order鈥 lo menos que tiene es orden鈥 馃槮
Entiendo que as铆 es la 鈥渧ida real鈥 pero ya manda, uno apenas esta iniciando a aprende y entre tanto borrar, copiar, pegar a lo loco de aqu铆 all谩, lo pierde a uno鈥 Mi forma de aprender es ir viendo, lo dentengo y lo hago, pero que va, ando super perdida con lo que ella hace, as铆 tan r谩pido y sin explicar bien鈥 excelente profesora, pero deber铆an de tener m谩s planificaci贸n!!! (s铆 lo llevo en 0.85x y apoyandome en GitHub)鈥 es solo mi pensar y parecer, si los profes o adm ven estos comentarios los deber铆an de tomar en cuenta.

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.

Recomiendo mucho el curso del profe Diego de Granda en donde explica muy bien las buenas pr谩cticas a tener en cuenta.

https://platzi.com/cursos/html-css/

Y luego en el siguiente curso se realiza un clon de Google como proyecto, tambi茅n muy interesante
https://platzi.com/cursos/html-practico/

Dejo la imagen para quien la quiera utilizar

馃槂

Muy desordenado esta clase, entiendo que muchos dicen que el desorden siempre habra en un proyecto real, pero estamos en este curso para aprender css con tanto desorden no se puede aprender efectivamente

lol, menos mal que usar muschos div era una mala practica

esta clase la note muy desordenada pero igual me sirve

**INTENSA Y DESORDENADA: **

En esta clase la profe me mare贸 mucho porque modificaba constantemente el c贸digo HTML y los estilos en CSS. Fue una clase bastante intensa y un poco desordenada (a mi entender).
SOLUCI脫N: bajarle la velocidad de reproducci贸n a 0.85 me ayud贸 mucho.

El resto de las clases hasta ahora son excelentes!!!
1.000 Gracias!

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鈥

Me gustar铆a compartir una de las formas que a m铆 me ha ayudado para poder tener mejor aprendizaje a lo largo de los cursos que he tomado

  1. Ver toda la clase sin parar el video ni generar una sola l铆nea de c贸digo.
  2. Volver el video al principio y antes que el profesor comience a realizar el c贸digo hacer todo lo que ya he aprendido y me acuerdo (por lo general siempre se explican que van a hacer antes de realizar el c贸digo).
  3. si algo de lo que se est谩 diciendo no lo tengo claro lo pauso el video y busco en ese momento es muy 煤til y ayuda a complementar lo que estoy aprendiendo.
  4. continuo con la clase para ver si lo que realice con lo que ya sabia es igual a lo que nos propone el profesor y en muchos casos se llega al mismo resultado pero en diferentes formas.
    Esta es una de las mejores estrategias que me han ayudado con mi aprendizaje virtual, ya que puedo pausar o devolver e incluso buscar algo que no tengo muy claro y aclararlo en el momento espero les sea de ayuda.

Me tom茅 la libertad de agregarle el bot贸n de ir a pagar

Decid铆 poner los iconos a los lados

Pues as铆 vamos

En este curso la profesora se equivoco una vez en el video anterior, que luego en este video lo volvi贸 a arreglar y en el minuto 5:40 aproximadamente lo vuelve a dejar como estaba en el video anterior. La verdad es que es muy dificil seguir el curso as铆, si se equivoca tantas veces deber铆an editarlo y dejar el definitivo, o al menos en pdf el codigo final. El que se perdi贸 como lo soluciona? Si bien se puede ver el video las veces que queramos, la profe luego no muestra como queda el html simplemente refresca la pagina y continua. Va a un ritmo dificil de seguir, ella ya lo sabe pero nos lo est谩 ense帽ando, y de esta manera no se entiende nada. El curso venia perfecto, hasta que llego la parte de 鈥渕i orden鈥. Hasta parece que lo hace rapido para sacarselo de encima.

Recomendaciones; 1. Primero ver el video sin pausas y sin generar una linea de c贸digo. 2. Una ves visto el video tratar de generar el mismo resultado sin ver el c贸digo fuente o regresar al video, tambi茅n apoyandose de ChatGPT y el canal de Y2 soydalto. 3. Comparar el c贸digo propio con el c贸digo de la profesora y hacer los ajustes necesarios. 4. A帽adir un estilo propio y/o explorar diferentes maneras de llegar al mismo resultado. Ejemplo: la profesora hace uso de clases para el padre y despu茅s accede a los hijos trav茅s de el pero aveces esto genera problemas de especificidad los cuales pueden ser resueltos al hacer uso de los ids por ejemplo y no solo hacer uso del !important. PD: Estoy de acuerdo en que el curso puede y deber铆a ser mejorado sin embargo es mejor verlo como una oportunidad de poner en practica el pensamiento critico y no solo copiar y pegar lo que la profesora va haciendo.

Todo el curso tuve que estar poniendo de nuevo, la explicaci贸n es muy r谩pida, no hay un porque de las cosas, si bien tuvimos un curso te贸rico anterior al practico, para alguien (como yo) que esta en 0 de programaci贸n, no entiende muy bien la diferencia de un 鈥減鈥 a un 鈥渁鈥 y por que se usa mucho 鈥渄iv鈥 si aun principio dijeron que no es bueno usarlo demasiado

Resumen de los comentarios:
鈥淧pipipipipi鈥

El mio. 馃槂

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

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.

Cuando hizo la parte de grid-template-rows: auto 1fr auto, deberia explicar mas a fondo porque y como hizo o sabe ese calculo para que quede asi
![](https://static.platzi.com/media/user_upload/Captura-fe733946-42a2-44cb-9487-900d5d7db2b2.jpg)

Muy buena clase. Una demostraci贸n de que hay que planificar bien el html para no tener que modificarlo

Pues yo no lo hice exactamente igual que la profe porque me perd铆 entre tantos cambios que hizo al HTML, en la parte visual me quedo igual. Adem谩s yo estoy trabajando el CSS en un archivo separado y usando HTML sem谩ntico.

![](

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:wght@300;500;700&family=Roboto:wght@700&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="./styles/movile.css">
        <link rel="stylesheet" href="./styles/desktop.css" media="screen and (min-width: 420px)">
        <title>My order</title>
    </head>
    <body>
        <main class="mainContent">
            <div class="myOrderMainContainer">
                <h1 class="title myOrderTitle">My order</h1>
                <section class="myOrderMainContainer-content">
                    <p>
                        <span>10.01.2023</span>
                        <span>6 articles</span>
                    </p>
                    <p>
                        <span>$ 560.00</span>
                    </p>
                </section>
                <section class="myOrderMainContainer-shoppingCart">
                    <article>
                        <figure>
                            <img src="https://images.pexels.com/photos/1149601/pexels-photo-1149601.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Imagen de articulo">
                            <figcaption>Bike</figcaption>
                        </figure>
                        <p>
                            <span>$ 120.00</span>
                        </p>
                    </article>
                    <article>
                        <figure>
                            <img src="https://images.pexels.com/photos/1149601/pexels-photo-1149601.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Imagen de articulo">
                            <figcaption>Bike</figcaption>
                        </figure>
                        <p>
                            <span>$ 120.00</span>
                        </p>
                    </article>
                    <article>
                        <figure>
                            <img src="https://images.pexels.com/photos/1149601/pexels-photo-1149601.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Imagen de articulo">
                            <figcaption>Bike</figcaption>
                        </figure>
                        <p>
                            <span>$ 120.00</span>
                        </p>
                    </article>
                    <article>
                        <figure>
                            <img src="https://images.pexels.com/photos/1149601/pexels-photo-1149601.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Imagen de articulo">
                            <figcaption>Bike</figcaption>
                        </figure>
                        <p>
                            <span>$ 120.00</span>
                        </p>
                    </article>
                    <article>
                        <figure>
                            <img src="https://images.pexels.com/photos/1149601/pexels-photo-1149601.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Imagen de articulo">
                            <figcaption>Bike</figcaption>
                        </figure>
                        <p>
                            <span>$ 120.00</span>
                        </p>
                    </article>
                </section>
            </div>
        </main>
    </body>
</html>

CSS Mobil

:root{
    --very-ligth-pink: #c7c7c7;
    --text-imput-field: #F7F7F7;
    --hospital-green: #ACD9B2;
    --white: #FFFFFF;
    --black: #000000;
    --dark: #232830;
    --font-small: 1.4rem;
    --font-medium: 1.6rem;
    --font-large: 1.8rem;
}
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html{
    font-size: 62.5%;
}
body{
    font-family: 'Quicksand', sans-serif;
    /*font-family: 'Roboto', sans-serif;*/
}
/*My order*/
.mainContent{
    width: 100%;
    height: 100vh;
    display: grid;
    place-items: center;
    /*Con display: grid y place-items:center puedes centrar elementos en vertical y horizontal al mismo tiempo*/  
}
.title{
    font-size: var(--font-large);
    margin-bottom: 1.2rem;
    text-align: center;
}
.myOrderTitle{
    margin-bottom: 4rem;
}
.myOrderMainContainer, .myOrderMainContainer-shoppingCart {
    display: grid;
    grid-template-rows: auto 1fr auto;
    width: 28rem;
    gap: 1.2rem;
}
.myOrderMainContainer-content{
    display: flex;
    justify-content: space-between;
    padding: 1.6rem;
    background-color: var(--text-imput-field);
    border-radius: 0.8rem;
}
.myOrderMainContainer-content p:nth-child(1){
    display: flex;
    flex-direction: column;
}
.myOrderMainContainer-content p{
    font-size: var(--font-medium);
    font-weight: bold;
}
.myOrderMainContainer-content p:nth-child(1) span:last-child{
    font-weight: lighter;
    color: var(--very-ligth-pink);
    font-size: var(--font-small);
}
.myOrderMainContainer-shoppingCart article{
    display: flex;
    justify-content: space-between;
    margin-bottom: 1.2rem;
}
.myOrderMainContainer-shoppingCart article figure{
    display: flex;
    color: var(--very-ligth-pink);
    font-size: var(--font-medium);
    align-items: center;
}
.myOrderMainContainer-shoppingCart article p{
    display: flex;
    align-items: center;
    font-size: var(--font-medium);
    font-weight: bold;
}
.myOrderMainContainer-shoppingCart figure img{
    width: 7rem;
    height: 7rem;
    object-fit: cover;
    border-radius: 2rem;
    margin-right: 1.6rem;
}

Desktop CSS

/*My order*/
.myOrderTitle{
    margin-bottom: 4rem;
    text-align: start;
}
.myOrderMainContainer, .myOrderMainContainer-shoppingCart {
    width: 40rem;
    gap: 1.2rem;
}

Buenas鈥 No termino de entender porque en la clase .shopping-cart creamos un grid con 4 columnas (auto 1fr auto auto) cuando solo tenemos 3 contenidos dentro de la cart.
De hecho yo lo hice al grid solo con 3 columnas y lo veo mejor (auto 1fr auto).

        .shopping-cart {
            display: grid;
            grid-template-columns: auto 1fr auto;
            gap: 16px;
        }

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:wght@300;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>

Esta clase me sirvi贸 bastante, porque no me estaba saliendo tratando de seguir lo que Teff hac铆a.
As铆 que decid铆 hacer esta p谩gina por mi cuenta, pude practicar y como s铆 me salio puedo decir que s铆 he estado aprendiendo

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!

Asi me quedo, mi reto personal en esta clase fue hacer el HTML y el estilizado yo sola y luego compararlo con el de la profesora, no usamos lo mismo pero al final estoy contenta con mi resultado, lo comparto con todos, y seguimos aprendiendo.

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.

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;
    }

Agregue otros productos 馃槃

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! =,(

Fascinado con lo que va de este curso practico.

Increible clase!

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

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

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.

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:wght@300;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:

la clase de shopping-cart la hice con display flex y space-between

Mi avance de hoy.
Quien por aqu铆 2024! ![](https://static.platzi.com/media/user_upload/image-ead08e41-fe12-4ca6-b0a2-04a01e50ea51.jpg)

Para que quede alineado seg煤n el dise帽o:

Corregir: .shopping-cart

  • grid-template-columns
  • padding-right



Capturas del Inspector:

  • el gap se genera entre medio de dos columnas;
  • el tercer gap se debe a la cuarta columna 鈥渁uto鈥, que al estar vac铆a su ancho resulta de 0px;
  • PERO aunque no tenga ancho el gap igual se genera.

Soluci贸n propuesta:

El profe diego es mas claro y organizado utilizando buenas practicas y la profe Estefany no aplica estas buenas practicas pero esto nos ayuda a mover mas nuestra mente, analizar y a resolver errores durante el proceso, siempre es bueno tener en cuenta varias perspectivas.
en el .shopping.cart ser铆a bueno incluir padding-right: 24px para que los precios queden alineados seg煤n lo que est谩 en el dise帽o solicitado. ![](https://static.platzi.com/media/user_upload/image-eaf3fcca-94a8-4263-ac13-b21905d8c49e.jpg)
El Curso esta Excelente, muy buen Curso. El 脷nico Problema que encuentro es que la Profe Es Muy Buena Programando y a veces va demasiado r谩pido jajajajaja. Pero de Resto Muy Buen curso. (Recomiendo que le bajen la velocidad al Curso)
Profe muchas gracias por la clase, me gusta el hecho de que incluso en plena maquetaci贸n cambie cosas porque me ayuda a esta m谩s atento a los cambios y se siente un poco menos estructurado, la fluidez con la que explica y modifica, siento que asi debe de ser en un ambiente laboral
![](https://static.platzi.com/media/user_upload/image-9a53b081-f138-42df-ab50-61e3480530cf.jpg) asi quedo mi orden
mi dese帽o de una pagina de adopcion ![](https://static.platzi.com/media/user_upload/image-a5eabecb-0bc5-4d45-9c20-af329e6fbf86.jpg)
Genera m谩s confusi贸n la profesora

Recomiendo poner esto siempre en nuestra hojas de estilos para no tener que colocar margin: 0, o cosas as铆 para tener que resetear estilos:

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

Esto lo ense帽an en el curso definitivo de HTML y CSS. As铆 se puede trabajar m谩s c贸modo ya que se reinician esos estilos por defecto de todos los elementos que a veces suelen ser molestos.

Lo realic茅 de esta manera, utlic茅 m谩s flexbox que grid:

<!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:wght@300;500;700&display=swap"
      rel="stylesheet"
    />
    <title>Yard Sale</title>
    <style>
      :root {
        --sm: 1.6rem;
        --md: 1.8rem;
        --lg: 2rem;
        --very-light-pink: #c7c7c7;
        --white: #ffffff;
        --text-input-field: #f7f7f7;
        --black: #000000;
        --hospital-green: #acd9b2;
        --dark: #232830;
      }

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

      html {
        font-size: 62.5%;
      }

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

      .main-container {
        display: grid;
        justify-items: center;
        width: 100%;
        height: 100vh;
      }

      .my-order {
        display: flex;
        flex-direction: column;
        padding: 16px;
        width: inherit;
        max-width: 600px;
      }

      .my-order__title {
        display: none;
        margin-bottom: 48px;
        font-size: var(--lg);
      }

      .my-order__content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        padding: 16px;
        border-radius: 10px;
        font-size: var(--sm);
        font-weight: bold;
        color: var(--black);
        background-color: var(--text-input-field);
      }

      .my-order__info {
        display: flex;
        flex-direction: column;
      }

      .my-order__article-number,
      .my-order__article-name {
        font-size: 1.4rem;
        font-weight: 400;
        color: var(--very-light-pink);
      }

      .my-order__article {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        padding-right: 19px;
      }

      .my-order__article-img-container {
        display: flex;
        align-items: center;
        gap: 16px;
      }

      .my-order__article-img {
        width: 75px;
        height: 75px;
        border-radius: 20px;
        object-fit: cover;
      }

      .my-order__article-name {
        margin-right: 4px;
        text-wrap: wrap;
      }

      .my-order__article-price {
        font-size: var(--sm);
        font-weight: bold;
        text-wrap: nowrap;
      }

      @media (min-width: 640px) {
        .main-container {
          align-items: center;
        }

        .my-order {
          margin-top: 92px;
        }

        .my-order__title {
          display: block;
        }
      }
    </style>
  </head>
  <body>
    <main class="main-container">
      <div class="my-order">
        <h1 class="my-order__title">My order</h1>
        <div class="my-order__content">
          <p class="my-order__info">
            08.01.2024
            <span class="my-order__article-number">6 articles</span>
          </p>
          <p>$ 560.00</p>
        </div>

        <div class="my-order__article">
          <figure class="my-order__article-img-container">
            <img
              src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
              alt="A bike"
              class="my-order__article-img"
            />
            <figcaption class="my-order__article-name">Bike</figcaption>
          </figure>
          <p class="my-order__article-price">$ 120.00</p>
        </div>
        <div class="my-order__article">
          <figure class="my-order__article-img-container">
            <img
              src="https://images.pexels.com/photos/244553/pexels-photo-244553.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
              alt="A bike"
              class="my-order__article-img"
            />
            <figcaption class="my-order__article-name">Tire</figcaption>
          </figure>
          <p class="my-order__article-price">$ 180.00</p>
        </div>

        <div class="my-order__article">
          <figure class="my-order__article-img-container">
            <img
              src="https://images.pexels.com/photos/209235/pexels-photo-209235.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
              alt="A bike"
              class="my-order__article-img"
            />
            <figcaption class="my-order__article-name">Hammer</figcaption>
          </figure>
          <p class="my-order__article-price">$ 20.00</p>
        </div>
        <div class="my-order__article">
          <figure class="my-order__article-img-container">
            <img
              src="https://images.pexels.com/photos/210881/pexels-photo-210881.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
              alt="A bike"
              class="my-order__article-img"
            />
            <figcaption class="my-order__article-name">Wrench</figcaption>
          </figure>
          <p class="my-order__article-price">$ 40.00</p>
        </div>
        <div class="my-order__article">
          <figure class="my-order__article-img-container">
            <img
              src="https://images.pexels.com/photos/1866149/pexels-photo-1866149.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
              alt="A bike"
              class="my-order__article-img"
            />
            <figcaption class="my-order__article-name">Furniture</figcaption>
          </figure>
          <p class="my-order__article-price">$ 220.00</p>
        </div>
        <div class="my-order__article">
          <figure class="my-order__article-img-container">
            <img
              src="https://images.pexels.com/photos/39362/the-ball-stadion-football-the-pitch-39362.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
              alt="A bike"
              class="my-order__article-img"
            />
            <figcaption class="my-order__article-name">Soccer ball</figcaption>
          </figure>
          <p class="my-order__article-price">$ 190.00</p>
        </div>
      </div>
    </main>
  </body>
</html>

Resultado:

Muchas gracias y 茅xitos con tu c贸digo. Agradezco cualquier feedback 馃挌.

Me qued贸 una duda. .shopping-cart p:nth-child(2) { color: var(--very-light-pink); .shopping-cart p:nth-child(3) { font-size: var(--md); font-weight: bold; } porqu茅 2 y 3 si en ese div solo hay 2 \

o es que en el nth-child() se cuentan todos los items dentro del div, como en este caso, que antes de los 2 \

hay un \

Tengo una duda, al momento de especificar el estilo del contenedor han definido los siguientes estilos: `.my-order-container {聽 聽 聽 ` `display: grid;聽 聽 聽 ` `grid-template-rows: auto 1fr auto;聽 聽 聽 width: 300px;聽 聽 ` `}` pero no entiendo porque lo especificaron, entiendo que el grid-template-rows es para definir las proporciones verticalmente que va a tener la grid, pero verticalmente yo no logro identificar las 3 secciones (auto, 1fr, auto), intento ver a trav茅s del devtools de chrome pero igual no logro identificar cuales son esas 3 secciones, solo me aparece el h1 y el div: ![](https://static.platzi.com/media/user_upload/image-ffb7e863-e500-46d7-8c30-bbf57fe825d7.jpg) si me podr铆an explicar por favor porque no logro comprender esa parte. muchas gracias de antemano
As铆 es c贸mo cre茅 el contenedor de `my.order-content` sin agregar el `div` con la clase `order`: (Me parecio mas sencillo) ```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.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;700&display=swap" rel="stylesheet"> <title>Document</title> </head> <style> @import url(./basic.css); .my-order{ width: 100%; height: 100vh; } .my-order-container{ padding: 8px; } .title{ font-size: var(--lg); margin-bottom: 40px; } .shooping-card figure img{ width: 78px; height: 80px; border-radius: 20px; } .shooping-card { display: grid; grid-template-columns: auto 1fr auto auto; gap: 16px; margin-bottom: 12px; } .shooping-card figure{ margin: 0; } .shooping-card p:nth-child(3){ font-weight: bold; } .my-order-content{ display: flex; flex-direction: row; justify-content:space-between; background-color: rgb(235, 233, 233); padding: 8px 8px 4px 8px; border-radius: 8px; margin-bottom: 20px; } .my-order-content div p{ margin: 2px; font-weight: bold; } .total-art{ color:var(--very-ligtht-pink) ; } </style> <body> <seccion class="my-order">
<h1 class="title">My Order

03.25.23

6 articles

$560.00

Camara Vintage

$30,00

Turntable Vintage

$60,00

Phone Vintage

$30,00

Camara Vintage

$30,00

</seccion> </body> </html> ```
En mi opini贸n, como persona que se ha desempe帽ado en varios 谩mbitos laborales y aprendido de distintos oficios, creo que es mucho m谩s valioso ver a una persona con experiencia resolver problemas y abordar un proyecto sin necesariamente estar siguiendo un guion, que seguir un tutorial al pie de la letra y al final no entender por qu茅 se tom贸 una u otra decisi贸n. Todos estos dise帽os se podr铆an lograr siguiendo distintas rutas, y en las pasadas clases hemos visto c贸mo se toman decisiones consientes para materializar cada pantalla en particular. Siento que la idea de este curso es desarrollar ese criterio, m谩s que aprender a maquetar esta p谩gina de una sola manera.

馃鉁

Las explicaciones de TefCode son incre铆bles c:
Es sumamente satisfactorio ver como va quedando tal como en figma 鉁
.

Interesante esta parte 16

Me gustar脧a m谩s el curso si lo hiciera ya premeditado y editado, no me gusta as铆 en vivo, siento que se equivoca mucho y deseo que todo sea perfecto, haganlo porque estamos pagando

Otra solucion a la seccion de .order puede ser:

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

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

.order :nth-child(2) {
    font-weight: bold;
    color: var(--dark);
}

.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);
}

Gente recuerden que si el profesor se equivoca (que a ver se pueden equivocar tambien son humanos), lo ideal es tratar de buscar el error nosotros y asi aprender tambien a detectar errores en nuestro codigo, y no copiar al 100% el codigo dado en clase, ya que si no se practica no tiene ciencia. Seamos criticos constructivos. Feliz aprendizaje.

En pro a mejorar aplique algunos estilos para la imagen que se conocen como padding hack.

: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 {
            font-family: 'Quicksand', sans-serif;
            margin: 0;
            padding: 0;
        }

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

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

        .my-order .my-order__container {
            display: grid;
            grid-template-rows: auto 1fr auto;
            width: 300px;
        }
        
        .my-order .my-order__container .my-order__info {
            background-color: var(--text-input-field);
            padding: 0 24px;
            margin-bottom: 24px;
            border-radius: 8px;
            display: grid;
            grid-template-columns: auto 1fr;
            align-items: center;
            gap: 16px;
        }
        
        .my-order .my-order__container .my-order__info .my-order__date {
            font-size: var(--md);
            color: var(--black);
            font-weight: 700;
        }
        
        .my-order .my-order__container .my-order__info .my-order__price {
            font-size: var(--md);
            color: var(--dark);
            font-weight: 700;
        }
        
        .my-order .my-order__container .my-order__info .my-order__quantity {
            font-size: var(--sm);
            color: var(--very-light-pink);
            font-weight: 300;
        }

        .my-order .my-order__container .my-order__info p:nth-child(1) {
            display: flex;
            flex-direction: column;
        }
        
        .my-order .my-order__container .my-order__info p:nth-child(2) {
            text-align: end;
        }

        .my-order .my-order__container .my-order__list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .my-order .my-order__container .my-order__list .my-order__item {
            margin-bottom: 24px;
        }
        
        .my-order .my-order__container .my-order__list .my-order__item article {
            display: grid;
            grid-template-columns: 70px 1fr auto auto;
            align-items: center;
            gap: 16px;
        }
        
        .my-order .my-order__container .my-order__list .product-img {
            width: 100%;
            padding-bottom: 100%;
            position: relative;
            overflow: hidden;
            margin-block: 0;
            margin-inline: 0;
            border-radius: 10px;
        }
        
        .my-order .my-order__container .my-order__list .product-img img {
            width: 100%;
            height: 100%;
            position: absolute;
            object-fit: cover;
            top: 0;
            left: 0;
        }

        .my-order .my-order__container .my-order__list .product-price {
            color: var(--black);
            font-size: var(--md);
            font-weight: 700;
        }
        
        .my-order .my-order__container .my-order__list .product-title {
            color: var(--very-light-pink);
            font-size: var(--sm);
            font-weight: 300;
        }

        @media screen and (max-width: 640px){
            
        }

As铆 quedo鈥

Mi c贸digo:
.
HTML:

.
CSS:

.
RESULTADO:

profe me di cuenta que en el dise帽o original los precios de las bicicletas est谩n alineados con el precio general de arriba, para ello me di la idea de adicionar un padding en la clase .shopping-cart:

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

diferencias entre: place-items vs place-content

En CSS, tanto place-items como place-content son propiedades de la especificaci贸n de alineaci贸n de cuadr铆cula (grid) que se utilizan para controlar la posici贸n y alineaci贸n de los elementos dentro de una cuadr铆cula. Sin embargo, se aplican a diferentes niveles de la estructura de la cuadr铆cula. Aqu铆 est谩 la diferencia entre ambas:

place-items: Esta propiedad se utiliza para alinear y posicionar los elementos dentro de cada celda de la cuadr铆cula. Es una abreviatura de las propiedades align-items y justify-items combinadas.

align-items controla la alineaci贸n vertical de los elementos dentro de una celda de la cuadr铆cula y puede tomar los valores start, end, center, stretch u otros valores v谩lidos de alineaci贸n vertical.

justify-items controla la alineaci贸n horizontal de los elementos dentro de una celda de la cuadr铆cula y puede tomar los valores start, end, center, stretch u otros valores v谩lidos de alineaci贸n horizontal.

Al utilizar place-items, puedes establecer tanto la alineaci贸n vertical como la horizontal de los elementos dentro de cada celda de la cuadr铆cula en una sola declaraci贸n.

**place-content: **Esta propiedad se utiliza para alinear y posicionar el contenido de toda la cuadr铆cula dentro del contenedor que la contiene. Es una abreviatura de las propiedades align-content y justify-content combinadas.

align-content controla la alineaci贸n vertical del contenido de la cuadr铆cula dentro del contenedor y puede tomar los valores start, end, center, stretch u otros valores v谩lidos de alineaci贸n vertical.

justify-content controla la alineaci贸n horizontal del contenido de la cuadr铆cula dentro del contenedor y puede tomar los valores start, end, center, stretch u otros valores v谩lidos de alineaci贸n horizontal.

Al utilizar place-content, puedes establecer tanto la alineaci贸n vertical como la horizontal del contenido de la cuadr铆cula en una sola declaraci贸n.

En resumen, place-items se utiliza para controlar la alineaci贸n de los elementos dentro de cada celda de la cuadr铆cula, mientras que **place-content **se utiliza para controlar la alineaci贸n del contenido de toda la cuadr铆cula dentro del contenedor que la contiene.

entiendo que es un curso practico, pero tampoco debe ser un 鈥渃opiar y pegar鈥 c贸digo al menos deber铆a estar bien estructurado y ofrecer explicaciones cortas pero contundentes.

Asi va quedando:

Yo creria eficiente empezar por las imagenes

Quedo asi:

Con esos ligeros cambios, aveces me pierdo un poco鈥

que mal che desase y hace de una manera increible me hace perder el orden de las estructuras pone y saca div de manera abusiva, hace una ensalda de cosas de explicaciones pone saca vuelve a poner, no hace ninguna practica de las que te van ense帽ando en cursos anteriores