Estilizaremos el código HTML que realizamos para la sección “my order” con las opciones que nos brinda CSS para lograr que usuarios vean su pedido de esta manera:
Cómo aplicar CSS en una orden de compra
Una orden de compra tiene una cantidad indefinida de artículos y por eso debemos implementar estilos de CSS que funcionen tanto para ventas menores como para ventas mayores de miles de artículos.
¿Qué debemos hacer para construir estas dos vistas? Sigue estos pasos:
Define las dimensiones del contendor principal y centra su contenido
¿Sabías que tener en claro estos conceptos te puede favorecer en una entrevista de trabajo? Mira lo que te pueden preguntar acerca de HTML y CSS para el puesto de frontend developer.
Contribución creada por: Guadalupe Monge Barale
Aportes 222
Preguntas 27
Ordenar por:
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
Siento que va sacando el maquetado del html como le viene a la mente, sin una planeación anterior, supongo que en un trabajo real suele pasar así, pero esto es un curso, debe estar ya diseñado, es medio molesto estar refactorizando el código a cada rato.
Yo opino que quienes se fijan mas en si la profesora utiliza “buenas practicas” o “no tiene todo hecho”, no estan aprovechando realmente la oportunidad de aprender, si bien en ocasiones es un poco confuso, no hay nada que con lo que hemos aprendido no podamos solucionar, he realizado todo el proyecto con archivos html y css por aparte y no he tenido ningun lio, animo a todos menos excusas y mas ganas de aprender 😃
Veo muchos comentarios diciendo que así se maqueta en la industria y del mismo modo se estiliza, yo creo que no porque por alguna razón existen los Sistemas de diseños y las Arquitecturas, como BEM y SASS excelente compatibilidad entre ellas (son mis favoritas). No critico a la profesora, pero tampoco es la de mi mayor gusto, y tampoco juzgo a los estudiantes que presentan su inconformidad con el desorden, porque sí hay desorden, en la manera de trabajar en la profe, y eso dificulta el proceso de aprendizaje de los y las estudiantes, y más si es un novato. Al menos contamos con el gran repertorio de cursos que ofrece Platzi, y podemos prepararnos con esos para así continuar en nuestro aprendizaje. Sigamos adelante chicos y chicas, que la profesora no sea de nuestro agrado no significa que debamos desertar, dejemos eso de lado y continuemos con el proceso.
Hasta la clase 14 llegue bien. pero desde aquí se ve muy desordenado la forma de maquetar, además de que va volando y me toca estar pausando la clase todo el tiempo. incluso hay líneas que me toca ponerme a buscar para que sirve cada propiedad porque simplemente del afán se me escapa para que sirve y eso que uso doble pantalla y el live server para ver los cambios inmediatamente. me parece que el curso debería extenderse mas ya que algunos necesitamos entender lo que hace cada propiedad y etiqueta en la marcha. sigo avanzando pero con dificultad.
En el minuto 11:28 otra forma de poner el texto debajo del otro con solo HTML es
<span>04.25.2021</span><br>
<span class=“order-text-article”>6 articles</span>
La magia está en la etiqueta de <br> que produce un salto de línea en el texto y se obtiene el mismo resultado de una manera más sencilla
Compañeros, les recomiendo que antes de ver cómo lo hace la profe es bueno que lo intentemos hacer nosotros por nuestra cuenta. Eso vine haciendo desde hace unas clases y realmente se aprende mucho más. No importa si hacen un código desordenado, mientras más de estas prácticas hagan mejor les va a quedar.
La peor clase que he visto en este curso. Siento que Estefany va maquetando a como se le viene en mente (lo cual puede pasar en el mundo laboral, mas no en un curso donde lo menos que hay que hacer es enredar al estudiante). Igualmente, me parece una buena profe y hasta el momento he entendido, pero a duras penas.
Me encanta el uso constante de Grid. Lo usual es que siempre usen flexbox pues tiene mas tiempo pero el grid es un display realmente potente y el que lo usen tanto ayuda a verlo mpas familiar, perderle el miedo.
Me sorprende los comentarios, el proyecto apenas crece un poco y la gente se confunde, existe el poner pausa, la velocidad de 0.75 y hasta inclusive, en la descripción, esta el link para conseguir el proyecto GitHub. (y)
Que tal campeon, buen dia…Como que cada vez mas, la Estefany, en sus explicaciones revuelve mucho y no llega a entender la gran parte de lo que hace en su codigo… Bueno imaginate fronten developer???
Todo bien, pude realizar con éxitos la clase, el problema es que es muy confuso, hace demasiados cambios como si fuera algo obvio pero sería genial si lo explicará más detalladamente.
Quise subir mi foto pero no se como :c
Lo siento mucho pero este curso no me gusto para nada en lo absoluto, el desorden y la velocidad con la explica me confunde todo completamente, es una lastima me estaban gustando los cursos.
“My Order” lo menos que tiene es orden… 😦
Entiendo que así es la “vida real” pero ya manda, uno apenas esta iniciando a aprende y entre tanto borrar, copiar, pegar a lo loco de aquí allá, lo pierde a uno… Mi forma de aprender es ir viendo, lo dentengo y lo hago, pero que va, ando super perdida con lo que ella hace, así tan rápido y sin explicar bien… excelente profesora, pero deberían de tener más planificación!!! (sí lo llevo en 0.85x y apoyandome en GitHub)… es solo mi pensar y parecer, si los profes o adm ven estos comentarios los deberían de tomar en cuenta.
Cuando empece este curso me di cuenta que la profesora iba muy rápido. Entonces lo dejé pausado y seguí tomando otros cursos. Mes y medio regresé y más o menos le sigo el paso a la profesora y a entender porque agregaba y metía etiquetas, incluso a cuestionar si iba tal cosa, iba en tal lugar.
Si sienten que va muy rápido, pueden pausarlo y retomarlo después. Poderle seguir el paso a la profesora, mientras mi mente visualizaba los cambios que hacía, me hizo darme cuenta cuanto he eprendido y me motivo a seguir. No lo vean como un impedimento, sino como un reto un poco más avanzado. Porque de eso se trata… de avanzar.
Salu2 cali2.
Muy desordenado esta clase, entiendo que muchos dicen que el desorden siempre habra en un proyecto real, pero estamos en este curso para aprender css con tanto desorden no se puede aprender efectivamente
En esta clase la profe me mareó mucho porque modificaba constantemente el código HTML y los estilos en CSS. Fue una clase bastante intensa y un poco desordenada (a mi entender). SOLUCIÓN: bajarle la velocidad de reproducción a 0.85 me ayudó mucho.
El resto de las clases hasta ahora son excelentes!!!
1.000 Gracias!
Creo que muchos no entienden el concepto de un **aporte ** ni lo que este en cuanto a contenido significa , compañero la verdad veo a muchos en lugar de aportar al curso con buenos comentarios o formas de mejorar solo se quejan… Porfavor la idea de este espacio es para ayudarnos no para hundir diciendo hay es que es muy desordenada…bla…bla…bla a ver entonces monten su codigo en esta cajita y veo como resolverian segun ustedes el “desorden” de la profesora…
Me gustaría compartir una de las formas que a mí me ha ayudado para poder tener mejor aprendizaje a lo largo de los cursos que he tomado
Ver toda la clase sin parar el video ni generar una sola línea de código.
Volver el video al principio y antes que el profesor comience a realizar el código hacer todo lo que ya he aprendido y me acuerdo (por lo general siempre se explican que van a hacer antes de realizar el código).
si algo de lo que se está diciendo no lo tengo claro lo pauso el video y busco en ese momento es muy útil y ayuda a complementar lo que estoy aprendiendo.
continuo con la clase para ver si lo que realice con lo que ya sabia es igual a lo que nos propone el profesor y en muchos casos se llega al mismo resultado pero en diferentes formas.
Esta es una de las mejores estrategias que me han ayudado con mi aprendizaje virtual, ya que puedo pausar o devolver e incluso buscar algo que no tengo muy claro y aclararlo en el momento espero les sea de ayuda.
En este curso la profesora se equivoco una vez en el video anterior, que luego en este video lo volvió a arreglar y en el minuto 5:40 aproximadamente lo vuelve a dejar como estaba en el video anterior. La verdad es que es muy dificil seguir el curso así, si se equivoca tantas veces deberían editarlo y dejar el definitivo, o al menos en pdf el codigo final. El que se perdió como lo soluciona? Si bien se puede ver el video las veces que queramos, la profe luego no muestra como queda el html simplemente refresca la pagina y continua. Va a un ritmo dificil de seguir, ella ya lo sabe pero nos lo está enseñando, y de esta manera no se entiende nada. El curso venia perfecto, hasta que llego la parte de “mi orden”. Hasta parece que lo hace rapido para sacarselo de encima.
Recomendaciones;
1. Primero ver el video sin pausas y sin generar una linea de código.
2. Una ves visto el video tratar de generar el mismo resultado sin ver el código fuente o regresar al video, también apoyandose de ChatGPT y el canal de Y2 soydalto.
3. Comparar el código propio con el código de la profesora y hacer los ajustes necesarios.
4. Añadir un estilo propio y/o explorar diferentes maneras de llegar al mismo resultado. Ejemplo: la profesora hace uso de clases para el padre y después accede a los hijos través de el pero aveces esto genera problemas de especificidad los cuales pueden ser resueltos al hacer uso de los ids por ejemplo y no solo hacer uso del !important.
PD: Estoy de acuerdo en que el curso puede y debería ser mejorado sin embargo es mejor verlo como una oportunidad de poner en practica el pensamiento critico y no solo copiar y pegar lo que la profesora va haciendo.
Todo el curso tuve que estar poniendo de nuevo, la explicación es muy rápida, no hay un porque de las cosas, si bien tuvimos un curso teórico anterior al practico, para alguien (como yo) que esta en 0 de programación, no entiende muy bien la diferencia de un “p” a un “a” y por que se usa mucho “div” si aun principio dijeron que no es bueno usarlo demasiado
En mi opinión, como persona que se ha desempeñado en varios ámbitos laborales y aprendido de distintos oficios, creo que es mucho más valioso ver a una persona con experiencia resolver problemas y abordar un proyecto sin necesariamente estar siguiendo un guion, que seguir un tutorial al pie de la letra y al final no entender por qué se tomó una u otra decisión. Todos estos diseños se podrían lograr siguiendo distintas rutas, y en las pasadas clases hemos visto cómo se toman decisiones consientes para materializar cada pantalla en particular. Siento que la idea de este curso es desarrollar ese criterio, más que aprender a maquetar esta página de una sola manera.
En mi opinión los “errores” de organización que algunas mencionan son útiles para poder entender como está estructurado el html y cual es la mejor forma de maquetarlo, pienso que esos cambios en el camino nos ayudan a entender mejor lo que estamos haciendo y no solo ir siguiendo el guión de lo que escribe Estefany.
Pues yo no lo hice exactamente igual que la profe porque me perdí entre tantos cambios que hizo al HTML, en la parte visual me quedo igual. Además yo estoy trabajando el CSS en un archivo separado y usando HTML semántico.
![](
HTML
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><linkrel="preconnect"href="https://fonts.googleapis.com"><linkrel="preconnect"href="https://fonts.gstatic.com"crossorigin><linkhref="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;500;700&family=Roboto:wght@700&display=swap"rel="stylesheet"><linkrel="stylesheet"href="./styles/movile.css"><linkrel="stylesheet"href="./styles/desktop.css"media="screen and (min-width: 420px)"><title>My order</title></head><body><mainclass="mainContent"><divclass="myOrderMainContainer"><h1class="title myOrderTitle">My order</h1><sectionclass="myOrderMainContainer-content"><p><span>10.01.2023</span><span>6 articles</span></p><p><span>$ 560.00</span></p></section><sectionclass="myOrderMainContainer-shoppingCart"><article><figure><imgsrc="https://images.pexels.com/photos/1149601/pexels-photo-1149601.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"alt="Imagen de articulo"><figcaption>Bike</figcaption></figure><p><span>$ 120.00</span></p></article><article><figure><imgsrc="https://images.pexels.com/photos/1149601/pexels-photo-1149601.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"alt="Imagen de articulo"><figcaption>Bike</figcaption></figure><p><span>$ 120.00</span></p></article><article><figure><imgsrc="https://images.pexels.com/photos/1149601/pexels-photo-1149601.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"alt="Imagen de articulo"><figcaption>Bike</figcaption></figure><p><span>$ 120.00</span></p></article><article><figure><imgsrc="https://images.pexels.com/photos/1149601/pexels-photo-1149601.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"alt="Imagen de articulo"><figcaption>Bike</figcaption></figure><p><span>$ 120.00</span></p></article><article><figure><imgsrc="https://images.pexels.com/photos/1149601/pexels-photo-1149601.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"alt="Imagen de articulo"><figcaption>Bike</figcaption></figure><p><span>$ 120.00</span></p></article></section></div></main></body></html>
Buenas… No termino de entender porque en la clase .shopping-cart creamos un grid con 4 columnas (auto 1fr auto auto) cuando solo tenemos 3 contenidos dentro de la cart.
De hecho yo lo hice al grid solo con 3 columnas y lo veo mejor (auto 1fr auto).
Me fue más fácil usar flexbox para alinear los items que con CSS Grid, y también porque hasta el primer minuto el código de la profesora no me funcionaba a mí así que tuve que hacerlo diferente para lograr el mismo resultado.
Esta clase me sirvió bastante, porque no me estaba saliendo tratando de seguir lo que Teff hacía.
Así que decidí hacer esta página por mi cuenta, pude practicar y como sí me salio puedo decir que sí he estado aprendiendo
Recuerden el consejo que la @teffcode siempre nos brinda, primero miren la clase sin codear, luego vuelvan a verla codeando o escriban el código lo mas que se acuerden sin ver y de ultimas vuelvan a practicarlo sin ver la clase,… Con eso si te pierdes, siempre puedes volver a la clase ver de nuevo y volver a intentarlo!
Asi me quedo, mi reto personal en esta clase fue hacer el HTML y el estilizado yo sola y luego compararlo con el de la profesora, no usamos lo mismo pero al final estoy contenta con mi resultado, lo comparto con todos, y seguimos aprendiendo.
No entiendo por qué muchos se quejan de que la profe va cambiando el código en media clase, así debe ser en el mundo real, nadie debe tener todo el codigo 100% claro desde el principio como para no modificarlo en medio camino.
Ahora si con esta clase llore, tengo dolor de espalda y de cabeza!!
Ya se que que en un trabajo real esto no es nada, y amo como enseña Esteff pero ahora si me hice bolas y lo hice varias veces y no me salio algo estoy haciendo mal.
Steff una gran maestra, va volando lo hace ver taaaan facil y una aquí apenas empezando! =,(
Creo que no es desorden de la profe, se siente que es con el propósito de enseñarnos como es el mundo real, soy titulado de una carrera donde me lo pintaron en orden y con buenas practicas y al llegar al campo de acción me frustre demasiado, puntos para la profe por ponernos todo en modo realista.
Un consejo, algo que me sirvio a mi fue reforzar un poco las bases de CSS grid para continuar desde aquí, en mi caso no lo tenia muy claro y algunas cosas que mensionaba Estefany quedaban en el aire, pero ya que entiendo estas bases mejor puedo decir que entiendo a la perfección como avanza el curso!
Me esta encantando como va quedando todo el proyecto. Espero al final logremos unir todas las pantallas o algo por el estilo 🙌🏻
🌐 Les comparto mi código subido a GitHub: https://github.com/iJCode1/frontend_practico_platzi
.
Vista Desktop:
Hola!! Para esta vista añadí unas cuantas cositas, para la vista web solo modifiqué el tamaño del contenedor para que la vista se vea mas grande
y para la vista mobile use media queries:
Esto está improvisado o algo?
No hubo planeación?
Son varios bloopers ya que termina confundiendo y alargando el curso.
En una sesión en vivo esto es natural, pero en un video producido, no tiene sentido y solo vas a lograr que la gente se frustre.
Un quality team no vendría mal.
Yo hice el código antes de ver el video y en la parte del cuadrado gris me quedó así:
```js
.order {
background-color: var(--text-imput-field);
border-radius: 10px;
display: flex;
justify-content: space-between;
padding: 10px 20px;
}
.date{
font-weight: bold;
font-size: var(--md);
}
.articles{
font-size: var(--sm);
color: var(--very-light-pink);
}
.total-price {
font-weight: bold;
font-size: var(--md);
}
``` ```js
03.25.21 6 articles
$560.00
```No sé si es mejor con nth child o poniendo class, a mi me queda más fácil con class
hola, dejo mi html por si alguien quiere otra version del codigo. Creo que es interesante no copiar el codigo perse que da la profe, si no entender la estructura y hacerlo a nuestra manera (este es mas semantico)
```js
<body>
<main class = "main">
Para que los precios queden alineados con el precio total, solo reduje el padding de 24px a 16px en el estilo del .order y listo...
`.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 16px;`
`}`
El profe diego es mas claro y organizado utilizando buenas practicas y la profe Estefany no aplica estas buenas practicas pero esto nos ayuda a mover mas nuestra mente, analizar y a resolver errores durante el proceso, siempre es bueno tener en cuenta varias perspectivas.
en el .shopping.cart sería bueno incluir padding-right: 24px para que los precios queden alineados según lo que está en el diseño solicitado.
El Curso esta Excelente, muy buen Curso. El Único Problema que encuentro es que la Profe Es Muy Buena Programando y a veces va demasiado rápido jajajajaja. Pero de Resto Muy Buen curso. (Recomiendo que le bajen la velocidad al Curso)
Profe muchas gracias por la clase, me gusta el hecho de que incluso en plena maquetación cambie cosas porque me ayuda a esta más atento a los cambios y se siente un poco menos estructurado, la fluidez con la que explica y modifica, siento que asi debe de ser en un ambiente laboral
Esto lo enseñan en el curso definitivo de HTML y CSS. Así se puede trabajar más cómodo ya que se reinician esos estilos por defecto de todos los elementos que a veces suelen ser molestos.
Me quedó una duda.
.shopping-cart p:nth-child(2) {
color: var(--very-light-pink);
.shopping-cart p:nth-child(3) {
font-size: var(--md);
font-weight: bold;
}
porqué 2 y 3 si en ese div solo hay 2 \
o es que en el nth-child() se cuentan todos los items dentro del div, como en este caso, que antes de los 2 \
Tengo una duda, al momento de especificar el estilo del contenedor han definido los siguientes estilos:
`.my-order-container { `
`display: grid; `
`grid-template-rows: auto 1fr auto; width: 300px; `
`}`
pero no entiendo porque lo especificaron, entiendo que el grid-template-rows es para definir las proporciones verticalmente que va a tener la grid, pero verticalmente yo no logro identificar las 3 secciones (auto, 1fr, auto), intento ver a través del devtools de chrome pero igual no logro identificar cuales son esas 3 secciones, solo me aparece el h1 y el div:
si me podrían explicar por favor porque no logro comprender esa parte.
muchas gracias de antemano
Me gustarÏa más el curso si lo hiciera ya premeditado y editado, no me gusta así en vivo, siento que se equivoca mucho y deseo que todo sea perfecto, haganlo porque estamos pagando
Gente recuerden que si el profesor se equivoca (que a ver se pueden equivocar tambien son humanos), lo ideal es tratar de buscar el error nosotros y asi aprender tambien a detectar errores en nuestro codigo, y no copiar al 100% el codigo dado en clase, ya que si no se practica no tiene ciencia. Seamos criticos constructivos. Feliz aprendizaje.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?