Hola!, les comparto mi avance… Lo estoy haciendo con tonos de color dark:
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
Adquiere por un año todos los cursos, escuelas y certificados por un precio especial.
Antes: $249
Paga en 4 cuotas sin intereses
Termina en:
Realizaremos la pantalla “my orders”. Esta le permitirá al usuario ver todas las órdenes de pedidos que efectuó. Como puedes ver en la imagen, es similar a la vista “my order”, por lo que reutilizaremos código.
La sección de órdenes contiene la fecha, cantidad total de artículos y monto total de dinero de cada orden solicitada por el usuario. Recuerda que en este momento solo estamos maquetando, luego con JavaScript conseguiremos que los datos sean dinámicos.
La estructura es la siguiente:
<div class="my-order">
<div class="my-order-container">
<h1 class="title">My orders</h1>
<div class="my-order-content">
<div class="order">
<p>
<span>03.25.21</span>
<span>6 articles</span>
</p>
<p>$560.00</p>
<img src="./icons/flechita.svg" alt="arrow">
</div>
</div>
</div>
</div>
Como la vista de órdenes es muy similar a la sección “mi orden”, implementaremos los mismos estilos.
Nuestro CSS final se ve así:
.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 auto;
gap: 16px;
align-items: center;
margin-bottom: 12px;
}
.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;
}
Para responder a la pregunta debemos tener en claro que aprendemos cuando creamos.
Esto es así, ya que construir nos permite:
Entonces, ¿buscas maneras diferentes de hacer el código propuesto por la profesora? ¿Trabajas en proyectos propios que te apasionen? Si las respuestas fueron afirmativas, felicidades. ¡Estás realmente aprendiendo!
En caso de que busques mejorar en algún aspecto, o descubrir más sugerencias para impulsar tu aprendizaje; repasa esta clase del curso de estrategias para aprender en línea
Contribución creada por: Guadalupe Monge Barale con los aportes de Andres Sanchez
Aportes 166
Preguntas 11
Hola!, les comparto mi avance… Lo estoy haciendo con tonos de color dark:
Les compartos mis avances
Como cuandop eres bueno y la regla del Copiar y Pegar no aplica en ti
¡Por fin puedo decir que estoy aprendiendo a maquetar y a agregar diseños con CSS!
Aunque por momentos me confundo un poco, las últimas 4 clases yo he realizado las maquetaciones y estilos por mi cuenta, y luego veo la clase para ver si hay formas diferentes o mejores a lo que yo hice en la práctica.
Esta es mi diseño de la pantalla de My Orders:
Mis ordenes de gatitos 🐈
En lugar de usar una etiqueta <p> usen una <span> así por automático se les posicionara al lado derecho
Lo que voy a mostrar a continuación lo hice porque al expandir la pantalla no era nada responsive y quedaba un espacio muy grande, lo solucioné agregándole la siguiente línea de código a la clase:
.my-orders-container {
display: grid;
grid-template-rows: auto 1fr auto;
width: 90%;
max-width: 300px;
}
My orders en mobile
My orders en desktop
Va avanzando :3
Hola, aquí mi ejercicio. Lo hice con mi propio código parecido al de la prof pero sin mirar la explicación), No se si sea el código ideal o semántico.
Se ve simple, pero no es tan fácil como parece, pero si se aprende mucho practicando.
.
.
.
HTML
.
CSS
.
Escucho correcciones.
.
Hay una cosa que no pude hacer y es hacer notar la negrilla al span de la fecha. Le puse el atributo font-weigth: bold pero no se nota casi
La verdad me va bastante bien, un problema que note es que a veces duplica las clases y les da otros estilos, esto creo que va a dar problemas a la hora de ver el proyecto porque re-define los diseños (por ejemplo con la clase “order” ), yo voy cambiando el nombre de las clases en cuanto veo eso.
empece a hacerle estos cambias ya que no me gusta como queda de la otra forma y ahora voy a empezar a cambiar todo a modo dark para ir probando cosas nuevas y poner en practica todo lo visto hasta ahora
Es tan bonito que todo vaya funcionando correctamente 🥺
🌐 Les comparto mi código subido a GitHub: https://github.com/iJCode1/frontend_practico_platzi
.
Vista Desktop:
.
Vista Móvil:
Decidí ponerle un borde sombreado, un color de fondo a la flechita, y ponerle el cursor de tipo pointer, y que ponerle un :hover para que cambie de color cuando se pase el cursor por encima. Espero les guste!.
Poco a poco, estas repeticiones haciendo el código desde cero para aprenderlo mejor.
En Windows: Crtl + Shift + K → Elimina la línea de código
Una parte los estilos y la estructura
This is my result.
esta quedando delicioso,CHEF!!!
😛
Así vamos
En respuesta a la profe sobre como voy, podria decir que … Nada puede malir sal 😃
Mi avance…!
desde que empese este curso practico se me estan quitando las ganas de aprender en platzi poco a poco… :"( . No se rindan por mas que no aprendan en este curso.
Hasta ahora el curso va excelente, estoy recordando varias cosas que habia olvidado en CSS y aprendiendo a usar flex box y css grid que me seran muy utiles 👍
Seguimos…
Yo le quité el border-bottom del final y creo que queda un poquitititito mas parecido.
Hasta el momento genial todo lo que se ha logrado gracias a la profe.
Excelente clase, Seguir aprendiendo y practicando con proyectos.
Excellent class
Esta es mi shopping card
<article class="shopping-card">
<figure>
<source
srcset="https://images.pexels.com/photos/100582/pexels-photo-100582.jpeg?auto=compress&cs=tinysrgb&h=480&w=480"
media="(max-width: 480px)"
/>
<source
srcset="https://images.pexels.com/photos/100582/pexels-photo-100582.jpeg?auto=compress&cs=tinysrgb&h=640&w=640"
media="(max-width: 640px)"
/>
<img
src="https://images.pexels.com/photos/100582/pexels-photo-100582.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260"
alt="bike"
class="product-img"
loading="lazy"
/>
</figure>
<p>Bike</p>
<p>$30,00</p>
</article>
yo lo hice un poquito diferente, pero sale igual
Asi deje el html
<div class="my-order-content">
<div class="order">
<p>
<span>03.25.21</span>
<span>6 articles</span>
</p>
<p>
<span>$560.00</span>
<a src="./clase9-shopping-cart.html">
<img src="./icons/flechita.svg" alt="arrow" />
</a>
</p>
</div>
</div>
Y en el css solo agregue esto
.order p:nth-child(2) a {
margin-left: 20px;
}
Esta cool
Asi va la Cosa!!!
 en otro archivo de texto(clase10.html) basta con escribir este comando en la línea de comandos o terminal:
