Challenge - Advanced capstone
Write a dashboard page that combines all advanced topics.
Advanced capstone challenge
This final challenge asks you to write a dashboard page that combines the entire advanced level: semantic skeleton, responsive image, accessible video, complex form and a data table.
The page must include: <header>, <nav>, <main>, <aside>, <footer>; at least two <section>s inside main; one with a <picture> hero, another with a <video> and <track>; an <aside> holding a <table> (<thead>, <tbody>); a <form> at the end of main with a <fieldset> and an <output>. Add a <noscript> fallback too.
Exercise Write the advanced dashboard page
Fill the <body> of the skeleton below. Inside <header> put an <h1>; inside <nav> put three <a href="#..."> links; inside <main> put two <section>s — one with a <picture> (at least one <source> and one <img>); the other with a <video controls> containing a <source> and a <track kind="captions">. At the end of main add a <form> with a <fieldset>, a <label> + <input type="range"> and an <output>Pending</output>. Inside <aside> put a <table> with <thead>, <tbody> and at least one <tr>. End the page with a <footer> and a <noscript>.
Show example solution
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard</title>
</head>
<body>
<header>
<h1>Travel Dashboard</h1>
</header>
<nav>
<a href="#gallery">Gallery</a>
<a href="#video">Video</a>
<a href="#signup">Sign up</a>
</nav>
<main>
<section id="gallery">
<h2>Gallery</h2>
<picture>
<source media="(min-width: 800px)" srcset="/img/dashboard-wide.jpg">
<img src="/img/dashboard-narrow.jpg" alt="Panorama" width="1200" height="600" loading="lazy">
</picture>
</section>
<section id="video">
<h2>Promo</h2>
<video controls poster="/media/poster.jpg">
<source src="/media/promo.mp4" type="video/mp4">
<track kind="captions" srclang="en" label="English" src="/media/captions-en.vtt">
</video>
</section>
<form action="/signup" method="post">
<fieldset>
<legend>Preference</legend>
<label for="previous">Previous</label>
<input id="previous" name="previous" type="range" min="0" max="100">
<label for="status">Status</label>
<output id="status" name="status">Pending</output>
</fieldset>
</form>
</main>
<aside>
<h2>History</h2>
<table>
<thead>
<tr>
<th scope="col">Date</th>
<th scope="col">City</th>
</tr>
</thead>
<tbody>
<tr>
<td>May</td>
<td>Lisbon</td>
</tr>
</tbody>
</table>
</aside>
<footer>
<p>© 2026 Travel Dashboard</p>
</footer>
<noscript>Your browser has JavaScript off; some sections may not appear.</noscript>
</body>
</html>Test yourself
-
Which semantic tag suits a side panel (recent activity, quick links) on a dashboard?
- <section>
- <aside>
- <article>
- <main>
Show answer
<aside> — Correct. <aside> holds content related to but tangential to the main content; a side panel fits.
-
Write the noscript fallback
<main> <section>...</section> </main> <____>Your browser has JavaScript off; some sections may not appear.</noscript>Show answer
<main> <section>...</section> </main> <noscript>Your browser has JavaScript off; some sections may not appear.</noscript> -
Match each semantic tag to its role
- <main>
- Main content
- <aside>
- Side panel
- <section>
- Section
- <article>
- Standalone card
- <noscript>
- Script fallback