Build data attributes inside the persistent Accessible recipe: Data attributes starter project.
HTML basics
htmlbodyh1pulclass
In index.html, replace the placeholder inside <main> with the exact <h1> shown below for Accessible recipe.
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 Accessible recipe.
Target index.html · Inside <main>, replace the placeholder comment. Evidence The project contains one visible h1 naming Accessible recipe. Snippet<h1>Accessible recipe</h1>
Next up
Add the exact paragraph after the h1. It should explain why data attributes matters.
Target index.html · Directly after the h1 inside <main>. Evidence A paragraph follows the primary heading in normal document order. Snippet<p>Data attributes 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 data attributes 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.