Bird
Raised Fist0
CSSmarkup~30 mins

Viewport units in CSS - Mini Project: Build & Apply

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Using Viewport Units for Responsive Layout
📖 Scenario: You are creating a simple webpage layout that adjusts its size based on the browser window size. This helps the page look good on phones, tablets, and desktops without extra work.
🎯 Goal: Build a webpage with a header and a main content area. Use viewport units in CSS so the header height is always 10% of the viewport height and the main content area fills the rest.
📋 What You'll Learn
Create a basic HTML structure with <header> and <main> elements
Use CSS viewport height units (vh) to set the header height to 10% of the viewport height
Set the main content area height to fill the remaining 90% of the viewport height
Add background colors to header and main for clear visual distinction
Ensure the layout adjusts automatically when resizing the browser window
💡 Why This Matters
🌍 Real World
Websites need to look good on phones, tablets, and desktops. Using viewport units helps create flexible layouts that adjust automatically to different screen sizes.
💼 Career
Front-end developers use viewport units to build responsive designs that improve user experience across devices.
Progress0 / 4 steps
1
Create the HTML structure
Write the HTML code to create a <header> element and a <main> element inside the <body>. The <header> should contain the text "My Header" and the <main> should contain the text "Main content area".
CSS
Hint

Use <header> and <main> tags inside the <body>. Put the exact texts inside them.

2
Add CSS to set header height using viewport units
Add a <style> block inside the <head>. Inside it, write CSS to set the header height to 10vh and give it a background color of #4CAF50.
CSS
Hint

Inside the <style> block, target the header tag and set height: 10vh; and background-color: #4CAF50;.

3
Set main content height to fill remaining viewport
In the same <style> block, add CSS to set the main element height to 90vh and give it a background color of #f0f0f0.
CSS
Hint

Inside the <style> block, add a main selector with height: 90vh; and background-color: #f0f0f0;.

4
Make sure the layout fills the full viewport height
Add CSS to the body and html selectors inside the <style> block to set their height to 100% and remove default margin by setting margin: 0;. This ensures the header and main fill the entire browser window height.
CSS
Hint

Set html, body selectors with height: 100%; and margin: 0; inside the <style> block.

Practice

(1/5)
1. What does the CSS unit 1vw represent?
easy
A. 1% of the viewport's width
B. 1% of the viewport's height
C. 1 pixel
D. 1% of the parent element's width

Solution

  1. Step 1: Understand viewport width unit

    The unit vw stands for viewport width, so 1vw equals 1% of the browser window's width.

  2. Step 2: Compare with other units

    Unlike vh which is viewport height, vw relates only to width, not height or pixels.

  3. Final Answer:

    1% of the viewport's width -> Option A

  4. Quick Check:

    1vw = 1% viewport width [OK]
Hint: Remember vw = viewport width percent [OK]
Common Mistakes:
  • Confusing vw with vh
  • Thinking vw is pixels
  • Mixing viewport units with parent size
2. Which of the following is the correct CSS syntax to set an element's height to 50% of the viewport height?
easy
A. height: 50vw;
B. height: 50vmax;
C. height: 50vmin;
D. height: 50vh;

Solution

  1. Step 1: Identify viewport height unit

    The unit vh means viewport height, so 50vh means 50% of the viewport height.

  2. Step 2: Check other units

    vw is viewport width, vmin is the smaller of width or height, and vmax is the larger. Only vh sets height relative to viewport height directly.

  3. Final Answer:

    height: 50vh; -> Option D

  4. Quick Check:

    Use vh for viewport height in CSS [OK]
Hint: Use vh for height, vw for width [OK]
Common Mistakes:
  • Using vw for height
  • Confusing vmin and vmax
  • Forgetting semicolon in CSS
3. Given this CSS:
div {
  width: 10vw;
  height: 20vh;
}

If the browser window is 1000px wide and 800px tall, what will be the div's width and height in pixels?
medium
A. Width: 200px, Height: 400px
B. Width: 10px, Height: 20px
C. Width: 100px, Height: 160px
D. Width: 1000px, Height: 800px

Solution

  1. Step 1: Calculate width from vw

    10vw means 10% of viewport width. 10% of 1000px = 100px.

  2. Step 2: Calculate height from vh

    20vh means 20% of viewport height. 20% of 800px = 160px.

  3. Final Answer:

    Width: 100px, Height: 160px -> Option C

  4. Quick Check:

    vw and vh convert to % of viewport size [OK]
Hint: Multiply vw/vh % by viewport pixels [OK]
Common Mistakes:
  • Mixing width and height values
  • Calculating percentages incorrectly
  • Confusing vh with vw
4. This CSS code is intended to make a box fill the smaller dimension of the viewport, but it doesn't work as expected:
.box {
  width: 50vmin;
  height: 50vmin;
}

What is the likely problem?
medium
A. The viewport units need a unit like px after vmin
B. The viewport size might be changing, causing unexpected results
C. vmin is not supported by browsers
D. The CSS syntax is correct; problem is elsewhere

Solution

  1. Step 1: Understand vmin behavior

    vmin uses the smaller of viewport width or height. If viewport changes size (like resizing window), the box size changes too.

  2. Step 2: Identify dynamic viewport effect

    Because viewport size can change, the box size changes dynamically, which may look like it doesn't work as expected.

  3. Final Answer:

    The viewport size might be changing, causing unexpected results -> Option B

  4. Quick Check:

    vmin depends on viewport size changes [OK]
Hint: Remember viewport units react to window resizing [OK]
Common Mistakes:
  • Thinking vmin needs px unit
  • Assuming viewport units are fixed
  • Believing vmin is unsupported
5. You want a square element that always fits inside the viewport without scrolling, using viewport units. Which CSS rule ensures the square's size adapts to the smaller viewport dimension?
hard
A. width: 100vmin; height: 100vmin;
B. width: 100vw; height: 100vh;
C. width: 100vmax; height: 100vmax;
D. width: 100%; height: 100%;

Solution

  1. Step 1: Understand vmin and vmax

    vmin is the smaller of viewport width or height, vmax is the larger.

  2. Step 2: Choose unit for fitting inside viewport

    To fit inside viewport without scrolling, use vmin so the square fits the smaller dimension.

  3. Step 3: Confirm width and height match

    Setting both width and height to 100vmin creates a square that fits inside viewport.

  4. Final Answer:

    width: 100vmin; height: 100vmin; -> Option A

  5. Quick Check:

    Use vmin for square fitting smaller viewport side [OK]
Hint: Use vmin for size based on smaller viewport side [OK]
Common Mistakes:
  • Using vmax causes overflow
  • Using 100% depends on parent size
  • Confusing vw/vh with vmin/vmax