The MakeCode Editor

One-sentence summary

MakeCode is a free editor where we build micro:bit programs by dragging and dropping blocks, test them on a computer simulator, and then send the finished program to a real board.

Why does it matter?

In the previous lesson we met the parts on the micro:bit: the 5×5 LED matrix, the A and B buttons, the sensors and the pins. But the board does not know what to do on its own. We tell it what to do. The place where we write these instructions is called an editor.

MakeCode is a block editor that runs in your web browser. As you may remember from the Scratch lessons, you build a program by dragging blocks and snapping them together. So you do not need to learn a brand-new language; the logic you have already seen still works here. MakeCode can even show the same program as JavaScript or Python text if you want. This lesson is the workbench for every micro:bit lesson that follows. If we get to know the interface well now, we will not waste time later on animation, sensor and radio projects.

The MakeCode screen has three main areas

When you open makecode.microbit.org in a browser, a three-part screen appears. Knowing these three parts will make every later lesson much easier.

1. The simulator (left side)

On the left you see a small picture of a micro:bit. This is the simulator, a copy of the real board that runs on your computer. It runs your program instantly as you build it. So even without a physical micro:bit in your hand, you can see what your code does.

You can click the buttons on the simulator with your mouse and watch the LEDs light up. If you use a temperature block, the simulator gives you a slider so you can change the temperature by hand.

2. The block drawer (middle)

The coloured list in the middle holds all the blocks you can use. The blocks are sorted into categories, and each category has its own colour:

• Basic: Blocks that show text, numbers and icons on the screen.
• Input: Blocks that sense events such as a button press, shaking, temperature and light.
• Music: Blocks that play sounds and melodies.
• LED: Blocks that control the lights one by one.
• Radio: Blocks that let two micro:bits talk to each other.
• Loops: Blocks for repeating work.
• Logic: Decision blocks such as "if ... then".
• Variables: Blocks for storing information.

When you click a category, its blocks open up. You drag the block you need from the middle into the workspace.

3. The workspace (right side)

The wide space on the right is where you build your program. You drag blocks here and snap them under one another. At the start, two blocks are already waiting for you in this area: on start and forever.

"on start" and "forever" are two basic blocks

These two blocks appear automatically in every new MakeCode project, and they form the skeleton of your program.

The on start block

The commands you put inside the on start block run only once, when the micro:bit turns on. Any set-up work for the first moment the board runs goes here.

Everyday example: When you leave for school in the morning, you turn on the lights and open the curtains once for the day. Those are your "on start" steps.

The forever block

The commands inside the forever block repeat without stopping until the board is switched off. When one pass finishes, it begins again from the top.

Everyday example: Your heart beats without stopping whether you are awake or asleep. Like breathing, it is a task that repeats over and over. The "forever" block works the same way for the micro:bit.

Now let's see the two together:

on start
  show string "HELLO"
forever
  if <button A is pressed> then
    show icon heart

At start-up this program scrolls the word "HELLO" once, then keeps checking whether button A is pressed. When it is, it shows a heart.

Write your first small program and load it onto the board

Now let's build your very first program. The goal is simple: when the micro:bit turns on, a heart icon should appear on the screen.

The block sequence

on start
  show icon heart

To build this:

1. Click the Basic category.
2. Drag the show icon block into the on start block in your workspace.
3. From the small icon menu in the block, choose the heart.

Look at the simulator on the left: the LEDs light up in the shape of a heart at once. You have seen your program run without loading anything onto a board yet.

The same program in MicroPython

Besides MakeCode, you can write the same idea in text-based Python. The micro:bit's own version of Python is called MicroPython:

from microbit import *

display.show(Image.HEART)

The first line brings the micro:bit tools into your program. The second line shows the heart picture on the screen. The logic is exactly the same as the block version; only the way it is written changes.

Loading the program onto a real micro:bit

The simulator is nice, but the real excitement is seeing your code run on an actual board. Here is how to load it:

1. Connect the micro:bit to your computer with a USB cable. The board appears on your computer like a USB memory stick.
2. Click the purple Download button at the bottom of MakeCode.
3. A .hex file downloads to your computer. This file is your block program translated into a form the micro:bit understands.
4. Drag and drop that .hex file onto the drive where the micro:bit appears.
5. The yellow light on the board flashes for a few seconds; this means the program is loading. Then the heart appears on the screen.

