HTML Responsive Design

HTML Tutorial: HTML Responsive Design

Learn how to make HTML pages responsive for different devices using CSS with colorful examples and results

---

Responsive design ensures your webpage looks great on all devices – desktop, tablet, and mobile. Use CSS flex, CSS grid, and media queries for adaptability.

---

1️⃣ Simple Responsive Box

INPUT:

<div style="width:100%; max-width:500px; background:#0077cc; color:white; padding:20px;">
  Responsive Box
</div>

OUTPUT:

Responsive Box

✔️ Box width adjusts with screen size up to 500px ✔️ Use max-width for flexible sizing

---

2️⃣ Flexbox Responsive Layout

INPUT:

<div style="display:flex; flex-wrap:wrap;">
  <div style="background:#0077cc; color:white; flex:1 1 200px; padding:20px; margin:5px;">
    Box 1
  </div>
  <div style="background:#ff6600; color:white; flex:1 1 200px; padding:20px; margin:5px;">
    Box 2
  </div>
  <div style="background:#009933; color:white; flex:1 1 200px; padding:20px; margin:5px;">
    Box 3
  </div>
</div>

OUTPUT:

Box 1

Box 2

Box 3

✔️ Flexbox allows boxes to wrap automatically ✔️ Each box adjusts width according to screen size

---

3️⃣ CSS Grid Responsive Layout

INPUT:

<div style="display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:10px;">
  <div style="background:#0077cc; color:white; padding:20px;">Item 1</div>
  <div style="background:#ff6600; color:white; padding:20px;">Item 2</div>
  <div style="background:#009933; color:white; padding:20px;">Item 3</div>
  <div style="background:#cc0066; color:white; padding:20px;">Item 4</div>
</div>

OUTPUT:

Item 1

Item 2

Item 3

Item 4

✔️ CSS Grid with auto-fit and minmax makes items responsive ✔️ Gap adds spacing between grid items

---

4️⃣ Media Queries Example

INPUT:

<style>
  div.box {
    background:#0077cc; color:white; padding:20px; width:100%;
  }
  @media (min-width:600px) {
    div.box { width:50%; }
  }
  @media (min-width:900px) {
    div.box { width:25%; }
  }
</style>

<div class="box">Responsive Box</div>

OUTPUT:

Responsive Box

✔️ Box width changes at different screen sizes using media queries ✔️ 100% on small, 50% on medium, 25% on large screens

---

5️⃣ Best Practices for Responsive Design

• Use flexible units like %, em, rem instead of px
• Use CSS flex or grid for layouts
• Apply media queries for different devices
• Test on multiple screen sizes
• Keep images and text scalable

---

🚀 What’s Next?

👉 HTML Computercode

Next lesson will cover:

• Using <code> and <pre> tags for computer code
• Displaying syntax with colors
• Formatting code examples in HTML

---

Responsive design ensures your webpage adapts to all devices, improving usability and user experience across desktops, tablets, and mobiles.