Complete Landing Page Build
Combine everything into a complete landing page - hero section, features grid, testimonials, pricing, contact form, and footer. This capstone project demonstrates how all the CSS techniques from the course work together in a real, production-quality website.
Landing Page Structure
- Hero - Full-viewport gradient background with centered headline, subtitle, and dual CTA buttons
- Features - Section header + 3-column icon card grid with hover effects
- Social proof - Statistics bar (Users, Rating, Projects) with large numbers
- Testimonials - Auto-fit card grid with quote icons, avatars, and star ratings
- CTA section - Full-width gradient section with centered text and prominent button
- Footer - Multi-column grid with brand, links, social icons, and copyright bar
- Responsive - Mobile-first with progressive enhancement at 768px and 1024px breakpoints
Landing Page Architecture
/* Landing page CSS architecture */
/* 1. Design Tokens (CSS Variables) */
:root {
--primary: #667eea;
--primary-dark: #5a6fd6;
--accent: #E44D26;
--text: #1a1a2e;
--text-secondary: #666;
--bg: #ffffff;
--bg-dark: #1a1a2e;
--radius: 12px;
--shadow: 0 2px 8px rgba(0,0,0,0.06);
--shadow-hover: 0 12px 24px rgba(0,0,0,0.12);
--container: 1200px;
}
/* 2. Base Layout */
.section { padding: clamp(3rem, 8vw, 6rem) clamp(1rem, 3vw, 3rem); }
.container { max-width: var(--container); margin: 0 auto; }
.section-header { text-align: center; margin-bottom: 48px; }
.section-header h2 { font-size: clamp(1.5rem, 3vw, 2.5rem); }
/* 3. Component Patterns */
.grid-3 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
}
.card-hover { transition: transform 0.3s, box-shadow 0.3s; }
.card-hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
/* 4. Stats Bar */
.stats { display: flex; justify-content: center; gap: clamp(2rem, 5vw, 4rem); padding: 3rem; }
.stat-number { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; color: var(--primary); }
.stat-label { color: var(--text-secondary); font-size: 0.9em; }
/* 5. CTA Section */
.cta-section { background: linear-gradient(135deg, var(--primary), #764ba2); text-align: center; color: white; }
.cta-btn { background: white; color: var(--primary); padding: 16px 40px; border-radius: 10px; font-weight: 700; }
/* 6. Responsive Overrides */
@media (max-width: 768px) {
.stats { flex-direction: column; align-items: center; text-align: center; }
}Tip
Define all design tokens as CSS variables FIRST, then reference them everywhere. This creates a single source of truth: changing --primary updates buttons, links, badges, and CTA sections simultaneously. This is how professional design systems work.
Mobile-first: start with mobile styles, enhance with min-width media queries
Common Mistake
Building each section independently without a shared design system. This creates inconsistent spacing, colors, and typography across sections. Define variables, base patterns, and component classes ONCE, then compose sections from those building blocks.
Practice Task
Plan a landing page architecture: (1) Define 10 CSS variables in :root (colors, spacing, radius, shadow), (2) Create 3 reusable patterns (.section, .container, .card-hover), (3) Build hero + features + CTA sections using ONLY the variables and patterns you defined.
Quick Quiz
Key Takeaways
- Combine everything into a complete landing page - hero section, features grid, testimonials, pricing, contact form, and footer.
- Hero - Full-viewport gradient background with centered headline, subtitle, and dual CTA buttons
- Features - Section header + 3-column icon card grid with hover effects
- Social proof - Statistics bar (Users, Rating, Projects) with large numbers