Web Build 006

HTML basics: Unordered feature lists

Build unordered feature lists inside the persistent Public resource hub: Unordered feature lists starter project.

HTML basics
7 minutes Beginner Lesson 6 of 120
htmlbodyh1pulclass
Lesson 6 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 unordered feature lists heading

In index.html, replace the placeholder inside <main> with the exact <h1> shown below for Public resource hub.

Target
index.html · Inside <main>, replace the placeholder comment.
Evidence
The project contains one visible h1 naming Public resource hub.
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 unordered feature lists heading

In index.html, replace the placeholder inside <main> with the exact <h1> shown below for Public resource hub.

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

Add the exact paragraph after the h1. It should explain why unordered feature lists matters.

Target index.html · Directly after the h1 inside <main>. Evidence A paragraph follows the primary heading in normal document order. Snippet <p>Unordered feature 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 unordered feature 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.