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.
Reto modelo caja CSS
Propiedades de posicionamiento
Modelo de caja
Sombras en texto y cajas
Reto implementación de fuentes web
Sintaxis básica
Estilos de fuente
Diseño responsive con media queries
Animaciones y transiciones
Proyecto CSS Landing page simple
Reto unidades de medida
Propiedades de texto
Metodologías BEM, SMACSS, OOCSS
Herencia y cascada
Sintaxis avanzada
Reto fondos background CSS
Reto sintaxis CSS
Flexbox en diseños modernos
Elementos 'float' y 'clear'
Pseudo-clases y pseudo-elementos
Reto grid de columnas en CSS
Selectores avanzados
Reto componente responsive
Reto formulario estilizado
Proyecto CSS crear una navbar
Proyecto CSS Dashboard Responsive
Propiedades de fondo
Introducción a CSS
Reto selectores básicos CSS
Reto Flexbox Card
Reto propiedades texto
Modelo de caja
Propiedad 'display'
Variables en CSS
Grid en diseños de cuadrícula
Selectores básicos
Reto tema claro/oscuro con variables
Reto especificidad y cascada
Tutorial para resolver este ejercicio de programación
CSS
Propiedades de los Items Flex
Flexbox