Like a notice on a board
HTML helps the browser identify a heading, a paragraph and a list. Think of labels on boxes: “dishes”, “books”, “tools”.
PRACTICE STARTS BEFORE “SOMEDAY”Today, you’ll
Today, you’ll
build a page.
One clear task. A few lines of code.
A result you can explain yourself.
YOUR DAILY RHYTHM30min8 + 10 + 5 + 7 minutes
Good plans. Now open the editor and write your first line.
↗TODAY’S PLAN
- 01Understand the ideaRead and look at an example8 min
- 02Write the codeCheck and fix it10 min
- 03Explain it yourselfRecall it without a hint5 min
Use the last 7 minutes to build
your own reading list.
A little theory goes a long way
UNDERSTANDLook at a small example
<h1>My weekend plan</h1>
<p>I will build a bookshelf.</p>The opening tag starts an element. The closing tag, with a /, ends it.
Errors are part of the work
The browser will display a heading written as plain text. But it needs an h1 tag to recognize it as the main heading.
Read the code before changing it
8 minutes · understandYou will identify where an HTML element starts and ends, explain each line of the example, and build a new list without a finished solution.
<p>My idea</p>A tag is a marker; an element is the whole unit
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 slash marks the closing tag
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>Meaning first, appearance second
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>The list is the box; the items go inside
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>Nesting: close from the inside out
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>Enter does not create another item
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.
Read the example line by line
<h1>A workshop on my balcony</h1>Line 1. Open the main heading, write the subject of the page, and close the heading. You can change the words while keeping the pair of tags.
<p>I build simple shelves here and keep a record of their measurements.</p>Line 2. This separate paragraph explains what happens in the workshop. It follows the h1; it is not inside it.
<ul>Line 3. Start a list of possible tasks. We have opened the shared box, but there is no item yet. This list does not specify a required order of work.
<li>Sketch a shelf</li>Line 4. The first item is entirely inside the ul. Open li, write one task, then close li. The two leading spaces help you read the code.
<li>Measure the wall</li>Line 5. Create a second item beside the first. It belongs to the same ul, but it is not inside the previous li: that item has already been closed.
</ul>Line 6. Close the whole list. This example has two items; your first exercise needs three. Count li elements, not editor lines.
Before running the code, predict how many items this list contains.
<ul>
<li>A book about space
and notes about stars</li>
<li>A short story collection</li>
</ul>Time to use the keyboard
10 MINUTES · TRY01
Introduce your first project
Create one h1 reading “My first project”, a paragraph about your idea with at least 12 letters or digits, and a ul list with three li items describing your next steps. Each item needs at least 3 letters or digits.
This exercise uses tags without attributes. No installation or API keys needed. index.htmlHTML
Browser result● preview
The preview updates after a check. Your practice code stays in your browser.
We wanted one list with one item, but the li is outside it. Which change restores the intended nesting?
<ul>
</ul>
<li>Measure the wall</li>The code works. Why?
EXPLAINCHECK YOUR UNDERSTANDING
Why does a heading need an h1 tag?
First complete the task and answer the question.
On your own: a reading list
7 minutes · apply02
A new task with familiar tags
Build a page about what you want to read, starting with an empty editor. Invent one clear h1 heading with at least 3 letters or digits. Add a p explaining why you are making this list, using at least 12 letters or digits. Below it, create one ul with exactly three direct li items. Name a book, article or topic in each item, using at least 3 letters or digits. No links are needed yet. Try from memory first; you can open hints at any time.
You can revisit the explanation. Hints appear one at a time; you won’t lose points.reading-list.htmlHTML
Your list in the browser
Preview updates after checking.
Why does each book need its own li? What changes if you use only line breaks? Write your answer before opening the self-check.
Your answer is saved with progress in this browser. The text is not graded automatically.
Compare with the self-check questions
- Did you explain that ul groups the whole list and each li marks one separate item?
- What happens if you remove li and leave the titles on separate lines inside ul? The text may remain visible, but there will be no separate list items.
- Do h1 and p make clear what you plan to read and why? You judge this: the automatic checker sees structure and text length.
Answer before opening the hint
If you forget, read the explanation, close it and answer again. Use this as a short warm-up before your next session.
Without a hint: how is a tag different from an element?
In <p>Text</p>, the tags are <p> and </p>. The whole fragment, including its content, is a p element.
The text inside one li wraps across three editor lines. How many items are there?
One. Line breaks inside a li do not create more li elements.
Why choose h1 for the subject of a page even if you want a small font?
h1 gives the text the role of a heading. Font size is presentation; it can change without changing the meaning of the element.
If an item is written after </ul>, can leading spaces put it inside the list?
No. In our examples, the item must be between <ul> and </ul>. Indentation only helps us see that relationship.
IF YOU ASK AI FOR HELP
Ask for a clue, then check it.
Try the task first. Then ask: “Do not write the solution. Ask one question that helps me find my mistake.” Compare the suggestion with the code and browser result. Close the reply and explain the fix yourself.
Towards data.
With a solid foundation.
Start with a short web foundation, then move into Python and analysis. Practice sets the pace, not a date on the calendar.
The first HTML lesson is available now. Later steps are a plan, not a finished course catalog. PHP and deeper web development will form a separate path.
Your growth,
shown through practice.
What you have checked
The bar shows completed actions in the starter module. It does not measure your mastery of a language.
HTML · page structure0 / 3
Python · working with dataPractice is ahead
SQL · querying tablesPractice is ahead
Applying what you learned
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.
Prediction · debugging · new task0 / 3
- Predicted the number of itemsNot completed yet
- Found the cause of an errorNot completed yet
- Built a new listNot completed yet
Your collection of small wins
Your first line
Change the code and run a check
Still aheadEverything in its place
Build a valid page structure
Still aheadA page and the role of li
Build a page and identify the role of li
Still aheadA mentor
with character.
Choose your tone
Optional. The jokes target excuses, never your worth. You can turn this off at any time.
After a break
Your achievements stay. Spend five minutes revisiting the example, then continue from where you left off.
Your progress stays with you
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.