YOUR CHALLENGE ROUTE

From your first document to a complete mini website

Work in your editor and browser. Start with the foundation challenges, then move on to repair tasks and the final project. You can spread the work across several lessons.

Use fictional details and images you own or are allowed to publish. Focus on clear HTML structure; detailed CSS styling comes later.

Your checks last while this page is open. They record your self-review, not an automatic code score.

CHALLENGE 01 | FOUNDATION

Start a page from a blank file

Use 01.1 | Your first page

Create a folder called html-challenges. Inside it, create index.html for a fictional club. Start from a blank file rather than copying a full page.

Success criteria

• Use a doctype and html with lang="en".
• Include head, UTF-8 charset, viewport metadata and a descriptive title.
• Put a main heading and introductory paragraph in body.
• Save as index.html and open it in a browser.
• Check the browser tab title and the visible page heading separately.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Robotics Club | Home</title>
</head>
<body>
  <h1>Robotics Club</h1>
  <p>We build robots, test ideas and learn together.</p>
</body>
</html>

CHALLENGE 02 | FOUNDATION

Turn rough notes into readable content

Use 01.2 | Headings, paragraphs and lists

Add these notes to your club page as properly structured content: “Projects: delivery robot and robot hand. Joining steps: speak to the leader, choose a project, attend a session. Delivery robot: carries small parcels. Robot hand: tests finger movements.”

Success criteria

• Use h2 for main sections and h3 for project subsections.
• Use an unordered list for the project names.
• Use an ordered list for the joining steps.
• Use paragraphs for descriptions.
• Keep li elements inside their list and headings outside paragraphs.

<h2>Our projects</h2>
<ul>
  <li>Delivery robot</li>
  <li>Robot hand</li>
</ul>
<h3>Delivery robot</h3>
<p>A robot that carries small parcels.</p>
<h3>Robot hand</h3>
<p>A hand that tests finger movements.</p>
<h2>How to join</h2>
<ol>
  <li>Speak to the club leader.</li>
  <li>Choose a project.</li>
  <li>Attend a session.</li>
</ol>

CHALLENGE 03 | BUILD

Build a link trail

Use 01.2 | Links and paths

Create projects.html alongside index.html. Link between the two pages, add an external learning link and add a link that jumps to the joining section on the home page.

Success criteria

• Both pages use complete HTML document structures.
• Navigation works in both directions using relative paths.
• An id identifies the joining section on index.html.
• A fragment link reaches the section.
• Link wording describes the destination rather than saying “click here”.

<!-- On index.html -->
<a href="projects.html">Explore our projects</a>
<a href="#join">Find out how to join</a>
<section id="join">
  <h2>How to join</h2>
  <p>Speak to the club leader.</p>
</section>

<!-- On projects.html -->
<a href="index.html">Club home</a>
<a href="index.html#join">Joining instructions</a>
<a href="https://www.computersciencecafe.com/">Computer Science Café</a>

CHALLENGE 04 | BUILD

Add an image with a clear purpose

Use 01.3 | Images and alternative text

Create an images folder inside html-challenges and add a suitable image named robot.jpg. Show it on projects.html with a caption. Use an accurate filename and description for your own image.

Success criteria

• The relative image path matches the folder and filename.
• Alternative text explains the image’s relevant content.
• figure groups the image and figcaption.
• The image keeps its proportions and is centred.
• It fits its container and has a sensible maximum width.

<figure>
  <img src="images/robot.jpg"
       alt="A small wheeled robot with an arm holding a parcel"
       style="display:block;width:100%;max-width:360px;height:auto;margin:20px auto;">
  <figcaption>Our prototype delivery robot during a lifting test.</figcaption>
</figure>

CHALLENGE 05 | DEBUG

Repair a page that only looks partly right

Use 01.1 to 01.3

Copy this faulty document into repair.html. Identify at least six issues or useful improvements, then fix it. A browser may repair some mistakes silently, so inspect the markup as well as the result.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Club page</title>
  <h1>Robotics Club</h1>
