What you will use in this project
- Semantic HTML structure
- Responsive layouts with flexbox and grid
- CSS variables and theming
- DOM events with vanilla JavaScript
Web Project: Portfolio
Complete each step in the editor and watch the result as your page takes shape.
Build your first real project, step-by-step
Build your first responsive personal portfolio.
Use HTML, CSS, and JavaScript.
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 9 steps. Each one has its own pass criterion. Click Check code on every step to verify your progress and earn the full +110 XP.
| # | Step & pass criterion | Weight |
|---|---|---|
| 1 |
Add the page header and nav
|
10 pts |
| 2 | Build the hero section Page has exactly one <h1> | 10 pts |
| 3 | Projects section At least 3 project cards in #projects | 15 pts |
| 4 | Contact form Contact form has name, email, and message | 15 pts |
| 5 | Define design tokens CSS variables defined and used | 5 pts |
| 6 | Center the content Content has a centered max-width | 5 pts |
| 7 | Lay out cards Project cards laid out with grid or flex | 5 pts |
| 8 | Make it responsive Layout works on viewport 600px wide or less | 15 pts |
| 9 | Validate the form Contact form prevents empty submission | 20 pts |
