Get Started Coding in Scratch
Welcome to the first part of Juni’s Intro to Scratch series for complete beginners 8+. Let’s get started with the basics of Scratch and work on a short project to kick off this learning journey!
Watch the tutorial video to see how we code this game step-by-step, and continue reading this post for more details. If you're new to Scratch, first check out our what is Scratch coding post to learn more about how this coding language works and is great for coding for kids 8+. You can also make a Scratch account.
If this intro project seems a bit easy for you (this is for totally new coders), you can also check out our step-by-step Scratch coding tutorials for beginner, intermediate, and advanced Scratchers.
Here's a few we think would be great for you to try:
- How to make fireworks in Scratch (Beginners)
- How to make Scratch sprites move (Beginners)
- How to make a game on Scratch step-by-step (Beginners)
Who is this project for?
This project falls under our Juni Scratch Level 1 coding class for kids, tailored for completely new coders. This absolute beginner Scratch tutorial is for students that want an easy introduction to Scratch project, about 9 code blocks long. Students should have basic computer and typing skills beforehand to get the most out of this project.
For learning outcomes, you'll get a lot of practice with user input, event listeners, and conditionals. This project is estimated to take beginners about 30~40 minutes, but you should move faster or slower at your own pace!
Project Demo
Before getting started, see how our finished project works for reference. Watch the video, or click run to see the project yourself!
You can also view my project solution code if you get stuck.
What to keep in mind before you start:
- To get the result of the user’s answer, look for the teal “answer” bubble.
- When using the
____ = ____green equality operator, the user's answer (what the person using the project answers) must be exactly the same as the word on the right hand side. Spelling and capitalization count! (“Desert” would not be the same as “desert”)
Steps to Code the Project:
- Create a Scratch account and create a new project.
- Set up your project by adding a sprite.
- Select your desired backdrops.
- Ask the user for a location and change the backdrop to the specified place.
- Do this for 3-5 locations/backdrops!
Step 1. 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!
Step 2. 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.
Step 3. 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.
Step 4. Use code blocks to ask the user for a location, and change to the backdrop they ask for.
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.
Event Listeners
Scratch projects typically start with a block labeled: when green flag 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 green flag 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 green flag 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 green flag clicked event listener. We’ll want to start with a plain, white backdrop, so change the backdrop name to “backdrop 1”.
User Input
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.
Click 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.
Conditional Statements
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!
Step 5. Do this for 3-5 backdrop locations!
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.
You're Done! Now Keep Practicing
Now, when you click 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.
To keep practicing and learning, please check out all of our step-by-step Scratch coding tutorials on our blog.
Some good ones to start with from here are:
- How to make fireworks in Scratch (Beginners)
- How to make Scratch sprites move (Beginners)
- How to make a game on Scratch step-by-step (Beginners)
Discover Scratch Coding Classes for Kids
Juni Learning offers project-based Scratch Coding Classes for students 8-11 to get started with coding. Our Scratch curriculum prepares students with full mastery of the Scratch environment, and prepares them to advance into coding in more advanced, text-based languages like Python.
- Game Superstar (Scratch Level 1): introduces computer science fundamentals such and teaches students how to build and design their own Scratch games.
- Game Master (Scratch Level 2): covers more complex concepts like nested loops, complex conditionals, cloning and more in preparation for learning more advanced coding languages.
Read more about how Juni teaches coding for kids, or speak with a Juni Advisor by calling (650) 263-4306 or emailing advisors@learnwithjuni.com. You can also read more about how we use Scratch to teach beginner coding.
Eva Su is a senior studying Data Science at UC Berkeley and is a senior instructor at Juni Learning for Python, Java, Scratch, AP Computer Science, and USACO. In her free time, she likes going on boba adventures, watching Broadway musicals, and taking fat naps. Fun fact: she runs a Top-Rated eBay store with customers from all 50 states and 4 continents!