</head>
<body>
  <p>Our projects
    <ul><li>Delivery robot</li></ul>
  </p>
  <a src="projects.html">Click here</a>
  <img href="images/robot.jpg">
</body>
</html>

Success criteria

• Move visible page content into body.
• Add charset and viewport metadata.
• Keep the list outside the paragraph.
• Use href for the link and src for the image.
• Write useful link text and suitable alt text.
• Test the repaired link and image path.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Robotics Club | Projects</title>
</head>
<body>
  <h1>Robotics Club</h1>
  <p>Our projects include:</p>
  <ul><li>Delivery robot</li></ul>
  <a href="projects.html">Explore our projects</a>
  <img src="images/robot.jpg"
       alt="A wheeled delivery robot holding a parcel">
</body>
</html>

CHALLENGE 06 | IMPROVE

Choose elements for their meaning

Use 01.4 | Semantic elements

Improve projects.html. Give the page a meaningful structure, group its project reports and add supplementary reading. Choose each element because of what the content means.

Success criteria

• Use header, nav, one visible main and footer where appropriate.
• Use a section for a thematic group of projects.
• Use article for independent project reports.
• Use aside only for supplementary content.
• Keep a logical h1, h2 and h3 hierarchy.

<header>
  <p>Robotics Club</p>
  <nav aria-label="Main navigation">
    <a href="index.html">Home</a>
    <a href="projects.html">Projects</a>
  </nav>
</header>
<main id="main-content" tabindex="-1">
  <h1>Our projects</h1>
  <section>
    <h2>Current projects</h2>
    <article>
      <h3>Delivery robot</h3>
      <p>We are testing parcel-lifting ideas.</p>
    </article>
    <article>
      <h3>Robot hand</h3>
      <p>We are exploring finger movement.</p>
    </article>
  </section>
</main>
<aside>
  <h2>Related reading</h2>
  <p><a href="https://www.computersciencecafe.com/">Explore computing resources</a></p>
</aside>
<footer><p>Ask the club leader about joining.</p></footer>

CHALLENGE 07 | TEST

Test your page without a mouse

Use 01.3 and 01.4 | Accessibility

Add a visible skip link near the beginning of body on each page. Ask a partner to use the pages with a keyboard and record at least three checks and one improvement.

Success criteria

• The skip link points to a unique main-content id.
• Its target can receive focus without joining the regular Tab sequence.
• Tab and Shift+Tab move through links in a sensible order.
• Focus is visible and Enter activates links.
• Images and headings make sense beyond their appearance.

<!-- Near the start of body, before repeated navigation -->
<a href="#main-content">Skip to main content</a>

<!-- After the page header and navigation -->
<main id="main-content" tabindex="-1">
  <h1>Our projects</h1>
  <p>Main content starts here.</p>
</main>

CHALLENGE 08 | STRETCH

Build a three-page club website

Combine 01.1 to 01.4

Create a finished mini website with index.html, projects.html and join.html. Choose robotics, art, sports or another fictional club. Use the earlier challenges as building blocks, then make the content your own.

Success criteria

• All three pages have complete document structures and meaningful titles.
• Each page can reach the other two through descriptive navigation.
• Use clear headings, paragraphs and appropriate lists.
• Include at least one useful image with alt text and a caption.
• Use semantic page regions and working skip links.
• Every local link and image path has been tested.
• The page remains readable at a narrow width.
• A partner can find the projects and joining instructions easily.

<!-- Navigation repeated on each page -->
<nav aria-label="Main navigation">
  <a href="index.html">Home</a>
  <a href="projects.html">Projects</a>
  <a href="join.html">Join the club</a>
</nav>

REFLECT AND CONTINUE

Explain what you built

Write a short reflection: which challenge was hardest, what you changed after testing, and why your page structure makes sense. Keep your HTML files and a screenshot of the final website.

For the next stage, you will organize related information into tables and build forms for collecting input.