Responsive HTML Basics 📱

Mentor's Note: Responsive design is like water taking the shape of its container! A website should look great whether it's on a 27-inch monitor, a tablet, or a phone. The goal is one HTML file, many devices, perfect experience.

🎯 Learning Objectives

By the end of this lesson, you will be able to:

Understand the core concepts of responsive web design
Implement the viewport meta tag correctly
Use srcset and the <picture> element for responsive images
Create responsive tables and embedded media
Test responsiveness using browser DevTools

🌊 What Is Responsive Design?

Responsive design is an approach where one HTML file adapts to fit any screen size. Instead of building separate sites for desktop, tablet, and mobile, you build one site that responds to the viewing environment.

The Three Pillars of Responsive Design

Fluid layouts — Use relative units (%, em, rem, vw) instead of fixed pixels
Flexible media — Images and videos scale within their containers
CSS media queries — Apply different styles at different breakpoints

📐 The Viewport Meta Tag

Without the viewport meta tag, mobile browsers render pages at a desktop width (typically 980px) and then zoom out — making text tiny and unreadable.

<!DOCTYPE html>
<html>
<head>
  <!-- This single line is ALL you need for proper mobile rendering -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Page</title>
</head>
<body>
  <!-- Content here will now scale properly on mobile -->
</body>
</html>

Breaking It Down

Attribute Value	What It Does
`width=device-width`	Sets page width to the device's physical screen width (not the 980px default)
`initial-scale=1.0`	Sets the initial zoom level to 1:1 (no zoom)

❌ Without the Viewport Meta Tag

<!-- ❌ BROKEN: No viewport meta — mobile users see zoomed-out desktop view -->
<!DOCTYPE html>
<html>
<head>
  <title>Not Responsive</title>
</head>
<body>
  <p style="font-size: 16px;">This text will be tiny on mobile.</p>
</body>
</html>

✅ With the Viewport Meta Tag

<!-- ✅ FIXED: Mobile users see properly scaled content -->
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive!</title>
</head>
<body>
  <p style="font-size: 16px;">This text will be readable on mobile.</p>
</body>
</html>

🖼️ Responsive Images

Different devices need different image sizes. A 1920px-wide hero image is wasteful on a 375px phone screen.

Using `max-width: 100%`

The simplest responsive image technique — the image never exceeds its container width:

<style>
  img {
    max-width: 100%;
    height: auto;
  }
</style>

<img src="photo.jpg" alt="A scenic landscape" width="1920" height="1080">

Using `srcset` for Resolution Switching

srcset lets the browser choose the best image size based on the viewport:

<img
  src="photo-800.jpg"
  srcset="
    photo-400.jpg 400w,
    photo-800.jpg 800w,
    photo-1200.jpg 1200w,
    photo-1920.jpg 1920w
  "
  sizes="
    (max-width: 600px) 100vw,
    (max-width: 1200px) 80vw,
    1200px
  "
  alt="A scenic landscape"
>

Attribute	Purpose
`src`	Fallback image for older browsers
`srcset`	List of image files with their actual widths (`400w`) or pixel ratios (`2x`)
`sizes`	Tells the browser how much space the image will occupy at different viewport widths

Using the `<picture>` Element for Art Direction

The <picture> element lets you serve completely different images at different sizes (useful for cropping, orientation, or format switching):

<picture>
  <!-- Modern formats first (browser picks the first supported) -->
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">

  <!-- Different crops for different screen sizes -->
  <source
    media="(min-width: 1024px)"
    srcset="photo-desktop.jpg"
  >
  <source
    media="(min-width: 600px)"
    srcset="photo-tablet.jpg"
  >
  <source
    media="(max-width: 599px)"
    srcset="photo-mobile.jpg"
  >

  <!-- Fallback for browsers that don't support <picture> -->
  <img src="photo-desktop.jpg" alt="A scenic landscape">
</picture>

📊 Responsive Tables

Tables are notoriously difficult on small screens. Here are two approaches:

Horizontal Scroll

Wrap the table in a scrollable container:

<style>
  .table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
</style>

<div class="table-wrapper">
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Phone</th>
        <th>Address</th>
        <th>Department</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John Doe</td>
        <td>[email protected]</td>
        <td>555-1234</td>
        <td>123 Main St</td>
        <td>Engineering</td>
      </tr>
    </tbody>
  </table>
</div>

Stacked Table (Mobile-First)

Use CSS to transform rows into stacked cards on small screens:

<style>
  @media (max-width: 600px) {
    table, thead, tbody, th, td, tr {
      display: block;
    }
    thead {
      display: none; /* Hide header on mobile */
    }
    td {
      position: relative;
      padding-left: 50%;
    }
    td::before {
      content: attr(data-label); /* Show label via data attribute */
      position: absolute;
      left: 10px;
      font-weight: bold;
    }
  }
</style>

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="Name">John Doe</td>
      <td data-label="Email">[email protected]</td>
    </tr>
  </tbody>
</table>

🎬 Responsive Embeds

