Intro to Coding with Scratch – Block-Based Coding Tutorial

Are you or someone you know a first-time coder?

If you’ve never coded before, finding the right place to start can be difficult. However, no matter the age, a good first tool/language to explore is Scratch.

Scratch is a visual coding language that allows for the creation of digital stories, games, and animations by anyone who’s interested – including kids. Scratch is also the world’s largest coding community for children and is available for free in more than 70 different languages.

In this tutorial, you’ll learn the basics of coding through the implementation of a mini-project that animates the movement of a cat sprite in Scratch.

If you’re ready to dig in, let’s get started!

Projects Files

The code for our final cat animation can be downloaded here: Cat Animation in Scratch. Although we will guide you along every step of the way, it’s good to also have the complete code so that you can compare it to your version at any time!

We also recommend you check out our Jr Coder Mini-Degree (for learners) or Zenva Schools (for teachers) to explore more topics pertaining to coding with Scratch.


Get 250+ coding courses for



A Closer Look at Scratch’s Interface

To start this tutorial off, we’ll first explore how to create Scratch projects and explore the interface!

Creating a new Project

First off, head over to the Scratch homepage then click on ‘Create‘:

Scratch homepage interface

This will initiate a new project as seen below:

New project in Scratch

Game Stage

At the top-right corner, we have the game stage where we can see our animation running:

Game stage in Scratch

We can click on the green flag icon above the game stage to start our animation and on the red button to terminate it. Note that as we don’t have any code to run just yet, it only shows its default cat sprite for the moment. By clicking on the rightmost icon above the game stage, you can also put it in fullscreen mode:

Fullscreen mode in Scratch

Sprite Properties

To alter the cat’s position inside the game stage area, just drag it around as you wish. You’ll see that its x and y coordinates in the sprite properties panel vary according to its current location:

Sprite properties panel in Scratch

Here in the properties, we can also rename the sprite to ‘Cat’ and change its size and direction too. To hide or display your sprite, click on the eye icons next to ‘Show’.

At the bottom of the right-hand side of the screen, the sprite area shows us all the sprites we have in our project (only the cat, in our case). To add more sprites, click on the plus button:

Adding a sprite in Scratch

From there, you’ll have a huge variety of options to choose from. When you add a new sprite to the project, it will appear next to the previous ones you already had:

Multiple sprites in Scratch

To delete a sprite, just click on the trash bin icon that’s on top of its thumbnail:

Deleting a sprite in Scratch

Changing the Background

Next to the sprites, there’s the backdrop area, where you can select a different background for your animation:

Changing the background in Scratch

Changing our default white background to ‘Room 2‘ (under the ‘Indoors‘ filter), we’d have:

'Room 2' background in Scratch

Block Palette

On the left side of our screen, on the other hand, we have all possible blocks of code that we’ll be using in our code. Each block contains a single instruction for the computer to execute and is assigned to one of the various categories shown below:

Block palette in Scratch


And finally, to the very center of the screen is the workspace, where we’ll be placing all our code blocks:

Workspace in Scratch

Making our First Code

Now that we’ve grasped the Scratch tool, it’s time to move on to the main part of making a Scratch project: block-based coding.

To start our project, let’s delete the cat sprite and add a chick character (or feel free to add the sprite of your choice):

A chick sprite in Scratch

In Scratch, we build our program using blocks that we can select from the block palette on the left side of the screen. Let’s begin by clicking and dragging the first block from the Motion category (the one that says “move 10 steps“) to the workspace:

Adding a code block to the workspace in Scratch

Now, every time you click on this block the chick sprite moves 10 steps in the game stage. You can check its new position by the updates on its x coordinate in the sprite properties panel.

Note that you can also change the number of steps the chick will move each time by entering a new number directly in the block itself:

Altering the code inside the block in Scratch

Although we already have a line of code, when we click on the green flag to start the program nothing happens. This is so because we need to add a starting event in order for our character to move when the green flag is clicked. To do it, go to the blocks under the Events category:

Adding events to the code in Scratch

Then, drag the “when green flag clicked” block to the workspace and place it on top of the move block that is already there:

Adding 'when green flag is clicked' event in Scratch

With this, whenever we click on the green flag our character moves 10 steps to its right.

Adding More Blocks

On the blocks palette, go to Looks and drag the “say Hello! for 2 seconds” block to the workspace, connecting it under the move block as follows:

