CSSmarkup~30 mins

What is responsive design in CSS - Hands-On Activity

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Understanding Responsive Design with CSS

📖 Scenario: You are creating a simple webpage that looks good on both phones and computers. You want the page to change its layout depending on the screen size. This is called responsive design.

🎯 Goal: Build a webpage with a header and a paragraph. Use CSS to make the text size bigger on wide screens and smaller on narrow screens. This will help the page look nice on all devices.

📋 What You'll Learn

Create a basic HTML structure with a <header> and a <p> paragraph.

Add CSS styles to set the font size for the header and paragraph.

Use a CSS media query to change the font size when the screen width is at least 600px.

Ensure the page is accessible and uses semantic HTML.

💡 Why This Matters

🌍 Real World

Responsive design is used to make websites look good on phones, tablets, and computers without needing separate versions.

💼 Career

Web developers must know responsive design to build user-friendly websites that work well on all devices.

Progress0 / 4 steps

Create the basic HTML structure

Write the HTML code to create a <header> with the text "Welcome to Responsive Design" and a <p> paragraph with the text "Resize the browser window to see the effect."

CSS

Welcome to Responsive Design
Resize the browser window to see the effect.

Need a hint?

Use semantic tags like <header> and <p> to structure your content.

Add basic CSS styles

Add a <style> block inside the <head> section. Set the font size of the header to 2rem and the font size of the p paragraph to 1rem.

CSS




  
  
  Responsive Design Example
  
    /* Your CSS here */
  


  Welcome to Responsive Design
  Resize the browser window to see the effect.

Need a hint?

Use CSS selectors header and p to set font sizes.

Add a media query for larger screens

Inside the existing <style> block, add a CSS media query that applies when the screen width is at least 600px. Inside this media query, set the header font size to 3rem and the p font size to 1.5rem.

CSS




  
  
  Responsive Design Example
  
    header {
      font-size: 2rem;
    }
    p {
      font-size: 1rem;
    }
    /* Add media query below */
  


  Welcome to Responsive Design
  Resize the browser window to see the effect.

Need a hint?

Use @media (min-width: 600px) to target wider screens.

Add accessibility and responsive meta tag

Make sure the <html> tag has the attribute lang="en". Also, confirm the <meta name="viewport" content="width=device-width, initial-scale=1.0"> tag is present inside the <head> to enable responsive scaling on devices.

CSS




  
  
  
  Responsive Design Example
  
    header {
      font-size: 2rem;
    }
    p {
      font-size: 1rem;
    }
    @media (min-width: 600px) {
      header {
        font-size: 3rem;
      }
      p {
        font-size: 1.5rem;
      }
    }
  


  Welcome to Responsive Design
  Resize the browser window to see the effect.

Need a hint?

Adding lang="en" helps screen readers. The viewport meta tag makes the page scale on phones.