BananaMaster

6 Cómo Funcionan %, vw y vh en CSS (HTML y CSS, Front End)

Si olvidaste algo — haz clic para ir a la lección.

📘 Tareas Prácticas: %, vw, vh

Para cada tarea crea clases separadas en style.css y aplícalas a las etiquetas correctas.

📌 Estructura de archivos: index.html + style.css

✏️ Tarea 1

Recrea el bloque. Estima el tamaño del padre a ojo:

• Estima los tamaños a ojo
• Padre — fondo: #2c3e50, dimensiones en px
• Hijo — fondo: #e74c3c, dimensiones en %

✏️ Tarea 2

Recrea el bloque. Estima el tamaño del padre a ojo:

• Estima los tamaños a ojo
• Padre — fondo: #8e44ad, dimensiones en px
• Hijo — fondo: #f1c40f, dimensiones en %

✏️ Tarea 3

Recrea los bloques anidados. Estima el tamaño del padre a ojo:

• Estima los tamaños a ojo
• Padre — fondo: #16a085, dimensiones en px
• Hijo — fondo: #e67e22, dimensiones en %

✏️ Tarea 4

Tres bloques hijos en columna dividen la altura del padre. Estima el tamaño del padre a ojo:

• Estima los tamaños a ojo
• Padre — fondo: #2d3436, dimensiones en px
• Hijo 1 — fondo: #e74c3c, dimensiones en %
• Hijo 2 — fondo: #3498db, dimensiones en %
• Hijo 3 — fondo: #2ecc71, dimensiones en %

✏️ Tarea 5

El padre depende de la ventana del navegador, dos hijos en columna. Estima los valores a ojo:

• Estima los tamaños a ojo
• Padre — fondo: #c0392b, ancho en vw, alto en vh
• Hijo 1 — fondo: #f1c40f, dimensiones en %
• Hijo 2 — fondo: #9b59b6, dimensiones en %
• 💡 Prueba cambiando el ancho de la ventana — ¿qué pasa con los bloques?

✏️ Tarea 6

El padre depende de la ventana, tres hijos en columna. Estima los valores a ojo:

• Estima los tamaños a ojo
• Padre — fondo: #6c5ce7, ancho en vw, alto en vh
• Hijo 1 — fondo: #e17055, dimensiones en %
• Hijo 2 — fondo: #00cec9, dimensiones en %
• Hijo 3 — fondo: #fdcb6e, dimensiones en %

✏️ Tarea 7

El padre depende de la ventana, el hijo depende del padre. Estima los valores a ojo:

• Estima los tamaños a ojo
• Padre — fondo: #00b894, ancho en vw, alto en vh
• Hijo — fondo: #fd79a8, dimensiones en %
• 💡 El porcentaje del hijo se calcula desde el tamaño de su padre

✏️ Tarea 8

El padre depende de la ventana, el hijo depende del padre. Estima los valores a ojo:

• Estima los tamaños a ojo
• Padre — fondo: #e17055, ancho en vw, alto en vh
• Hijo — fondo: #0984e3, dimensiones en %

✏️ Tarea 9

Tres niveles: padre desde la ventana, cada hijo desde su propio padre. Estima los valores a ojo:

• Estima los tamaños a ojo
• Bloque 1 (exterior) — fondo: #2c3e50, ancho en vw, alto en vh
• Bloque 2 (medio) — fondo: #e74c3c, dimensiones en %
• Bloque 3 (interior) — fondo: #f1c40f, dimensiones en %
• 💡 ¡Cada % se calcula desde su padre directo!

✏️ Tarea 10 — 🔥 Bonus

Tres bloques hijos en columna dentro de un padre. Estima los valores a ojo:

• Estima los tamaños a ojo
• Padre — fondo: #2c3e50, ancho en vw, alto en vh
• Hijo 1 — fondo: #e74c3c, dimensiones en %
• Hijo 2 — fondo: #f39c12, dimensiones en %
• Hijo 3 — fondo: #2ecc71, dimensiones en %

📌 Importante:
Cada clase se escribe por separado en style.css.
Usa solo HTML y CSS.
Practica las unidades: %, vw, vh.