What you will use in this project
- CSS variables and theming
- Gradients and shadows
- Transforms, transitions, animations
- Responsive design with media queries
HTML Project: CSS Landing Page
Complete each step in the editor and watch the result as your page takes shape.
Build CSS Landing Page, step-by-step
Build a product landing page.
Use gradients, transforms, animations, and a media query.
How it works
- 1 Follow the steps on the left. Each dot in the stepper bar is one focused chunk of work. Read the instructions, the “What to do” checklist, and any hints.
- 2 Write your code on the right. The editor is yours. Files auto-save as you type. Use the Preview tab to see your work in action.
-
3
Click
Check codewhen you’re ready. We grade your work against the step’s rubric and tell you exactly what passed and what still needs work. - 4 Pass a step to move on. Build the project cumulatively. Pass every step to complete it and earn the full XP.
How it’s graded
This project is broken into 7 steps. Each one has its own pass criterion. Click Check code on every step to verify your progress and earn the full +160 XP.
| # | Step & pass criterion | Weight |
|---|---|---|
| 1 | Define design tokens CSS variables defined in :root and used elsewhere | 15 pts |
| 2 | Body base styles Body has a font-family and uses a CSS variable | 10 pts |
| 3 | Hero gradient .hero uses a linear-gradient background | 15 pts |
| 4 | Hero headline Hero text has text-shadow and font-weight | 10 pts |
| 5 |
Feature cards
|
15 pts |
| 6 | Hover transition .feature:hover uses transform and transition | 20 pts |
| 7 | Phone breakpoint Layout adapts at viewport 600px wide or less | 15 pts |
