Scratch: A Coding Language for Kids
Computer Science at its core is based on logic and problem solving. Without strong logical thinking and problem-solving skills, even an adult coder would be unable to code any functioning programs or use any type of coding language.
Scratch, a coding platform created by MIT students, is one of the simplest ways for kids to learn these crucial skills while also jumping into fun coding projects right away. Read why Scratch is great for teaching logical thinking and problem-solving.
At Juni, we use Scratch’s drag-and-drop code editor to teach our youngest students. Even though Scratch is great for younger kids, you can still use it to build complex projects - and even program robots like the one in the picture above!
This project and our Scratch Courses are both designed for kids ages 8-11, with no coding experience. Parents can accompany children for this tutorial if needed.
It’s important to get excited and have fun while learning coding - let’s start with a creative and interactive project! Today we’ll be building a computer program that changes scenery whenever a character goes to different places like a “Desert” or “Jungle.”
Ready to get started? Continue reading below!
Setting Up Scratch
Start off by making a Scratch account.
Once your Scratch account is created, click the Create button in the left top corner to get started with your new project. Your screen should now look something like this:
The left side of the screen holds all our blocks of code. Every block is like a word - think of it as if we are making sentences out of blocks that tell the computer what to do.
Scratch blocks are organized into categories in the left column like: Motion, Looks, Sound, Events, Control, Sensing, Variables, and My Blocks (personalizable blocks). You don’t have to understand exactly what all of these do yet, but just know that you can find different types of blocks here.
The middle blank section is our script. This is where we’ll drag and drop our code blocks to create a “sentence,” or in CS, what we call a program. A program is a collection of instructions, or code, that tells a computer what to do.
The top right section is our stage, where we see what the computer does after it reads our program. Right now in the stage you should see our orange friend, the Scratch Cat. The stage will change based on our code.
Our script determines how the Scratch characters, or sprites, and background locations, or backdrops will change in our stage. To the bottom right of the stage are two blue circular buttons (pictured below). The left button adds a new sprite to the stage, and the right button selects a new backdrop.
We’ll use all of these soon - just scroll back here if you forget anything!
Choose Your Sprite
Now we can get started with our project!
Let’s first make Scratch Cat disappear by clicking the small x on top of the sprite’s icon.
Next, click the left blue button under the stage to choose an interesting character. Your screen should now look something like this:
Choose a new sprite by scrolling through and selecting your favorite one - ours is Dot!
After selecting, your new sprite should now appear in the stage! You can drag your sprite around with the mouse, so play around with it to get familiar with your sprite.
Select Your Backdrops
Our next step is deciding what backdrops we want our sprite to explore. By clicking the right blue button under the stage, you’ll end up with this screen:
Pick your three favorite backgrounds - ours are Desert, Farm, and Jungle! You will need to click the blue button again each time you add a backdrop. After adding three, you should see a label that reads "Backdrops 4” under Stage in the lower right of your screen:
There are now four backdrops in total, including the plain blank one you started with. If you want to change your backdrops at any time, just click the Backdrops tab next to Code in the upper left to edit your choices.
Start Building Your Code
Now it’s time to start putting our code together, to tell the computer what to do with our sprite and backdrops.
We’ll be dragging and dropping some of the blocks and categories into our stage, like we talked about earlier. Since it’s your first time, we’ll explain what the blocks we use mean as we go through each step.
Scratch projects typically start with a block labeled: “when ⚑ clicked”. Blocks in the Events category, also called event listeners, are usually labeled with “when” plus some event. You can think of them as telling the computer what it should do when some event happens. These events could be clicks, key presses, or when something changes.
The when ⚑ clicked block in particular tells our Scratch program to do something when we click the green flag (located above the stage). Since we are putting it at the start of our code, it will make sure that all the code below it runs when we click the green flag.
Click on the yellow Events category, and drag the when ⚑ clicked block out into the script.
Next, we will be using a block from the Looks code category. These blocks help us do actions to control a sprite’s appearance, like changing colors. Because we are changing our backdrops in this project, we want to use a Looks block that is related to backdrops.
Click on the purple Looks category, and drag out the block labeled “switch backdrop to (name of backdrop)”. This block might be labeled something like “switch backdrop to Arctic.”
Drag this new block into the stage to connect it under the previous when ⚑ clicked event listener. We’ll want to start with a plain, white backdrop, so change the backdrop name to “backdrop 1”.
If a program is interactive, that means that at some point in the program the computer will need the user (in this project, that's you!) to tell it what to do next. In this way, the program “interacts” with the user, and the user’s input will affect how the program will run.
Almost everything we use today is interactive, from apps like Instagram (where the user taps to like photos or types to send comments) to games like Minecraft (where the player uses a keyboard to control their character).
In our next step, we’ll be making our program interactive by asking the user what location they want to have for their backdrop. To do this, we’ll be using blocks from the Sensing code category that help the computer “sense” or listen for user input.
From the light blue Sensing category, let’s drag out the block that says “ask ____ and wait” and connect it to the previous code block. This block will bring up a box that asks the user a question, and then waits for them to enter an answer.
By default, the white bubble in the label will say “What’s your name?”. Let’s change “What’s your name?” to “What location would you like?” so the user will understand what we are asking. It's important to make sure that we code our project in a way that users can understand what our program is doing.
In the blocks column, there is a small, round block labeled "answer” right under the ask and wait block. This block will save the user’s response to our question. Let’s drag it into our script as well.
Press the green flag, and make sure your script and stage look like this!
In the stage, type in one of the backdrop locations you selected (i.e. desert) and click on the blue check mark. Now, the answer code block will hold on to that response.
We want the program to change our backdrop, based on the user’s answer. For example, if the user responds with “desert,” we’ll want our backdrop to change to a desert scenery.
This is where blocks called conditional statements will come in. A conditional statement is a simple "if..., then..." structure. For example, your mom might say “If you finish all your dinner, then you can have some dessert.” The part starting with “if” is called the condition.
Conditional statements live in the orange Control code category (because they help us “control” what happens and when). Drag out an if.. then block, and connect it under our ask and wait block.
We want to check if the location the user gave is one of the backdrop locations you selected. For this, we need to use something called an equality operator. This operator will help us tell the program our condition for our desired outcome: if answer = desert, then switch backdrop to desert. You can think of the equality operator as an equals sign saying one thing “is” or “equals” something else.
Now, we need to make our condition by using the equality operator block, found in the green Operators code category. It will have two white bubbles, with an equals sign in the middle (pictured below).
Drag in the small answer code block into the left side of our equality operator, and type in one of your backdrop locations into the right side. Your equality operator should now look like this.
To finish up our conditional statement, we will have to tell our program what should happen if our condition is met. This will be the then part of the structure. Use the same purple switch backdrop to (backdrop name) block we used before from the Looks category to switch our backdrop to the correct one. This is how your code should look!
Now, all that's left is to repeat this conditional statement for the other two backdrop locations you chose!
By right clicking (ctrl + click for Macs, cmd + click for PCs) on the orange if… then block, you can select “Duplicate” to make copies of the statement. You can then change each of them to your other backdrop locations.
Your final program should look like this.
Now, when you press the green flag and respond with any of these three locations, the backdrop will change in the stage. Our fun, interactive program is complete!
Hopefully, this project was an enjoyable introduction to the beauty and logic of Computer Science. Programs can get far longer or more complex than this, but their underlying principles can truly be as simple as the event listeners and conditional statements we used above.
Now you can build your own projects with Scratch with what you’ve learned! In the upcoming weeks, we’ll be sharing more step-by-step Scratch tutorials and challenges with different blocks and more interesting projects. Stay tuned - and keep on coding!
If this Scratch project was easy for you, we recommend trying our higher level Intro to Python Bootcamp. You can also find more coding tutorials and lessons on our Home Learning Calendar. If you need help or have any questions about this project, feel free to contact us at firstname.lastname@example.org.