What you will use in this project
- Selectors (class, id, attribute, pseudo)
- Box model and spacing
- Hover and interactive states
HTML Project: Profile Card Collection
Complete each step in the editor and watch the result as your page takes shape.
Build your first CSS project, step-by-step
Style a collection of profile cards.
Use CSS selectors, colors, borders, and pseudo-classes.
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 5 steps. Each one has its own pass criterion. Click Check code on every step to verify your progress and earn the full +100 XP.
| # | Step & pass criterion | Weight |
|---|---|---|
| 1 | Reset and typography Universal selector and body font-family defined | 15 pts |
| 2 |
Style the card
|
25 pts |
| 3 | Heading and role [data-role] attribute selector used | 15 pts |
| 4 | Cards side by side inline-block plus max-width and margin auto centering | 20 pts |
| 5 |
Add hover and alternating rows
|
25 pts |
