Mi orden: CSS

Así vamos…

Nabil Aparicio

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

Carlos Lefin Henriquez

Que horrible el desorden para explicar

Isaac Godinez Cortes

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.

Lex Urrea

Yo opino que quienes se fijan mas en si la profesora utiliza “buenas practicas” o “no 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 😃

Arianna Corona

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>

Gabriela Andreina García Uzcategui

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

user_deleted_1058380

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.

Rodrigo Ramos Xochiteotzin

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

Thomas André Dale Guevara

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=“order-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

Cristian Camilo Alvarado Beltran

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.

Pablo Joaquín Cruz

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.

José Luis Ramírez Ruiz

Ahi vamos…

screencapture-127-0-0-1-5500-myorder-html-2022-01-23-16_55_10.png

Omar Aleiser Alvarez Laverde

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.

Max Andy Diaz Neyra

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.

Rigoberto Bruno Maldonado

Que tal campeon, buen dia…Como 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.

Cindy Carolina Campos Navarro

“My Order” lo menos que tiene es orden… 😦
Entiendo que así es la “vida 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.

Magalí Acevedo

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

Eliuth Mateo Espinoza Balladares

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.

Anthony Saavedra Paredes

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

Daniel Solano

hace 9 meses

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.

Hugo Tranquilino Santiago

Dejo la imagen para quien la quiera utilizar

😃

eaespana

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

Daniel Gomes Vilaca

hace 9 meses

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

esta clase la note muy desordenada pero igual me sirve

Aarón Castillo

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)

Luis Daniel Hernandez

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

Daniel Cardenas Parra

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…bla…bla…bla a ver entonces monten su codigo en esta cajita y veo como resolverian segun ustedes el “desorden” de la profesora…

Cris_parra

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

Ver toda la clase sin parar el video ni generar una sola línea de código.
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).
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.
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.

Robert Stivens Galindo Bernal

Me tomé la libertad de agregarle el botón de ir a pagar

Rocio Quigua López

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

Decidí poner los iconos a los lados

Ana Rotela Cabrera

hace 7 meses

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

Captura de Pantalla 2022-11-06 a la(s) 01.08.52.png

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

Arturo Flores

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.

Alejandro Abalos

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

Mauricio Carrasco

Pues así vamos

Charles Duck Castillo Rosas

Apuntes de este curso en Notion

Milagros Fortis

hace 8 meses

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 “mi orden”. Hasta parece que lo hace rapido para sacarselo de encima.

Jhon_B

Andres Camilo Rubiano Acevedo

El mio. 😃

Marcelo eduardo jara ramirez

div.order + enter = <div class=“order”></div>

Daniel Morales

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 “p” a un “a” y por que se usa mucho “div” si aun principio dijeron que no es bueno usarlo demasiado

Saúl Pérez Parra

Resumen de los comentarios:
“Ppipipipipi”

Mariano Gobea Alcoba

hace 6 meses

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

Sonia Mendoza

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

Leonardo Véliz

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>

un.vato.roto

hace 8 meses

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

Paula Andrea Sosa Hernández

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!

Dayana Perez

hace 7 meses

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.

Rafael Baculima

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.

Miguelangel Soto Tovar

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

Gabriel Nuñez

hace 9 meses

Agregue otros productos 😄

Yesenia Zavaleta Velázquez

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

Federico Castillo Rangel

Fascinado con lo que va de este curso practico.

Julio Loarte Huerto

FernandoGill

Increible clase!

Carmen Álvarez M.

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

lautaro acosta

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

Edgar Alejandro Zuluaga Palacio

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.

Ricardo Carranza

En mi opinión los “errores” 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.

Fernando Cordero

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

Arianna Corona

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

Elian Camilo Angarita Sanguino

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!

Joel Canul Alonzo

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>

Joel Dominguez Merino

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:

David Limon

hace 8 días

Con esos ligeros cambios, aveces me pierdo un poco…

lucas biglieri

hace 21 días

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

Juan Síntora

hace 25 días

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

Alexander Giraldo Poveda

Full Desorden…

Antonio Maldonado

Mi código:
.
HTML:

.
CSS:

.
RESULTADO:

Antonio Maldonado

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

Oscar Fredy Antia Chicaiza

Muy entretenido la verdad el curso es muy muy bueno.

Sebastian Vásquez Valencia

hace 2 meses

![](

Erika Nathaly Bernal Morales

La clase anterior me dejó pensativa porque no se habían colocado las cards dentro del “my-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.

Fabiana Solmayra Rachi Montalvo

hace 2 meses

Ivan Martinez

hace 2 meses

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 🤗

Diego Lledó

Dios que desorden…

Brayan omar cabrera diez

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

Brayan omar cabrera diez

![](

Esteban Cardona Gil

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

Elvis Milan

😉

Alejandro Ramírez

oskr-lopez

Este es mi aporte a mi manera

oskr-lopez

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

Ricardo Alfonso Chavez Vilcapoma

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

Johana Espinosa

La profe es 10/10, pero desde la mitad del curso para acá, es un desorden increíble. Si bien así funciona el mundo “Real” 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.

Wilman Garcia

seguimos…

oskr-lopez

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

David Esteban Giraldo Duque

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

david jurado

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

Abigail Nahomi Chávez Lozano

My order

Camilo Andrés Granda Cortés

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>

Diego Estuardo Quiroa Escobar

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.

Maximiliano Ayarde

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.

Julián Castiblanco

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

Lucas Soto

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.

reynaldo gutierrez

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

JOSE Alonso Tocas Dipaz

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

Captura de pantalla 2022-12-25 184404.png

Ivan Vazquez Velazquez

me encanta cómo va quedando el sitio web 😄

Raúl Adolfo Sánchez Rodríguez

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.

Juan Mercado