Your final website

Build and test your website

Lesson 17 of 18 · About 35 minutes

Your goal: Combine structure, style and interaction.

Learn

Bring your HTML, CSS and JavaScript together. Test each change. If something fails, check element ids, closing tags, quotation marks and the browser console in developer tools.

View starter code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My hobby page</title>
    <style></style>
  </head>

  <body>
    <h1>My hobby</h1>
    <p>I enjoy learning something new.</p>
  </body>
</html>

Your challenge

Finish your own page. Check headings, links, alternative text, phone layout and keyboard operation. Download a tested copy.

Keep developing your hobby page: Download HTML before leaving the sandbox, then choose Open HTML file when returning to your project. Load saved draft restores only this lesson’s draft in this browser.

Practise in the sandbox

Show a hint

Use Tab to reach each link and button. Press Enter or Space on buttons. Test the interaction more than once.

Show a sample answer

Try the challenge first. This is one possible answer or a snippet to adapt.

Checklist: one main heading; logical section headings; descriptive links; useful alt text; readable colours; no sideways scrolling; visible keyboard focus; working interaction; downloaded backup.

Check your work

The page has two sections, useful content, readable styling, working links and a working keyboard-accessible interaction.

I tried the challenge and checked the result.

Completion is your own check, not an automatic grade.