Making the sprite say Hello! in Scratch

Note that the blocks fit together perfectly. We can change both text and duration if we want:

Altering contents of the block command in Scratch

Clicking on the green flag, we see it is working correctly:

Running our code in Scratch

Go on and add the “think Hmm… for 2 seconds” block to our code as well:

Adding more Looks blocks to our code in Scratch

Order of Execution

It’s important to notice how all these commands are always executed in order, from top to bottom:

Order of execution of the commands in Scratch

First, we are moving the sprite 10 steps, then we make it say ‘Hi’, and at last we make it think ‘Hmm’.

If we were to place the think block before the say one, we’d see that the character would think ‘Hmm’ first and only then would say ‘Hi’:

Inverting the order of two blocks in the code in Scratch

Remember that if you want to stop the program at any time, you need only press the red icon next to the green flag.

Adding Sounds

Let’s add a sound to our program. Bring the “play sound until done” block from the Sound category to the workspace:

Adding Sound blocks in Scratch

The suggested sound ‘Chirp’ is matching the sprite we’ve chosen, so it may differ for you.

At last, let’s move the chick again by 20 steps:

Our first program complete in Scratch

Play the animation one more time to see the whole execution take place.

One Script for Each Sprite

Bear in mind that our code is only being applied to the chick sprite. If you add a new sprite, the workspace will appear blank for that sprite while our code remains there normally for the chick:

Different sprites have different codes associated to them in Scratch

And just like that, our first computer interactive program is done, and it already responds to user input by moving our character on the stage!

Algorithms and Flowcharts

We’ve covered a lot of ground in how the block-based coding of Scratch works. However, you might be asking, “Why” and “How” we knew what blocks to use. For that, let’s take a step back and discuss one of the most fundamental aspects of coding.

What is an Algorithm?

You may not realize it, but you have just created and executed an algorithm! Algorithms are everywhere and are not only related to computer science stuff. An algorithm is merely a sequence of steps that solves a real-world problem. In this sense, coding or programming is simply the process of making algorithms for a computer to execute.

An example of an algorithm from our daily lives can be something as common as making a piece of toast. It could be represented by the following steps:

  1. Put a slice of bread into the toaster
  2. Set the toasting level
  3. Lower the lever
  4. Wait until the toast is ready
  5. Safely remove the bread from the toaster

As you can see, an algorithm lists all of the steps that are needed in order to achieve the desired outcome. In other others, an algorithm is nothing but a set of instructions that need to be followed in a specific order!


Algorithms can be visually described by a flowchart. Our toast example above would produce this flowchart here:

Flowchart on how to make a toast

We specify the start of our algorithm with a ‘Begin‘ block (in blue) then proceed to place statement blocks (green rectangles), each containing one of the steps of our algorithm. We finish it by adding an ‘End‘ block (also in blue) to point out where the algorithm ends. Note that although we’re using specific colors in this tutorial, they are not part of the flowchart convention. Flowcharts don’t need to have any particular colors.

Flowcharts are useful for code documentation and to allow us to check that we’ve implemented everything correctly, and have not skipped any of the necessary steps of our algorithm. With all this in mind, let’s now create a brand new project so we can move on to making our first animation in Scratch!

Using Coordinates

You may have noticed in the above section, we also mentioned the “x coordinate”. Before we proceed to our final first project, let’s talk about this concept so you understand why it’s important to moving sprites.

We’re going to use coordinates to move and position our sprite on the screen. For every spot on the game stage, we have a corresponding value for x and y that form the coordinate for that particular point in the grid. Coordinate (0, 0), also known as origin, is right at the very center of the game stage:

Cat sprite located at origin in Scratch

To help us better visualize how coordinates work, let’s choose a new background. Click on the ‘Choose a Backdrop’ button and search for “coordinates“, then select ‘Xy-grid‘:

'Xy-grid' background in Scratch

This background allows us to see the values of x and y for the entire stage area:

X and y axes in Scratch

The X-axis values increase as we move to the right and decrease to the left, so if you move left past zero you’ll have negative values for x. Similarly, values of y increase as we move the sprite up and decrease as we bring it down the game stage past the X-axis.

You can also enter specific values for one axis or both axes and the cat will be repositioned automatically:

Updating the sprite's coordinates in Scratch

Cat Animation Project

