Estilos de product cards con herencia CSS
Contenido del curso
Andrés David Gutiérrez Arenas
Luis Rodríguez
Juan Andres Jaramillo Silva
Ricardo Cuauro
Jaime Andres Restrepo Cardona
Jonathan Javier Barsky
Cristhian Camilo Rodriguez Correa
Nury Patricia Bustos Urbano
Edwin García
Mariam Rosal
Henry Alexander Velásquez Rosas
Reymundo Fernando Figueroa Romo
Mateo Muñoz Bustamante
Jean Carlos Rodríguez
Ariel Hernán Contini
----- ----
Beder Danilo Casa Condori
Platzi Team
Francisco Salazar
Samuel Eduardo Rodriguez
Ramses jecsan
Any Omaña
Any Omaña
Red Robles
Kamilo Stevan Alomías Correa
Sería genial que para una nueva versión se empiece con Mobile first! Hace más efectivo el tiempo y el orden del código. :/
Completamente de acuerdo.
Buen punto, pero entonces podríamos decir que estas son malas practicas a la hora de desarrollar webs?
Este curso no está bien estructurado. Lo estoy viendo nada más por los conceptos ya que nada de lo que la "profesora" está haciendo cada vez se parece menos al wireframe de Figma. Tan bien que venían los cursos de HTML y CSS... Es una pena.
Buenas Noches para Todos.
La estructura de este curso es muy regular, desde el principio.
Me tiene el cerebro a borde de explotar, porque se esta haciendo todo prácticamente a la inversa de las buenas practicas del código, aquí la insistencia de los otros docentes en ser responsivo, de mantener las reglas de codificación se fueron no se a donde, pero se fueron.
pero rescato a modo personal que SASS es una herramienta muy poderosa y es para tener muy cuenta ya que nos puede ahorra mucho tiempo. (Espero que vean el mismo potencia que yo veo.)
Este Curso Esta Totalmente sin Recursos, como otros Cursos, sino tomo pantallazos no puedo tener apuntes.
El curso esta mal preparado y Veo Falencias en todo momento, pareciera que la instructora estuviera siguiendo un guion.
Por Favor Revisar la estructura y Calidad de este curso, a mi opinión personal, me parece que es muy muy importante.
Gracias.
A mi con el tema de las buenas practicas me pasaba lo mismo, hasta que me di cuenta que era una oportunidad para practicar las "buenas practicas" que se enseñan en otros cursos como la nomenclatura BEM para las clases o refactorizar el proyecto a responsive design mobile first combinandolo con lo aprendido en este curso sobre sass. Si bien es cierto que hay cosas que se pueden mejorar en el curso. Yo por ejemplo estoy haciendo el proyecto en Next con typescript para practicar el como se desarrolla en estas tecnologias junto con sass
La propiedad background-image en CSS se utiliza para establecer una imagen de fondo en un elemento. La propiedad background-size es la que se utiliza para controlar el tamaño de la imagen de fondo.
La opción cover es uno de los valores que puedes utilizar con la propiedad background-size. Cuando se establece background-size: cover, la imagen de fondo se ajustará de manera proporcional para cubrir completamente el área del elemento contenedor. Esto significa que la imagen se expandirá o contraerá según sea necesario para asegurarse de que todo el espacio esté cubierto, aunque parte de la imagen pueda quedar recortada.
Aquí tienes un ejemplo de cómo se utiliza background-image y background-size: cover en CSS:
css Copy code .elemento { background-image: url("imagen.jpg"); background-size: cover; } En este ejemplo, se establece la imagen de fondo utilizando background-image y se especifica background-size: cover para que la imagen se ajuste y cubra completamente el área del elemento con la imagen proporcionada.
Recuerda que puedes ajustar y personalizar otras propiedades relacionadas con el fondo, como background-position, background-repeat, etc., según tus necesidades específicas.
Si es mejor a la hora de ajustar la imágen, pero no podrias describirla para SEO
En la imagen para que no se rompa la relación al modificar el tamaño ella usa background-image, pero debería ser object-fit.
Algo que no me ha gustado mucho en esta clase y otras anteriores es que se esté adivinando el tamaño en píxeles de las imágenes, creo que es muy confuso para los que apenas están aprendiendo CSS. Me parece que no se están implementando las mejores prácticas dadas en cursos anteriores, tanto en SASS como en el HTML, por lo que en mi proyecto he cambiado varias cosas.
También se debería aprovechar mejor el diseño en Figma al momento de maquetar y emplear mejor la metodología BEM con la sintaxis de SASS.
Espero que en las siguientes clases se hayan mejorado muchas cosas 🙌
Me hubiera encantado que el proyecto empiece con mobile y luego vaya escalando. 😥
para arreglar el problema de que la imagen es más grande que la tarjeta del producto en distintas pantallas yo ajuste el width y el height de manera similar solo con 1vw de diferencia mi código me quedo asi:
.product-card{ width: 12vw; height: auto; background-color: $secondary-color; color: $primary-text-color; padding: 20px; border-radius: 8px; img{ width: 11vw; height: auto; background-image: cover; border-radius: 6px; } }
Nota: no sé si sea la mejor manera de hacerlo, pero es lo que a mí me funcionó pues tengo pantallas de diferentes tamaños en mi setup y no se ajustaban correctamente
Es una pena que teniendo una herramienta tan potente como figma, no se utilice correctamente, tiene las medidas disponibles en el figma y se la pasa haciendo prueba y error. Tiene muchos conocimientos de sass pero no tantos de css y eso hace que este curso se un desorden total.
Código en el repositorio de GitHub
platzi/cursos-sass (github.com)
Este curso rompe con la experiencia de usuario del estudiante de platzi. Esta todo bien con las nuevas formas de enseñar, pero en este caso, preferimos que una IA nos explique los conceptos y los aplique de forma mas precisa y ordenada...De todas maneras rescato lo mejor de este curso y como no es necesario que seamos unos masters en la materia, buscaré mejor forma de aplicar todo a un proyecto real...Es una lastima, una perdida de tiempo y dinero.
Ta bien, voy con ganas a la siguiente clase.
La herencia en SASS permite reutilizar propiedades de un selector en otros selectores. Se logra utilizando el operador @extend, que permite que un selector herede las propiedades de otro, simplificando el código y evitando redundancias. Por ejemplo:
.button { padding: 10px; background-color: blue; } .primary-button { @extend .button; // Hereda las propiedades de .button background-color: green; // Sobrescribe el color }
Así, .primary-button tendrá las propiedades de .button más cualquier modificación adicional. La herencia facilita la gestión de estilos en proyectos grandes.
La verdad que este curso me termino frustrando, responsive practicamente no existe , esta bien que tengamos que aplicar los conocimientos ya estudiados, pero estaria bueno que al aprender un nuevo metodo o tecnologia siga el curso de todo lo que veimos aprendiendo en la escuela, termine haciedo el proyecto sin sass por que la verdad me resultaba imposible seguir y ver esos resultados
Creo que este curso debe mejorar, se pasa mucho tiempo maquetando y poco tiempo explicando sass, se debe separar o dar el maquetado en un repositorio para poder centrarnos en lo que nos interesa, que es aprender Sass o el foco del curso debe ser eso, debemos pasar más tiempo aplicando y aprendiendo conceptos de Sass
No me molesta que las clases duren mucho, pero me parto el bocho pensando que hago mal si lo hago tal cual y no me coincide nada. Además me estresa ver el código de esa manera. Pero bueno, supongo que por algo subieron el curso.
No se por que a veces mi diseño en figma no coincide al momento de hacer el codigo en las medidas de las imagenes o del nav
Holis! Hoy solo vi esta clase porque mi día estuvo bastante ajetreado, sin embargo no quise dejar de programar por lo que así me quedó mi parte del proyecto:
En lo que tenga la versión para mobile se las compartiré <3 Les dejo el repositorio como siempre, besooos
Lo pensé mejor, esperaré a saber cómo aplicar bien la herencia con las siguientes secciones para aplicar un sólo código a la versión mobile, jajajaja. ¡Nos vemos en la siguiente clase!
Estoy aprovechando el curso para aplicar lo previamente aprendido, como el Mobile First, entre otras cosas, extraigo el conocimiento impartido por la profe, pero también estoy aplicando mis propios criterios, lo importante que el resultado sea el solicitado en el diseño de Figma!
En esta clase sólo se vio herencia en la teoría, no se puso en práctica. Todo fue maquetación y estilos CSS (que perfectamente se pudo hacer con CSS normal)
