One part at a time. You can pause and continue later.
Part 1 of 4
HTML marks the role of text. <p> and </p> are opening and closing tags. Together with the text between them, they form an element: a box with contents. Let’s read one line at a time.
h1 — heading · p — paragraph · ul — list · li — item
Choose a line to see its role. Pressing Enter alone does not add a list item.
h1 is the main page heading. The / in </h1> closes it.
h1 gives text a role, not a fixed font size. A heading can have small letters and remain a heading. The / before the same name, h1, marks its end.
<p>My idea</p>Think of a box with something inside. <p> marks the start, </p> marks the end, and “My idea” sits between them. The two markers are tags. The whole unit, including the text, is a p element: a paragraph.
<h1>A heading</h1>The opening tag is <h1>. The closing tag adds / before the name: </h1>. The name stays the same. In this lesson, we explicitly close h1, p, ul and li so their boundaries are easy to see. Later you will meet elements that do not need a closing tag.
<h1>My workshop</h1>
<p>I build shelves here.</p>h1 marks the main heading of our page; p marks an explanatory paragraph. Browsers usually display them differently, but styles can change their font size. Choose h1 because the text is a heading, not because you want large letters.
<ul>
<li>Tape measure</li>
<li>Pencil</li>
</ul>ul groups an unordered list. Each li inside it is a separate item. There are two li elements here, so there are two items. Use this kind of list when rearranging the items does not change the meaning. We will use ol for a meaningful order later.
<ul>
<li>Measure the wall</li>
</ul>The li sits inside the ul, like a small box inside a larger one. In our examples, we close </li> before </ul>. Leading spaces help you see the nesting. The tags create the relationship; the spaces do not.
<li>A book about space
and notes about stars</li>The text uses two lines in the editor, but both lines are inside one li. That means one item. Line breaks and indentation make source code easier to read; a separate list item needs a separate li element.
<ul>
<li>A book about space
and notes about stars</li>
<li>A short story collection</li>
</ul>Describe your idea: what will you make, and where will you start?
The preview updates after a check. Your practice code stays in your browser.
<ul>
</ul>
<li>Measure the wall</li>First complete the task and answer the question.
Build a list of things you want to read. Try without the example first.
Preview updates after checking.
Why use a separate li for each book? What changes if you keep only line breaks?
Your note is saved in this browser. It is not automatically graded.
Answer from memory before opening each explanation.
Two tags: <p> and </p>. Together with the text, they form one p element. The words “My idea” are content, not another tag.
One. There are new line breaks in the source code, but no new li elements. Another item needs another li inside the shared ul.
“Do not write the solution. Ask one question to help me find the mistake.” After the hint, explain your fix in your own words.
Start with a short web foundation, then move into Python and analysis. Practice sets the pace, not a date on the calendar.
The bar shows completed actions in the starter module. It does not measure your mastery of a language.
These are the results of three specific tasks. A correct answer marks an action completed at least once; it does not prove HTML mastery. Previous achievements are preserved.
Change the code and run a check
Still aheadBuild a valid page structure
Still aheadBuild a page and identify the role of li
Still aheadOptional. The jokes target excuses, never your worth. You can turn this off at any time.
Your achievements stay. Spend five minutes revisiting the example, then continue from where you left off.
Your code, mentor mode and achievements are stored only in this browser. Your phone will have separate progress. To transfer it, download a backup and restore it on another device.
Clearing site data removes local progress. No email address or account is needed for now.