Your First AI-Generated Code

Time to meet code — instructions a computer follows, one exact step at a time.

Try it first

Code Detective

Here's some code a code-generation tool might create if you asked for a simple webpage (this is an illustrative example, not a live tool). Each round highlights one line — guess what it does before checking the answer.

      <!-- This is a note for humans, the computer skips it -->
      <h1>Hello, Explorer!</h1>
      <p>Welcome to my very first webpage.</p>
      <img src="cat.png" alt="A photo of a cat"> <!-- swap in a picture file you've actually saved -->
      <button>Click me!</button>
    

Notice how each line does ONE specific job? That's how code works — small, exact instructions, stacked together to build something bigger.

The idea

So what IS code, really?

Code is a set of step-by-step instructions written in a language a computer can follow exactly. When you ask an AI code tool to build something, it generates the code the same way a chatbot generates text — using patterns it learned. But once the code is written and you run it, it's different from a chatbot reply: the computer follows those exact instructions in order, every single time, with no guessing.

You don't need to memorize an entire coding language to start reading it. Look for words that hint at meaning — like "button," "image," or "heading" — and read from top to bottom, one instruction at a time.

Byte says

Just like with prompts, being specific about what you want — "a webpage with a heading, a short paragraph, and one button" instead of just "make me a webpage" — gets you something much closer to what you pictured.

Now try it for real

Build Something Small

This activity happens in your own code generation tool — not on this page.

Want to plan what you'll ask for first? Draft your request here.

Saved right in this browser, on this device — it's just for planning, and never sent anywhere.

Ask a grown-up

Running or opening any AI-generated code, and installing any new tools or programs, should always be done with a grown-up present — even if it looks simple.

1Open your code generation tool with a grown-up nearby.
2Ask it to build something small and specific, using HTML, CSS, and JavaScript — like a simple webpage with a heading, a short paragraph, and one button, or a very simple mini-game. Remember specific + context + format from Lesson 4!
3With your grown-up, open and run the code in a safe, already-set-up environment. Never install new programs or tools without a grown-up.
4Look at the result. Does it match what you asked for?
5Try reading through the code it gave you. Can you spot any lines that look like the ones from Code Detective?
6If you want, ask it to change ONE thing — like the heading text or button label — and run it again.

Your turn

What did you build?

What did you ask your code tool to build, and what was one line of code you could actually understand? Was anything surprising?

This is saved right in this browser, on this device — it's never sent anywhere.

Recap

What you just learned

✓ Code is a set of exact, step-by-step instructions a computer follows in order — no guessing, no skipping.
✓ You don't need to know every detail to read code — look for meaningful words and go line by line.
✓ Always run AI-generated code with a grown-up, in an already-set-up, safe environment — never install new tools on your own.
✓ Being specific when you ask for code — just like with prompts — helps you get something closer to what you pictured.

Show what you know

Quick Quiz

10 questions, picked at random from a bigger question bank — so if you take it again, you'll likely see a different mix. Let's go!

Up next

Lesson 9 · Fixing Things: Debugging with AI

You'll learn that mistakes in code are normal — and how to fix them.

Go to Lesson 9 →