Skip to Main Content
University of York Library
Library Subject Guides

Coding: a Practical Guide

Block-based coding

Block-based coding

Want to code without typing (virtually) anything?

Block-based coding means that instead of typing a coding language, you drag and drop jigsaw-like pieces together to build things using tools like Scratch or Thunkable.

How does block based coding work?

Block-based coding works by dragging together 'blocks' of code to make programs that can do things. There will be a range of different kinds of blocks that can be used, and often these have hints (as with a jigsaw) on which will fit together.

Below is an example of some code from Thunkable, a tool that allows you to make simple apps. The different colours of the blocks show their different functions: the yellow block is an 'event', looking for when a button is clicked, and then the purple block connected to it is a sound block, and will play a sound when told to by the yellow block.

Thunkable code that says when Button is clicked do in Sound call Play
An example of Thunkable code to play a sound when a button is pressed.

Features of block-based coding

Whether you use Scratch, Thunkable, or another block-based coding tool, they tend to have similar features, mostly based around coding concepts that you'll find in typed coding languages as well.

They all tend to revolve around two elements: creating the visual interface that the user will interact with, and putting together the blocks that make up the code.

Designing the interface

Whether you're making a game, an app, or anything else, you're designing it with someone in mind, and they'll need a way of interacting with it. This is the interface and has different names depending on the tool you're using: in Scratch, for example, it's called the 'stage', whereas Thunkable uses different 'screens' in a main Design area.

You'll need to design the visuals and any features that need to exist in the interface. These might be things the user needs to click on (like buttons), visual elements (like backgrounds), or content (like text). Think about where these need to appear, what they need to look like, and if you need to set anything else (like whether or not they appear at first).

Making the code run

Whenever you're creating code to make a computer do something, it doesn't just know what to do: it also needs to know when to do it. Code has to be run, which is one way of saying that the computer follows those instructions, and usually this is done by telling the computer a rule for when it should run.

In block-based coding, this tends to be using event blocks, which are blocks that tell the computer which 'event' must occur for the code to run. These events are likely to be things like the user opening the app, pressing a button, or using another feature.

So you might have a block that says 'when button is pressed' and then you can connect other blocks to it that say what happens when that button is pressed.

Thunkable

Thunkable is a block-based coding tool for creating simple interactive apps, such as little games. It can also be used to add features like text-to-speech and image recognition, as it has blocks with specific features.

It's good for prototyping ideas and thinking about what you might need to make an app work, without having to learn one of the coding languages used to develop apps.

It's also useful for thinking about how you make an app functional for your users, as you can live test your app within your web browser to try out the features you give it.

A similar tool to Thunkable is MIT App Inventor, which is a block-based app creation tool focused on an education context rather than commercial apps. It has a different interface to Thunkable though the features are similar, so you might want to explore which is more suitable for your needs.

Key features of Thunkable

Thunkable has two sections: Design and Blocks.

  • Design is where you create the user interface for your app: what the user sees and interacts with. Drag components like buttons, labels, and text entry fields onto the screens and customise the attributes of these so they look how you want.
  • Blocks is where you create the code that tells your app how to function. Drag and drop blocks together to form code, sets of instructions for the computer.

When you're working in Design, you'll add components to screens, which are the different screens users will see in the app (a bit like different web pages). You'll also need to add navigation components, either through the built-in navigator options or by coding buttons so they will go to another screen.

When you're working in Blocks, there are different categories of blocks that can be put together. The shapes and colours suggestion what kind of block they are and which other blocks they might be able to connect to.

  • UI components blocks are ones that control the components you added in the Design section. For example, you might find blocks that allow you to tell the computer what to do when a button is pressed or to get the text entered in a text entry field.
  • Control blocks allow you to control what the code does using common coding commands like repeating actions and making IF decisions.
  • Variable blocks are how you can create values that are stored in the computer's memory and referenced by their name. These can be any value you need to use again in your code, like a score or what a user entered.
  • Groups of blocks like Math, Text, Lists, and Color blocks are how you can work with different kinds of values, like doing calculations, manipulating text and lists of values, and changing colours.
  • App Features blocks allow you to access more advanced features for your app to use, like generating or recognising speech or accessing the device's camera.

Exercises

Designing to go with our Thunkable workshop, these exercises get you building a dual purpose app that can say what a user types and also translate what they type - without typing any code!

Scratch

Scratch is a block based coding tool designed for beginners and education contexts, which allows you to create games, animations, and interactive stories.

Scratch example with a cat character that moves when you click a button
Scratch allows you to control things on the screen, such as getting the sprite to move or a sound to play.

To use Scratch, you sign up for a free account on Scratch's website and then start building code in your web browser. You can create your own coding projects or view and 'remix' other people's to see how they work.

Scratch has some of its own tutorials, or you can use our Scratch materials below to get started using it.

Full Coding with Scratch slides on Google Slides

Coding with Scratch cheat sheet (and guide to blocks)

Exercises

If you want to try out first looking at Scratch projects, trying out building one, and then thinking up your own ideas, this Scratch exercise sheet will give you the prompts to move from exploring other creations to making your own.

Exercises

Elsewhere on the page, you'll find the resources and exercises for learning Scratch and Thunkable, if you want to try out either of them.

If you want to try out block-based coding with a creative focus, we've also developed a session for creating a point and click game in Scratch. Work through the slides and then use the walkthrough to create a game that you can then start to adapt if you want!

What to do next

Once you've had a go learning Scratch or Thunkable, you might want to build more complex things with them, or move on to a typed coding language.

Both tools have their own tutorials, which get harder in difficulty and are worth trying out. Other websites can have free tutorials and courses too, sometimes aimed at how to teach the tools to children.

Or you might want to apply your knowledge to another coding language. Check out the other coding languages on this guide and think about what you want to do with coding. You might want to further your games by building them not in Scratch, but in something else. On FutureLearn there's a free course on how to move from using Scratch to using Python which might give you some ideas.

If Thunkable made you more interested in making apps, you might want to research online which coding languages might help you make the kind of app you're interested in. Lots of common coding languages are also used for app development.

Feedback
X