Web Build 005

HTML basics: Ordered task lists

Build ordered task lists inside the persistent Study group board: Ordered task lists starter project.

HTML basics
7 minutes Beginner Lesson 5 of 120
htmlbodyh1pulclass
Lesson 5 of 120 0/120 lessons 0/18 missions HTML basics · 7 minutes
0%
Continue View profile
Web fundamentals lab Simulated editor
New learnerrank 0XP 0%complete
Current edit

Add the ordered task lists heading

In index.html, replace the placeholder inside <main> with the exact <h1> shown below for Study group board.

Target
index.html · Inside <main>, replace the placeholder comment.
Evidence
The project contains one visible h1 naming Study group board.
index.html html
Preview allowlisted render
Console text only
Instructions 7 minutes

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.

Add the ordered task lists heading

In index.html, replace the placeholder inside <main> with the exact <h1> shown below for Study group board.

Target index.html · Inside <main>, replace the placeholder comment. Evidence The project contains one visible h1 naming Study group board. Snippet <h1>Study group board</h1>
Next up
Add supporting copy

Add the exact paragraph after the h1. It should explain why ordered task lists matters.

Target index.html · Directly after the h1 inside <main>. Evidence A paragraph follows the primary heading in normal document order. Snippet <p>Ordered task lists makes this page easier to understand.</p>
Next up
Add a scannable list

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
Lesson support

What to notice while you play.

Objective

Complete a project-shaped ordered task lists build while preserving each passing edit.

Hint

Start with the Current task. Open index.html, use Show exact edit when needed, Run, then follow the highlighted next task.

Why it matters

HTML basics becomes durable when every syntax choice is tied to a visible project outcome and a specific piece of evidence.

Common mistakes
  • Editing the wrong file instead of index.html.
  • Replacing earlier passing work instead of preserving it for the next step.
  • Pressing Check before every task has passed Run.
  • Expecting learner HTML, CSS, or JavaScript to execute; the preview uses reviewed scene states only.
Reference

Snippets in this lesson.

class / id

Name elements so CSS and behavior can target them predictably.