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 177

Preguntas 25

Ordenar por:

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

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.

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

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

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.

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鈥

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.

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.

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.

鈥淢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.

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

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.

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

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.

Dejo la imagen para quien la quiera utilizar

馃槂

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

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

esta clase la note muy desordenada pero igual me sirve

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)

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

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

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/

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.

**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!

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.

El mio. 馃槂

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

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鈥

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

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:[email protected];500;700&family=Roboto:[email protected]&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;
}

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>

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.

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:

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

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

Full Desorden鈥

Mi c贸digo:
.
HTML:

.
CSS:

.
RESULTADO:

Leyendo algunos me di cuenta de que muchas personas se quejan de que el c贸digo o la manera en que la profesora lo va escribiendo es muy confusa y r谩pida. Y quisiera hacer una peque帽a acotaci贸n:
.
El fin del curso (bajo mi punto de vista) es GUIARNOS al momento de hacer todas las plantillas del proyecto YARD SALE, no copiarlo tal y cual lo hace la profesora. Nosotros ya tenemos el conocimiento suficiente (llegados hasta este punto del curso) como para poder pensar nosotros mismos en una forma de maquetaci贸n u otra, si usamos flexbox o grid, etc.
.
Lo peor que pueden hacer, es tan solo copiar y pegar el c贸digo tal y cual como se ve en la clase, sin llegar a preguntarse el por que de cada etiqueta, estilo o propiedad.
.
Intenten buscar hacerlo de la manera que PARA USTEDES sea la mejor (bas谩ndose en las buenas practicas que ya conocemos).
.
#Nuncaparesdeaprender

Muy entretenido la verdad el curso es muy muy bueno.

