Learning Goals 3 min
By the end of this lesson you will be able to:
- Open Scratch and point to the four main parts: Stage, Sprite, Blocks Panel, and Script Area.
- Drag a when ⚑ clicked block onto the Script Area.
- Snap a move (10) steps block under it, then click the green flag to make the cat move.
Warm-Up 7 min
Welcome to Scratch — and to Arc 1: My First Scratch Scene! Over six lessons you'll build a little scene where a cat and a friend greet each other. It all starts here, with the very first move.
Quick-fire puzzle
Aisyah snapped these two blocks together. She clicked the green flag. What do you think the cat did?
when flag clicked
move (100) steps
Reveal the answer
The cat jumped 100 steps to the right. In Scratch, "steps" means pixels, and the Stage is 480 wide — so 100 steps is about one-fifth of the way across. Click the flag again, the cat moves another 100 steps. Click a third time, the cat hits the right edge.
Two blocks. One click. The cat moved. That's a Scratch program.
New Concept — the Scratch editor and your first blocks 15 min
The four parts of the editor
Open scratch.mit.edu and click "Create" (or open Scratch Desktop). You'll see four main areas:
| Part | Where | What it's for |
|---|---|---|
| Stage | top right | Where your sprite lives. The white rectangle is what the audience sees. |
| Sprite | on the Stage | A character that follows your blocks. The cat appears by default. |
| Blocks Panel | far left | All the blocks, grouped by colour: Motion, Looks, Sound, Events, Control, and more. |
| Script Area | middle | The big empty space where you drag blocks. Blocks here run when triggered. |
The Stage uses coordinates
The Stage has a tiny coordinate system. The middle is (0, 0). The right edge is +240; the left edge is −240. The top is +180; the bottom is −180. You don't need to memorise the numbers — just know that the cat starts at the centre.
Hat blocks vs stack blocks
Blocks come in different shapes. The shape tells you where the block can go.
- A hat block has a rounded top. It can only sit at the top of a script. Hat blocks start things. Example: when ⚑ clicked.
- A stack block has a bump on top and a notch underneath. Stack blocks snap below other blocks. Example: move (10) steps.
You can think of them like LEGO. A hat block is the special piece at the very top; the stack blocks click on underneath.
Why it matters
Every Scratch script you ever write starts with a hat block. Today you learn the most-used hat — when ⚑ clicked — and the most-used motion block. From this one pattern, hundreds of projects grow.
Worked Example — step by step, build it now 15 min
Open Scratch in a new tab. The cat is already on the Stage. We'll build a tiny project: click the flag → cat moves.
Step 1 — Find the Events category
In the Blocks Panel (far left), scroll down the round category icons. Click the yellow one labelled Events. The panel now shows yellow blocks.
Step 2 — Drag the hat block
Grab the when ⚑ clicked block. Drag it into the Script Area in the middle. Drop it anywhere — there's no wrong spot. It now lives in your Script Area.
when flag clicked
Step 3 — Find the Motion category
Click the blue category icon at the very top of the Blocks Panel. It's labelled Motion. The panel now shows blue blocks.
Step 4 — Drag the move block
Grab the move (10) steps block. Drag it close to the bottom of the hat block in the Script Area. A faint white highlight appears — that means it's about to snap. Let go.
when flag clicked
move (10) steps
Step 5 — Click the green flag
Find the green flag above the Stage. Click it. The cat shifts a tiny bit to the right — exactly 10 pixels. Click again. Another 10 pixels. Click ten times — the cat has now moved 100 pixels.
Step 6 — Change the number
Click on the white circle in the middle of the move (10) steps block. The number is editable! Type 50 and press Enter. Click the flag again. Now the cat jumps 50 pixels at a time.
Congratulations — you have written your first Scratch program. Two blocks, one click, observable behaviour.
What changed: compared to having no script (nothing happens when you click the flag), you now have a script that does something. The bigger the number in the move block, the bigger the jump.
The full assembled stack (your reference)
when flag clicked
move (50) steps
Try It Yourself — three small builds 12 min
Goal: Make the cat take a bigger jump. Build this stack and click the flag five times. Where does the cat end up?
when flag clicked
move (100) steps
Think: 5 clicks × 100 steps each = ____ steps total. Does the cat reach the right edge?
Goal: Make the cat move and turn. Add a turn ↻ (15) degrees block under your move block. (It's still in the Motion category — blue.) Click the flag a few times. The cat now spins!
when flag clicked
move (50) steps
turn cw (15) degrees
Think: After 24 clicks, the cat has turned 24 × 15 = 360 degrees. That's a full circle — the cat now faces its original direction again.
Goal: Make the cat say something after it moves. Click the purple Looks category. Find the say [Hello!] for (2) seconds block. Drag it under your turn block. Edit the message to Selamat datang! ("Welcome!" in Malay).
when flag clicked
move (50) steps
say [Selamat datang!] for (2) seconds
Think: You just used three different block colours — yellow (Events), blue (Motion), purple (Looks). Each colour is a different category in the Blocks Panel. Categories help you find blocks fast.
Mini-Challenge — get the cat across the Stage 5 min
"Race the cat to the right edge"
Without using any blocks you haven't seen today, build a script that gets the cat from the centre of the Stage all the way to the right edge.
It works if:
- You click the green flag just once.
- The cat ends up touching (or hanging off) the right edge of the Stage.
- You only used hat and Motion blocks from today's lesson.
Reveal one valid solution
Use a really big number in your move block. The Stage is 480 pixels wide, and the cat starts at the centre. So you need to move at least 240 steps to the right to reach the edge.
when flag clicked
move (300) steps
Any number 240 or above works. The cat will hit the right edge of the Stage and stop there. Try 500 — same result. The Stage won't let the cat go beyond its edge.
Sneak peek: next lesson, you'll learn repeat (10) — a smarter way to move "many small steps" instead of one big jump.
Recap 2 min
Today you opened Scratch, found the four main areas of the editor, and built a script with two blocks: a yellow hat that starts everything, and a blue motion block that does the action. You clicked the green flag and watched the cat move. That's the whole pattern — every Scratch project starts here.
- Stage
- The white rectangle (top right) where the cat lives and runs.
- Sprite
- A character on the Stage. The cat is a sprite. Sprites follow the blocks you give them.
- Script Area
- The big empty space in the middle of the editor. Drag blocks here to build scripts.
- Hat block
- A block with a rounded top. It must sit at the top of a script. Hat blocks start things.
- Stack block
- A block with a bump on top and a notch underneath. Stack blocks snap below other blocks.
- Green flag
- The button above the Stage that runs your scripts. Click it to start.
Homework 1 min
The 200-step cat. Build a 2-block stack that makes the cat move exactly 200 steps with one click of the green flag.
- Open Scratch (web or desktop).
- Drag when ⚑ clicked and move (200) steps into the Script Area. Snap them together.
- Click the green flag. Watch the cat jump.
- Take a screenshot of your Script Area (use your computer's snipping tool, or press the camera icon in Scratch Desktop's Backpack).
Bring back next class:
- A screenshot of your 2-block script.
- Your answer to this question, written in your notebook: "If the cat starts at the centre and moves 200 steps right, then 200 more, then 200 more — what happens on the third click?"
Heads up for next class: SCR-L01-02 tours the four areas of the Scratch editor — the Stage, the Sprite list, the Blocks Panel, the Script Area — and shows how to change a sprite's size, position, and direction without writing any blocks.