Ejercicio de programación con CSS: Reto Flexbox Hero
0h 4m
Practica flexbox creando un contenedor con tres elementos que crecen y se reducen según especificaciones de color y tamaño.
Crea un contenedor flex horizontal que contenga tres elementos con las siguientes características:
El primer elemento debe tener un fondo azul (#3498db), no debe crecer pero debe reducirse el doble que los demás elementos cuando falte espacio.
El segundo elemento debe tener un fondo verde (#2ecc71), debe crecer el doble que el tercer elemento y reducirse normalmente.
El tercer elemento debe tener un fondo rojo (#e74c3c), debe crecer pero la mitad que el segundo elemento y no debe reducirse en absoluto.
Todos los elementos deben tener un tamaño base (flex-basis) de 200px, un padding interno de 20px y texto centrado de color blanco que indique "Elemento X" (donde X es el número del elemento).
El contenedor principal debe tener un ancho del 80% de la ventana y estar centrado horizontalmente.
Todos los ejercicios de programación de CSS
Evalúa tus conocimientos con ejercicios de programación en CSS de tipo Test, Puzzle, Código y Proyecto con VSCode.
Propiedades de posicionamiento
Modelo de caja
Sombras en texto y cajas
Sintaxis básica
Estilos de fuente
Animaciones y transiciones
Proyecto CSS Landing page simple
Propiedades de texto
Metodologías BEM, SMACSS, OOCSS
Herencia y cascada
Reto fondos background CSS
Reto sintaxis CSS
Flexbox en diseños modernos
Reto grid de columnas en CSS
Selectores avanzados
Reto formulario estilizado
Proyecto CSS crear una navbar
Reto selectores básicos CSS
Reto Flexbox Card
Propiedad 'display'
Variables en CSS
Grid en diseños de cuadrícula
Reto tema claro/oscuro con variables
Reto modelo caja CSS
Reto implementación de fuentes web
Diseño responsive con media queries
Reto unidades de medida
Sintaxis avanzada
Elementos 'float' y 'clear'
Pseudo-clases y pseudo-elementos
Reto componente responsive
Proyecto CSS Dashboard Responsive
Propiedades de fondo
Introducción a CSS
Reto propiedades texto
Modelo de caja
Selectores básicos
Reto especificidad y cascada
Tutorial para resolver este ejercicio de programación
CSS
Propiedades de los Items Flex
Flexbox