CSSmarkup~30 mins

Breakpoints in CSS - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Responsive Layout with CSS Breakpoints

📖 Scenario: You are creating a simple webpage that changes its layout depending on the screen size. This helps the page look good on phones, tablets, and desktops.

🎯 Goal: Build a webpage with a colored box that changes its background color and size at different screen widths using CSS breakpoints.

📋 What You'll Learn

Create a basic HTML structure with a <div> element having the class box.

Add a CSS rule to style the .box with a default background color and size.

Add a CSS breakpoint for screen widths 600px and above to change the box's background color and size.

Add a CSS breakpoint for screen widths 900px and above to change the box's background color and size again.

💡 Why This Matters

🌍 Real World

Websites need to look good on phones, tablets, and desktops. Using breakpoints helps adjust layouts and styles for different screen sizes.

💼 Career

Front-end developers use CSS breakpoints daily to build responsive websites that work well on all devices.

Progress0 / 4 steps

Create the HTML structure with a box

Write the HTML code to create a <div> element with the class box inside the <body> tag. Include the basic HTML5 skeleton with <!DOCTYPE html>, <html lang="en">, <head> with charset and viewport meta tags, and a <title>.

CSS




  
  
  Responsive Box

Need a hint?

Remember to include the <div> with class box inside the <body> tag.

Add default CSS for the box

Inside a <style> tag in the <head>, write CSS to style the .box class with a background color of lightblue, width of 100px, height of 100px, and center it horizontally using margin.

CSS




  
  
  Responsive Box
  
    /* Your code here */

Need a hint?

Use margin-left: auto; and margin-right: auto; to center the box horizontally.

Add a breakpoint for screens 600px and wider

Add a CSS media query for screen widths of at least 600px using @media (min-width: 600px). Inside it, change the .box background color to lightgreen and set the width and height to 150px.

CSS




  
  
  Responsive Box
  
    .box {
      background-color: lightblue;
      width: 100px;
      height: 100px;
      margin-left: auto;
      margin-right: auto;
    }

    /* Your code here */

Need a hint?

Use @media (min-width: 600px) and inside it redefine the .box styles.

Add a breakpoint for screens 900px and wider

Add another CSS media query for screen widths of at least 900px using @media (min-width: 900px). Inside it, change the .box background color to lightcoral and set the width and height to 200px.

CSS




  
  
  Responsive Box
  
    .box {
      background-color: lightblue;
      width: 100px;
      height: 100px;
      margin-left: auto;
      margin-right: auto;
    }

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

    /* Your code here */

Need a hint?

Add a new media query with @media (min-width: 900px) and update the .box styles inside it.