Responsive Design: Web Foundations (HTML & CSS) Notes for Coding & Web Development

Responsive Design – Web Foundations (HTML & CSS)

Responsive Design is the practice of creating web pages that look and work well on all screen sizes – from phones to laptops to large desktop monitors – without creating separate sites for each device.

1. Simple Explanation

Responsive = “reacts to the device”
We build one markup (HTML) and then use CSS to adapt the layout, typography, images, etc. based on the viewport width (and sometimes height, orientation, or device type).
Think of it like a fluid or elastic layout that stretches, shrinks, and re‑orders content to fit the screen.

2. Key Points

#	Concept	What It Means	Why It Matters
1	Viewport Meta Tag	`<meta name="viewport" content="width=device-width, initial-scale=1">`	Ensures the browser renders the page at the device’s width, not a fixed 980 px width.
2	Fluid Units	`%`, `vw`, `vh`, `em`, `rem`	Layout elements grow or shrink automatically with the viewport.
3	Flexible Images & Media	`max-width: 100%; height: auto;`	Prevents images from overflowing their containers.
4	Media Queries	`@media (max-width: 768px) { … }`	Apply CSS rules only when conditions (e.g., viewport width) are met.
5	Mobile‑First Approach	Design the base CSS for mobile, then “layer on” larger‑screen styles with `min-width` queries.	Easier to maintain, ensures small‑screen usability first.
6	Grid & Flexbox	CSS layout modules	Quickly create responsive columns, rows, and reorder elements.
7	Breakpoints	Common widths: 320 px (phones), 480 px (small tablets), 768 px (tablets), 1024 px (desktop), 1280 px+ (large screens).	Choose breakpoints where the layout naturally needs adjustment.
8	Responsive Typography	`clamp(min, preferred, max)` or `calc()`	Keeps text legible across devices.
9	Performance	Minimize CSS, use `srcset`/`sizes` for images, lazy‑load	Faster load times on mobile networks.
10	Testing	Browser dev tools, real devices, services like BrowserStack	Verify that the design behaves as expected on all targets.

3. Worked Example

Below is a minimal example of a responsive landing page.
It demonstrates:

A fluid layout with CSS Grid
Mobile‑first styling
Media queries for layout changes
Responsive images

3.1 HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Responsive Design Demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header class="hero">
    <h1>Welcome to My Site</h1>
    <p>Learn how to build responsive layouts.</p>
  </header>

  <section class="features">
    <div class="card">
      <img src="https://picsum.photos/600/400?random=1" alt="Feature 1">
      <h3>Fast Performance</h3>
      <p>Optimized images and CSS.</p>
    </div>
    <div class="card">
      <img src="https://picsum.photos/600/400?random=2" alt="Feature 2">
      <h3>Mobile‑First</h3>
      <p>Designed from the smallest screen up.</p>
    </div>
    <div class="card">
      <img src="https://picsum.photos/600/400?random=3" alt="Feature 3">
      <h3>Easy Maintenance</h3>
      <p>Clean, reusable code.</p>
    </div>
  </section>

  <footer class="footer">
    <p>&copy; 2026 Responsive Design Demo</p>
  </footer>
</body>
</html>

3.2 CSS (`styles.css`)

/* 1. Reset & Base Styles */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, sans-serif; line-height: 1.6; }

/* 2. Viewport is already set via meta tag */

/* 3. Hero Section */
.hero {
  background: #4a90e2;
  color: white;
  padding: 2rem 1rem;
  text-align: center;
}

/* 4. Features Grid – mobile first */
.features {
  display: grid;
  gap: 1rem;
  padding: 1rem;
  grid-template-columns: 1fr;   /* 1 column on smallest screens */
}
.card {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
}
.card img {
  width: 100%;          /* fluid image */
  height: auto;
}
.card h3 {
  margin: 0.5rem;
}
.card p {
  margin: 0 0.5rem 0.5rem;
}

/* 5. Footer */
.footer {
  text-align: center;
  padding: 1rem;
  background: #f5f5f5;
}

/* 6. Media Queries – adjust layout for larger screens */

/* Small tablets (≥ 600px) – 2 columns */
@media (min-width: 600px) {
  .features {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop (≥ 900px) – 3 columns */
@media (min-width: 900px) {
  .features {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Optional: Larger font for big screens */
@media (min-width: 1200px) {
  body {
    font-size: 1

Responsive Design

Responsive Design – Web Foundations (HTML & CSS)

1. Simple Explanation

2. Key Points

3. Worked Example

3.1 HTML

3.2 CSS (styles.css)

3.2 CSS (`styles.css`)