Youth Cocoon

BUILD · TEST · SHARE SAFELY

From first edit to useful web app.

Level 1 builds your first website. Level 2 adds data and resilient states. Each level keeps Prepare → Practice → Produce → Prove → Present.

Start in the labPrivacy guide
Mission meter0/10 lessons

LEVEL 1

Build Your First Site

Downloadable website + 60–90 second Site Tour

LEVEL 2

Build a Useful Web App

Product brief + three-minute Product Demo

About 20–35 min

Need this lesson: Only a browser. Accounts and publishing can wait.

Learn this lesson

HTML, CSS, JavaScript, versions, and safe sharing

A website is a useful experience for a specific person—not a pile of code. Choose a small mission and audience first. The Web Maker Lab gives you a working starter, so your first session ends with something visible.

Learn what HTML, CSS, and JavaScript each do. A version is a safe checkpoint. Deploy means publishing a reviewed copy, but publishing is optional. Use a nickname and avatar by default; never publish a school, address, schedule, private contacts, passwords, or API keys.

Evidence: project, audience, privacy mode, and core Web terms completed in the lab.

If stuck: Use the starter, reset without shame, and change only one thing at a time.

Confirm as you go

About 20–35 min

Need this lesson: The starter created in Prepare.

Learn this lesson

Edit → preview → compare → save

Practice one change at a time. Edit the headline and introduction in HTML, then change the accent colour or spacing in CSS. Run the preview after each change so the browser—not a checkbox—shows what happened.

Save a named version before experimenting further. That habit makes mistakes recoverable and turns debugging into comparison instead of panic.

Evidence: headline, introduction, visual style, and one safe version changed in the live preview.

If stuck: Use the starter, reset without shame, and change only one thing at a time.

Confirm as you go

About 20–35 min

Need this lesson: Your customized page from Practice.

Learn this lesson

Action → decision → visible feedback

Choose one small interaction: reveal a tip, answer a quiz, increase a counter, or filter a list. The lab inserts a working pattern you can read, change, preview, and reset.

Write the interaction’s job in one sentence. A visitor should know what to do and should see or hear what happened afterward. One clear interaction is stronger than five unfinished features.

Evidence: one visitor action produces clear feedback and the build decision is recorded.

If stuck: Use the starter, reset without shame, and change only one thing at a time.

Confirm as you go

About 20–35 min

Need this lesson: The working interaction from Produce.

Learn this lesson

Test evidence, debugging, and accessibility

Prove is not a place to add a major new technology. It is where you challenge what you already built. Run the lab’s tests, use the keyboard, shrink the preview, and check headings, image descriptions, focus visibility, and private information.

A failed test is useful evidence. Fix one issue, run the tests again, and explain what the result taught you. That explanation is part of the proof.

Evidence: structure, interaction, mobile, accessibility, and privacy tests run; one fix explained.

If stuck: Use the starter, reset without shame, and change only one thing at a time.

Confirm as you go

About 20–35 min

Need this lesson: Your tested website. Publishing is optional.

Learn this lesson

A concise story about audience, purpose, interaction, and evidence

Use the generated Site Tour: who the page helps, what the visitor can do, what your tests found, and what you fixed. Show the working interaction instead of explaining every line of code.

Download the complete site as your artifact. Publishing is a separate optional choice after an adult privacy review; finishing the course never requires a public identity or paid service.

Evidence: privacy review passed, site downloaded, and a 60–90 second tour presented.

If stuck: Use the starter, reset without shame, and change only one thing at a time.

Confirm as you go

About 20–35 min

Need this lesson: Level 1 or comfort with HTML, CSS, and JavaScript.

Learn this lesson

API, JSON, requests, responses, interface states, and private data

A web app combines an interface with changing data. Choose a tiny mission such as tips, events, resources, or menu availability. You will practice with simulated data before any real service.

Learn the request and response cycle, then write a minimum-data rule: collect only what the app needs. Names, schools, locations, contacts, passwords, and tokens do not belong in this practice project.

Evidence: app mission, API vocabulary, and minimum-data rule completed.

If stuck: Use the starter, reset without shame, and change only one thing at a time.

Confirm as you go

About 20–35 min

Need this lesson: The data mission from Prepare.

Learn this lesson

Mock responses and the happy path’s alternatives

Use the Mock API Playground to run three responses. A successful request may contain results or an empty list. A failed request should produce a calm explanation and a Retry action—not a blank page.

Because the playground is simulated, you can learn the data flow without accounts, billing, CORS errors, or exposed credentials.

Evidence: success, empty, and error responses explored with a recovery decision.

If stuck: Use the starter, reset without shame, and change only one thing at a time.

Confirm as you go

About 20–35 min

Need this lesson: Mock responses from Practice.

Learn this lesson

Resilient interfaces and readable data

Design all four states before connecting a live endpoint. Each state needs plain-language feedback. The success state also needs a label and source so the visitor can interpret the result.

The lab provides a readable fetch pattern. Treat it as a map: show loading, check the response, read JSON, decide whether results exist, and recover from an error.

Evidence: loading, success, empty, and error states designed with a labelled data card.

If stuck: Use the starter, reset without shame, and change only one thing at a time.

Confirm as you go

About 20–35 min

Need this lesson: The four app states from Produce.

Learn this lesson

Offline, invalid, slow, keyboard, and secret-safety tests

Run failure scenarios instead of adding another feature. Test offline use, missing labels, a slow response, and keyboard access to Retry. Record what each failure would show a real visitor.

Confirm that browser code contains no password, token, private contact, school, or location. Explain one change made because a pressure test failed.

Evidence: two failure scenarios run, code checked for secrets, and one resilient fix explained.

If stuck: Use the starter, reset without shame, and change only one thing at a time.

Confirm as you go

About 20–35 min

Need this lesson: The tested app plan from Prove. A live backend is optional.

Learn this lesson

Explain value, data flow, resilience, and the next version

Use the generated Product Demo to explain who the app helps, what data it requests, how the interface handles four states, what pressure test failed, and what you changed.

Download the product brief as evidence. Connecting a real Worker or publishing the app is an optional extension after adult review; mock data still demonstrates the core skill.

Evidence: product brief downloaded and a three-minute user, data, test, and next-version story presented.

If stuck: Use the starter, reset without shame, and change only one thing at a time.

Confirm as you go

Leave with evidence, not just checked boxes

Keep the website file, product brief, test results, and presentation scripts. Publishing remains optional.

All coursesMy progress