![](

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.

Yo creo que si se cambia desde un inicio el tama帽o de las imagenes se puede observar mejor los peque帽os cambios del inicio del video!!!

Sin embargo, todo tiene soluci贸n. Y fue ir haciendo el c贸digo paso a paso en mi pc con el tama帽o peque帽o de las imagenes para lograr observar que se iba haciendo 馃

Dios que desorden鈥

Mobile Versi贸n, me siento orgullo al poder realizar esto solo.

![](

Este curso me ha servido mucho en el sentido de aprender a manejar mejor los grids y he conocido nuevas etiquetas que me hacen el trabajo menos complicado en el d铆a a d铆a como el repeat y las variables, muchas gracias

馃槈

Este es mi aporte a mi manera

Mas all谩 de toda las clases pienso que la profe debi贸 guiarse con las medidas exactas del figma

<!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>My order</title>
    <style>
        *{
            box-sizing: border-box;
        }
        :root{
            --color-text:rgb(153, 152, 152);
            --font-family:'Quicksand', sans-serif;
            --color-list-option:black;
            --color-list-signout:#ACD9B2;
            --background-order-total:rgb(240, 240, 240);
        }
        body{
            margin: 0;
            font-family: var(--font-family);
            padding: 0;
            font-size: 62.5%;
        }
        .container{
            width: 100%;
            height: 100vh;
            display: grid;
            place-content: center;
        }
        .container-body{
            width: 300px;
            display: flex;
            flex-direction: column;
        }
        .title{
            margin: 16px 0;
            display: none;
        }
        .title__text{
            font-size: 1.1rem;
        }
        .order-total{
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 16px;
            background-color: var(--background-order-total);
            border-radius: 12px;
        }
        .order-text{
            display: flex;
            flex-direction: column;
        }
        .order-text__date,.order-total__price,.order-card__price{
            font-weight: 700;
            font-size: 1rem;
        }
        .order-text__article,.order-product__name{
            color: var(--color-text);
            margin: 4px 0;
            font-size: 0.9rem;
        }
        .order-text__date{
            margin: 0;
        }
        .order-list{
            display: grid;
            row-gap: 28px;
            padding: 24px 0;
        }
        .order-card{
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .order-product{
            display: flex;
            align-items: center;
        }
        .order-product__img{
            width: 70px;
            height: 70%;
            border-radius: 12px;
        }
        .order-product__name{
            padding: 0 16px;
        }
        @media (min-width:500px){
            .title{
                display: inline-block;
            }
        }
    </style>
</head>
<body>
    <main>
        <div class="container">
            <div class="container-body">
                <div class="title">
                    <h2 class="title__text">My order</h2>
                </div>
                <div class="order-description">
                    <div class="order-total">
                        <div class="order-text">
                            <p class="order-text__date">04.05.2021</p>
                            <p class="order-text__article">6 articles</p>
                        </div>
                        <p class="order-total__price">$ 560.00</p>
                    </div>
                </div>
                <div class="order-list">
                    <div class="order-card">
                        <div class="order-product">
                            <img src="icons/card1.JPG" alt="Round-shelf" class="order-product__img">
                            <p class="order-product__name">Round shelf</p>
                        </div>
                        <p class="order-card__price">$ 120.00</p>
                    </div>
                    <div class="order-card">
                        <div class="order-product">
                            <img src="icons/card1.JPG" alt="Round-shelf" class="order-product__img">
                            <p class="order-product__name">Round shelf</p>
                        </div>
                        <p class="order-card__price">$ 120.00</p>
                    </div>
                    <div class="order-card">
                        <div class="order-product">
                            <img src="icons/card1.JPG" alt="Round-shelf" class="order-product__img">
                            <p class="order-product__name">Round shelf</p>
                        </div>
                        <p class="order-card__price">$ 120.00</p>
                    </div>
                </div>
            </div>
        </div>
    </main>
</body>
</html>

La profe es 10/10, pero desde la mitad del curso para ac谩, es un desorden incre铆ble. Si bien as铆 funciona el mundo 鈥淩eal鈥 deber铆amos primero aprender, para defendernos de ese mundo. Este video deber铆a ser editado y vuelto a subir; por respeto a los estudiantes; que si bien podemos poner el video en 0.5x como lo proponen muchos; no es el deber ser cuando se est谩 aprendiendo.

seguimos鈥

Creo que la profe no debio meterse con css grid ya que me imagino que a muchos como a mi nos paso que quedamos perdidos, para mi son temas que no se han tocado en el historila de cursos por lo tanto uno se pierde es hacer en base a lo que se esta viendo en la carrera, me toco adelantarme al curso de css-grid para entender

Creo que falt贸 la parte del responsive para esconder el t铆tulo.
Yo lo hice as铆:

@media (max-width: 640px) {
            .title {
                display: none;
            }
            .order {
                margin-top: 24px;
            }
        }

No entend铆 el

<.shopping-cart p:nth-child(2)> 

Se supone que solo hay 2 p y el primero es el que se cambia no el segundo

My order

Si tienen dudas de la estructura, as铆 es:


<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&amp;cs=tinysrgb&amp;dpr=2&amp;h=650&amp;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&amp;cs=tinysrgb&amp;dpr=2&amp;h=650&amp;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&amp;cs=tinysrgb&amp;dpr=2&amp;h=650&amp;w=940"
                            alt="bike">
                    </figure>
                    <p>Bike</p>
                    <p>$30,00</p>
                </div>
            </div>
        </div>
    </div>

</body>

Espero que a alguien le ayude con eso del tema de que la profe vaya haciendo el codigo por partes y que muchos no entendamos, pero honestamente pas茅 casi 3 d铆as tratando de comprender y asimilar la clase pero me sirivi贸 mucho hacer un esquema mental y ayudarme con la guia visual que ofrece el inspector de codigo de mi navegador, poco a poco fui estilizando por mi cuenta mi codigo y tambi茅n me apoy茅 revisando el apartado de Recursos, ahora comprendo mejor el codigo y tambi茅n es entendible a mi propio orden de ir estilizando.

Leyendo los comentarios quiero decir que entiendo que la profesora vaya un poco r谩pido y que por ah铆 no llega a colocar bien las cosas pero despu茅s las corrige, es parte del aprendizaje. Y el hecho de ir viendo qu茅 puede estar haciendo mal nos ayuda a saber qu茅 errores se suelen comenter cuando estamos creando el c贸digo de una p谩gina web.

De todas formas al final queda el c贸digo impecable y f谩cil de entender, solo es cuesti贸n de ir revisando bien qu茅 es lo que hacemos nosotros con nuestro c贸digo.

Si el video de la clase dura 15 minutos, no esperen estar 15 minutos para hacer el c贸digo. Por algo en la descripci贸n del curso se especifica que son 3 horas de contenido y 10 horas de pr谩ctica.

Entiendo que para muchos posiblemente su confusi贸n viene por el uso excesivo de la etiqueta div. Puede que s铆, es un poco enredado para quienes recientemente hayan empezado en esto. Quiz谩 si la profesora hubiese hecho uso de diferentes etiquetas, y no s贸lo div; no habr铆a tantas personas que se pierden. A煤n as铆, es sencillo cuando lo dominen 馃槂. As铆 que, no se desanimen.

Creo que el curso est谩 perfecto y la manera de aprender a manejar esa frustraci贸n es haciendo proyectos. Con el prueba y error aprender谩n de a poco. Se los digo yo, que si bien, no soy experto, considero que ya tengo un buen nivel en html y css debido a la cantidad de tutoriales y cursos que he visto desde hace casi dos a帽os y obviamente haciendo proyectos con estas dos tecnolog铆as. 隆脕nimo! 馃挌

A pesar que puedo seguir el paso, hay algunos momentos donde hace cosas y no logro entender el porque lo hace asi, o que buscar al encapsular los div, me tomos momentos para poder pensar el porque y en esta clase cuando movio cosas de un div al otro me mareo bastante, me gustaria que me pudiera mas explicar el porque esta maquetando como lo hace, porque mete tales elementos en el div, que busca con eso, etc aunque aprendi mucho siguiendole los pasos, siento que es muy escribir lo mismo que ella y no tanto de pensar el porque de cada cosa.

y optra vez pierdo tiempo 鈥 cuando se equivoca y borra quita pega snjkckanckj

este es el orden de los DIV , les recomiendo la extension Indent-Rainbow me ayuda de mucho en el orden

me encanta c贸mo va quedando el sitio web 馃槃

Recomendaci贸n: unos cursos m谩s adelante, en el curso Pr谩ctico de JavaScript, utilizar谩n los componentes elaborados aqu铆, por lo que recomiendo guardarlos de manera ordenada.

sin dudas tendre que estudiar css grid!!! Me acostumbre mucho a flex box!

Me marea la cabeza tantos div, confunden demasiado. Y en otros cursos sugieren no usar tantos div 馃お