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. 😕
Conociendo SASS
¿Qué es SASS y en qué se diferencia de otros preprocesadores?
¿Cómo funcionan los preprocesadores? Ventajas de utilizar uno
Instalación y configuración del entorno de trabajo
Anatomía de un proyecto de SASS e instalación y configuración del entorno de trabajo
Reglas y uso
Estructura de la hoja de estilos y variables
Uso de selectores, scope de las variables y shadowing
Creando la estructura del proyecto
At Rules: CSS y nesting
Quiz: Reglas y uso
Expresiones
Expresiones: Literales y Operaciones
Quiz: Expresiones
Proyecto: sección main
Creando la estructura de la sección main
Quiz: Proyecto: sección main
Herencia en SASS
¿Qué es la herencia y cómo funciona en SASS?
Creando la estructura de la sección de Cuidado de la Salud y Decoración del Hogar
Usando flexbox en la sección de Cuidado de la Salud y Decoración del Hogar
Quiz: Herencia en SASS
Mixins
¿Qué es un mixin en CSS?
Implementando mixins en el proyecto
Quiz: Mixins
Funciones
Creación de nuestras propias funciones
Proyecto
Creando la estructura de la sección '¿Por qué nosotros?'
Creando la estructura de la sección Galería de Estilos
Creando la estructura de la sección Mapa y Footer
Quiz: Proyecto
Deploy
Presentación de Github pages y deploy
Quiz: Deploy
Extras
Aprende a instalar y configurar Sass mediante Node.js
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Ana María Díaz Solorio
Aportes 29
Preguntas 5
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
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.
Paquete de 2 unidades\
\1px = 1/96th of 1in
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.
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:
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
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?