¡Mi último proyecto de maquetación web está listo! 🚀
Hoy estoy emocionado de compartir algo de lo que realmente me siento orgulloso. He estado trabajando en una nueva estructura de página web y, después
¿Qué logré?
1. Flexbox para el Layout Global
En el contenedor principal (.container): Se usa Flexbox para organizar el layout global de la página, con una dirección de columna (flex-direction: column) para que los elementos del header, main y footer se alineen verticalmente. Esto asegura que la estructura se vea bien en pantallas grandes y pequeñas.
2. CSS Grid para la Sección de Características
En .grid-container: Se utiliza CSS Grid para dividir las características del proyecto en columnas responsivas. Usamos grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)), lo que crea un número dinámico de columnas que se ajustan al ancho disponible. Esto garantiza que las características se distribuyan en varias columnas cuando haya espacio suficiente y se apilen en una sola columna en pantallas pequeñas.
3. Diseño Responsivo
Con las media queries: En pantallas pequeñas (por debajo de 768px), el diseño cambia para adaptarse mejor a dispositivos móviles. La lista de características se reordena a una sola columna, y los elementos se ajustan para ser más fáciles de leer y navegar.
¡Estoy bastante contento con el resultado! 😎 Es increíble ver cómo una idea se convierte en algo tangible. Como desarrollador web, este tipo de proyectos me siguen motivando a seguir aprendiendo y a mejorar cada día.
¿Qué opinan? ¡Espero que les guste tanto como a mí!