CSSmarkup~30 mins

Media queries in CSS - Mini Project: Build & Apply

Choose your learning style10 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Start learning this pattern below

Jump into concepts and practice - no test required

Recommended

Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong

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 */
  }

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 */
  }

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 */
  }

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;
      }
    }

Hint

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

Practice

(1/5)

1. What is the main purpose of CSS @media queries?

easy

A. To link external CSS files

B. To add animations to elements

C. To apply different styles based on device screen size or features

D. To create CSS variables

Media queries in CSS - Mini Project: Build & Apply

Start learning this pattern below

Practice

Solution

Step 1: Understand what `@media` does

Step 2: Compare options to this purpose

Final Answer:

Quick Check:

Solution

Step 1: Recall correct media query syntax for max-width

Step 2: Check each option

Final Answer:

Quick Check:

Solution

Step 1: Understand media query condition

Step 2: Determine which background color applies

Final Answer:

Quick Check:

Solution

Step 1: Check media query syntax

Step 2: Verify other parts

Final Answer:

Quick Check:

Solution

Step 1: Understand the requirement

Step 2: Analyze each option

Final Answer:

Quick Check:

Start learning this pattern below

Practice

Solution

Step 1: Understand what @media does

Step 2: Compare options to this purpose

Final Answer:

Quick Check:

Solution

Step 1: Recall correct media query syntax for max-width

Step 2: Check each option

Final Answer:

Quick Check:

Solution

Step 1: Understand media query condition

Step 2: Determine which background color applies

Final Answer:

Quick Check:

Solution

Step 1: Check media query syntax

Step 2: Verify other parts

Final Answer:

Quick Check:

Solution

Step 1: Understand the requirement

Step 2: Analyze each option

Final Answer:

Quick Check:

Step 1: Understand what `@media` does