Project 5 — Responsive Website

1. Learning Objectives

In this project guide, you will build a complete, responsive multi-section website. By the end of this project, you will be able to:

• Implement a mobile-first design strategy using min-width media queries.
• Apply fluid scaling to typography and spacing using the clamp() function.
• Design complex, responsive page sections that adjust columns dynamically.
• Create a responsive navigation bar that adapts for mobile devices.
• Optimize image assets to prevent layout shifts.

2. What We Are Building & Design System

We are building a responsive multi-section website for a fitness brand called Indigo Fitness. The site features:

• Header & Navigation: Links list that wraps horizontally on tablet viewports and scales for mobile.
• Hero Banner: Full-width cover section with text overlay and fluid headline typography.
• Services Grid: CSS Grid layout showing training programs that adjusts columns dynamically.
• Contact form & details: A clean side-by-side section (address info + email form) that stacks vertically on mobile screens.

3. Step-by-Step Implementation Guide

Step 1: HTML Semantic structure

Structure the document semantically. Group content blocks using standard HTML5 tags (<header>, <main>, <footer>, <section>, <article>):

Step 2: Mobile-First CSS Structure

Write your core styles for mobile devices first (single-column layout, small text size). Then, use min-width media queries to add styles for tablet and desktop viewports:

Step 3: Fluid Typography with clamp()

Use the clamp() function to scale typography fluidly based on screen width without writing extra media queries:

4. Full Working Code

Save this self-contained code block as website.html to test the responsive multi-section website:

5. Reviewing the Build / Self-Correction Checks

Verify your layout handles common web layout constraints:

• Check viewport limits: Test the site on viewport widths down to 320px. Verify that text margins and columns adapt correctly and do not overflow.
• Check browser text zoom support: Zoom text in the browser to 200%. Verify that fluid typography remains legible and layout containers expand without text truncation.
• Verify semantic structure: Verify sections use unique IDs and semantic HTML5 layout containers to support page structure.

6. Practice Exercises & Extensions

7. Summary & Next Steps

By building this responsive website, you have combined mobile-first design, fluid clamp sizing, multi-column grids, and semantic HTML structure.

• Congratulations on completing all Projects in this chapter! You are ready to explore other advanced web development topics.