Challenge - Beginner capstone
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.
Exercise 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>.
Show example 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>Test yourself
-
On a personal home page, where do menu links go?
- <main>
- <nav>
- <footer>
- <aside>
Show answer
<nav> — Correct. <nav> groups menu and navigation links together.
-
Write the captioned image
<figure> <img src="landscape.jpg" alt="Mountain view" width="640" height="360"> <____>A photo from my daily trip</figcaption> </figure>Show answer
<figure> <img src="landscape.jpg" alt="Mountain view" width="640" height="360"> <figcaption>A photo from my daily trip</figcaption> </figure> -
Match each semantic tag to its role
- <article>
- Standalone content
- <aside>
- Side content
- <section>
- Section
- <figure>
- Image and its caption
- <address>
- Contact info