Viewport units in CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set the width of the box to 50% of the viewport width.

CSS

div {
  width: 50[1];
}

Drag options to blanks, or click blank then click option'

Aem

Bpx

Cvh

Dvw

Attempts:

3 left

💡 Hint

Common Mistakes

Using vh which relates to viewport height, not width.

Using fixed units like px which do not scale with viewport.

The vw unit means 1% of the viewport width. So 50vw is half the viewport width.

2fill in blank

medium

Complete the code to set the height of the header to 10% of the viewport height.

CSS

header {
  height: 10[1];
}

Drag options to blanks, or click blank then click option'

Avh

Bvw

Crem

Dpt

Attempts:

3 left

💡 Hint

Common Mistakes

Using vw which relates to width, not height.

Using fixed units like pt which do not scale with viewport.

The vh unit means 1% of the viewport height. So 10vh is 10% of the browser window height.

3fill in blank

hard

Fix the error in the code to make the box height 100% of viewport height.

CSS

.box {
  height: 100[1];
}

Drag options to blanks, or click blank then click option'

Apx

Bvh

Cem

D%

Attempts:

3 left

💡 Hint

Common Mistakes

Using % which depends on parent height.

Using fixed units like px which do not scale.

Using vh sets height relative to viewport height. % would be relative to parent, which may not fill viewport.

4fill in blank

hard

Fill both blanks to set the font size to 5% of viewport width and margin to 2% of viewport height.

CSS

p {
  font-size: 5[1];
  margin: 2[2];
}

Drag options to blanks, or click blank then click option'

Avw

Bvh

Cem

Dpx

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up vw and vh units.

Using fixed units like px which do not scale.

vw is used for font size relative to viewport width, and vh for margin relative to viewport height.

5fill in blank

hard

Fill all three blanks to create a responsive square box with width and height 30% of viewport width and padding 1% of viewport height.

CSS

.square {
  width: 30[1];
  height: 30[2];
  padding: 1[3];
}

Drag options to blanks, or click blank then click option'

Avh

Bvw

Dpx

Attempts:

3 left

💡 Hint

Common Mistakes

Using vh for width or height which can distort the square.

Using fixed units like px which do not scale.

Width and height use vw to keep the box square relative to viewport width. Padding uses vh for vertical spacing.