CSSmarkup~30 mins

CSS calc usage - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Using CSS calc() to Create a Responsive Box

📖 Scenario: You want to create a box on a webpage that adjusts its width based on the browser window size but also keeps some fixed padding on the sides.

🎯 Goal: Build a simple webpage with a <div> box that uses calc() in CSS to set its width as 100% minus 40px. This means the box will always be the full width of the page minus 40 pixels, leaving 20 pixels of space on each side.

📋 What You'll Learn

Create an HTML skeleton with a <div> element having the class responsive-box.

Add a CSS rule for .responsive-box that sets its width using calc(100% - 40px).

Add a fixed height of 100px and a background color to the box so it is visible.

Center the box horizontally with margin and add some padding inside the box.

💡 Why This Matters

🌍 Real World

Web designers often need to create elements that adjust size dynamically but keep some fixed spacing. Using calc() helps combine flexible and fixed sizes easily.

💼 Career

Understanding CSS calc() is important for front-end developers to build responsive layouts that look good on all screen sizes.

Progress0 / 4 steps

Create the HTML structure with a div

Write the basic HTML5 skeleton with a <div> element that has the class responsive-box inside the <body>.

CSS




    
    
    Responsive Box

Need a hint?

Remember to add a <div> with the class responsive-box inside the <body> tag.

Add CSS with width using calc()

Inside a <style> tag in the <head>, write a CSS rule for .responsive-box that sets width: calc(100% - 40px);.

CSS




    
    
    Responsive Box
    
        /* Add CSS rule for .responsive-box with width using calc() here */

Need a hint?

Use width: calc(100% - 40px); inside the CSS rule for .responsive-box.

Add height and background color to the box

In the .responsive-box CSS rule, add height: 100px; and background-color: lightblue; so the box is visible on the page.

CSS




    
    
    Responsive Box
    
        .responsive-box {
            width: calc(100% - 40px);
            /* Add height and background-color here */
        }

Need a hint?

Set height: 100px; and background-color: lightblue; inside the .responsive-box CSS rule.

Center the box and add padding inside

In the .responsive-box CSS rule, add margin: 0 auto; to center the box horizontally and padding: 20px; to add space inside the box.

CSS




    
    
    Responsive Box
    
        .responsive-box {
            width: calc(100% - 40px);
            height: 100px;
            background-color: lightblue;
            /* Add margin and padding here */
        }

Need a hint?

Use margin: 0 auto; to center horizontally and padding: 20px; inside the box.