🤖Vibe Coding·15 min·Sample Lesson

Watching the Computer Listen: Your First AI Coding Chat

Type the words "make the ball bounce" into a box on a screen. Press Enter. A few seconds later, a little ball starts bouncing right there on the screen. Nobody wrote lines and lines of tricky code by hand — a kid just TALKED to the computer, and the computer built it! This is called vibe coding.

What You'll Learn

- What it means to "chat" with an AI helper to build something - How to watch what happens after you type a request - Why using clear, simple words helps the computer understand you - What to do when the first try doesn't look right

You Talk, the AI Builds

When you vibe code, you type what you WANT in plain words, like "make a red button" or "draw a cat." The AI reads your words, thinks about them, and writes the code for you. You don't need to know special code words to start — you just need to say clearly what you want to see or happen.

Watching Closely: What Changes on the Screen?

Good vibe coders are careful watchers. After you type a request, look at the screen: Did a new shape appear? Did a color change? Did something move? Watching what happens each time helps you understand what your words made the computer do.

Say It Simply

Short, clear requests work best: "Make the star yellow" is easier for the AI to understand than a long, mixed-up sentence.

When It Doesn't Look Right

Sometimes the first try isn't quite what you pictured — maybe the ball is too big, or it's the wrong color. That's normal! You just type again: "make the ball smaller" or "make it blue instead." Vibe coding is a back-and-forth chat, not a one-shot magic trick.

❓

What do you do FIRST when you want to vibe code something new?

❓

The bouncing ball on screen is too fast. What should you do?

Match each request to what most likely happens on screen.

Terms

"Make the ball red"

"Make the star spin"

"Make the button bigger"

"Add a second ball"

Definitions

The button grows in size

The ball changes color to red

A new ball appears next to the first

The star starts turning around

Drag terms onto their definitions, or click a term then click a definition to match.

🎯

My First Vibe Coding Chat

With a grown-up, open a vibe coding tool. Type one simple request, like 'make a blue circle.' Watch the screen and draw a picture of what appeared. Then type one more request to change something about it (color, size, or movement), and draw what changed. Bring both drawings to share with your class.

Want to keep learning?

Start Learning Free