Embeds (YouTube, maps, etc.) need special handling because they come with fixed dimensions:

<style>
  .embed-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    max-width: 100%;
  }
  .embed-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
</style>

<div class="embed-container">
  <iframe
    src="https://www.youtube.com/embed/dQw4w9WgXcQ"
    title="YouTube video"
    allowfullscreen
  ></iframe>
</div>

Modern Approach with `aspect-ratio` CSS

Modern browsers support the aspect-ratio property, which simplifies this:

<style>
  .embed-modern {
    max-width: 100%;
  }
  .embed-modern iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }
</style>

<div class="embed-modern">
  <iframe
    src="https://www.youtube.com/embed/dQw4w9WgXcQ"
    title="YouTube video"
    allowfullscreen
  ></iframe>
</div>

🎨 CSS Media Queries (Brief Intro)

Media queries are CSS rules that apply styles conditionally based on the device or viewport:

<style>
  /* Base styles (mobile-first approach) */
  body {
    font-size: 16px;
    padding: 10px;
  }
  .sidebar {
    display: none; /* Hidden on mobile */
  }

  /* Tablet: 600px and up */
  @media (min-width: 600px) {
    body {
      padding: 20px;
    }
    .sidebar {
      display: block; /* Show sidebar on tablet+ */
    }
  }

  /* Desktop: 1024px and up */
  @media (min-width: 1024px) {
    body {
      max-width: 1200px;
      margin: 0 auto;
    }
  }

  /* Print styles */
  @media print {
    .nav, .sidebar {
      display: none;
    }
  }
</style>

Query	Target
`@media (min-width: 768px)`	Viewports 768px and wider
`@media (max-width: 767px)`	Viewports 767px and narrower
`@media (prefers-color-scheme: dark)`	Devices in dark mode
`@media (pointer: coarse)`	Touch devices
`@media print`	Printed pages

📱 Testing Responsiveness

Browser DevTools Device Mode

Every modern browser has a device emulation tool:

Open DevTools: Right-click → Inspect or F12
Toggle Device Toolbar: Click the phone/tablet icon (Ctrl+Shift+M)
Select a device: Choose from the preset list (iPhone, iPad, Pixel, etc.)
Resize freely: Drag the edges of the viewport to any size
Rotate: Test both portrait and landscape orientations

Common Device Breakpoints

Device	Width
Phone (portrait)	375px - 414px
Phone (landscape)	667px - 896px
Tablet (portrait)	768px - 834px
Tablet (landscape)	1024px - 1112px
Desktop	1280px+

🧪 Try It Yourself

Build a responsive page with:

Correct viewport meta tag
A responsive image using srcset
A video embed using the aspect-ratio technique
A table that scrolls horizontally on mobile
Test it at 375px, 768px, and 1440px widths

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Add viewport meta here -->
  <meta charset="UTF-8">
  <title>My Responsive Page</title>
  <style>
    /* Add your responsive styles here */
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: system-ui, sans-serif; padding: 1rem; }
    img { max-width: 100%; height: auto; }
    /* Add media queries below */
  </style>
</head>
<body>
  <h1>My Responsive Page</h1>

  <!-- Add a responsive image -->

  <!-- Add a responsive video embed -->

  <!-- Add a responsive table -->

</body>
</html>

📊 Responsive Techniques Reference

HTML Basics — Foundation for building responsive pages
Media Elements — Images, video, and audio
CSS in HTML — Styling and layout techniques
Best Practices — Overall HTML best practices

📝 Summary

The viewport meta tag is essential for mobile rendering
Use max-width: 100% on images as the baseline responsive technique
srcset lets the browser choose the best image size
<picture> enables art direction and format switching
Responsive tables need special treatment (scroll or stack)
Embeds need aspect-ratio containers to stay responsive
CSS media queries apply styles at different breakpoints
DevTools device mode is the easiest way to test responsiveness

💡 Mentor's Note: Responsive design is not optional anymore — over 60% of web traffic comes from mobile devices. If your site doesn't work on a phone, you're missing more than half of your audience. Start mobile-first, and scale up!

Purpose: Complete guide to responsive HTML basics Practice Time: 25-30 minutes Next Lesson: Best Practices

🎯 Learning Objectives​

🌊 What Is Responsive Design?​

The Three Pillars of Responsive Design​

📐 The Viewport Meta Tag​

Breaking It Down​

❌ Without the Viewport Meta Tag​

✅ With the Viewport Meta Tag​

🖼️ Responsive Images​

Using max-width: 100%​

Using srcset for Resolution Switching​

Using the <picture> Element for Art Direction​

📊 Responsive Tables​

Horizontal Scroll​

Stacked Table (Mobile-First)​

🎬 Responsive Embeds​

Modern Approach with aspect-ratio CSS​

🎨 CSS Media Queries (Brief Intro)​

📱 Testing Responsiveness​

Browser DevTools Device Mode​

Common Device Breakpoints​

🧪 Try It Yourself​

📊 Responsive Techniques Reference​

🔗 Related Concepts​

📝 Summary​