No tienes acceso a esta clase

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

Mi orden: HTML

15/22
Recursos

Ahora maquetaremos la pantalla llamada my order* cuya funci贸n es mostrar los art铆culos seleccionados por el usuario dentro de una tienda virtual o marketplace. Esta es la estructura que se espera que puedas crear seg煤n la vista de cada dispositivo.

  • Desktop
myorder-desktop.png
  • Mobile
myorder.png

C贸mo hacer la maqueta de una orden de pedidos en HTML

La orden de pedidos le mostrar谩 al usuario los productos que seleccion贸, el monto total de dinero, la fecha y la cantidad total de art铆culos.

Por lo tanto, nuestra maqueta contiene:

  1. Div 鈥渕y order鈥 鈫 contenedor principal

  2. Div 鈥渕y order container鈥 鈫 nos permitir谩 alinear el contenido con mayor facilidad

  3. T铆tulo 鈫 en la versi贸n m贸vil sube al men煤

  4. Div 鈥渕y order content鈥 鈫 tipo barra contenedora de texto con la fecha, cantidad de art铆culos y total de dinero

  5. Div 鈥渟hopping cart鈥 鈫 con la imagen del ar铆tculo y texto especificando su nombre y precio.

El c贸digo HTML resultante es el siguiente:

<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>
    </div>
  </div>

Shortcuts
.my-order>(.my-order-container>.my-order-content>(p>span2)+p{560.00})+.shopping-cart>figure>img+p2


_

Contribuci贸n creada por: Guadalupe Monge Barale con los aportes de Yeferson Yuberley Guerrero Castro y Oscar Alejandro Castillo Naveda

Aportes 43

Preguntas 15

Ordenar por:

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

o inicia sesi贸n.

empec茅 el curso esta ma帽ana a las 10, llevo casi 5 horas y lo terminare probablemente esta noche, un curso muy bueno ense帽anza r谩pida y efectiva, aunque opino que deber铆an seguir con las reglas que nos dieron en otros cursos, menos divs y un css en su propia hoja.

Quitando esos 2 peque帽os factores un aprofesora de 10 馃槂

Maqueta HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <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">
    <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="stylesheet" href="./styles.css">
    <title>My order | Platzi Yard Sale</title>
</head>
<body>
    <header>

    </header>
    <main>
        <div class="my-order">
            <div class="my-order-container">
                <h1 class="title-order">
                    My order
                </h1>
                <div class="my-order-content">
                    <div class="order">
                        <div>
                            <p>
                                <span>
                                    10.03.2021
                                </span>
                                <span>
                                    6 articles
                                </span>
                            </p>
                        </div>
                        <p>
                            $560.00
                        </p>
                    </div>
                    <div class="shopping-cart">
                        <figure>
                            <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="bike">
                        </figure>
                        <p>Bike</p>
                        <p>$30,00</p>
                    </div>
                    <div class="shopping-cart">
                        <figure>
                            <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="bike">
                        </figure>
                        <p>Bike</p>
                        <p>$30,00</p>
                    </div>
                    <div class="shopping-cart">
                        <figure>
                            <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="bike">
                        </figure>
                        <p>Bike</p>
                        <p>$30,00</p>
                    </div>
                    <div class="shopping-cart">
                        <figure>
                            <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="bike">
                        </figure>
                        <p>Bike</p>
                        <p>$30,00</p>
                    </div>
                    <div 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>
    </main>
</body>
</html>

Como amo a Estefany, me he comido el curso en un d铆a , espero terminarlo para la noche.

  • Toda la estructura en una linea de c贸dig:

.my-order>(.my-order-container>.my-order-content>(p>span2)+p{560.00})+.shopping-cart>figure>img+p2

  • Borrar el ultimo car谩cter y volverlo a escribir

Justo en el minuto 2:32 dentro del div escriban esto y completen con Emmet (Tab o Enter):

div.my-order-content>p>span{04.25.21}+span{6 articles}^p{$560.00}

Muy util para escribir HTML velozmente:

https://coderslink.com/talento/blog/ahorra-tiempo-al-escribir-codigo-html-en-visual-studio-code-utilizando-emmet/

Sabes que entendiste cuando empiezas a ver diferentes formas de hacer el mismo dise帽o.