On some computers the browser can write to the board directly, so you do not have to move the .hex file by hand. Both ways give the same result.

Mini practice

Try these three steps in order:

1. Open a new MakeCode project and add text to the on start block that shows the first letter of your own name. Hint: use the show string block in the Basic category.
2. Inside the forever block, build the "when button A is pressed" logic from the Input category and show a happy-face icon.
3. Test the program in the simulator first. If it works and you have a board, load the .hex file.

Expected result:

on start
  show string "D"
forever
  if <button A is pressed> then
    show icon happy

Ask yourself: when you click button A in the simulator, does the face appear? If not, check whether the blocks snapped into the right place.

Common mistakes

Dropping a block in the wrong place

If a block does not snap *inside* the on start or forever block, it will not run. As you drag a block you see a yellow shadow line; when the block settles on that line, it is in the right place.

Putting everything inside "on start"

If you put a task that must be checked continuously (such as a button press) inside "on start", it is checked only once. Repeating work belongs in the "forever" block.

Forgetting to load it because it worked in the simulator

The simulator is only a copy. It does not perfectly reflect real readings such as temperature, light and shaking. Before you finish a project, always test it on a real board too.

Dragging the .hex file to the wrong place

The .hex file must be dropped onto the micro:bit drive, not left in your Downloads folder. If you drop it in the wrong folder, the program does not reach the board.

Safety note

• When connecting the micro:bit with a USB cable, plug it in straight and gently, without forcing it. Ask an adult for help with the connection if you need it.
• Power the board only from USB or a suitable low-voltage battery pack. The micro:bit is a low-voltage board; it must never be connected to mains electricity.
• Keep the exposed circuit side on the back of the board dry and on a clean desk. Do not run it while it sits on a metal surface.
• If you use a battery pack, insert the batteries with the correct polarity and with an adult's help.

Review questions

1. What is the purpose of the simulator before code is transferred to a board?
2. How do blocks and JavaScript views help explain the same program differently?
3. Why should a project be given a meaningful name before it grows?
4. What does downloading a new program change on the micro:bit?
5. How can a learner separate an editor problem from a hardware problem?
6. What should be saved before making a risky change to a working project?

Answers

1. The simulator provides a quick, safe check of logic and visible behaviour without depending on a cable or physical board.
2. Blocks show structure spatially, while JavaScript exposes textual syntax; switching views connects concepts without changing the intended logic.
3. A clear name makes versions, exports and shared work easier to identify and reduces the chance of editing the wrong file.
4. It replaces the program stored on the board; the previous program no longer runs unless it is transferred again.
5. First test the logic in the simulator, then test the cable and a tiny known-good program on the board.
6. Save or duplicate the known-working version and note the test that proved it worked.

Lesson summary

• MakeCode is a free block editor for the micro:bit that runs in a web browser.
• The screen has three areas: the simulator, the block drawer and the workspace.
• Blocks are sorted into categories; each category has a colour and a purpose.
• The on start block runs once, while the forever block runs without stopping.
• A program is loaded onto a real board by downloading a .hex file and dropping it onto the micro:bit drive.

Check your understanding

1. What are the three main areas of the MakeCode screen?
2. What is the simulator for, and how does it differ from a real board?
3. How many times do the commands in the "on start" block run?
4. If you want to check a button press continuously, in which area should you place the block?
5. When you load a program onto a real micro:bit, what is the file extension of the file that downloads, and where do you drop it?

Answers

1. The simulator (left), the block drawer (middle) and the workspace (right).
2. The simulator is a copy of the real board on your computer; it lets you test your program instantly. It differs in that it does not perfectly reflect real sensor readings and it is not a physical board.
3. Only once, when the board turns on.
4. Inside the forever block, because that area repeats without stopping.
5. The file extension is .hex, and you drag it onto the micro:bit drive that appears on the computer.

Source and verification note

For “The MakeCode Editor”, verification focuses on whether the relationship between The MakeCode screen has three main areas and 2. The block drawer (middle) remains consistent across examples. MakeCode and MicroPython names can vary slightly by version. Test in the simulator first; when external components are connected, check the board’s pin and voltage limits separately.

Next lesson

The LED Matrix: We will learn how to draw your own icons and small animations on the 5×5 grid of lights.