Lesson 4.4 — Mini Project: Responsive Landing Page (End-to-End Build)

Lesson overview
You’ll build a complete landing page: navbar, hero, features, pricing, contact, and footer. The goal is to practice assembling Bootstrap pieces into a cohesive page with consistent spacing and responsiveness.

Learning outcomes

• Combine grid + utilities + components into a full page
• Create responsive sections with consistent rhythm
• Produce a clean, real-world layout you can reuse

Project structure

• Navbar (responsive collapse)
• Hero section (title, description, CTA buttons, image/illustration placeholder)
• Features (3 columns on desktop, stacked on mobile)
• Pricing (cards)
• Contact form (validated styling example)
• Footer

Step-by-step build (recommended order)

1. Create the starter HTML with Bootstrap CDN.
2. Build the navbar first to set the overall width/spacing rules.
3. Add hero section with py-* spacing and a two-column grid.
4. Add features section with cards or simple bordered panels.
5. Add pricing cards using grid and h-100 for equal heights.
6. Add contact form (grid layout + one validation state example).
7. Finish with a clean footer and small text styles.

Landing page starter (single-file example)

Practice tasks

• Replace the “Image / Illustration” placeholder with a real image and make it responsive (img-fluid).
• Add a FAQ accordion section under pricing.
• Ensure spacing looks good on mobile (adjust py-*, mb-*).

Quick check

1. Which sections benefit most from the grid system?
2. Why use h-100 on cards in pricing?

Lesson summary

• A complete landing page is mostly grid + utilities + a handful of components.