Ejercicios para poner a prueba tus conocimientos de la lección: Display property

¡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 propiedad display 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-display-property.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: Bloques y Líneas Básicas

Crea una página HTML con un título, dos párrafos y tres enlaces. Utiliza CSS para hacer que los enlaces rendericen uno debajo del otro sin usar el elemento <ul>.

Ejercicio # 2: Menú de Navegación Inline-Block

Diseña un menú de navegación horizontal con 5 elementos utilizando una lista no ordenada. Haz que los elementos de la lista esten uno al lado del otro.

Ejercicio # 3: Galería de Imágenes con Display

Crea una galería de 6 imágenes utilizando <div> para cada imagen. Haz que las imágenes se muestren en dos filas de tres.

Ejercicio # 4: Formulario con Elementos Ocultos

Diseña un formulario de registro con campos para nombre, email y contraseña. Incluye un campo adicional para "código de referencia" que aun cuando está en el código, no se renderice en el navegador.

Ejercicio # 5: Layout Complejo con Diferentes Displays

Crea una página web que incluya un encabezado, una barra de navegación, una sección principal con un artículo y una barra lateral, y un pie de página. Utiliza diferentes propiedades display para estructurar el layout.

¡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.