CSSmarkup~30 mins

Media queries in CSS - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Responsive Box with Media Queries

📖 Scenario: You are creating a simple webpage with a colored box. The box should change its background color depending on the screen size. This helps the webpage look good on phones, tablets, and desktops.

🎯 Goal: Build a webpage with a <div> box that is blue on small screens, green on medium screens, and orange on large screens using CSS media queries.

📋 What You'll Learn

Create a blue box with width 200px and height 200px by default

Use a media query to change the box background color to green when the screen width is at least 600px

Use another media query to change the box background color to orange when the screen width is at least 900px

Use semantic HTML and include a <main> container

Ensure the CSS is responsive and uses media queries correctly

💡 Why This Matters

🌍 Real World

Media queries are essential for building websites that look good on all devices, from small phones to large desktop monitors.

💼 Career

Web developers use media queries daily to create responsive designs that improve user experience and accessibility.

Progress0 / 4 steps

Create the HTML structure with a blue box

Write the HTML code to create a <main> element containing a <div> with the class box. Then write CSS to make the box 200px wide, 200px tall, and have a blue background color.

CSS


  



  /* Style the box with width 200px, height 200px, and blue background */
  .box {
    /* Your code here */
  }

Need a hint?

Use a <main> tag to wrap the content. Then create a <div> with class box. In CSS, set width, height, and background-color properties.

Add a media query for medium screens (600px and above)

Add a CSS media query that changes the background color of the .box to green when the screen width is at least 600 pixels. Use @media (min-width: 600px) and inside it set background-color: green; for the .box class.

CSS


  



  .box {
    width: 200px;
    height: 200px;
    background-color: blue;
  }

  /* Add media query for min-width 600px to change background to green */
  @media (min-width: 600px) {
    /* Your code here */
  }

Need a hint?

Use @media (min-width: 600px) and inside it write a CSS rule for .box to set background-color: green;.

Add a media query for large screens (900px and above)

Add another CSS media query that changes the background color of the .box to orange when the screen width is at least 900 pixels. Use @media (min-width: 900px) and inside it set background-color: orange; for the .box class.

CSS


  



  .box {
    width: 200px;
    height: 200px;
    background-color: blue;
  }

  @media (min-width: 600px) {
    .box {
      background-color: green;
    }
  }

  /* Add media query for min-width 900px to change background to orange */
  @media (min-width: 900px) {
    /* Your code here */
  }

Need a hint?

Use @media (min-width: 900px) and inside it write a CSS rule for .box to set background-color: orange;.

Add responsive meta tag and semantic HTML

Add a <!DOCTYPE html> declaration at the top. Wrap the existing code inside <html lang="en"> and <body> tags. Inside the <head>, add a <meta charset="UTF-8"> and a viewport meta tag <meta name="viewport" content="width=device-width, initial-scale=1.0"> to make the page responsive on all devices.

CSS




  


  
    
  

  
    .box {
      width: 200px;
      height: 200px;
      background-color: blue;
    }

    @media (min-width: 600px) {
      .box {
        background-color: green;
      }
    }

    @media (min-width: 900px) {
      .box {
        background-color: orange;
      }
    }

Need a hint?

Start with <!DOCTYPE html>. Add <html lang="en">, then inside <head> add charset and viewport meta tags. Wrap the content inside <body>.