What you will use in this project
- Filtering and sorting in pure JS
- Cart drawer UX patterns
- Event delegation across nested grids
- State persistence
Web Project: E-commerce Frontend
Complete each step in the editor and watch the result as your page takes shape.
Build E-commerce Frontend, step-by-step
Build a modern e-commerce product browser.
Includes a shopping cart interface.
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 13 steps. Each one has its own pass criterion. Click Check code on every step to verify your progress and earn the full +230 XP.
| # | Step & pass criterion | Weight |
|---|---|---|
| 1 | Build the header Header with cart toggle | 5 pts |
| 2 | Filter and sort Filter and sort controls | 10 pts |
| 3 | Product grid #product-grid container present | 5 pts |
| 4 |
Cart drawer
|
15 pts |
| 5 | Style grid and cards Product grid styled with grid or flex | 5 pts |
| 6 | Style the drawer Cart drawer styled | 5 pts |
| 7 | Fetch products JS fetches products.json | 10 pts |
| 8 | Render grid JS renders product cards | 10 pts |
| 9 | Wire the filters Filter change handler | 10 pts |
| 10 | Cart state Add-to-cart click handler | 5 pts |
| 11 | Render the drawer Cart line items rendered | 5 pts |
| 12 |
Totals and persistence
|
10 pts |
| 13 | Toggle and checkout Cart toggle and checkout wired | 5 pts |
