CSSmarkup~30 mins

Viewport units in CSS - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

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

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




    
    
    Viewport Units Example

Need a hint?

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

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




    
    
    Viewport Units Example
    


    My Header
    Main content area

Need a hint?

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

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




    
    
    Viewport Units Example
    
        header {
            height: 10vh;
            background-color: #4CAF50;
        }
        /* Add main styles below */
    


    My Header
    Main content area

Need a hint?

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

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




    
    
    Viewport Units Example
    
        header {
            height: 10vh;
            background-color: #4CAF50;
        }
        main {
            height: 90vh;
            background-color: #f0f0f0;
        }
        /* Add html and body styles below */
    


    My Header
    Main content area

Need a hint?

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