Ejercicios para poner a prueba tus conocimientos de la lección: Box sizing

¡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 box-sizing 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-box-sizing.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: El párrafo adaptable

Crea un párrafo con un ancho de 300px, un padding de 20px y un borde de 2px. Aplica box-sizing: border-box para que el ancho total del elemento sea exactamente 300px.

Pista: Usa la propiedad box-sizing: border-box en el párrafo. Esto hará que el padding y el borde se incluyan en el ancho total de 300px.

Ejercicio # 2: La imagen contenida

Inserta una imagen dentro de un div. El div debe tener un ancho de 500px y un padding de 25px. Usa box-sizing: border-box en el div y asegúrate de que la imagen ocupe el 100% del ancho disponible dentro del div.

Pista: Aplica box-sizing: border-box al div. Establece el ancho de la imagen al 100% para que se ajuste perfectamente dentro del div, teniendo en cuenta el padding.

Ejercicio # 3: La lista ordenada con bordes

Crea una lista ordenada con 5 elementos. Cada elemento de la lista debe tener un ancho de 200px, un padding de 10px y un borde de 1px. Usa box-sizing: border-box para asegurar que todos los elementos de la lista tengan el mismo ancho total.

Pista: Aplica box-sizing: border-box a los elementos <li>. Esto garantizará que el padding y el borde se incluyan en el ancho de 200px, manteniendo todos los elementos alineados.

Ejercicio # 4: El formulario preciso

Diseña un formulario con un input de texto y un textarea, uno debajo del otro. Ambos elementos deben tener un ancho del 100%, un padding de 15px y un borde de 2px. Usa box-sizing: border-box para asegurar que ocupen exactamente el ancho de su contenedor.

Pista: Aplica box-sizing: border-box tanto al input como al textarea. Establece el ancho al 100% en ambos. Esto hará que se ajusten perfectamente al ancho de su contenedor, incluyendo el padding y el borde.

Ejercicio # 5: La sección de contenido flexible"

Crea una sección (usando la etiqueta

) que contenga tres divs en línea, cada uno con un ancho del 33.33%. Cada div debe contener un encabezado h3 y un párrafo. Aplica un padding de 20px y un borde de 1px a cada div. Usa box-sizing: border-box para asegurar que los tres divs se ajusten perfectamente en una línea sin romper el diseño.

Pista: Aplica box-sizing: border-box a los divs dentro de la sección. Usa display: inline-block para colocarlos en línea. El ancho del 33.33% en cada div, junto con box-sizing: border-box, asegurará que ocupen exactamente un tercio del ancho de la sección, incluyendo el padding y el borde. Puedes necesitar ajustar el font-size a 0 en la sección para eliminar el espacio entre los divs inline-block.

En cada ejercicio, cambia el valor border-box por content-box y observa los distintos comportamientos :)

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