HTML TutorialLesson #17

HTML Project

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

- Instructions How it works #### What you will use in this project Text formatting

Lists with

Linking pages with

Embedding images with *

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 code when 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 Page has exactly one `<h1>` Page has at least one intro paragraph	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

Interactive Code Examples

HTML Project Example

html

Try it Yourself

Live code example for HTML Project. Click Try it Yourself to test.

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      font-family: system-ui, -apple-system, sans-serif;
      padding: 24px;
      background: #f8fafc;
      color: #0f172a;
    }
    .demo-card {
      background: #ffffff;
      padding: 24px;
      border-radius: 16px;
      border: 1px solid #e0e7ff;
      box-shadow: 0 10px 25px -5px rgba(79, 70, 229, 0.08);
      max-width: 540px;
    }
    h2 { color: #4f46e5; margin-top: 0; font-size: 22px; }
    p { color: #64748b; line-height: 1.6; }
    .btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: #4f46e5;
      color: #ffffff;
      border: none;
      padding: 10px 20px;
      border-radius: 9999px;
      font-weight: 700;
      font-size: 13px;
      cursor: pointer;
      box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25);
    }
    .btn:hover { background: #4338ca; }
  </style>
</head>
<body>
  <div class="demo-card">
    <h2>HTML Project</h2>
    <p>This is a live runnable interactive demonstration for <strong>HTML Project</strong>.</p>
    <button class="btn" onclick="alert('Testing HTML Project!')">
      <span>Interactive Action</span> &rarr;
    </button>
  </div>
</body>
</html>

Previous: HTML Images Next: HTML Favicon