as铆 quedo mi tarjeta de mi primer venta xD

Me adelante un poquito con esta pantalla
馃寪 Les comparto el c贸digo en GitHub: https://github.com/iJCode1/frontend_practico_platzi
.
Vista desktop:

.
Vista m贸vil:

Estar铆a excelente que pudieran dar las respuestas a los retos propuestos

Porque estoy viendo cajitas siempre鈥hhh mucho CRASH BANDICOT por hoy 馃槄

Mis avances !!!

La imagen que usa para este ejercicio鈥

Por si no tienen el link a la mano

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

Quiz谩 estas 煤ltimas clases se podr铆an haber propuesto como reto, es todo el rato hacer lo mismo

Una forma m谩s r谩pida y sencilla de crear los elementos padre con sus respectivos hijos en VScode

div.my-order>div.my-order-container>div.my-order-content>div>p>span

el shopping-cart div va dentro de div container DE NADA

![](https://static.platzi.com/media/user_upload/Captura%20de%20pantalla%202023-11-25%20070231-bce46668-4ef2-475f-a94c-96219ea5c53b.jpg) Hola este mi reto de la clase anterior
esta clase esta demasiado desorganizada con tantos div
# full emmet shortcut `div.my-order>div.my-order-container>div.my-order-content>p>span{10.23.2023}+span{6 articles}^p{560.00}^^div.shopping-cart>figure>img[alt="bike"]^p{Bike}+p{120.00}`

He realizado my order de desktop antes de ver la clase y siento que me exced铆 en clases pero me di cuenta hasta que ya hab铆a acabado.
Pero es muy buena pr谩ctica tratar de realizar las pantallas por tu cuenta.

He visto que que algunos han echo el curso en un dia, ya me senti mal, me he atrasado un monton, me puse a hacer mi Portafolio y pause el curso varios dias para terminalo y practicar todo lo que he aprendido, aunque por una parte, no estuvo mal鈥
Pero en si ya quiero acabar!!

veo que todo el mundo esta terminando este curso en un dia y yo llevo como 2 dias en esto馃槬

Excelente, a medida que se avanza se van repitiendo cositas que hacen que se queden grabados los nuevos conocimientos 馃槒

馃槂

muy bueno: 鈥淐ontribuci贸n creada por: Guadalupe Monge Barale con los aportes de Yeferson Yuberley Guerrero Castro y Oscar Alejandro Castillo Naveda鈥 , se agradece, en los cursos mas nuevos que los tienen es un diferencial +, se puede estar atento a comprender y realizar el video " pair programming" con la profe y luego transcribir las notas en un .md , de las notas ya obtenidas y no ver el video n veces , resumen :se gana tiempo

Esta es la forma que trato de seguir (no estoy segura de que este del todo bien)
.

Secciones nuevas etiqueta -> Section
Caja contenedora de textos -> Article
Caja contenedora que puede tener im谩genes o texto
-> Div
.
El HTML de la clase me qued贸 as铆

<section class="my-order">
        <div class="my-order-container">

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

            <div class="shoppin-card">
                <figure>
                    <img src="https://images.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="cat">
                </figure>
                <p>Michi</p>
                <p>$130.00</p>
            </div>

        </div>
    </section> 

La etiqueta de tipo span es un contenedor en l铆nea, el cual sirve para aplicar estilo al texto o agrupar elementos en l铆nea.

Una forma m谩s r谩pida y sencilla de crear las etiquetas con sus respectivas clases e hijos en VScode

div.my-order>div.my-order-container>div.my-order-content>div>p>span

Mi aporte, lo estoy haciendo con un audi RS3 馃殫鈥

<!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">
    <title>Document</title>
    <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;
      --sm: 14px;
      --md: 16px;
      --lg: 18px;
    }
    body {
      margin: 0;
      font-family: 'Quicksand', sans-serif;
    }
    </style>
</head>
<body>
    <div class="my-order">
        <div class="my-order-container">
            <div class="my-order-content">
                <div>
                    <p>
                        <span>27.08.22</span>
                        <span>6 articulos</span>
                    </p>
                    <p>600.00</p>
                </div>
            </div>
        </div>

        <div class="shopping-car">
            <figure>
                <img src="https://images.pexels.com/photos/244206/pexels-photo-244206.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="car">
            </figure>
            <p>Car</p>
            <p>$7,000</p>
        </div>
    </div>

    <div class="shopping-car">
        <figure>
            <img src="https://images.pexels.com/photos/244206/pexels-photo-244206.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="car">
        </figure>
        <p>Car</p>
        <p>$7,000</p>
    </div>
