Ejercicios para poner a prueba tus conocimientos de la lección: Flex container

¡Desafía tus habilidades CSS!

Estás a punto de sumergirte en un conjunto de ejercicios prácticos diseñados para poner a prueba tus conocimientos sobre la Flex container en CSS. A través de estos desafíos, fortalecerás tu comprensión de cómo estructurar y organizar el contenido de una página web de manera efectiva y atractiva.

¿Are you ready para demostrar tu dominio? ¡Manos a la obra!

Instrucciones:

1. Fork del repositorio en Github:

   • Haz clic en el botón "Fork" ubicado en la esquina superior derecha.
   • Elige tu cuenta de GitHub y selecciona una reubicación para tu fork.
   • Haz clic en el botón "Fork repository" para crear tu copia personal del repositorio.

2. Clonar el repositorio en tu PC:

   • Abre un terminal o ventana de comandos en tu PC.
   • Navega hasta el directorio donde deseas clonar el repositorio (tu carpeta de proyectos).
   • Ejecuta el siguiente comando: git clone https://github.com/Devix-Academy/css-flex-container.git
   • Ejecuta el comando cd + tab y accede al directorio en el que acabas de crear el proyecto
   • Ejecuta code + barra espace + tecla enter. Esto te llevará automaticamente a Vscode

3. Usar un archivo .html y un archivo .css para cada ejercicio:

   • Para cada ejercicio, crea un nuevo archivo con la extensión .html. Por ejemplo, para el ejercicio 1, crea un archivo llamado ejercicio1.html y otra llamado ejercicio1.css y así sucesivamente con cada ejercicio.
   • En cada archivo .html, escribe el código HTML correspondiente al ejercicio específico al igual con el archivo .css.

Lista de Ejercicios

Ejercicio # 1: Alineación Simple de Tarjetas

Crea un <div> contenedor con tres <article> dentro. Cada <article> debe contener un <h2> y un <p> . Los artículos deben estar distribuidos uniformemente en una fila horizontal, con un margen de 10px entre ellos y un padding interno de 15px.

Ejercicio # 2: Menú de Navegación Flexible

Diseña un Navbar con una <ul> que contenga 5 elementos cada uno con un enlace dentro. Los enlaces deben tener un padding de 10px, un color de texto #333, y estar justificados uniformemente hacia la derecha.

Ejercicio # 3: Galería de Imágenes Responsive

Crea un card con 6 . Las imágenes deben tener un ancho máximo de 200px y una altura automática. Deben organizarse en 2 filas en pantallas grandes y en una columna en pantallas pequeñas, con un margen de 5px entre ellas.

Ejercicio # 4: Formulario de Contacto Centrado

Diseña un formulario para nombre y email, y un textarea para el mensaje. El formulario debe tener un ancho máximo de 400px, estar centrado en la página, y tener un padding de 20px con un borde de 1px sólido #ccc.

Ejercicio # 5: Tarjetas de Producto con Alineación Variable

Crea 4 cards de producto, cada uno con una imagen, un encabezado, un parrafo, y un boton. Las tarjetas deben tener un ancho de 250px, un margen de 10px, y alinearse en fila en pantallas grandes y en columna en pantallas pequeñas.

Ejercicio # 6: Panel de Control con Secciones Flexibles

Diseña una vista con tres secciones: sidebar, área de contenido y footer. El sidebar debe tener un ancho del 20%, el área de contenido 60%, y el footer debe extenderse completamente. Usa colores de fondo diferentes para cada sección.

Ejercicio #7: Galería de Testimonios con Alineación Dinámica

Crea un vista con 5 cards de testimonios. Cada artículo debe contener una imagen de perfil (50x50px), un un encabezado y un parrafo. Los artículos deben ajustarse automáticamente en filas, con el contenido centrado y un padding de 15px.

Ejercicio # 8: Página de Inicio con Secciones Flexibles

Diseña una vista con header, La sección principal (que incluya una sección de características con 3 cards), una sección "Sobre Nosotros", y un footer. Cada sección debe tener un padding de 20px y adaptarse fluidamente a diferentes tamaños de pantalla.

Ejercicio # 9: Tablero de Tareas Kanban

Crea una vista con tres secciones (Para Hacer, En Progreso, Completado). Cada sección debe contener varios cards representando tareas. Las columnas deben tener la misma altura y un ancho mínimo de 250px, con un margen de 10px entre ellas.

Ejercicio # 10: Portafolio Interactivo con Filtros

Diseña una vista con un navbar de filtros (usando button) y un <section> para proyectos. El <section> debe contener múltiples cards de proyectos, cada uno con una imagen, encabezado, y parrafo. La cuadrícula debe ajustarse de 4 columnas a 1 según el tamaño de la pantalla, con un gap de 20px.

¡No te rindas! Si encuentras algún obstáculo durante los ejercicios, no dudes en consultar recursos adicionales, buscar ayuda en la comunidad online o repasar los conceptos aprendidos en el curso. Recuerda que la práctica constante es la clave para dominar el lenguaje HTML y CSS.

¡Confío en tus habilidades! Adelante, demuestra tu dominio en CSS y lleva tus proyectos web al siguiente nivel.