Challenge - Beginner capstone
- HTML course
- Beginner
- Lesson 68/68
- 7 min
Write a personal home page that combines all beginner topics.
Recall the capstone
This final challenge brings together everything from the beginner level: document skeleton, text, links, lists, tables, images, and forms. The goal is to build a real personal home page wrapped in semantic tags.
First lay out the page with <header>, <nav>, <main>, and <footer>. Then add sections inside main: one <section> introduces you, another shows a travel schedule with a table or list, and the last holds a contact form. This structure gives a page that is both clean and accessible.
Practice Build a personal home page
Build a personal home page inside the body of the skeleton below. Add a <h1> heading inside <header>; three <a href="#..."> links inside <nav>; at least two <section>s inside <main> (one about, one contact). In the contact section include a <form>, a <label> + <input> pair, and a <button type="submit">. End the page with a <footer>.
Starter code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Personal Home Page</title>
</head>
<body>
<!-- add semantic structure and sections -->
</body>
</html>Sample solution
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Personal Home Page</title>
</head>
<body>
<header>
<h1>Alex's Page</h1>
</header>
<nav>
<a href="#about">About</a>
<a href="#diary">Diary</a>
<a href="#contact">Contact</a>
</nav>
<main>
<section id="about">
<h2>About</h2>
<p>I am a traveler based in Lisbon.</p>
</section>
<section id="diary">
<h2>Travel Schedule</h2>
<ul>
<li>May: Cappadocia</li>
<li>June: Ephesus</li>
</ul>
</section>
<section id="contact">
<h2>Contact</h2>
<form action="/message" method="post">
<label for="name">Name</label>
<input id="name" name="name" type="text">
<button type="submit">Send</button>
</form>
</section>
</main>
<footer>
<p>© 2024 Alex</p>
</footer>
</body>
</html>Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 On a personal home page, where do menu links go?
- <nav> Correct answer
- <main>
- <footer>
- <aside>
Explanation: <nav> groups menu and navigation links together.
2 Write the captioned image
<figure>
<img src="landscape.jpg" alt="Mountain view" width="640" height="360">
<____>A photo from my daily trip</figcaption>
</figure><figure>
<img src="landscape.jpg" alt="Mountain view" width="640" height="360">
<figcaption>A photo from my daily trip</figcaption>
</figure>Explanation: <figcaption> holds the caption of an image inside <figure>.
3 Match each semantic tag to its role
| Term | Meaning |
|---|---|
<article> |
Standalone content |
<aside> |
Side content |
<section> |
Section |
<figure> |
Image and its caption |
<address> |
Contact info |