Responsive Web Design Tutorial

What is Responsive Design?

Responsive web design ensures your website looks and functions well on all devices - from mobile phones to large desktop screens.

Key Concepts

1. Viewport Meta Tag

Always include this in your HTML <head>:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2. Flexible Layouts

Use relative units instead of fixed pixels:

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

3. Media Queries

Adjust styles based on screen size:

/* Mobile first approach */
.grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

/* Tablet */
@media (min-width: 768px) {
    .grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

4. Flexible Images

img {
    max-width: 100%;
    height: auto;
}

Practical Example

Let’s build a responsive card layout:

HTML

<div class="container">
    <div class="card-grid">
        <div class="card">
            <img src="image1.jpg" alt="Card 1">
            <h3>Card Title</h3>
            <p>Card description goes here.</p>
        </div>
        <!-- More cards... -->
    </div>
</div>

CSS

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 0;
}

.card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

.card {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.card h3, .card p {
    padding: 0 1rem;
}

/* Tablet */
@media (min-width: 768px) {
    .card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

Common Breakpoints

/* Mobile: 320px - 767px */
/* Tablet: 768px - 1023px */
/* Desktop: 1024px+ */

@media (min-width: 768px) { /* Tablet */ }
@media (min-width: 1024px) { /* Desktop */ }
@media (min-width: 1440px) { /* Large Desktop */ }

Best Practices

Mobile First: Start with mobile styles, then add larger screen styles
Test on Real Devices: Emulators are helpful, but test on actual devices
Touch Targets: Make buttons at least 44x44px for touch screens
Readable Text: Use minimum 16px font size on mobile
Performance: Optimize images for different screen sizes

Practice Exercise

Create a responsive navigation menu that:

Shows a hamburger menu on mobile
Displays horizontal navigation on desktop
Includes smooth transitions

Tools

Chrome DevTools Device Mode
Firefox Responsive Design Mode
Responsively App

Next Steps

Learn about CSS Grid, Flexbox, and CSS frameworks like Bootstrap or Tailwind CSS.