BananaMaster

6 How %, vw and vh Work in CSS (HTML and CSS, Front End)

If you forgot something, click to go to the lesson

📘 Practical Tasks: %, vw, vh

For each task create separate classes in style.css and apply them to the correct tags.

📌 File structure: index.html + style.css

✏️ Task 1

Recreate the block. Estimate the parent's size by eye:

• Estimate the sizes by eye
• Parent — background: #2c3e50, dimensions in px
• Child — background: #e74c3c, dimensions in %

✏️ Task 2

Recreate the block. Estimate the parent's size by eye:

• Estimate the sizes by eye
• Parent — background: #8e44ad, dimensions in px
• Child — background: #f1c40f, dimensions in %

✏️ Task 3

Recreate the nested blocks. Estimate the parent's size by eye:

• Estimate the sizes by eye
• Parent — background: #16a085, dimensions in px
• Child — background: #e67e22, dimensions in %

✏️ Task 4

Three child blocks stand in a column and divide the parent's height. Estimate the parent's size by eye:

• Estimate the sizes by eye
• Parent — background: #2d3436, dimensions in px
• Child 1 — background: #e74c3c, dimensions in %
• Child 2 — background: #3498db, dimensions in %
• Child 3 — background: #2ecc71, dimensions in %

✏️ Task 5

The parent depends on the browser window, two children stand in a column. Estimate the values by eye:

• Estimate the sizes by eye
• Parent — background: #c0392b, width in vw, height in vh
• Child 1 — background: #f1c40f, dimensions in %
• Child 2 — background: #9b59b6, dimensions in %
• 💡 Try changing the browser window width — what happens to the blocks?

✏️ Task 6

The parent depends on the browser window, three children stand in a column. Estimate the values by eye:

• Estimate the sizes by eye
• Parent — background: #6c5ce7, width in vw, height in vh
• Child 1 — background: #e17055, dimensions in %
• Child 2 — background: #00cec9, dimensions in %
• Child 3 — background: #fdcb6e, dimensions in %

✏️ Task 7

Parent depends on the window, child depends on the parent. Estimate the values by eye:

• Estimate the sizes by eye
• Parent — background: #00b894, width in vw, height in vh
• Child — background: #fd79a8, dimensions in %
• 💡 The child's percentage is calculated from its parent's size

✏️ Task 8

Parent depends on the window, child depends on the parent. Estimate the values by eye:

• Estimate the sizes by eye
• Parent — background: #e17055, width in vw, height in vh
• Child — background: #0984e3, dimensions in %

✏️ Task 9

Three levels: parent from the window, each child from its own parent. Estimate the values by eye:

• Estimate the sizes by eye
• Block 1 (outer) — background: #2c3e50, width in vw, height in vh
• Block 2 (middle) — background: #e74c3c, dimensions in %
• Block 3 (inner) — background: #f1c40f, dimensions in %
• 💡 Each % is calculated from its direct parent!

✏️ Task 10 — 🔥 Bonus

Three child blocks stand in a column inside a parent. Estimate the values by eye:

• Estimate the sizes by eye
• Parent — background: #2c3e50, width in vw, height in vh
• Child 1 — background: #e74c3c, dimensions in %
• Child 2 — background: #f39c12, dimensions in %
• Child 3 — background: #2ecc71, dimensions in %

📌 Important:
Each class is written separately in style.css.
Use HTML and CSS only.
Practice the units: %, vw, vh.