Semantic HTML and accessibility · Lesson 10 / 10

Mission: a workshop open to more people

Turn the template into your own page and deliver review evidence too.

Let's discover together

1
The kit includes index.html, a process image, reading styles, demo.js and REVIEW.md. It describes a fictional ideas workshop. Customize the title, program and instructions with invented content rather than participant identities or personal details.
2
Keep a coherent hierarchy, clear regions, descriptive links, appropriate alt, a simple table and labeled controls. If you remove an image or table because your project does not need it, explain that decision rather than adding purposeless elements.
3
Compare a defect with its correction: change a label’s for, observe the hint and the click that no longer focuses, restore it and test again. In REVIEW.md record before/after evidence and pending tests.
4
Download the edited HTML separately and replace index.html in the extracted kit. ZIPs always contain the starter template. GitHub is optional: the button sends one file at a time; upload support files through GitHub or Git for the complete project. This does not automatically enable GitHub Pages.

HTML workshop: write, observe, review

Edit HTML in “My files and GitHub” and update the preview. It uses study elements and reading styles: scripts, custom CSS and external navigation are disabled. Only the kit’s route.svg is shown as an image.

Go to my HTML

These simple checks are neither complete HTML validation nor a WCAG audit. Review content, keyboard, zoom and assistive technologies; record what you have not tested.

Official links and next step

Reference to explore

✦

YOUR MISSION

Integrate semantic HTML and produce an honest project review.

How can I tell what I learned?

Use the objectives and challenge below for reflection or a conversation with someone who can help. This is guided self-assessment: it sends no answers, awards no XP and does not automatically verify independence.

In Foundations, change an example, predict results, check a normal case and an error case, and explain your choices. If you need help, identify what to practice again.

Your transfer challenge

Deliver a page with at least three justified changes and a before/after review. Then continue with CSS and interface design to study presentation, layout and responsiveness.

Keep evidence: prediction, attempt, result, an original change and what you still cannot explain. Seek feedback when possible; if studying alone, return later without copying and compare attempts.

Try again another time

After a break, explain the idea without opening the solution and try a different example. Compare with your first attempt: what can you do independently, and where do you need a hint? You may write, speak or draw; choose a way to check the same idea. Record help received, including AI, and revisit the part you need. There is no universal deadline or extra XP for this record.

Completions and XP record Rullst Academy assessments. An introductory track can help everyday life and prepare further study; alone it does not prove complete mastery or professional readiness. Level indicates depth, not age.

Take it with you

Deliver a page with at least three justified changes and a before/after review. Then continue with CSS and interface design to study presentation, layout and responsiveness.

At your own pace

My files and GitHub

Every lesson can become your own record: code, notes or a practice plan. Saving a file to GitHub is optional and does not change your XP.

Student guide

The editor and downloads open when this lesson is available to your account. Check access below or return to the track map.

Checking your access to this lesson…

Your path, step by step

Download activity materials

Download the lesson example and a workbook for your notes. The ZIP includes a guide to organizing activities in one or more repositories. Publishing is optional; eligible accounts can also use the GitHub upload button.

Your file for this lesson

Edit the example or record what you learned. This space does not run code or grade answers. The draft is saved only in this browser, separately per account; you choose when to download or upload to GitHub.

The example may be only a snippet or outline. Changing the extension does not make it a complete program. The activity ZIP contains starting material; the edited-file button downloads your text.

My code or notes

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src 'self' data:; style-src 'self'; script-src 'self'; base-uri 'none'; form-action 'none'">
<title>Ideas workshop</title>
<link rel="stylesheet" href="style.css">
<script src="demo.js" defer></script>
</head>
<body>
<a class="skip" href="#conteudo">Skip to content</a>
<header><h1>Ideas workshop</h1><p>A fictional workshop to draw, test and revise ideas with paper.</p></header>
<nav aria-label="Main navigation"><a href="#programa">View workshop program</a> · <a href="#treino">Try the form</a></nav>
<main id="conteudo" tabindex="-1">
<section id="programa"><h2>Program</h2>
<h3>Materials</h3>
<ul><li>Reused paper</li><li>Pencil</li></ul>
<h3>Steps</h3>
<ol><li>Draw an idea</li><li>Test and observe</li><li>Revise using evidence</li></ol>
<figure><img src="route.svg" width="600" height="120" alt="Idea, then test, then revision"><figcaption>Our process has three stages.</figcaption></figure>
<table><caption>Fictional activity program</caption><thead><tr><th scope="col">Activity</th><th scope="col">Minutes</th></tr></thead><tbody><tr><th scope="row">Draw</th><td>10</td></tr><tr><th scope="row">Test</th><td>15</td></tr></tbody></table>
</section>
<section id="treino"><h2>Practice form</h2>
<p id="form-help">Use an invented alias, up to 20 characters. Required field. This is not a registration and nothing will be sent.</p>
<form><label for="alias">Fictional alias (required)</label>
<input id="alias" name="alias" type="text" required maxlength="20" aria-describedby="form-help" autocomplete="off">
<fieldset><legend>Which activity do you prefer?</legend>
<label for="draw"><input id="draw" type="radio" name="activity" value="draw" checked> Draw</label>
<label for="test"><input id="test" type="radio" name="activity" value="test"> Test</label></fieldset>
<button type="submit">Check local practice</button></form>
<p id="practice-result" role="status" data-practice-message="Practice completed locally; nothing was sent or registered."></p></section>
<section><h2>Questions</h2><details><summary>Do I need to register?</summary><p>No. This page is a learning project only.</p></details></section>
</main>
<footer><p>Fictional learning project.</p></footer>
</body>
</html>

File format

Your text will be saved in this browser when you edit it. On a shared computer, clear your drafts when finished.

Direct upload accepts up to 8 KiB of text in one file. Use downloads and the manual guide for projects with multiple files.

Mission: a workshop open to more people

Let's discover together

HTML workshop: write, observe, review

Study preview

Hints for your review

Heading outline

Official links and next step

Now it's your turn

Read, predict, try