On this page

Final project: complete landing page

20 min read TextCh. 5 — Modern CSS

The final project

In this final lesson, you will build a complete landing page applying all the concepts you have learned throughout the course. The playground above contains the base HTML and a CSS skeleton. Your task is to complete the styles.

Requirements

Your landing page must implement the following concepts:

1. Custom properties

Define a color palette and spacing tokens in :root. All styles should use these variables, not hardcoded values.

:root {
  --color-brand: oklch(75% 0.18 85);
  --color-text: oklch(15% 0.01 260);
  --space: 1rem;
  --radius: 12px;
}

2. Navbar with Flexbox and sticky

The navigation bar must:

  • Use display: flex with justify-content: space-between
  • Have position: sticky so it stays fixed when scrolling
  • Include a glassmorphism effect with backdrop-filter: blur()

3. Hero with fluid typography

The hero section must:

  • Center the content with max-width and margin: 0 auto
  • Use clamp() so the title scales fluidly
  • Have CTA buttons with gradients and hover transitions

4. Features with CSS Grid

The features grid must:

  • Use display: grid with repeat(auto-fill, minmax(280px, 1fr))
  • Be fully responsive without media queries
  • Include transitions on card hover

A simple footer with a top border and centered text.

Concepts you should apply

Review this list as a checklist of everything learned in the course:

Lesson Concept Where to apply it
Specificity Simple selectors, no !important The entire project
Box model box-sizing: border-box, padding Reset and components
Display block, flex, grid General layout
Flexbox Navbar, hero buttons 1D alignment
Grid Feature cards Responsive 2D layout
Responsive clamp(), auto-fill Without media queries
Typography Fluid font-size, line-height Headings and paragraphs
Colors oklch, gradients Palette and CTAs
Transitions Hover effects Cards and buttons
Custom properties Theme variables The entire project
Modern CSS Nesting, text-wrap: balance Organization

Suggested steps

  1. Basic reset: apply box-sizing: border-box and remove margins
  2. Variables: define your color palette, spacing, and typography
  3. Navbar: horizontal Flexbox, sticky, glassmorphism
  4. Hero: centered, fluid typography with clamp(), CTA buttons
  5. Features: responsive Grid with auto-fill, cards with border and hover
  6. Footer: top border, centered text, secondary color
  7. Transitions: add hover effects to buttons and cards
  8. Polish: verify responsive, contrast, visual consistency

Evaluation criteria

Your landing page should:

  • Look good on mobile (320px), tablet (768px), and desktop (1280px)
  • Use custom properties for all colors
  • Have no unnecessary media queries (Grid auto-fill + clamp do the job)
  • Have smooth transitions (200-300ms) only on transform/opacity
  • Meet WCAG AA text contrast (4.5:1 minimum)
  • Have organized and readable CSS code

Going further

If you finish early, try adding:

  • Dark theme with @media (prefers-color-scheme: dark) or light-dark()
  • CSS nesting to organize styles by component
  • Scroll-driven animation so features appear on scroll
  • A pricing section with Grid and card variants

Congratulations, you have completed the CSS Fundamentals course. You now have the tools to build any modern web interface with pure CSS.

How to approach the project
Work section by section: first the navbar (Flexbox + sticky), then the hero (centering + fluid typography), then the features (responsive Grid), and finally the footer. Do not try to do everything at once.
Concept checklist
Verify that you used: custom properties for colors, clamp() for fluid typography, Flexbox for the navbar, Grid with auto-fill for the cards, position sticky for the navbar, transitions on hovers, and relative units (rem) instead of px. 
/* Reference solution - Navbar */
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  position: sticky;
  top: 0;
  background: oklch(98% 0.005 260 / 90%);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid oklch(85% 0 0);
  z-index: 100;
}

nav ul {
  display: flex;
  gap: 1.5rem;
  list-style: none;
  padding: 0;
}

nav a {
  color: inherit;
  text-decoration: none;
  font-weight: 500;
}

/* Hero */
header {
  text-align: center;
  padding: clamp(3rem, 10vw, 8rem) 2rem;
  max-width: 720px;
  margin: 0 auto;
}

header h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.1;
  text-wrap: balance;
  margin-bottom: 1rem;
}

header p {
  font-size: 1.125rem;
  color: oklch(45% 0.01 260);
  margin-bottom: 2rem;
}

header div {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

header a {
  padding: 0.75rem 2rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  transition: transform 150ms ease;
}

header a:first-child {
  background: linear-gradient(135deg, #ff530f, #e6286a);
  color: white;
}

header a:last-child {
  border: 1px solid oklch(85% 0 0);
  color: oklch(15% 0.01 260);
}

/* Features */
#features {
  padding: 4rem 2rem;
  text-align: center;
}

#features h2 {
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  margin-bottom: 2rem;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  max-width: 960px;
  margin: 0 auto;
}

.features-grid article {
  padding: 2rem;
  border: 1px solid oklch(85% 0 0);
  border-radius: 12px;
  text-align: left;
  transition: border-color 200ms ease;
}

.features-grid article:hover {
  border-color: #b056ff;
}

/* Footer */
footer {
  text-align: center;
  padding: 2rem;
  border-top: 1px solid oklch(85% 0 0);
  color: oklch(45% 0.01 260);
}
Playground
Output