No tienes acceso a esta clase

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

Carrito de compras: HTML

21/22
Recursos

El carrito de compras es la secci贸n de la p谩gina que le permitir谩 al usuario ver los productos que agreg贸 porque quiere comprarlos. Como puedes ver en la imagen, es una vista muy similar a secci贸n "mi orden", por lo que utilizaremos el mismo c贸digo.

Solo nos falta elaborar nuestra pantalla del carrito para terminar nuestra p谩gina. Como se mencion贸, es un proceso muy similar a los anteriores y podemos reutilizar el c贸digo de "my orders" .

cart.png

Maquetado b谩sico con HTML de un carrito de compras

Lleg贸 la hora de maquetar esta secci贸n de la plataforma en HTML. Emplea estas l铆neas de c贸digo como gu铆a para verificar que hayas hecho un gran trabajo y recuerda no memorizarlas, para garantizar que hayas aprendido correctamente.

  <aside class="product-detail">
    <div class="title-container">
      <img src="./icons/flechita.svg" alt="arrow">
      <p class="title">My order</p>
    </div>

    <div class="my-order-content">
      
      <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>
        <img src="./icons/icon_close.png" alt="close">
      </div>
      
      <button class="primary-button">
        Checkout
      </button>
    </div>
  </div>
  </aside>

Estilos CSS para un carrito de compras

Los estilos de CSS para el carrito son, pr谩cticamente, los mismos que para la secci贸n que le muestra al usuario su orden de compra.

El CSS sugerido es:

.product-detail {
      width: 360px;
      padding: 24px;
      box-sizing: border-box;
      position: absolute;
      right: 0;
    }
    .title-container {
      display: flex;
    }
    .title-container img {
      transform: rotate(180deg);
      margin-right: 14px;
    }
    .title {
      font-size: var(--lg);
      font-weight: bold;
    }
    .order {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 16px;
      align-items: center;
      background-color: var(--text-input-field);
      margin-bottom: 24px;
      border-radius: 8px;
      padding: 0 24px;
    }
    .order p:nth-child(1) {
      display: flex;
      flex-direction: column;
    }
    .order p span:nth-child(1) {
      font-size: var(--md);
      font-weight: bold;
    }
    .order p: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;
    }
    .primary-button {
      background-color: var(--hospital-green);
      border-radius: 8px;
      border: none;
      color: var(--white);
      width: 100%;
      cursor: pointer;
      font-size: var(--md);
      font-weight: bold;
      height: 50px;
    }
    @media (max-width: 640px) {
      .product-detail {
        width: 100%;
      }
    }


驴Qu茅 es tranform en CSS?

Transform que es una propiedad de CSS que nos permite trasladar, rotar, escalar o sesgar elementos.
Se implementan principalmente para desarrollar animaciones. Para rotar la flechita lo empleamos.

驴Te gustar铆a animar con CSS?



Contribuci贸n creada por: Guadalupe Monge Barale con los aportes de Alan Alberto Dromundo Arias

Aportes 147

Preguntas 13

Ordenar por:

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

Resultados

Qu茅 tal comunidad!
Fue un curso retador pero me encant贸 el enfoque y el proyecto! Estoy segurx que me ayudar谩 a desarrollar mis proyectos con m谩s creatividad e incluso mi portafolio para el primer trabajo como web developer que espero vendr谩 pronto!
Les comparto los resultados, espero ver los suyos! 脕nimo!

Pd. El dark mode lo tengo activado en brave xd no a帽ad铆 esa funcionalidad aunque se podr铆a 馃憖馃憖馃憖

Buen curso, me hubiera gustado una clase donde junt谩ramos todas las pantallas.

As铆 qued贸 mi carrito de compras:

As铆 se ver铆a con un overflow-y: scroll 馃榿 ideal para cuando el cliente tenga muchos elementos en el carrito 馃枛

En esta clase me enred茅 demasiado, traer c贸digo, subir, bajar鈥 no s茅 si fue porque el editor de c贸digo tiene demasiado zoom.
.
Lo bueno es que al final lo pude resolver y me qued贸 genial.

Resultados del Proyecto

