Project 1 — Landing Page

1. Learning Objectives

In this project guide, you will build a modern, responsive Landing Page. By the end of this project, you will be able to:

• Organize content using HTML5 semantic elements (<header>, <section>, <main>, <footer>).
• Build a responsive header navigation bar using Flexbox.
• Design a flexible, multi-column feature grid using CSS Grid.
• Style primary and secondary buttons with smooth hover scaling transitions.
• Ensure readable text overlays on large backgrounds.

2. What We Are Building & Design System

We are building a clean landing page for a web agency called Indigo Agency. The page features:

• Navigation Bar: Centered logo and link list that wraps on mobile screens.
• Hero Banner Section: Centered heading text with background accent glows and action buttons.
• Features Grid: A 3-column responsive card layout that automatically adjusts to a single column on smaller screens.
• Footer: Social links list and copyright statement.

3. Step-by-Step Implementation Guide

Step 1: HTML Semantic Skeleton

Begin by structuring your document. Avoid using generic <div> elements for structural boxes. Use semantic wrappers:

• Use <header> to contain the logo and navigation links list.
• Use <main> to wrap the hero and features sections to identify the core content area.
• Use <footer> to bound the bottom copyright links.

Step 2: Define Theme Custom Variables

Set up design tokens in the :root selector to keep theme styles consistent:

Step 3: Responsive Grid Features Layout

Instead of writing complex media queries to reposition feature cards, configure the card grid using the auto-fit property:

4. Full Working Code

Save this self-contained code block as index.html to test the responsive landing page:

5. Reviewing the Build / Self-Correction Checks

Verify your layout handles common web layout constraints:

• Test viewport scaling: Open the developer tools console and slide the responsive viewport width slider from 320px to 1400px. Verify that the features grid adjusts columns correctly and text size scales smoothly.
• Check focus indicators: Tab through the page using the keyboard. Ensure active navigation links and buttons display clear focus outline styles to maintain interface accessibility.
• Verify heading hierarchy: Verify there is only a single <h1> heading tag on the page to maintain clear SEO heading structure.

6. Practice Exercises & Extensions

7. Summary & Next Steps

By building this landing page, you have combined semantic HTML, Flexbox header layouts, responsive CSS Grid cards, and custom CSS variables.

• Next, proceed to **Project 2 — Portfolio** to learn to design a clean, grid-based personal showcase layout.