HTML & CSS Masterclass Tutorial

Comprehensive guide to modern HTML and CSS development.

Responsive Components

Responsive design is not just for page layouts; individual components must also adapt to their container sizes. While Media Queries check the viewport size, components often need to rely on flexible sizing techniques like percentages, max-width, and Flexbox wrapping.

Responsive Images

An essential rule for all responsive sites is to ensure images never overflow their parent container. Applying max-width: 100%; height: auto; guarantees the image scales down if the container is smaller than the image itself.

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; padding: 20px; background: #f0f2f5; display: flex; justify-content: center; }
    
    .responsive-card {
      background: white;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 4px 15px rgba(0,0,0,0.1);
      /* Use percentages and max-width for component responsiveness */
      width: 100%;
      max-width: 450px; 
    }
    
    .card-img {
      /* The golden rule for responsive images */
      width: 100%;
      height: auto;
      display: block;
    }
    
    .card-body { padding: 25px; }
    .card-title { margin-top: 0; color: #333; font-size: 1.5em; }
    .card-text { color: #666; line-height: 1.6; }
    
    /* Media query specific to the component */
    @media (min-width: 600px) {
      .responsive-card {
        display: flex; /* Side-by-side on larger screens */
        max-width: 700px;
      }
      .card-img { width: 40%; object-fit: cover; }
      .card-body { width: 60%; display: flex; flex-direction: column; justify-content: center; }
    }
  </style>
</head>
<body>

<div class="responsive-card">
    <img src="https://picsum.photos/id/1025/600/400" class="card-img" alt="Dog">
    <div class="card-body">
      <h2 class="card-title">Responsive Card</h2>
      <p class="card-text">Resize the browser! On mobile, this card stacks vertically. On tablets and desktops (above 600px width), it uses Flexbox to place the image and text side-by-side automatically!</p>
    </div>
  </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

HTML & CSS Masterclass Tutorial

Course Topics

Responsive Components

Responsive Components

Responsive Images

Try It Yourself

Topics