Project final - Landing
Combine all sections, finalize and document the landing page.
Assemble the page
In the final step you assemble the page end to end. At the top of <body> you add <header> with a <nav> inside; menu links live there. After <main> comes <footer>; copyright and helper links go there.
Marking sections with <!-- comments --> keeps the file readable.
HTML comments
HTML comments don't show in the browser but stay in the source file. They open with <!-- and close with -->. Use them to mark sections, leave notes or temporarily hide code.
Text inside a comment is not rendered; only someone reading the source sees it. Don't overuse them; they bloat the file. Prefer short, meaningful notes.
Exercise Add header, nav, footer and a comment
Take the previous step's page with the pricing table. At the top of <body> add a <header>; inside it put a <nav> with at least two a links (with href). After <main> add a <footer> with a non-empty p (copyright text). Add at least one comment to the page (e.g. marking header and footer).
Show example solution
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TaskFlow - Task management</title>
</head>
<body>
<!-- Top menu -->
<header>
<nav>
<a href="/">TaskFlow</a>
<a href="/features">Features</a>
<a href="/pricing">Pricing</a>
</nav>
</header>
<main>
<h1>Keep tasks in flow, not in mind</h1>
<p>Manage your team's tasks, deadlines and progress from a single panel with TaskFlow.</p>
<a href="/signup">Start free</a>
<button>Request a tour</button>
<section>
<h2>Why TaskFlow?</h2>
<article>
<h3>Kanban boards</h3>
<p>Move tasks with <strong>drag and drop</strong> and see the flow <em>live</em>.</p>
</article>
<article>
<h3>Automatic reminders</h3>
<p>Get <strong>email</strong> and <em>instant notifications</em> as deadlines approach.</p>
</article>
<ul>
<li><strong>Calendar</strong> view</li>
<li><strong>File</strong> attachments</li>
<li><strong>Tag</strong> system</li>
</ul>
</section>
<section>
<h2>Plans</h2>
<table>
<caption>TaskFlow pricing</caption>
<thead>
<tr>
<th>Plan</th>
<th>Price</th>
<th>Members</th>
</tr>
</thead>
<tbody>
<tr>
<td>Basic</td>
<td>Free</td>
<td>3</td>
</tr>
<tr>
<td>Pro</td>
<td>$9/mo</td>
<td>Unlimited</td>
</tr>
</tbody>
</table>
</section>
</main>
<!-- Bottom info -->
<footer>
<p>© 2026 TaskFlow</p>
</footer>
</body>
</html>TaskFlow landing complete
The TaskFlow landing page is complete! Over five lessons you built this structure:
- Document skeleton and head settings
- Hero section: tagline, pitch, action
- Features: article cards and lists
- Pricing: a captioned table
- Header, nav, footer and comments
This is the skeleton of a real product page. Swap the content to fit your own product.
Test yourself
-
Which tag wraps the main content of a page?
- aside
- main
- header
- nav
Show answer
main — Correct. main wraps the page's primary content; there's one per page.
-
Write the markers that open an HTML comment
____ Top menu -->Show answer
<!-- Top menu --> -
Match each structural tag to its role
- header
- Top section
- nav
- Navigation menu
- main
- Main content
- footer
- Bottom section