Intro to Scratch Coding for Kids | Beginner Project | Juni Learning

POSTED ON MARCH 31, 2020

Subscribe to our newsletter

We’ll send you our favorite blog posts, tutorials, events, and more!

Your Email

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:

Scratch Platform

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.

Buttons

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.

Sprite icon

Next, click the left blue button under the stage to choose an interesting character. Your screen should now look something like this:

Character Selection

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:

Scratch Backdrops

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:

Scratch Backdrops

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.


Event Listeners

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.

Scratch Backdrops

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”.

Scratch Backdrops


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.

Press the green flag, and make sure your script and stage look like this!

Scratch Backdrops

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.

Scratch Backdrops

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!

Scratch Backdrops


Almost There

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.

Scratch Backdrops


You're Done!

Scratch Backdrops

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!

Want to keep learning?

We hope you enjoyed this project tutorial!

To keep practicing and learning, please check out all of our coding tutorials on our blog.

Need help?

Looking up your coding questions is one of the best ways to learn!

Another great way to learn is from an experienced coder or instructor. Juni CS instructors work closely with students ages 8-18, and are specially trained to adapt to each child's unique learning style, pace, and interests.

Read more about our coding courses and curriculum, or get started with our Admissions Team to learn which course is best for your child’s coding journey. You can also read more about how we use Scratch to teach coding.


Related Reading