Hola! 馃懢
Les comparto el resultado de la cursada 馃摎, fue un lindo desaf铆o tomar el curso pero realizarlo con las t茅cnicas y herramientas que nos brindan en la Escuela de Desarrollo Web
~

  • Pug 馃Υ
  • Sass 馃鈥嶁檪锔
  • BEM 馃帿
  • Git y GitHub 鉀
  • Molbile first 馃摫
  • Terminal (WSL2) 馃

~
馃儚 Estas son las paginas que desarrollamos: Paginas
馃捈 Y este el repositorio de todo el curso: Repo

隆Hello! 馃枛 Como pudieron ver la maestra reutiliza las clases que ya tenemos estilizadas en otras p谩ginas del sitio, quiero creer que esto lo hace ella por efectos de practicidad y para no demorarnos un poco m谩s re-haciendo los estilos desde cero en cada p谩gina, pero si hacemos esto en un proyecto real, ser谩 un desastre escalar el sitio web.
馃槺 Imag铆nen que modificamos el bot贸n de una de nuestras p谩ginas, al hacer eso tambi茅n se estar谩n afectando todos los otros botones en los que utilizamos esa misma clase.
馃憣 Ahorita que es un proyecto peque帽o no hay ning煤n problema, solo tengan en cuenta eso al estar trabajando con proyectos m谩s grandes, puede evitarles muchos dolores de cabeza 馃憤
Lo que yo sugiero es hacer sus clases 煤nicas para c谩da p谩gina, y claro, podemos basarnos en los estilos que hayamos hecho en otras p谩ginas, simplemente copiando y pegando las propiedades 馃榿

Hola les comparto mis resultado del curso:
Pantallas 馃捇: https://kfiguera.github.io/frontend-practico/
Repositorio 馃捈: https://github.com/kfiguera/frontend-practico

Estefany debe mejorar como profesora鈥

Wooojuuu! Me gust贸 mucho!
Puse lo que hice en github, es tal cual fue en el curso
https://github.com/Dann-Herz/yard-sale
disfrute mucho este curso y aprend铆 muchas cosas

Un curso incre铆ble!.
Muchos critican diciendo cosas como que no son las mejores pr谩cticas. Lo que no entienden es que el curso es para aprender a dise帽ar en CSS. Me encant贸 todo lo que aprend铆: Flex y Grid layout, positioning, display, box model, media queries, estructurar, responsive design, etc. Aprend铆 much铆simo.
Me sirvi贸 bastante hacer primero el dise帽o y despu茅s ver c贸mo lo hace la profesora y as铆 ir compar谩ndome y mejorando.

Estos son mis apuntes de esta clase:

  • Puedes reutilizar la clase 09. - Solo cambiando el producto inicial y volverlo a un contenido 鈥淭OTAL鈥.
    *Tener en cuenta que la imagen tiene de estructura particional de [auto auto 1fr auto].
    *Transform: rotate (180 deg); // para rotar la flecha en otra direcci贸n al costado de 鈥淢y order鈥.
  • box-sizing: border-box; // para ubicar el contenido al borde como en las anteriores clases.

As铆 me qued贸, lo realice antes de las explicaci贸n de la maestra.

Este fue mi resultado 馃槃
Livesite
Repo

驴QUI脡N LLEG脫 HASTA AQU脥? SIENTETE ORGULLOSO DE TI.

La verdad es que se aprecia que Estefany sabe lo que hace y tiene mucha agilidad en su trabajo, pero鈥l curso no me agrad贸 tanto (aunque claro que aprend铆) porque practicamente lo que hago es seguirle los pasos a lo que va haciendo, pocas veces explica el porque de las cosas. No me animo a compartir mis pantallas porque son literalmente las mismas pantallas que ella tiene ya que lo que hice fue seguir su c贸digo casi al 100%. No se, en mi opini贸n, este curso pudo haber sido much铆simo mejor.

Yo durante los primeros 3 minutos de clase:
Eh鈥?

Hola. Les comparto este repositorio que sirve de gu铆a para el examen final, pues contiene las preguntas que se encuentran en el examen, la justificaci贸n y el video del curso donde se habla sobre eso. Espero y les sea de utilidad 馃槃.
Platzi-Test

xd Ahora s铆 me perd铆 desde el inicio

Generar un scroll para las shopping-card

.

  • Crea un contenedor para esos elementos 馃摝 y a帽谩dele una clase

.

.

  • A帽ade los siguientes estilos al documento:

.

