Clairos Learn

Learn Web fundamentals through guided builds.

Practice HTML, CSS, JavaScript patterns, accessibility, SEO, forms, and responsive layout in a simulated Web lab.

Continue Open sandbox

Track progress 0/120 lessons 0/18 missions 12 courses

Continue View profile

New learnerrank 0XP 0%complete

Current edit

Practice a small Web edit

Choose a project file, make one bounded edit, and press Run.

Target: index.html
Evidence: The safe checker will report the pattern it found.

index.html html

Preview allowlisted render

Console text only

Starter prompts

Load an exact snippet, press Run, then use Check after all tasks are complete.
Build a tiny HTML section with one heading, one paragraph, and one clear class name.
Add CSS spacing with display: grid, gap, padding, and a responsive media query.
Practice a simulated JavaScript event with querySelector, addEventListener, and textContent.
Review a form label, required input, help text, and accessible confirmation state.
Finish a launch check with a title, meta description, canonical URL, and 404 route note.

Mission board

HTML basics builder

Finish every html basics lesson and complete its persistent projects.

250 XP

Semantic structure builder

Finish every semantic structure lesson and complete its persistent projects.

270 XP

Links and media builder

Finish every links and media lesson and complete its persistent projects.

290 XP

CSS basics builder

Finish every css basics lesson and complete its persistent projects.

310 XP

Layout and responsive builder

Finish every layout and responsive lesson and complete its persistent projects.

330 XP

Visual polish builder

Finish every visual polish lesson and complete its persistent projects.

350 XP

JavaScript basics builder

Finish every javascript basics lesson and complete its persistent projects.

370 XP

DOM and events builder

Finish every dom and events lesson and complete its persistent projects.

390 XP

Forms and validation builder

Finish every forms and validation lesson and complete its persistent projects.

410 XP

Accessibility builder

Finish every accessibility lesson and complete its persistent projects.

430 XP

SEO, performance, and hosting builder

Finish every seo, performance, and hosting lesson and complete its persistent projects.

450 XP

Capstone builds builder

Finish every capstone builds lesson and complete its persistent projects.

470 XP

First Web page

Complete the first HTML lesson and save the page-building loop.

100 XP

Structure checkpoint

Complete semantic structure and links/media foundations.

160 XP

CSS checkpoint

Complete the first CSS and responsive layout lessons.

180 XP

JavaScript checkpoint

Practice simulated JavaScript basics and DOM event patterns.

190 XP

Forms and accessibility

Complete form labels, validation hints, and accessibility naming.

200 XP

Launch review

Complete SEO/performance basics and a first capstone build.

240 XP

Save progress

Your Learn profile.

Save completed lessons, task completions, mission wins, XP, course status, and streaks with your Clairos account. Lab files, nano drafts, command history, and typed commands stay only in this browser.

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.

Course categories

Web lessons, grouped for steady progress.

Move through short Web missions using a safe editor, preview, console feedback, and deterministic checks.

0/12 HTML basics

Documents, headings, paragraphs, lists, attributes, and readable markup.

12 short lessons 0/10 Semantic structure

Landmarks, sections, articles, navigation, and content hierarchy.

10 short lessons · 1 checkpoint 0/8 Links and media

Anchors, images, captions, downloadable resources, and media context.

8 short lessons · 1 checkpoint 0/12 CSS basics

Selectors, color, spacing, typography, borders, and reusable classes.

12 short lessons · 1 checkpoint 0/14 Layout and responsive

Flex, grid, responsive constraints, media queries, and wrapping.

14 short lessons · 1 checkpoint 0/8 Visual polish

Buttons, focus states, hierarchy, rhythm, and professional restraint.

8 short lessons · 1 checkpoint 0/12 JavaScript basics

Variables, functions, conditions, arrays, and readable behavior patterns.

12 short lessons · 1 checkpoint 0/10 DOM and events

Selectors, event listeners, class changes, text updates, and UI behavior.

10 short lessons · 1 checkpoint 0/10 Forms and validation

Labels, inputs, validation hints, form states, and confirmation messages.

10 short lessons 0/8 Accessibility

Landmarks, names, keyboard flow, focus, alternatives, and contrast habits.

8 short lessons · 1 checkpoint 0/8 SEO, performance, and hosting

Titles, descriptions, canonical paths, lightweight assets, and static hosting checks.

8 short lessons 0/8 Capstone builds

Project-shaped builds combining structure, style, behavior, accessibility, and launch checks.

8 short lessons · 8 checkpoints

Browse all lessons

Sandbox objectives

A Web lab you can build inside.

The mission board turns practice into a small game loop: load, run, preview, check, and reset.

HTML basics builder

Finish every html basics lesson and complete its persistent projects.

250 XP

Semantic structure builder

Finish every semantic structure lesson and complete its persistent projects.

270 XP

Links and media builder

Finish every links and media lesson and complete its persistent projects.

290 XP

CSS basics builder

Finish every css basics lesson and complete its persistent projects.

310 XP

Layout and responsive builder

Finish every layout and responsive lesson and complete its persistent projects.

330 XP

Visual polish builder

Finish every visual polish lesson and complete its persistent projects.

350 XP

JavaScript basics builder

Finish every javascript basics lesson and complete its persistent projects.

370 XP

DOM and events builder

Finish every dom and events lesson and complete its persistent projects.

390 XP

Forms and validation builder

Finish every forms and validation lesson and complete its persistent projects.

410 XP

Accessibility builder

Finish every accessibility lesson and complete its persistent projects.

430 XP

SEO, performance, and hosting builder

Finish every seo, performance, and hosting lesson and complete its persistent projects.

450 XP

Capstone builds builder

Finish every capstone builds lesson and complete its persistent projects.

470 XP

First Web page

Complete the first HTML lesson and save the page-building loop.

100 XP

Structure checkpoint

Complete semantic structure and links/media foundations.

160 XP

CSS checkpoint

Complete the first CSS and responsive layout lessons.

180 XP

JavaScript checkpoint

Practice simulated JavaScript basics and DOM event patterns.

190 XP

Forms and accessibility

Complete form labels, validation hints, and accessibility naming.

200 XP

Launch review

Complete SEO/performance basics and a first capstone build.

240 XP

Reference

Small snippets, clear outcomes.

These are the first tools learners will practice in the training lab.

Run

Render a simulated preview from the current lesson snippet.

Check

Save the lesson after the required task snippets are complete.

Hint

Show the lesson hint without changing progress.

Reset

Clear local Web lab scratch state for this browser.

<!doctype html>

Start an HTML document with an explicit standards-mode marker.

<header> <main> <section> <footer>

Use semantic landmarks so pages have structure.

<a href> <img alt>

Create links and media with accessible context.

class / id

Name elements so CSS and behavior can target them predictably.

display: flex / grid

Build responsive layout with modern CSS.

@media

Adapt layout at smaller viewports.

addEventListener

Describe event-driven behavior in the simulated JavaScript lab.

querySelector

Select a simulated element shape without running real JavaScript.

form / label / input

Build form structure with labels and validation hints.

aria-*

Add accessibility metadata only when native HTML is not enough.

title / meta description

Practice basic SEO and share-preview metadata.