HTML + CSS: Build Your First Web Page — A Beginner’s Practical Guide

📘 Chapter 4: Responsive Design Basics — Media Queries and Flexbox

🌐 Introduction: Why Responsive Design Matters

In today’s world, users access websites from a wide range of devices—desktops, laptops, tablets, and smartphones. A site that looks great on a big monitor may be unusable on a phone if it’s not responsive.

Responsive Web Design (RWD) ensures that your website:

• Looks good on all screen sizes
• Adapts layout, font, images, and spacing
• Offers a smooth experience no matter the device

This chapter covers two key tools that make responsive design possible:

• Media Queries
• Flexbox Layout System

By mastering these, you’ll be able to create fluid, mobile-friendly designs that adjust beautifully across devices.

🎯 Part 1: What is Responsive Design?

Responsive design means:

• Layouts scale with the screen size
• Text remains legible on any device
• Buttons and elements remain touch-friendly
• No horizontal scrolling or zooming required

🔍 Key Principles

📱 Part 2: Intro to Media Queries

Media queries let you apply CSS rules based on device characteristics like screen width, height, orientation, and resolution.

🔹 Basic Syntax

css

@media (condition) {

  /* styles here */

}

🔸 Example: Changing layout on small screens

css

/* Default desktop style */

.container {

  display: flex;

}

/* Apply on screens smaller than 768px */

@media (max-width: 768px) {

  .container {

    flex-direction: column;

  }

}

📊 Common Media Query Breakpoints

✅ Customize your breakpoints based on project needs.

💪 Part 3: Introduction to Flexbox — Your Layout Superpower

Flexbox (Flexible Box) is a one-dimensional layout method that allows you to align and distribute space among items in a container—even when their size is dynamic.

🔹 Why Use Flexbox?

• Simple way to build responsive navbars, cards, grids
• Automatically adjusts element size based on container
• Easily aligns elements horizontally or vertically
• Avoids floats and clearfix hacks

🧱 Flexbox Container Properties

🔸 Example:

css

.container {

  display: flex;

  flex-direction: row;

  justify-content: space-between;

  align-items: center;

}

html

<div class="container">

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

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

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

</div>

🧱 Flex Item Properties

🧪 Part 4: Real-World Layouts with Media Queries + Flexbox

🔹 Example 1: Responsive Navbar

html

<nav class="navbar">

  <a href="#">Home</a>

  <a href="#">About</a>

  <a href="#">Contact</a>

</nav>

css

.navbar {

  display: flex;

  justify-content: space-around;

  background: #333;

  padding: 1em;

}

.navbar a {

  color: white;

  text-decoration: none;

}

/* Stack links on small screens */

@media (max-width: 600px) {

  .navbar {

    flex-direction: column;

    align-items: center;

  }

}

🔹 Example 2: Responsive Card Layout

html

<div class="card-wrapper">

  <div class="card">Card 1</div>

  <div class="card">Card 2</div>

  <div class="card">Card 3</div>

</div>

css

.card-wrapper {

  display: flex;

  flex-wrap: wrap;

  gap: 1em;

}

.card {

  flex: 1 1 30%;

  padding: 20px;

  background: #f4f4f4;

}

/* Single-column on mobile */

@media (max-width: 768px) {

  .card {

    flex: 1 1 100%;

  }

}

🧠 Part 5: Mobile-First Design Philosophy

Mobile-first means designing for the smallest screen first, then scaling up.

🔹 Strategy:

• Start with a basic, stacked layout
• Add complexity for larger screens using min-width media queries
• Reduces surprises on mobile devices

css

/* Mobile default */

.container {

  flex-direction: column;

}

/* Add row layout on larger screens */

@media (min-width: 768px) {

  .container {

    flex-direction: row;

  }

}

🔍 Part 6: Common Flexbox Layout Patterns

📦 Sidebar + Main Layout

css

.layout {

  display: flex;

}

.sidebar {

  flex: 1;

}

.main {

  flex: 3;

}

🪟 Centering Content

css

.center {

  display: flex;

  justify-content: center;

  align-items: center;

  height: 100vh;

}

🎲 Responsive Button Group

css

.buttons {

  display: flex;

  flex-wrap: wrap;

  gap: 10px;

}

📋 Recap Table: Key Flexbox and Media Query Tools

📍 Chapter Summary

By mastering media queries and Flexbox, you've unlocked the ability to:

• Create mobile-first designs
• Build adaptive navigation bars, cards, and layouts
• Align and distribute space like a pro
• Ensure your website looks beautiful on any device