</div>

<div class="shopping-car">
    <figure>
        <img src="https://images.pexels.com/photos/244206/pexels-photo-244206.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="car">
    </figure>
    <p>Car</p>
    <p>$7,000</p>
</div>
</div>

<div class="shopping-car">
    <figure>
        <img src="https://images.pexels.com/photos/244206/pexels-photo-244206.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="car">
    </figure>
    <p>Car</p>
    <p>$7,000</p>
</div>
</div>
</body>
</html>

A como la cicla olee a como a como鈥

Gran profesora, queda todo claro

Para esta clase debes tener en cuenta que la estructura ser谩 la siguiente:
Div My order
My order container
titulo
My order content
(TEXTO)
Shopping cart
Figura
parrafo
parrafo
parrafo

All

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- FONTS -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;500;700&display=swap" rel="stylesheet">
    <title>Yard Sale | View 9 - My order: HTML</title>
    <style>
        /* Se agregan los estilos para la pantalla de "New Password" */
        :root{
        --white: #FFFFFF;
        --black: #000000;
        --very-light-pink: #605C5C;
        --text-input-field: #ECECEC;
        --hospital-green: #72a178;
        /* FONT SIZE */
        --sm: 14px;
        --md: 16px;
        --lg: 18px;
        }
        body{
            font-family: 'Quicksand', sans-serif;
            margin: 0;
        }
    </style>
</head>
<body>
    <div class="my-order">
        <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>

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

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

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

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

Mi codigo鈥

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Quicksand: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;
             --sm: 14px;
             --md: 16px;
             --lg: 18px;
              }
               body{
                   margin: 0;
                   font-family:'Quicksand',sans-serif;
               }
               </style>
</head>
<body>

<div  class="my-order">
    <div class="my-order-container">
        <div class="my-order-content">
            <p>
                <span>
                 03.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/276517/pexels-photo-276517.jpeg?cs=srgb&dl=pexels-pixabay-276517.jpg&fm=jpg" alt="bike">
        </figure>
        <p>Bike</p>
        <p>$30.00</p>

    </div>
    <div class="shopping-cart">
        <figure>
            <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?cs=srgb&dl=pexels-pixabay-276517.jpg&fm=jpg" alt="bike">
        </figure>
        <p>Bike</p>
        <p>$30.00</p>
           
    </div>

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

va saliendo, me gusta como vamos practicando!

Asi resolvi el reto de separar las lista de abajo

.mobile-menu ul:nth-child(2){
margin-bottom: 100px;

}

Me gusta mucho este curso es muy practico 馃憤鉁 si desean la imagen tal como esta en el dise帽o original 馃憠img馃憟

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

            <div class="shopping-card">
                <figure>
                    <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?cs=srgb&dl=pexels-pixabay-276517.jpg&fm=jpg"" alt="bike">
                </figure>
                <p>bike</p>
                <p>$30.00</p>
            </div>

            <div class="shopping-card">
                <figure>
                    <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?cs=srgb&dl=pexels-pixabay-276517.jpg&fm=jpg"" alt="bike">
                </figure>
                <p>bike</p>
                <p>$30.00</p>
            </div>

            <div class="shopping-card">
                <figure>
                    <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?cs=srgb&dl=pexels-pixabay-276517.jpg&fm=jpg"" alt="bike">
                </figure>
                <p>bike</p>
                <p>$30.00</p>
            </div>

            <div class="shopping-card">
                <figure>
                    <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?cs=srgb&dl=pexels-pixabay-276517.jpg&fm=jpg"" alt="bike">
                </figure>
                <p>bike</p>
                <p>$30.00</p>
            </div>

            <div class="shopping-card">
                <figure>
                    <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?cs=srgb&dl=pexels-pixabay-276517.jpg&fm=jpg"" alt="bike">
                </figure>
                <p>bike</p>
                <p>$30.00</p>
            </div>
        </div>
    </div>