Conociendo SASS
Desarrollo de Páginas Web con SAS para Principiantes
Funcionamiento y ventajas de los preprocesadores CSS
Instalación y configuración del entorno de trabajo
Instalación y Configuración de SAS en Visual Studio Code
Reglas y uso
Variables y Estructura de Hojas de Estilos en SAS
Selectores CSS y Variables en SAS: Aplicación Práctica
Estructura HTML y CSS para Proyectos Web en Visual Studio Code
Uso de Nesting y Ad Rules en SAS para Modularizar CSS
Quiz: Reglas y uso
Expresiones
Expresiones en CSS: Números, Strings, Colores y Booleanos
Quiz: Expresiones
Proyecto: sección main
Estilos CSS para Sección Principal en Figma y HTML
Quiz: Proyecto: sección main
Herencia en SASS
Uso de Herencia en SAS para Estilos Reutilizables
Estilos CSS y Herencia en Proyectos Web con Figma y VS Code
Manipulación de Flexbox para Diseño de Tarjetas en CSS
Quiz: Herencia en SASS
Mixins
Uso de Mixins en SAS para Simplificar Estilos en CSS
Implementación de Mixins en Visual Studio Code con Flexbox y SAS
Quiz: Mixins
Funciones
Operadores y Funciones en SAS: Uso y Ejemplos Prácticos
Proyecto
Estilos CSS para Sección "Por Qué Nosotros" en HTML
Estilos y Animaciones en Galerías con Figma y CSS
Estilos CSS para Sección de Ubicación y Footer en HTML
Quiz: Proyecto
Deploy
Publicación de Proyectos con GitHub Pages
Quiz: Deploy
Extras
Instalación y Configuración de Sass con Node.js
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
En la era digital, el diseño web se convierte en una herramienta esencial para comunicar efectivamente. Crear una interfaz agradable y accesible es más fácil gracias a tecnologías como Flexbox, que te permite manejar el diseño de tus elementos de manera versátil y eficiente. Durante esta clase, profundizaremos en cómo Flexbox puede optimizar el diseño de tus tarjetas de productos, específicamente en las secciones de decoración del hogar y cuidado de la salud.
Los gráficos vectoriales escalables (SVG) son una opción popular gracias a su flexibilidad y alta calidad. La manipulación correcta de SVG dentro de tarjetas puede mejorar considerablemente el diseño visual de un sitio web.
<div class="icon">
<!-- SVG insertado aquí -->
<svg>...</svg>
</div>
Al envolver el SVG en un div
, puedes ajustar el ícono usando propiedades CSS como display
, justify-content
, y align-items
. Esto no solo mejora su apariencia, pero también facilita su manejo y personalización.
Flexbox es extremadamente útil para alinear y distribuir espacio entre elementos en un contenedor. Aquí un ejemplo práctico:
.cart-section {
display: flex;
flex-wrap: wrap;
justify-content: center;
column-gap: 100px;
row-gap: 80px;
}
display: flex;
: Activa Flexbox en el contenedor.flex-wrap: wrap;
: Permite que las tarjetas se envuelvan, adaptándose a diferentes tamaños de pantalla.justify-content: center;
: Centra las tarjetas dentro del contenedor.column-gap
y row-gap
: Controlan el espaciado entre columnas y filas respectivamente.El diseño responsivo es crucial para proporcionar una experiencia de usuario óptima, independientemente del dispositivo. Para las imágenes dentro de las tarjetas, utiliza object-fit
para mantener sus proporciones:
.product-image {
img {
width: 100%;
height: auto;
object-fit: cover;
}
}
Esto asegura que las imágenes se comporten bien sin distorsionarse, manteniendo siempre una estética consistente.
extend
?La eficiencia en código es clave en proyectos grandes. Para evitar la repetición, la directiva @extend
de SASS ofrece una solución perfecta:
.furniture {
@extend .healthcare;
}
Al extender la clase healthcare
, furniture
hereda automáticamente todos sus estilos, lo que te permite ahorrar tiempo y reducir errores potenciales.
La tarea final se centra en ajustar detalles como el tamaño de las tarjetas y su contenido. Se sugiere modificar dinámicamente las dimensiones mediante unidades de medida flexibles como vw
y vh
, para adaptarse a diferentes pantallas:
.product-card {
width: 30vw;
height: 45vh;
background-color: $quaternary;
}
Estos ajustes aseguran que tu UI siga siendo visualmente atractiva y funcional. Además, cambiar colores y textos de las tarjetas contribuye significativamente a la personalización del catálogo y permite una mejor identificación y diferenciación entre productos.
Con esta guía, estás bien equipado para implementar un diseño atractivo, organizado y mantenible utilizando Flexbox y las técnicas mencionadas. ¡Sigue experimentando y mejorando tus habilidades en diseño web!
Aportes 36
Preguntas 2
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?