cat clase9.html > clase10.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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=Montserrat+Alternates:wght@300&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: 0px;
font-family: 'Quicksand', sans-serif;
}
.firts-container {
width: 100%;
height: 100vh;
display: grid;
place-items: center;
}
.title {
font-size: var(--lg);
}
.second-container {
display: grid;
grid-template-rows: auto 1fr auto;
width: 300px;
}
.order {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 16px;
align-items: center;
}
.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;
}
</style>
</head>
<body>
<div class="firts-container">
<div class="second-container">
<h1 class="title">My order</h1>
<div class="order-container">
<div class="order">
<p>
<span>04.25.2021</span>
<span>6 articles</span>
</p>
<p>
<span>$560.00</span>
<img src="./icons/flechita.svg" alt="arrow">
</p>
</div>
</div>
<div class="order-container">
<div class="order">
<p>
<span>04.25.2021</span>
<span>6 articles</span>
</p>
<p>
<span>$560.00</span>
<img src="./icons/flechita.svg" alt="arrow">
</p>
</div>
</div>
<div class="order-container">
<div class="order">
<p>
<span>04.25.2021</span>
<span>6 articles</span>
</p>
<p>
<span>$560.00</span>
<img src="./icons/flechita.svg" alt="arrow">
</p>
</div>
</div>
<div class="order-container">
<div class="order">
<p>
<span>04.25.2021</span>
<span>6 articles</span>
</p>
<p>
<span>$560.00</span>
<img src="./icons/flechita.svg" alt="arrow">
</p>
</div>
</div>
<div class="order-container">
<div class="order">
<p>
<span>04.25.2021</span>
<span>6 articles</span>
</p>
<p>
<span>$560.00</span>
<img src="./icons/flechita.svg" alt="arrow">
</p>
</div>
</div>
</div>
</div>
</body>
</html>
Asi quedo:
¿No creen que la columna que tiene los precios debería estar un poquito más centrado de forma vertical en la card?
HTML:
.
CSS:
.
RESULTADO:
Por el momento todo bien, saludos.
Vamos bien hasta el momento, encantado con el curso 😁
hasta ahora voy asi, me encanta estoy entendiendo y aprendiendo 😃
😭
Mi aporte
Lo puse en modo oscuro cambiando el body
body {
margin: 0;
font-family: 'Quicksand', sans-serif;
background: var(--dark);
color: var(--white);
}
A la próxima aprendo a poner un botoncito que cambie esos estilos.
Siempre acostumbro a realizar la práctica antes de ver la clase, así que en este al ver el diseño, se parecía mucho al anterior…entonces copie y pegue lo anterior y salió en menos de 5minutos. Ya veo que el mito de reutilizar code no es mito y es una total realidad.
seguimos
Aunque es genial copiar y pegar, y es algo que se hace constantemente para agilizar. En etapas tan básicas del aprendizaje es mejor proponerte a ti mismo hacerlo paso a paso, aunque sea tedioso.
Pierde todo el tiempo del mundo en pensar como lo haces y en automatizar el proceso.
Muy recomendable perder tiempo en aprenderte los atajos de teclado de tu editor para ir más rápido antes que copiar y pegar.
Por ejemplo, ¿sabías que en CSS en Visual Studio si pones “m” seguida de “0” -----> m0 -----> y le das al enter se completa por si solo margin:0px; pues así hay mil atajos.
En vez de copiar y pegar, aprende como ser más rápido.
Lo quise hacer sin modificar el HTML y quedo así:
<code>
.my-order-content p:last-child{
position: relative;
}
.my-order-content p:last-child::after{
content: ">";
position: absolute;
inset-inline-end: 0;
transform: translateX(20px);
color: var(--very-light-pink);
}
sufri demaciado haciendo todo esto con colores blancos, me mato la vista y no puedo seguir mucho la clase ya que no entiendo el porque de lo que hace.
Comparto lo que hice hasta ahora. Espero seguir mejorando, es la primera vez que toco algo de HTML y CSS.
Me quedo con esto que vi en la sección de recursos
Mi progreso!!..
no pos profe esta bien épico el curso ya entiendo
La verdad un curso espectacular, me esta encantando. Les comparto como voy en mi pantalla de vsc.
.
Ademas les dejo el repo del proyecto donde estoy subiendo todoas los apuntes y las practicas de esta fabulosa ruta.
https://github.com/Bloki2319/Proyectos.git
PD. Ya estoy buscando trabajo, a penas consiga mi primer trabajo publicare la fecha en el repo para dejar constancia de la efectividad de Platzi 😉
En mi caso, siento que el diseño es más fiel a la solicitud sin margin-bottom. En mi caso lo comenté y obtuve lo siguiente:
que finooooo como tan rápido pudo estilizar algo
Proyecto orientado a bienes raices.
Hasta el momento va todo bien. He aprovechado para desarrollar en paralelo la copia de una página de internet de una empresa de audio. Así va hasta el momento
Por acá dejo el código en caso de que les sea util. o quieran hecharle una ojeada:
<style>
:root{
--white: #FFFFFF;
--black: #000000;
--very-light-pink: #C7C7C7;
--text-input-field: #f7f7f7;
--hospital-green: #ACD9B2;
--red-selected: CC310F;
--sm: 16px;
--md: 24px;
--lg: 28px;
}
body{
margin: 0;
padding: 0;
margin-top: 0;
font-family: 'Nunito Sans', sans-serif;
font-family: 'Quicksand', sans-serif;
font-family: 'Roboto', sans-serif;
}
.h1,
.h2,
.p{ margin: 0;}
.products-navigation{
width: 100%;
height: 80px;
background-color: var(--black);
}
.options-container{
color: var(--white);
display: flex;
flex-direction: row;
/* flex-wrap: nowrap; */
justify-content: space-around;
list-style: none;
align-items: center;
margin: 0;
padding-top: 25px;
}
.options-container a{
color: var(--white);
text-decoration: none;
}
.bose-page{
display: flex;
flex-direction: row;
}
.promotion-product{
display: flex;
align-items: space-between;
}
.promotion-product{
width: 100%;
height: 60%;
}
.main-image{
width: 60%;
height: 100%;
object-fit: cover;
}
.first-section aside{
display: flex;
}
.first-section.h1{
margin: 0;
padding: 0;
}
.shop-deals{
width: 100%;
height: 100%;
background-color: red;
margin: 0;
}
.shop-deals h1{
padding: 0;
margin: 0;
}
.shop-deals{
width: 40%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
font-family: 'Nunito Sans', sans-serif;
}
.shop-deals h1{
border-bottom: 2px solid var(--very-light-pink);
border-top: 2px solid var(--very-light-pink);
font-style: italic;
font-weight: bold;
margin: 24px;
}
.shop-deals h2{
font-weight: bold;
font-size: var(--md);
font-family: ;
}
.shop-deals button{
background-color: var(--white);
border-radius: 20px;
border: none;
cursor: pointer;
width: 40%;
height: 10%;
font-weight: bold;
font-size: var(--sm);
}
.shop-deals a{
color: var(--black);
font-size: 10px;
margin-bottom: 24px;
margin-top: 24px;
font-weight: bold;
}
.benefits-buying-direct{
display: flex;
justify-content: space-evenly;
width: 100%;
height: 100px;
background-color: var(--black);
color: var(--white);
align-items: center;
font-family: 'Nunito Sans', sans-serif;
}
.benefits-buying-direct img{
width: 50px;
height: 50px;
}
.benefits-buying-direct h3{
white-space:nowrap;
font-weight: bold;
}
.benefits-buying-direct a{
color: var(--white);
}
</style>
<body>
<nav class="products-navigation">
<ul class="options-container">
<li class="Deals">
<a href="/">HOLIDAY DEALS</a>
</li>
<li>
<a href="/">GIFT HUB</a>
</li>
<li>
<a href="/">FEATURED</a>
</li>
<li>
<a href="/">HEADPHONES</a>
</li>
<li>
<a href="/">EARBUDS</a>
</li>
<li>
<a href="/">SPEAKERS</a>
</li>
<li>
<a href="/">AUDIO SUNGLASSES</a>
</li>
<li>
<a href="/">SLEEP</a>
</li>
</ul>
</nav>
<main class="bose-page">
<div class="first-section">
<div class="first-section promotion-product">
<img src="./imagenes/cq5dam.web.1920.1920.jpeg" alt="bose buds" class="main-image">
<aside class="first-section shop-deals">
<h1>SAVE UP TO 40%</h1>
<h2> Hits of adrenaline</h2>
<p>Great for those who keep it moving - holidays or not.</p>
<button class="Shop-deals-button"> SHOP ALL DEALS</button>
<a href="/" class="shop-sport-earbuds-link">SHOP BOSE SPORT EARBUDS</a>
</aside>
</div>
<div class="benefits-buying-direct">
<h3>WHY BUY DIRECT FROM <br> BOSE</h3>
<img src="./logos/cq5dam.web.320.320.png" alt="Truck">
<p>FREE 2-day <br> shipping*</p>
<img src="./logos/cq5dam.web.320.320 (1).png" alt="Calendar">
<p>90-day risk-free <br> trial</p>
<img src="./logos/cq5dam.web.320.320 (2).png" alt="Coins falling in a hand">
<p>Price match promise</p>
<a href="/" class="">*Learn more</a>
</div>
</div>
</main>
</body>
</html>
ésta lecci{on la hice solo considerando el texto de la descripción. Si pude hacerlo 😃 ahora lo haré conforme al video para ver las diferencias.
Me encanta diseñar desde cero interfaces graficas con CSS!!
Mi componente por ahora 😃
Note que solo pienso en soluciones con Display Flex, que no estan mal pero es mas “sencillo” con grid
.
Ni modos a repasar display grid
Has ahora asi va quedando estoy muy contendo con las clases
Realmente voy a la par, y realmente eres muy buena, pero porfa las próximas clases trata de no cambiar código tan repentino ya que los que no sabemos no tenemos claro comandos y por ende tiende uno a perderse y mas aun si no estamos en MAC, realmente haces buen trabajo
Para tener un background solo en los elementos impares y que se diferencie un poquito mejor una orden de otra 😎
Añadir esto 🤠
.my-order-content .order: nth-child(odd){
background-color: var(--text-input-field);
}
Viento en popa
les comparto mi codigo por si a alguno le interesa
<!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>
<style>
.my-order {
width: 100%;
height: 100vh;
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 auto;
gap: 16px;
align-items: center;
background-color: var(–text-input-field);
margin-bottom: 30px;
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;
}
.order img{
height: 19px;
cursor: pointer;
}
</style>
<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>
<img src="https://icones.pro/wp-content/uploads/2021/06/icone-fleche-droite-noir.png" alt="">
</div>
</div>
<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>
<img src="https://icones.pro/wp-content/uploads/2021/06/icone-fleche-droite-noir.png" alt="">
</div>
</div>
<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>
<img src="https://icones.pro/wp-content/uploads/2021/06/icone-fleche-droite-noir.png" alt="">
</div>
</div>
<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>
<img src="https://icones.pro/wp-content/uploads/2021/06/icone-fleche-droite-noir.png" alt="">
</div>
</div>
<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>
<img src="https://icones.pro/wp-content/uploads/2021/06/icone-fleche-droite-noir.png" alt="">
</div>
</div>
</div>
</div>
</main>
</body>
</html>
vamos melo caramelo
Así me quedó uwu
He aquí mis avances hasta el momento:
1.- La página de “el email se ha enviado”:
2.- La página de Log In:
3.- La página de Sign In:
4.- La página de My Account:
5.- La página principal:
6.- El menú de escritorio:
7.- El menú para dispositivos móviles:
8.- La lista de una orden:
9.- Una lista de todas las órdenes:
Así vamos:
Buenas! yo para practicar le agregue este código. No se si esta del todo correcto pero creo que quedo bastante bien.
.total {
text-align: end;
font-weight: bold;
font-size: var(--lg);
margin: 16px;
}
.line {
border-top: 1px solid var(--very-light-pink);
}
Por cierto para los que usan VS Code recomiendo ampliamente la extension LIVE SERVER. Asi se les actualiza automaticamente el navegador cada vez que guardan
Creo que una de las cosas más globales es indicar que los <p> no tengan margin. Así se puede indicar cuanto se necesita luego.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.