Your free first quest / Website Builder

One button.
A little surprise.

Make a prediction. Press the button. Wonder what made that happen.

Your child brings the idea. You operate the AI. Together, you’ll make a little webpage and explain how it works.

20–30 minutes · Ages 7–12 with a grown-up
No Family AI Lab account or payment card needed.

surprise.html

What will this button do?

A click is an event. The event runs a function.
The function changes what you see. You’re already exploring code.

Pull up a chair

Paper. A pencil. A computer. A grown-up.

An adult chooses a suitable AI tool, checks its terms, and operates it throughout. The starter file is an optional head start; you can also make your own from the prompt below.

01 / PLAN

Draw the surprise.

Sketch one big button on paper. What should happen when someone presses it? Pick a color and a short message. Give your project an imaginary name.

Ask your builder: “What do you predict the button will do? What would we need to tell it?”

02 / ASK

The grown-up prompts.

Add your child’s chosen color and message to this prompt. The grown-up enters it into the AI tool.

Make one local HTML page with a button. When clicked, the page background changes color and a short message appears. Put all code in this one file. Explain the event listener. Do not add network requests or collect any information. Use an imaginary project name, not personal information.

03 / BUILD & TEST

Make something happen.

The grown-up reviews the generated code, saves it as surprise.html, and opens it in a browser. Try the button together. Does it do what you predicted?

If it doesn’t work, describe what you expected and what happened instead. Ask your grown-up to help make one careful change, then test again.

Or start with this working example

04 / EXPLAIN

Show what changed.

Find the part of the code that listens for a click. Then find the part that changes the background or message. Explain how they’re connected.

One more experiment: change the message, predict the result, and test. Keep a copy before you make a change.

Done when

“I can explain my button.”

Your builder can predict what happens, test it, and point to the code responsible. Making a result is the start. Understanding it is the discovery.

A green paper rosette celebrates a completed project.

A little Level Up

What if it counted
the clicks?

Ask your grown-up to help add a counter—or find the one in the starter file. Predict the number before you click three times. Where is that number stored?

Keep this one at your table

Leave names, school details, photos, passwords, and contact information out of your prompt and page. The grown-up reviews AI output before opening files. No publishing is needed for this quest.

Read the grown-up guide

Enjoyed that little discovery?

There’s a whole
project in here.

Explore the 14-quest Website Builder kit, from a first page to a little website you understand.

Meet Website Builder