Prologue:
If you’re reading this article, you’re most likely a beginner in the world of coding and will probably fall into one of these two groups:
- You want to learn how to code but don’t know exactly where to start.
- You want to learn how to code and want to start with advanced languages like Python or JavaScript because starting from Scratch or other small languages is kiddy and won’t teach you anything.
For those of you in group 1, I appreciate and am excited that you decided to start your coding journey! You guys can skip to Chapter 1!
If you fall into group 2, sorry to be the bearer of bad news, but starting with advanced languages like Python or JavaScript isn’t the best idea. I really recommend you start from Scratch (pun intended). If you don’t believe me, listen to my explanation on why I believe this in Chapter 1.
Let’s begin.
Chapter 1: What is Scratch?
So what is Scratch and why do I recommend it so much? Scratch is a website with a built-in block-based programming language designed to help newcomers learn the basics of coding while having the ability to create complex programs!
Now you might be thinking, “Hold up Raeef, you seriously expect me to start coding from a programming language literally designed for kids?”
Right on my friend! As kiddy as Scratch may seem, it actually does a really good job at teaching the fundamentals to someone who doesn’t have much prior experience in computer programming. Think of Scratch like learning the English alphabet, many of y’all want to start writing whole essays and stories from the beginning, but you first gotta learn the letters. Just like how you first need to learn Scratch before you start making the next Facebook! Another thing I should mention is that you really only need to spend a couple days on Scratch to learn it and get the fundamentals down. I don’t expect any of you to be coding in Scratch for months. In my next two blogs in this series, I will walk you through a simple and an advanced Scratch project! Just by completing these two projects you’ll be ready to move on to advanced programming languages!
Now to begin, let’s navigate to the Scratch website here: https://scratch.mit.edu/
You are now at the Scratch homepage! Before we can get scratching, you need to create a Scratch account! Click the “Join Scratch” menu option at the top of the page. Once you are here, you should see a form like this:
Go ahead and create a username and password for yourself.
IMPORTANT NOTE
You will NOT be able to change your username later! Don’t pick something cringy or embarrassing!
Then select the country you live in from the dropdown menu. The country you put here will be displayed on your public profile. You can change the country later though.
Then you will be asked to enter your birthday and gender. Finally, enter in your email. Congrats, now you have your very own Scratch account! Let’s move on.
Let’s take a look at an example Scratch project here: https://scratch.mit.edu/projects/355809627/
Navigate to the link above and once you are at the project’s page, wait for it to load. Then click the “Green Flag” to run the project!
You should now see a red car on a road appear on the screen. Use the up and down arrow keys on your keyboard to move the car up and down. In a few seconds you will also see cones and gas tanks start appearing on the road. Move the car to avoid crashing into the cones but don’t avoid the gas tanks as you need to hit them in order to refuel! At the top of the screen you will see two different counters called “Score” and “Fuel”. Your score counter will increase as long as you stay alive in the game. The fuel counter will steadily decrease as the game goes on, and you need to collect gas tanks before the fuel level hits 0. If you run out of fuel or hit one of the cones, your game will end. See how far you can get and leave your score in the comments section below the project!
I hope you now have a basic idea of what Scratch projects are like. You can take a look at more Scratch projects that other users have published in the “Explore” menu option at the top of the website.
Now let’s take a look at the Scratch code editor. This is the exciting place where you will code and construct your own projects!
Chapter 2: How do you use Scratch?
Find and click on the “Create” menu option and you will enter Scratch’s code editor. This is the place where you will code and design your Scratch apps.
When you first load in you will see code blocks to your left, code area in the middle, and the sprite/backdrop menu with a project preview box on the right.
Scratch is a drag-and-drop programming language meaning that you will code using the blocks instead of having to painstakingly write long lines of code.
Scratch is very helpful when creating graphical apps with objects like characters, backgrounds, buttons, text, etc.
Scratch organizes objects into two main categories:
- Sprites: These are basically individual objects that will contain their own design, code, and purpose. Sprites can move around, turn, twist, hide, spin, change color, play music, float, move around the screen, etc.
- Backdrops: A collection of backgrounds, it will help you change the setting/scene of your project. Backdrops can also contain their own code and functionality. They can also hide, change color and play music like Sprites. However, unlike Sprites, Backdrops lack the ability to move and are treated as a singular entity (I will explain this later).
As an example, let’s say you were to make a racing game with funny little racing drivers. Your sprites could include the racing cars, racing start light, menu buttons, tire marks, the drivers, and driver dialogue. Your backdrops may include the racing tracks, a main menu, a screen saver, and a title page. It’s absolutely crucial that you understand when to use a sprite or a backdrop for what you are trying to do. Sprites are generally more powerful because they are dynamic and have motion capabilities. Backdrops are more static and are meant to be used by switching from background to background. You can have multiple sprites each with their own looks, code, and functionalities. However, backdrops are a singular entity meaning there is only one code area for all backdrops.
The code editor makes coding projects really easy. You simply drag code blocks together in the code area inside whatever sprite or backdrop you want. You can add more sprites and backdrops whenever you need them and test run the project in the project preview box.
Right now in your project, you should be inside the Scratch cat sprite called “Sprite 1”.
Let’s create a small simple project to begin our programming journey! On your left, in the code blocks, click the submenu with the yellow dot that says “Events”.
Drag the when block to the right into the code area. Then go back to the blue “Motion” submenu and drag the 
move 10 steps block underneath the when . These two blocks should now snap together. Then go to the project preview box and click the
Did you see it? The cat moved! If you didn’t, just click the green flag again! Cool right? Let’s make it go faster! In the move 10 steps block, click the white circle where it says 10 and change it to a large number like 50. Then run the project again!
If you ran the project many times, you might have noticed the Scratch cat start to run off the screen. This is an easy fix, from the “Motion” submenu, find the go to x: (...) y: (...) block. Drag the block in between the when clicked and move steps blocks and let it snap into place. Then change the x and y numbers inside the block to 0 and 0 to center the cat at the origin.
Then run the project. Notice something weird? If you think the cat doesn’t appear to be moving, you would be right! Let’s try to debug the code. Look right above the sprite menu, where the cat sprite’s x and y coordinates are written. If you look closely you’ll see the x value is set to 50. This means that our code did indeed move the cat 50 steps.
What happened was that the code executed so fast, the screen didn’t even render the cat to move from the origin. It’s important to understand that code executes almost instantly. However, in our situation we would like to see the cat start at the origin and move 50 steps, so is there any way we can have a brief pause in between those two blocks? Yes, there is with the wait (...) seconds block from “Controls”. Insert the block as it is shown below and change the wait number to 3.
Now when you run the program, you will see the cat start at the origin and then move 50 steps after 3 seconds! Since the wait block is pausing the program, Scratch will now render the cat to actually move.
Congrats! You have written your first Scratch program!
Chapter 3: Future steps
In the next part of the “How to Start Coding” series, I will walk you through how to create a simple Scratch project in a video. I hope that my walk-through will help provide some more guidance on how to use Scratch. Until then, keep playing around in the code editor! Try new blocks, add more code, and if you are feeling up to it, challenge yourself and see if you can add a new sprite!