Build Your First Simple Web Page

This is your first full tiny HTML page. The goal is not to make a perfect website. The goal is to finish one simple page and feel the win that comes from putting familiar HTML parts together.

Your lesson goals are simple:
- build one very small page from parts you already know
- work step by step instead of trying to do everything at once
- keep the page readable and complete enough for a real first project
- check the finished result calmly
- leave this lesson with a real page you assembled yourself

Beginners often feel pressure to make the first page look advanced. That pressure usually gets in the way. A first project works better when it stays small enough to finish.

In this lesson, you are building a short personal learning page. It uses one grouped section, one main heading, one paragraph, one short list, one useful link, and one simple image. That is already enough for a real first page.

Begin with the page frame:

<section>
<h1>Hello, I am Maya</h1>
</section>

Line by line:
The section groups the page content together.
The h1 heading gives the page its main message.
The words inside the heading tell the visitor what the page is about right away.

This is a strong first step because you are giving the page a clear structure before you add details.

Next, give the page a little more meaning:

<section>
<h1>Hello, I am Maya</h1>
<p>I am learning HTML one step at a time.</p>
<ul>
<li>Headings</li>
<li>Paragraphs</li>
<li>Links</li>
</ul>
</section>

Line by line:
The paragraph explains the page in one calm sentence.
The unordered list groups a few learning items in a readable way.
Each list item holds one short idea, so the page stays easy to scan.

Now add one helpful next step and one visual:

<section>
<h1>Hello, I am Maya</h1>
<p>I am learning HTML one step at a time.</p>
<ul>
<li>Headings</li>
<li>Paragraphs</li>
<li>Links</li>
</ul>
<p><a href="notes.html">Read my learning notes</a></p>
<img src="study-desk.jpg" alt="My study desk">
</section>

Line by line:
The link gives the visitor something useful to click.
The image adds one simple visual without changing the page goal.
The alt text describes the image so the line still has meaning when the picture is not visible.

Here is the full finished page:

<section>
<h1>Hello, I am Maya</h1>
<p>I am learning HTML one step at a time.</p>
<ul>
<li>Headings</li>
<li>Paragraphs</li>
<li>Links</li>
</ul>
<p><a href="notes.html">Read my learning notes</a></p>
<img src="study-desk.jpg" alt="My study desk">
</section>

Notice what makes this page work:
It has one clear heading.
It has readable text.
It uses a list to organize repeated ideas.
It gives the visitor one link.
It stays small enough to finish.

Use this short check:

- Does the heading appear clearly at the top?
- Does the text make sense when you read it back?
- Does the link point somewhere sensible?
- Are the opening and closing tags still in the right places?
- Does the page feel complete enough for a first project?

This is not about judging yourself harshly. It is only a calm check that the page still says what you meant it to say.

A few small problems happen often:

Forgetting a closing tag:
One missing end can make the page harder to read.

Putting text in the wrong place:
The words are there, but they are not inside the heading, paragraph, or list item you meant to use.

Breaking a link:
The link text might look right, but the href value points to the wrong place.

Trying to add too much:
The page gets bigger and messier before the first version is even finished.

If one of these happens, do not panic. Go back to the simple version, fix one small part, and check the page again.

If you worked through these steps, you assembled a full beginner HTML page. It may be tiny, but it is still a legitimate first project.

You grouped the content, wrote a heading, added a paragraph, organized a list, linked to another place, and finished with a complete page shape. That is real progress, and it is the right kind of win to take into the next track.