Capstone builds · Lesson 8 of 8 · 10 minutes

Capstone builds: Web foundations finale

The final page brings together document metadata, semantic structure, readable navigation, and a usable primary action.

Open the lab Course map

Mastery 0/3Run itExplain itApply it

Current edit

PreviewNo external resources

Your objectives

Hints are always available. Wrong turns never cost XP.

1
Build web foundations finale
Build this first target: the HTML doctype; <html> (lang="en"); <head> inside <html>; <title> inside <head> containing “Operator workshop”; <body> inside <html>. Inspect the structure before checking the lesson.
Hint & worked example
The final page brings together document metadata, semantic structure, readable navigation, and a usable primary action.
The requested elements, attributes, content, and hierarchy exist outside comments.
```
<!doctype html><html lang="en"><head><title>Operator workshop</title></head><body></body></html>
```
Common mistake to avoid: A visual appearance alone guarantees the intended HTML meaning.
2
Extend the web foundations finale example
Extend your file to include: the HTML doctype; <html> (lang="en"); <head> inside <html>; <title> inside <head> containing “Operator workshop”; <meta> inside <head> (name="viewport", content="width=device-width, initial-scale=1"); <body> inside <html>; <header> inside <body>; <nav> inside <header> (aria-label="Primary"); <a> inside <nav> (href="/web/") containing “Web course”; <main> inside <body>; <h1> inside <main> containing “Operator workshop”; <p> inside <main> containing “Build a page that people can use.”. Inspect the structure before checking the lesson.
Hint & worked example
The final page brings together document metadata, semantic structure, readable navigation, and a usable primary action.
The requested elements, attributes, content, and hierarchy exist outside comments.
```
<!doctype html><html lang="en"><head><title>Operator workshop</title><meta name="viewport" content="width=device-width, initial-scale=1"></head><body><header><nav aria-label="Primary"><a href="/web/">Web course</a></nav></header><main><h1>Operator workshop</h1><p>Build a page that people can use.</p></main></body></html>
```
Common mistake to avoid: Replacing semantic elements with generic divs automatically improves accessibility.
3
Verify the complete web foundations finale pattern
Finish the pattern with: the HTML doctype; <html> (lang="en"); <head> inside <html>; <title> inside <head> containing “Operator workshop”; <meta> inside <head> (name="viewport", content="width=device-width, initial-scale=1"); <body> inside <html>; <header> inside <body>; <nav> inside <header> (aria-label="Primary"); <a> inside <nav> (href="/web/") containing “Web course”; <main> inside <body>; <h1> inside <main> containing “Operator workshop”; <p> inside <main> containing “Build a page that people can use.”; <a> inside <main> (href="/unix/") containing “Start a UNIX lab”; <footer> inside <body>; <p> inside <footer> containing “Practice safely, then verify on a real project.”. Inspect the structure before checking the lesson.
Hint & worked example
The final page brings together document metadata, semantic structure, readable navigation, and a usable primary action.
The requested elements, attributes, content, and hierarchy exist outside comments.
```
<!doctype html><html lang="en"><head><title>Operator workshop</title><meta name="viewport" content="width=device-width, initial-scale=1"></head><body><header><nav aria-label="Primary"><a href="/web/">Web course</a></nav></header><main><h1>Operator workshop</h1><p>Build a page that people can use.</p><a href="/unix/">Start a UNIX lab</a></main><footer><p>Practice safely, then verify on a real project.</p></footer></body></html>
```
Common mistake to avoid: A visual appearance alone guarantees the intended HTML meaning.

Understand the pattern

The final page brings together document metadata, semantic structure, readable navigation, and a usable primary action.

Misconceptions to reject

A visual appearance alone guarantees the intended HTML meaning.
Replacing semantic elements with generic divs automatically improves accessibility.

The preview is a sanitized subset, not a full browser compatibility test.

Worked example and expected result

<!doctype html><html lang="en"><head><title>Operator workshop</title><meta name="viewport" content="width=device-width, initial-scale=1"></head><body><header><nav aria-label="Primary"><a href="/web/">Web course</a></nav></header><main><h1>Operator workshop</h1><p>Build a page that people can use.</p><a href="/unix/">Start a UNIX lab</a></main><footer><p>Practice safely, then verify on a real project.</p></footer></body></html>

The final page brings together document metadata, semantic structure, readable navigation, and a usable primary action.

Try a variation

Adapt the final example to a different project name while retaining its structure and relationships. A different context still needs a real browser and accessibility check.

Explain it

Which statement correctly explains web foundations finale?The final page brings together document metadata, semantic structure, readable navigation, and a usable primary action.A visual appearance alone guarantees the intended HTML meaning.Replacing semantic elements with generic divs automatically improves accessibility.

Apply it elsewhere

You reuse web foundations finale in a different project. What must still be verified?Nothing; passing a single exercise guarantees every future use.Only whether the source code has the same number of lines.The meaning, relationships, and accessible names in the new document.

Keep the momentum.

Complete the lab, then explain and apply the pattern.

Review this course Try an incident drill

Anonymous lesson and mastery progress lasts for this session. Sign in to keep synced lesson XP between sessions; mastery stays device-local. No speed bonus, lost lives, or hint penalties.

Keep learning

01Capstone builds: Portfolio case studyA case study explains the problem, the work, and the evidence for the result without inventing impact metrics.Practice

MDN: HTML structure