No tienes acceso a esta clase

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

Creando la estructura de la sección de Cuidado de la Salud y Decoración del Hogar

11/20
Recursos

Aportes 29

Preguntas 5

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

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

Esta es la clase de cursos, donde me preocupo. Porque no me coincide nada de lo que veo con lo que sucede en mi PC.
Reviso el archivo en git, y me rompo el coco porque veo todo diferente, como si fuera otro proyecto diferente. 😦

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.

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.

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.

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

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 🙌

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.

Código en el repositorio de GitHub [platzi/cursos-sass (github.com)](https://github.com/platzi/cursos-sass)

Ta bien, voy con ganas a 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!
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.
Encontre el error de esta clase ! Y no es un error de la profesora, fue un error de edicion. En la clase anterior nos habiamos quedado con el div "product-card" como autoconclusivo y luego debajo pusimos la imagen svg, product-image, h3 y p. \
\
Pues debemos trasladar todos los items debajo DENTRO del div product-card, de la siguiente forma:  \
                \<svg>\</svg>                    \
                        \                        \

Cepillo de bambu\

                        \

Paquete de 2 unidades\

                    \
                \
(yo le quite el svg para que quedara mas clara la explicacion, hay que agregarlo de nuevo)
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
En lo personal no me gusta usar vw para el width en tarjetas porque al momento de llevarlo a un dispositivo mas pequeño las tarjetas quedan muy delgadas, en este caso prefiero utilizar max-width o min-width dependiendo el caso y con flex o grid hacerlo responsivo
Ella tiene el don de programar, ella es muy buena programadora, Pero no tiene el don de enseñar, es mala profesora

1px = 1/96th of 1in

No logro entender el @extend de la herencia, si por regla general css ya lo hace ¿No? ¿Qué ventaja trae? No logré reconocerlo

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 me gusta lo de la clase con 20 minutos mi cebero debe procesar todo paso por paso no todo junto igual excelente clase

explica conceptos pero no entiendo cuando los aplica 😕 hasta ahora espero los alt rules

siii la profe como su acento parece como si estuviese en el chavo del 8 en la parte de lucas y chaparron bonaparte " como dice una cosa dice otra y no tuvieron la delicadeza de arreglar los videos, nos llevan a lo chambon.

Por favor, no hagan videos tan largos!

por eso es que quería la liga del figma:

https://www.figma.com/file/Em1aDiIHmqozHpUAjsYhT7/Eco-Store-Mockups-(Copy)?type=design&node-id=32-1588&t=tKJAV87MjINvm6Mr-0

lo exportan en svg y luego lo abren con el chrome y le dan click derecho ver codigo fuente

y listo ahi tienen su codigo del svg