HTML Project: Personal Page
Complete each step in the editor and watch the result as your page takes shape.
Build your first HTML project, step-by-step
Write your first real HTML page.
Build a personal bio with formatted text, a list, an image, and links.
Easy · +70 XP · HTML
What you will use in this project
- Text formatting
- Lists with <ul> and <li>
- Linking pages with <a>
- Embedding images with <img>
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 +70 XP.
| # | Step & pass criterion | Weight |
|---|---|---|
| 1 |
Heading and intro
|
25 pts |
| 2 | Format your about-me paragraph About-me uses bold, italic, and <mark> | 20 pts |
| 3 | Add a list Page has an <h2> heading, a <ul>, and at least three <li> items | 15 pts |
| 4 | Add an image Page has an <img> with src and alt | 20 pts |
| 5 | Outbound links Page has at least two <a href> links | 20 pts |
Start Building Now
Opens an embedded code editor in a new tab. No installs required.
index.html