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
Login
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
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.
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:
Div “my order” → contenedor principal
Div “my order container” → nos permitirá alinear el contenido con mayor facilidad
Título → en la versión móvil sube al menú
Div “my order content” → tipo barra contenedora de texto con la fecha, cantidad de artículos y total de dinero
Div “shopping 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
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 😃
<!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.
.my-order>(.my-order-container>.my-order-content>(p>span2)+p{560.00})+.shopping-cart>figure>img+p2
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:
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…ahhh 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
Acá le dejo el link de la imagen que usa la profe
https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940
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
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: “Contribució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>
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.