Challenge - Intermediate capstone
Write a docs site that combines all intermediate topics.
Bring the intermediate level together
This documentation site combines every intermediate topic. It has a full <!DOCTYPE html> skeleton, semantic landmarks (<header>, <nav>, <main>, <aside>, <footer>), advanced text tags, and an accessible table.
A skip link moves keyboard users straight to the main content. The form section includes <fieldset>, <legend>, <label for> and validation attributes.
Exercise Write a documentation site
Write a complete documentation site. Include <!DOCTYPE html>, <html> with lang, and a <head> with charset/viewport/<title>. In the body add a skip link (targeting the id on main) and <header>+<nav>, <main>, <aside>, <footer>. Inside <main> put an <article> with an <h2> and a <pre><code> block, plus a <table> with <caption> and a scoped <th>. Inside <aside> put a form with <fieldset>+<legend>, <label for>↔id, required and pattern.
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>Keyboard API docs</title>
</head>
<body>
<a href="#content" class="skip-link">Skip to content</a>
<header>
<h1>Keyboard API docs</h1>
<nav aria-label="Main menu">
<a href="/home">Home</a>
<a href="/posts">Articles</a>
</nav>
</header>
<main id="content">
<article>
<h2>Setup</h2>
<p>Run the following command in your terminal:</p>
<pre><code>npm install keyboard</code></pre>
</article>
<section>
<h2>Release notes</h2>
<table>
<caption>Version history</caption>
<thead>
<tr><th scope="col">Version</th><th scope="col">Date</th></tr>
</thead>
<tbody>
<tr><td>1.0</td><td><time datetime="2026-01-15">15 January 2026</time></td></tr>
</tbody>
</table>
</section>
<aside>
<h2>Feedback</h2>
<form>
<fieldset>
<legend>Contact</legend>
<label for="email">Email</label>
<input type="email" id="email" name="email" required>
<label for="msg">Message</label>
<input type="text" id="msg" name="msg" required pattern="[A-Za-z0-9 ]{5,100}">
</fieldset>
</form>
</aside>
</main>
<footer>
<address>info@keyboard.example</address>
</footer>
</body>
</html>Test yourself
-
What should the skip link target?
- header
- main
- footer
- aside
Show answer
main — Correct. The skip link points to the id on main.
-
Skip link
<a href="____" class="skip-link">Skip to content</a>Show answer
<a href="#content" class="skip-link">Skip to content</a> -
Topic and its tag
- abbreviation
- abbr
- code block
- pre>code
- form group
- fieldset
- column styling
- colgroup