Web Build 027

Links and media: Figures and captions

Build figures and captions inside the persistent Creative portfolio: Figures and captions starter project.

Links and media

7 minutes Beginner Lesson 27 of 120

ahrefimgaltfigurefigcaption

Lesson 27 of 120 0/120 lessons 0/18 missions Links and media · 7 minutes

0%

Continue View profile

New learnerrank 0XP 0%complete

Current edit

Add a useful relative link

Add the exact course link. Keep its destination relative and its text descriptive.

Target: index.html · After the introductory paragraph.
Evidence: A descriptive anchor points to /web/courses/.

index.html html

Preview allowlisted render

Console text only

Instructions 7 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.

Add a useful relative link

Add the exact course link. Keep its destination relative and its text descriptive.

Target index.html · After the introductory paragraph. Evidence A descriptive anchor points to /web/courses/. Snippet <a class="course-link" href="/web/courses/">Browse Web courses</a> Next up

Add a captioned image

Add the exact figure, local image, dimensions, alt text, and caption.

Target index.html · After the course link. Evidence The local image has dimensions, useful alt text, and a figure caption. Snippet

<figure>
  <img src="/assets/clairos-round-mark.svg" width="96" height="96" alt="Clairos Learn circular course mark">
  <figcaption>Figures and captions practice marker</figcaption>
</figure>

Next up

Add a contextual support link

Add the exact support link with an accessible name tied to this lesson topic.

Target index.html · After the figure. Evidence A second relative link has contextual accessible text. Snippet <a href="/support/" aria-label="Open Learn support for figures and captions">Open support notes</a> 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 figures and captions 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

Links and media 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.

addEventListener

Describe event-driven behavior in the simulated JavaScript lab.

aria-*

Add accessibility metadata only when native HTML is not enough.