Web Build 108

SEO, performance, and hosting: Viewport metadata

Build viewport metadata inside the persistent Course dashboard: Viewport metadata starter project.

SEO, performance, and hosting

10 minutes Advanced Lesson 108 of 120

titlemetacanonicalviewportrobots404

Lesson 108 of 120 0/120 lessons 0/18 missions SEO, performance, and hosting · 10 minutes

0%

Continue View profile

New learnerrank 0XP 0%complete

Current edit

Write a unique page title

Replace the metadata comment with the exact title for Course dashboard: Viewport metadata.

Target: index.html · Inside head after charset.
Evidence: The head contains one descriptive title.

index.html html

Preview allowlisted render

Console text only

Instructions 10 minutes

Load exact snippets or type matching Web code. Run each task, compare the preview, then press Check to save the lesson.

Start with the Current task. Edit its named project file, press Run, compare the reviewed preview, then continue. Press Check only after every task is complete.

Write a unique page title

Replace the metadata comment with the exact title for Course dashboard: Viewport metadata.

Target index.html · Inside head after charset. Evidence The head contains one descriptive title. Snippet <title>Course dashboard: Viewport metadata | Clairos Learn</title> Next up

Add description and viewport metadata

Add the exact description and viewport meta elements.

Target index.html · After title inside head. Evidence The page has a unique description and mobile viewport instruction. Snippet

<meta name="description" content="Practice viewport metadata in a guided Web fundamentals project.">
<meta name="viewport" content="width=device-width, initial-scale=1">

Next up

Declare canonical and robots intent

Add the exact relative canonical path and index,follow robots meta, then Run and Check.

Target index.html · After viewport metadata. Evidence The document names one lesson path and explicit public indexing intent. Snippet

<link rel="canonical" href="/web/lessons/web-seo-performance-hosting-004/">
<meta name="robots" content="index,follow">

Next up

Save progress

Keep learning across sessions.

Create a free account to sync completed lessons, XP, streaks, course status, and your next lesson across sessions.

Checking account status...

Progress sync is idle.

0XP New learnerrank 0day streak 0best streak 0daily streak 0lessons 0courses 0missions 0tasks Noverified

Continue

Progress sync stores completion IDs, scores, streaks, badges, and game settings. Terminal contents, editor snippets, lab scratch, email, and real names are never published on leaderboards or share cards.

Lesson support

What to notice while you play.

Objective

Complete a project-shaped viewport metadata build while preserving each passing edit.

Hint

Start with the Current task. Open index.html, use Show exact edit when needed, Run, then follow the highlighted next task.

Why it matters

SEO, performance, and hosting becomes durable when every syntax choice is tied to a visible project outcome and a specific piece of evidence.

Common mistakes

Editing the wrong file instead of index.html.
Replacing earlier passing work instead of preserving it for the next step.
Pressing Check before every task has passed Run.
Expecting learner HTML, CSS, or JavaScript to execute; the preview uses reviewed scene states only.

Reference

Snippets in this lesson.

title / meta description

Practice basic SEO and share-preview metadata.