Now that we have a good understanding of Scratch, we’ll put everything to the test by making a Scratch animation involving simple sprite movement.

Before we step into the actual code for our new project, let’s rename it to ‘Cat Animation’ at the top bar:

Renaming our project in Scratch

For this project, let’s change the background once more to ‘Bedroom 2‘:

'Bedroom 2' background in Scratch

We’re choosing a new backdrop because we want to make our cat sprite move to the drawer, later to the computer desk, then to the window, and lastly to the bottom right corner of the carpet of the bedroom.

For our animation to start when the player clicks on the green flag button, let’s initiate our code by adding the event block for when the green flag is clicked:

'when green flag clicked' event in Scratch

As we want to have our cat positioned by the bed once the animation is started, we can use the “go to” block (from the Motion category):

'go to' block in Scratch

To know which values for x and y to enter, we can place the cat where we want it to be at the start of our animation (in this case, on top of the bed) and then use the same coordinates shown in the sprite properties panel in the motion block in question. That is so because if you manually move the sprite around in the stage and then proceed to use any block that has the sprite’s coordinates, the block will already have the sprite’s updated location on it. Also, note that each category has a color, so, when you see a block you can automatically identify from which category that block is.

Now if we click the green flag icon, the cat is moved to the bed straight away:

Sprite moved to bed in Scratch

Next, we want to move the cat to the drawers next to the bed. Here, we’re going to use the “glide” block instead:

Using a 'glide' block in Scratch

The glide block takes the amount of time indicated in seconds to move the sprite, thus it’s not immediate as the go to block.


Now that we’ve shown you the basic process, try the rest yourself first! Update the coordinates and complete the remaining steps:

  1. Glide the cat to the computer
  2. Glide the cat to the window
  3. Glide the cat onto the carpet

All moves should take 2 seconds each. Don’t worry if you get stuck – we’ll cover the final code next.

Challenge to move the cat to target locations in Scratch

Final Code

The solution to the challenge is as follows.

Let’s add another glide block to our code, and move the cat to the computer:

Moving the sprite to the desk in Scratch

Note that we’ve changed the duration of our first glide block to 2 seconds as well just so it matches the following glide blocks we’ll have.

Repeat this process for the window and carpet:

Final code for our cat animation in Scratch

Our code is now complete! Running the code we see that everything goes as expected:

Running our code in Scratch

In the end, the cat is standing on the carpet by the bottom right corner of the bedroom.

If you have solved the challenge in a different manner, that’s fine! Quite often there is more than one way to do the same thing in programming. In case you couldn’t solve it, don’t worry as you can always keep practicing now that you’ve seen how the challenge was solved!

You can run our cat animation project by heading over to the public project page at

Cat Animation Flowchart

Finally, let’s check the flowchart for our animation project:

Flowchart of our cat animation Scratch project

For this flowchart, we’re using a new type of block (the one in orange) which can be used for user input/output, such as waiting for the user to press a button (as is the case above) or displaying a message to the user.


Congratulations on reaching the end of this tutorial! By now you not only have coded your first program in Scratch, but have also already created your first animation! You also have learned about algorithms and how to create flowcharts to better visualize the steps being taken.

Coding is an important skill that can be developed at any age and is being included more and more in schools in general. It improves creativity & problem-solving, and can offer a wide range of careers worldwide for those who take it professionally. Likewise, Scratch is used throughout the globe across many different age groups. With its intuitive drag-and-drop interface, it’s easy to learn the basics of programming and practice coding by trying out the various types of blocks from all the available categories in the block palette.

If you want to build more interactive projects in Scratch, you can check out the Jr Coder Mini-Degree offered by Zenva. This curriculum covers a slew of different Scratch projects and programming principles to help expand your skills and give you a solid understanding of programming in general.

On the flip side, for teachers who want to use Scratch as a tool for their classroom, Zenva Schools can help you out. Zenva Schools is an online platform that offers coding courses for use in the classroom on a variety of subjects, including Scratch, Python, HTML & CSS, and Unity. With other features such as pre-mapped course plans and reporting, it can be a fast and easy way to introduce students to a myriad of important digital topics.

In any case, we hope that you continue to explore and create real-world programs and games – and most of all that you have fun while doing it!


FINAL DAYS: Unlock 250+ coding courses, guided learning paths, help from expert mentors, and more.