Build heading hierarchy inside the persistent Volunteer check-in: Heading hierarchy starter project.
HTML basics
htmlbodyh1pulclass
In index.html, replace the placeholder inside <main> with the exact <h1> shown below for Volunteer check-in.
Load exact snippets or type matching Web code. Run each task, compare the preview, then press Check to save the lesson.
Start with the Current task. Edit its named project file, press Run, compare the reviewed preview, then continue. Press Check only after every task is complete.
In index.html, replace the placeholder inside <main> with the exact <h1> shown below for Volunteer check-in.
Target index.html · Inside <main>, replace the placeholder comment. Evidence The project contains one visible h1 naming Volunteer check-in. Snippet<h1>Volunteer check-in</h1>
Next up
Add the exact paragraph after the h1. It should explain why heading hierarchy matters.
Target index.html · Directly after the h1 inside <main>. Evidence A paragraph follows the primary heading in normal document order. Snippet<p>Heading hierarchy makes this page easier to understand.</p>
Next up
Add the exact unordered list with two learning points, then Run and Check.
Target index.html · After the paragraph, still inside <main>. Evidence The page has a classed unordered list with two list items. Snippet<ul class="learning-points">
<li>Clear structure</li>
<li>Readable content</li>
</ul>
Next up
Create a free account to sync completed lessons, XP, streaks, course status, and your next lesson across sessions.
Checking account status...
Progress sync is idle.
Progress sync stores completion IDs, scores, streaks, badges, and game settings. Terminal contents, editor snippets, lab scratch, email, and real names are never published on leaderboards or share cards.
Complete a project-shaped heading hierarchy build while preserving each passing edit.
Start with the Current task. Open index.html, use Show exact edit when needed, Run, then follow the highlighted next task.
HTML basics becomes durable when every syntax choice is tied to a visible project outcome and a specific piece of evidence.
class / id
Name elements so CSS and behavior can target them predictably.