transform: rotate(180deg); /* rota la imagen seg煤n los grados indicados */

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

    <title>Product Detail</title>
    <style>
        :root {
            --black: #000000;
            --white: #ffffff;
            --very-light-pink: #C7C7C7;
            --text-input-field: #F7F7F7;
            --hospital-green: #acd0b2;
            --primary-button-hover: #5ab865;
            --sm: 14px;
            --md: 16px;
            --lg: 18px;
        }

        html{
            font-size: 62.5%;
        }

        body {
            font-family: 'Quicksand', sans-serif;
            margin:0;
            padding:0;
            box-sizing: border-box;
        }

        .product-detail{
            position: absolute;
            right: 0;
            width: 360px;
            padding-bottom: 24px;
        }

        .title-container{
            display: flex;
            
        }

        .title-container img {
            transform: rotate(180deg);
            margin-right:20px;
        }

        .title {
            font-size: var(--lg);
            font-weight: bold;
        }
    
        .my-order{
            display: grid;
            place-items: center;
            width:100%;
            height:100vh;
        }

        

        .my-order-content{
            display: grid;
            /* grid-template-rows: auto 1fr auto; */
            
        }

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

            background-color: var(--text-input-field);
            border-radius: 8px;
        }

        .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:nth-child(2) {
            text-align: end;
            font-weight: bold;
            font-size: var(--md);
            padding-right: 24px;
        }

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

            margin-bottom: 24px;
            align-items: center;
            padding: 0 24px 0 0;
        }

        .shopping-cart figure {
            margin: 0;
        }

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

        }

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

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

        .primary-button{
            height: 40px;
            width: 100%;
            border: none;
            border-radius: 12px;

            color: var(--white);
            font-size: var(--md);
            font-weight: bold;

            background-color: var(--hospital-green);

            cursor: pointer;
        }

        

        @media(max-width: 640px){
            .product-detail{
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <aside class='product-detail'>
        <div class="title-container">
            <img src="./assets/icons/flechita.svg" alt="Back">
            <p class="title">My order</p>

        </div>
        <div class="my-order-content">
            
            <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>$120.00</p>
                <img src="./assets/icons/icon_close.png" alt="close">
            </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>$120.00</p>
                <img src="./assets/icons/icon_close.png" alt="close">
            </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>$120.00</p>
                <img src="./assets/icons/icon_close.png" alt="close">
            </div> 
            <div class="order">
                <p>
                    <span>
                        Total
                    </span>
                </p>
                <p>$560.00</p>
            </div>
            <button class='primary-button '>Checkout</button>
        </div>
        
    </aside>
    
</body>
</html>
Mi humilde carrito de compras: ![](https://static.platzi.com/media/user_upload/image-effd35c3-6031-4e83-9b8a-69dcc41e62a6.jpg)

As铆 quedo

Me ha ido super bie, ya anot茅 las nuevas propiedas que no conoc铆a y para aplicarlo en los futuros proyectos 馃槃

Me siento muy emocionado de haber llegado hasta este punto del curso y haber completado todas las vistas y retos de este maravilloso proyecto!

Media Query

No olviden agregar el media query para que en la vista de mobile el titulo y la flechita desaparezca, ya que es mobile solo s visible en la barra de navegaci贸n.
.

 @media (max-width: 640px) {
            .title-container {
                display: none;
            }
        }

Aprend铆 bastante, se nota que la profe sabe mucho.

Pudo haber enunciado qu茅 clases eliminar y qu茅 clases permanecen, as铆 no hay que estar pausando el video para ver que fue lo que borr贸 y que dej贸.

Tambi茅n cuando usaba la imagen, pudo haber cambiado el tama帽o de esta al principio de los videos, as铆 sea solo provisionalmente para entender f谩cilmente qu茅 est谩 pasando en el HTML.

Comparto algunos de mis resultados (mobile) y el github del proyecto
https://github.com/yessikaplata/yard-sale

El objetivo de este proyecto es practicar HTML y CSS para la elaboraci贸n del dise帽o de referencia, por esta raz贸n los estilos se crearon dentro de las p谩ginas HTML de tal manera que los elementos queraran de acuerdo al dise帽o. Para un evolutivo de este proyecto se espera tener hojas de estilos siguiendo metodologias CSS como BEM





buena tarde excelente curso aqui dejo mi aporte




![navbar-desktop.PNG]
(https://static.platzi.com/media/user_upload/navbar-desktop-c5fbdfa0-617d-471e-a5a8-3e5611b4c6ac.jpg)

Personalmente le agregue un hover al icono que esta al lado de shopping cart:

.title-container img:hover{
            cursor: pointer;
        }

Listo!

As铆 qued贸. Intent茅 hacerlo todo yo sola antes de que ella lo explicara. Casi lo logro pero me trab茅 cuando no pude agregar padding al contenedor principal. Y ya vi que se resolvi贸 con box-sizing: border-box

Mi aporte! llevadito de la mano, pero lo m谩s importante es obtener el resultado y sorbetodo coger los tips que nos di贸 la instructura! Gracias!

Hola Equipo,

para ser honesto decidi realizar la actividad sin ver el video, solo basandome en lo que ya habiamos hecho en las clases pasadas y con el conocimiento adquirido. Pues bien, este fue el resultado y me siento satisfecho por todo lo aprendido hasta el momento. Hay que continuar fortaleciendo los conocimientos en html y CSS.

Les comparto mi resultado

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;500;700&display=swap" rel="stylesheet">
    <title>Document</title>
    <style>
        :root{
            --white: #FFFFFF;
            --black: #000000;
            --very-light-pink: #C7C7C7;
            --text-input-field: #F7F7F7;
            --hospital-green: #ACD9B2;
            --dark: #232830;
            --dark-ligth: #5d626a;
            --sm: 14px;
            --md: 16px;
            --lg: 18px;
        }
        body {
            margin: 0;
            font-family: 'Quicksand', sans-serif;
        }
        .my-order{
            width: 360px;
            height: 100vh;
            display: block;
            place-items: center;
            position: absolute;
            right: 0;
        }
        .my-order-container{
            width: 100%;
            display: grid;
            grid-template-rows: auto 1fr auto;
        }
        .my-order-content{
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            background: var(--text-input-field);
            border-radius: 10px;
            align-items: center;
            margin-bottom: 24px;
            margin-left: 20px;
            width: 90%;
        }
        .my-order-content p:nth-child(1){
            display: flex;
            flex-direction: column;
            margin: 20px;
        }
        .my-order-content p span:nth-child(1){
            font-weight: bold;
            margin-bottom: 4px;
            font-size: var(--md);
            color: var(--black);
        }
        .my-order-content p span:nth-child(2){
            color: var(--very-light-pink);
        }
        .my-order-content p:nth-child(2){
            margin: 20px;
            font-weight: bold;
            color: var(--dark-ligth);
        }
        .tittle{
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
        }
        .tittle figure:nth-child(1){
            margin-left: 12px;
        }
        .tittle figure:nth-child(2){
            display: none;
        }
        .tittle p{
            font-size: var(--md);
            font-weight: bold;
        }
        .shopping-card{
            width: 92%;
            display: flex;
            flex-direction: row;
            justify-content: start;
            align-items: center;
        }
        .shopping-card figure{
            margin: 10px 25px 10px 10px;
        }
        .shopping-card figure img{
            width: 80px;
            height: 80px;
            border-radius: 20px;
            object-fit: cover;
        }
        .parr-shopping{
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }
        .parr-shopping p:nth-child(1){
            color: var(--very-light-pink);
            width: 50%;
            font-size: var(--sm);
        }
        .parr-shopping p:nth-child(2){
            font-size: var(--md);
            font-weight: bold;
            color: var(--dark-ligth);
        }
        .parr-shopping img{
            width: 15px;
            height: 15px;
            margin: 17px 10px 10px 10px;
        }
        .separator{
            height: 10vh;
        }
        .primary-button{
            width: 80%;
            background: var(--hospital-green);
            color: var(--white);
            font-weight: bold;
            font-size: var(--lg);
            height: 70px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            margin: 0px;
        }
        .checkout{
            display: flex;
            align-items: center;
            justify-content: center;
            
        }
        @media (max-width: 640px){
            .my-order{
                width: 100%;
            }
            .tittle{
                display: flex;
                flex-direction: row;
                justify-content: flex-start;
                align-items: center;
            }
            .tittle p{
                display: block;
            }
            .tittle figure:nth-child(1){
                display: none;
            }
            .tittle figure:nth-child(2){
                display: block;
            }
        }
    </style>
</head>
<body>
    <div class="my-order">
        <div class="my-order-container">
            <div class="tittle">
                <figure>
                    <img src="./icons/Vector.png" alt="atras">
                </figure>
                <figure>
                    <img src="./icons/icon_menu.svg" alt="menu">
                </figure>
                <p>
                Shoping Cart
                </p>
            </div>
            <div class="shopping-card">
                <figure>
                    <img src="https://images.pexels.com/photos/2533266/pexels-photo-2533266.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" alt="">
                </figure>
                <div class="parr-shopping">  
                    <p>
                       Lipstick
                    </p>
                    <p>
                       $120,00
                    </p>
                    <img src="./icons/icon_close.png" alt="close">
                </div>   
            </div>
            <div class="shopping-card">
                <figure>
                    <img src="https://images.pexels.com/photos/1279107/pexels-photo-1279107.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
                </figure>
                <div class="parr-shopping">
                    <p>
                        Alexa
                    </p>
                    <p>
                        $120,00
                    </p>
                    <img src="./icons/icon_close.png" alt="close">
                </div>  
            </div>
            <div class="shopping-card">
                <figure>
                    <img src="https://images.pexels.com/photos/2633986/pexels-photo-2633986.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
                </figure>
                <div class="parr-shopping">
                    <p>
                        Make Up
                    </p>
                    <p>
                        $100,00
                    </p>
                    <img src="./icons/icon_close.png" alt="close">
                </div>    
            </div>
            <div class="shopping-card">
                <figure>
                    <img src="https://images.pexels.com/photos/4464481/pexels-photo-4464481.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
                </figure>
                <div class="parr-shopping">
                    <p>
                        Notebook
                    </p>
                    <p>
                        $140,00
                    </p>
                    <img src="./icons/icon_close.png" alt="close">
                </div>  
            </div>
            <div class="separator">
                <p>&nbsp;</p>
            </div>
            <div class="my-order-content">
                <p>
                    <span>Total</span>
                </p>
                <p>
                    $480.00
                </p>
            </div>
            <div class="checkout">
                <button class="primary-button">
                    Checkout
                </button>
            </div>
        </div>
    </div>
</body>
</html> 

Saludos y espero les sirva

Agregue unas cositas.

me confundio esta clase

Hey mates!

Gawk at this!

Quedo genial!!

Comparto mi carrito de compras:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;500;700&display=swap"
      rel="stylesheet"
    />
    <title>Document</title>
    <style>
      :root {
        --sm: 1.6rem;
        --md: 1.8rem;
        --lg: 2rem;
        --very-light-pink: #c7c7c7;
        --white: #ffffff;
        --text-input-field: #f7f7f7;
        --black: #000000;
        --hospital-green: #acd9b2;
        --dark: #232830;
      }

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

      html {
        font-size: 62.5%;
      }

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

      .aside-container {
        display: grid;
        justify-items: center;
        position: absolute;
        width: 100%;
        min-height: 100%;
        background: #fff;
      }

      .shopping-cart {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 24px 16px;
        width: inherit;
        max-width: 400px;
      }

      .shopping-cart__title-arrow-container {
        display: none;
      }

      .shopping-cart__title {
        font-size: var(--lg);
      }

      .shopping-cart__product-container {
        padding-right: 20px;
        overflow-y: auto;
        height: 60vh;
      }

      .shopping-cart__product {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
      }

      .shopping-cart__product-image-container {
        display: flex;
        align-items: center;
      }

      .shopping-cart__product-image {
        margin-right: 16px;
        border-radius: 20px;
        width: 75px;
        height: 75px;
        object-fit: cover;
      }

      .shopping-cart__product-name {
        margin-right: 4px;
        text-wrap: wrap;
        font-size: 1.4rem;
        font-weight: 400;
        color: var(--very-light-pink);
      }

      .shopping-cart__price-container {
        display: flex;
        align-items: baseline;
      }

      .shopping-cart__product-price {
        margin-right: 16px;
        font-size: var(--sm);
        font-weight: bold;
        text-wrap: nowrap;
      }

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

      .shopping-cart__button-checkout {
        border: none;
        border-radius: 6px;
        font-family: inherit;
        font-weight: bold;
        font-size: var(--md);
        width: 100%;
        height: 56px;
        color: var(--white);
        background-color: var(--hospital-green);
        cursor: pointer;
      }

      @media (min-width: 980px) {
        .aside-container {
          top: 0;
          right: 0;
          border-radius: 5px;
          box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.12);
          width: 400px;
          height: auto;
        }

        .shopping-cart__title-arrow-container {
          display: flex;
          align-items: baseline;
        }

        .shopping-cart__arrow-left {
          cursor: pointer;
        }

        .shopping-cart__title {
          margin-left: 24px;
        }
      }
    </style>
  </head>
  <body>
    <aside class="aside-container">
      <div class="shopping-cart">
        <div class="shopping-cart__title-arrow-container">
          <figure class="shopping-cart__arrow-left-container">
            <img
              class="shopping-cart__arrow-left"
              src="./assets/icons/arrow-left.svg"
              alt="Arrow left"
            />
          </figure>

          <h2 class="shopping-cart__title">Shopping cart</h2>
        </div>
        <div class="shopping-cart__product-container">
          <div class="shopping-cart__product">
            <figure class="shopping-cart__product-image-container">
              <img
                src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
                alt="A bike"
                class="shopping-cart__product-image"
              />
              <figcaption class="shopping-cart__product-name">Bike</figcaption>
            </figure>
            <div class="shopping-cart__price-container">
              <p class="shopping-cart__product-price">$ 120.00</p>
              <figure class="shopping-cart__delete-icon-container">
                <img
                  class="shopping-cart__delete-icon"
                  src="./assets/icons/icon_close.png"
                  alt="Delete icon"
                />
              </figure>
            </div>
          </div>
          <div class="shopping-cart__product">
            <figure class="shopping-cart__product-image-container">
              <img
                src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
                alt="A bike"
                class="shopping-cart__product-image"
              />
              <figcaption class="shopping-cart__product-name">Bike</figcaption>
            </figure>
            <div class="shopping-cart__price-container">
              <p class="shopping-cart__product-price">$ 120.00</p>
              <figure class="shopping-cart__delete-icon-container">
                <img
                  class="shopping-cart__delete-icon"
                  src="./assets/icons/icon_close.png"
                  alt="Delete icon"
                />
              </figure>
            </div>
          </div>
          <div class="shopping-cart__product">
            <figure class="shopping-cart__product-image-container">
              <img
                src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
                alt="A bike"
                class="shopping-cart__product-image"
              />
              <figcaption class="shopping-cart__product-name">Bike</figcaption>
            </figure>
            <div class="shopping-cart__price-container">
              <p class="shopping-cart__product-price">$ 120.00</p>
              <figure class="shopping-cart__delete-icon-container">
                <img
                  class="shopping-cart__delete-icon"
                  src="./assets/icons/icon_close.png"
                  alt="Delete icon"
                />
              </figure>
            </div>
          </div>
          <div class="shopping-cart__product">
            <figure class="shopping-cart__product-image-container">
              <img
                src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
                alt="A bike"
                class="shopping-cart__product-image"
              />
              <figcaption class="shopping-cart__product-name">Bike</figcaption>
            </figure>
            <div class="shopping-cart__price-container">
              <p class="shopping-cart__product-price">$ 120.00</p>
              <figure class="shopping-cart__delete-icon-container">
                <img
                  class="shopping-cart__delete-icon"
                  src="./assets/icons/icon_close.png"
                  alt="Delete icon"
                />
              </figure>
            </div>
          </div>
        </div>

        <div class="shopping-cart__total-value-container">
          <div class="shopping-cart__total-to-pay-container">
            <p class="shopping-cart__total-text">Total</p>
            <p class="shopping-cart__total-value">$ 560.00</p>
          </div>

          <button class="shopping-cart__button-checkout">Checkout</button>
        </div>
      </div>
    </aside>
  </body>
</html>

Adem谩s, gracias al comentario de un compa帽ero le agregu茅 la propiedad overflow: auto para que aparezca una barra de scroll si hay m谩s elementos por debajo. Quedar铆a as铆:

![](https://static.platzi.com/media/user_upload/image-5c7434dd-c716-44d6-9a0e-aa55c43a3bc0.jpg) ![](https://static.platzi.com/media/user_upload/image-f922323f-271a-4808-8529-58a1a4159944.jpg) ![](https://static.platzi.com/media/user_upload/image-fb06b088-307e-4461-8161-4de11b7a4263.jpg) ![](https://static.platzi.com/media/user_upload/image-c0c6b53f-5fdd-4d48-a2dd-5ef8af541260.jpg) ![](https://static.platzi.com/media/user_upload/image-0195bc6d-4d10-4e6c-a31d-5a6eb56c321a.jpg) ![](https://static.platzi.com/media/user_upload/image-084ca9df-0d7b-4d94-8a58-057c56762ba1.jpg) ![](https://static.platzi.com/media/user_upload/image-d59e9002-11e9-4cee-b498-3855cf673883.jpg) ![](https://static.platzi.com/media/user_upload/image-5cc3c17a-4556-4655-9832-ef5a38e89801.jpg) ![](https://static.platzi.com/media/user_upload/image-c8523dff-122b-4e19-ab1e-dd2d314ccdfe.jpg) ![](https://static.platzi.com/media/user_upload/image-143dc51c-4a1e-4f80-a418-efc2494d1eac.jpg) ![](https://static.platzi.com/media/user_upload/image-3a4d247c-7ec9-438a-9590-126ff4e2db8b.jpg) ![](https://static.platzi.com/media/user_upload/image-89951a21-0a38-45fd-91c1-edf181230dd3.jpg) ![](https://static.platzi.com/media/user_upload/image-0fce5afe-f2af-47ef-a3e8-956cf1902b07.jpg) E aqu铆 las pantallas de como me quedaron despu茅s de terminar el curso, fant谩stico curso e incre铆ble profesora, saludos desde Guadalajara, M茅xico.

La verdad me exasper贸 la forma de dar el curso, va s煤per r谩pido, muy improvisado sobre la marcha, lo que hace que uno est茅 constantemente perdido.

Aqui mi resultado de la clase, tambien le agregue un cursor: pointer; a las flecitas pa tener mas detalle![](https://static.platzi.com/media/user_upload/image-2bf6a1eb-c9eb-47ad-945c-fb260416fdc2.jpg)

Mi aporte de la clase:
(

Asi me queo la de esta clase este curso me encanto hojala los curso que siguen sea asi aunque me erredaba mucho jajaj con lo qu explicaba la profe pero me gusto

馃鉁

Lo admito, se ve bien bonix

Desktop:

Mobile:

Nice, me fue bien

tambien pueden agreguar el cursor poiner a la 鈥<鈥 para hacer la pagina mas interactiva:

.title-container img{
    transform: rotate(180deg);  
    cursor: pointer;
    margin-right: 14px;
}

un peque帽o aporte creo qe hizo falta estilizar la 鈥渪鈥 para qe el cursor se viera destacado
se qe es algo facil pero queria compartirlo como lo hice yo no pude sacar el pantallazo con el cursor encima de la x pero uds entenderan la idea

Que buen curso:

Uuuff fue largo el camino. Pens茅 que no lo iba a lograr. Al final termino gustandome el curso

Pense que no iba a quedar tal cual, pero asi me quedo鈥
Esto del Frontend me esta gustando cada vez mas!!
.

Me ha gustado mucho el curso, ha sido muy interesante el aprendizaje.
Aqui mi aporte de la ultima clase:

as铆 fue mi resultado 馃ぉ

Fue un curso maravilloso que me despejo varias dudas

Despu茅s de interiorizarme mucho en el tema de dise帽o web, ver otros cursos mas b谩sicos con Diego y con Estefany tambi茅n, al fin pude terminar este curso, ya que las veces que lo intente se me hacia imposible seguirle el ritmo. Pero esta vez lo disfrute mucho! feliz de seguir aprendiendo![](

Todo el curso he visto a la profesora copiar y pegar manualmente, para agilizar tiempo recomiendo usar Control + A, que selecciona todo en 1 segundo

Me costo un poco pero solamente en el orden de como iba todo dentro de si es cuesti贸n de no perder el hijo de las etiquetas y sus clases.

Me encanto este curso descubri y reforce muchos temas siempre antes de que hiciera algo la teacher yo paraba la clase y me preguntaba como hacerlo y a veces acertava o a veces no, fue muy genial este curso lo disfrute y aprendi gracias 馃槂.

Sii, lo logramos excelente 馃挭馃徎

finally

Pienso que nos falto hacer que nuestra imagen de close nos muestre la opcion de click, yo adicione esto:
.shopping-cart img:hover {
cursor: pointer;
}
ahora con JS podemos programar la opcion de eliminar el producto.

Bueno, hora de pulir toda esta pr谩ctica, gracias.

En vez de position absolute pueden usar grid y su propiedad place-content:end

Hola quisiera hacer este aporte:
A lo largo del curso la profe definio las variables todas las veces, me he dado cuenta que es mejor definirlas globalmente, aqui mi aporte:
* {
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
box-sizing: border-box;
}

Acab茅 la 煤ltima vista鈥spero que en otro curso se profundice el tema de reutilizar clases de diferentes vistas鈥a verdad ah铆 si no se cual ser铆a una buena pr谩ctica.

Dejo un link ar repo de github donde hice el proyecto 馃槂

https://github.com/Twiick/curso-practico-de-frontend-developer

seguimos鈥













Fue un muy buen curso, me gustan mucho los cursos practicos, creo que son la mejor manera de aprender.
.
Yo por mi parte lo que hice fue que despues de seguir cada clase, intente replicar la misma pagina pero esta vez sin mirar el video, por mi mismo, asi me aseguro que si estoy asimilando todo el contenido.

Malas pr谩cticas de la profesora 馃槮
Usa muchos comandos de teclado que rara vez desvela, al eliminar partes de c贸digo lo hace de abajo a arriba ( eso dificulta mucho ver qu茅 cachos de c贸digo hemos de cercenar), va muy r谩pido cuando hace estas operaciones, etc
Usa cosas de sass que no ha mencionado para nada, simplemente lo pone ah铆 y no explica. Lo mismo pasaba cuando se us贸 la etiquet <figure>鈥

El curso es muy interesante, el m茅todo, cuestionable.

Uff, ha sido un camino largo. Pero por fin termin茅. No me arrepiento de nada.

Un Curso muy genial, ayuda a desarrollar muchas habilidades, muchas gracias y a seguir practicando

Y quedo la ultima pantalla!! me gusto el curso! vamos a lo que sigue =D

Lo 煤nico que no me funcion贸 fue el box-sizing: border-box. No se porqu茅, lo dem谩s todo muy bien.

Lo organize a mi manera pero siguiendo los pasos de la profe, fue impresionante asombroso y frustrante pero lo logramos

Me encant贸 este curso, soy un ingeniero de sistemas que decidi贸 tomar una l铆nea de trabajo diferente, como todo los temas de agilidad y la gerencia de proyectos鈥ero decid铆 robustecer mis habilidades con desarrollo de software FrontEnd y ha sido un 茅xito, seguro podr茅 ser mucho mas competitivo en el mundo laboral.

Asi quedo mi shopping cart

mi aporte : D

excelente, hubo un par de clases que se me dificult贸 pero revis茅 y correg铆 y todo quedo bien cuco!

Les comparto mi resultado, hice una hoja de estilo para cada clase.
https://github.com/Josetruyolm/Frontend-Mobile.git

Genial el curso y as铆 me quedo el resultado de la ultima clase

As铆 me quedo:

Buenos d铆as a todos

Comparto el ejercicio completo 馃槃

https://github.com/ginnko2019/yardsale.git

as铆 es como quedo la ultima pantalla.

MUY CONTENTO !!!

con algunos tropiezos pero muchos aprendizajes

para agregar el icono que aparece en el dise帽o podemos usar font awesome, agregar esto en el head:
<link rel=鈥渟tylesheet鈥 href=鈥https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css鈥 integrity=鈥渟ha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==鈥 crossorigin=鈥渁nonymous鈥 referrerpolicy=鈥渘o-referrer鈥 />

y luego en vez de usar una imagen podemos utilizar esto:
<i class=鈥渇as fa-long-arrow-left鈥></i>

espero les ayude, igual cuando se pase este proyecto a react tambi茅n se puede importar font awesome.

Este 煤ltimo ejercicio lo desarrolle de la siguiente forma:

Me perd铆 muchas veces pero lo hice

Puedo decir que he aprendido, porque normalmente cuando s茅 como hacer las cosas, dejo de entender los pasos y la forma de hacer de los profesores, principalmente porque me comienza a parecer casi obvio la forma de hacerlo, sigo mi instinto y descubro que obtengo el mismo resultado. Al menos me pas贸 con esta clase.