HTML & CSS Masterclass Tutorial

Comprehensive guide to modern HTML and CSS development.

Responsive Design

Responsive Design & Media Queries

Responsive web design makes your web page look good on all devices (desktops, tablets, and phones).

The Viewport Meta Tag

Always include <meta name="viewport" content="width=device-width, initial-scale=1.0"> in your HTML head.

Media Queries

Media queries allow you to apply different CSS rules based on the size of the screen. The industry standard is Mobile-First Design: you write the default CSS for mobile phones, and use @media (min-width: ...) to add styling for larger screens.

Try It Yourself

Edit the code below and click Run to see the result live.

Source Code

<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: Arial; text-align: center; margin: 0; padding: 20px; background: #fdfdfd; }
    
    /* Default: Mobile First Styling */
    .responsive-box {
      background-color: #e74c3c; /* Red on mobile */
      color: white;
      padding: 30px;
      font-size: 1.5em;
      border-radius: 10px;
      transition: all 0.5s;
    }
    
    .device-name::before { content: "Mobile Phone (Default)"; }
    
    /* Tablet Styling */
    @media (min-width: 600px) {
      .responsive-box { background-color: #f1c40f; color: black; }
      .device-name::before { content: "Tablet (min-width: 600px)"; }
    }
    
    /* Desktop Styling */
    @media (min-width: 900px) {
      .responsive-box { background-color: #2ecc71; color: white; }
      .device-name::before { content: "Desktop (min-width: 900px)"; }
    }
  </style>
</head>
<body>

<h2>Resize the browser width to see the magic!</h2>
  <div class="responsive-box">
    <strong class="device-name"></strong>
  </div>

</body>
</html>

Result

Topics

Introduction Environment Setup First Web Page Workflow & Tools Essentials Document Structure Text Content Lists & Tables Links & Navigation Images & Media Forms & Validation Reusable Components Styling Essentials Selectors & Specificity Cascade & Inheritance Typography Colors & Backgrounds Box Model Layout Fundamentals Positioning & Z-Index Flexbox CSS Grid Layout Patterns Responsive Design Responsive Components Custom Properties Calc & Functions Transitions Transforms Animations Effects & Filters Accessibility Design Systems Performance Debugging & Testing Tooling & Automation Landing Page Project Exercises Quiz