Mi orden: HTML

Curso Práctico de Frontend Developer

Introducción

¿Ya tomaste el Curso de Frontend Developer?

Buenas prácticas de CSS: reflexión y advertencias

Layout y componentes

Identifica las pantallas de tu proyecto

Sistema de diseño, assets y variables de CSS

Maquetación responsiva: pantallas de autenticación

Crear nueva contraseña: HTML

Crear nueva contraseña: CSS

Email enviado

Crear y editar mi cuenta

Mi cuenta

Maquetación responsiva: vistas principales

Página de inicio: HTML

Página de inicio: CSS

Menú desktop

Menú mobile

Mi orden: HTML

Mi orden: CSS

Mis órdenes

Navbar: HTML

Navbar: CSS

Detalle de producto

Carrito de compras: HTML

Próximos pasos

Cómo continuar aprendiendo desarrollo frontend

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Crear cuenta

Si ya tienes una cuenta,

Iniciar sesión

Recursos

Aportes 22

Preguntas 10

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

Rodrigo Ramos Xochiteotzin

hace 9 meses

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:[email protected];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>

Achraf Mharmel

hace 6 meses

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 😃

Luis Alejandro Vera Hernandez

hace 9 meses

Img

fidel agustin fuentes

hace 8 meses

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

Yeferson Yuberley Guerrero Castro

hace 8 meses

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

Diego Granados

hace 25 días

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/

Juan Gabriel Durán Santos

hace 4 meses

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

Esteban Patiño

hace 5 meses

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

Iván Frías Gil

hace 3 meses

Quizá estas últimas clases se podrían haber propuesto como reto, es todo el rato hacer lo mismo

Cristian Nahuel Kairiyama

hace 2 meses

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

Joel Dominguez Merino

hace 7 meses

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:

Laura Camila Pregonero

hace 5 meses

Mis avances !!!

Captura de Pantalla 2022-02-04 a la(s) 12.08.03 p.m..png

Oscar Alejandro Castillo Naveda

hace 8 meses

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

JoaoGarduno

hace un mes

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:[email protected];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>

Nicolas Porras

hace 3 meses

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>

Olincer Tadeus Garcia Cruz

hace 4 meses

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:[email protected];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>

Gisela Piscoli

hace 5 meses

va saliendo, me gusta como vamos practicando!

JOSE PINTO VEGA

hace 5 meses

Manauri Brazoban

hace 5 meses

Asi resolvi el reto de separar las lista de abajo

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

Josue Israel

hace 5 meses

Me gusta mucho este curso es muy practico 👍✨ si desean la imagen tal como esta en el diseño original 👉img👈

Victor Hugo Cruz Carballo

hace 5 meses

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

Guadalupe Monge Barale

hace 2 meses

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>