Exploring the MakeCode Editor UI (User Interface)

There are 2 common ways to get to the Micro:bit MakeCode Editor:

1. Open a new browser tab, and type makecode.microbit.org in the location bar

2. Do a google search for "microbit makecode"

Go there now - you should see the last project you created under "My Projects". MakeCode is clever like this - it saves all your work without the need to create an account.

Click "New Project".

Before we show you how do everything, let's utilise your awesome ability to work things out for yourself!

Take a moment to look at the User Interface (UI):

1. Look & Feel - How would you describe the look and feel of it? (e.g. "gothic"? or "light & playful"?)

2. Layout - simply by looking at the different areas of the editor, do you get a sense of their purpose?

3. Icons - there are many. Do you recognise any of them and their purpose?

4. Text - look at the text elements on the page - do you recognise all of the words and their purpose?

Now start exploring - try hovering your mouse over everything before clicking on it. What does each part do?

Feel free to muck about, try things, and "make mistakes" (there's no mistakes in play).

Editor Layout

The main areas of the MakeCode Editor are pointed out above.

How it works

1. Find a coding block in the Code Drawers

2. Drag it into Your Coding Space

3. See the effect of your code on a micro:bit in The Simulator

4. Get Help with your coding by clicking on the ? icon

5. Press the Giant Purple Download Button to get your code into your real micro:bit (must be connected to your device first!)

6. Give your code a cool name and Save it!

7. Share your awesome code with friends and fans by clicking the share icon!

Note there's a few other icons in the bottom right, in the simulator, to the left of the middle of the coding drawers, and in the top strip - but I'll let you figure those out for yourself :-)

The Coding Blocks

MakeCode uses coding blocks, like Scratch, Hour of Code, and other coding platforms for beginners - they're a more "human" way to understand code, as they use:

• Colour - to group different types of blocks

• Shape - to indicate how blocks should be used

Additionally, you can drag them into place, they "snap" together, and there's less typing required.

Coding Drawers

The blocks are housed in the "coding drawers" in the middle of editor. When clicked, they pop open to show the blocks available. Some drawers have so many blocks, that there's an additional drawer beneath titled "... more".

When you find the block you want, drag and drop it into your coding space.

You can also search for particular blocks, using the search field at the top of the drawers.

Most drawers are self-explanatory, however if you're unsure, visit the Reference and Blocks documentation to find out more. Here's 3 important drawers you may not have heard of:

Logic contains blocks which allow you to run code based on certain conditions, e.g. if the A button is pressed 5 times, do something. In the NZ Curriculum this is called selection, but it's also commonly called conditional statements, or if-then-else statements.

Variables are a way to store data which can change, like a score in a game. Variables can usually only hold one type of data, like a number, or some text.

The Blocks

Block Shapes

Deleting a block

There are 2 ways to delete a block:

1. Drag it back into the drawer

2. Right-click on the block, then select "Delete"

Right-click block powers

Right-clicking on a block brings up a menu which allows you to:

• Add comments

• Delete a block

• Duplicate a block

• Format your code (tidy it up)

Search for a block

You can quickly find the block you want by entering text in the Search field at the top of the Block Drawers.

Blocks FAQ

How do I find out what a particular block does?

You can hover your mouse over a block at any time to reveal information about what it does. You can also access Reference information about blocks via the ? icon.

What does clicking the {} Javascript button in the top menu do?

The best way to find out is to give it a try! Javascript is a programming language which runs in your web browser and is used to make web pages interactive, and the code you will see when you click the button is the text equivalent of the blocks code. This is the code your blocks code get stored in and rendered (displayed) from.

The Simulator

Who needs a micro:bit, when you've got a micro:bit simulator?!

This handy "virtual micro:bit" allows you to test your code in real-time. It:

• shows the effect of your code

• allows you to interact with the virtual micro:bit

• plays sound (and allows you to mute it)

• saves you having to constantly Download your code to your micro:bit to test it

• shows you how to wire up external components (e.g. connecting to headphones)

• can even show you real-time data from your micro:bit (for advanced users!)

Almost anything you can do with a real micro:bit, you can do with the simulator.

Help & Documentation

There is a wealth of resources out there for when you or your students get stuck and need more information. The ability of students to help themselves is vital, so it's worth going over this with them.

Blocks tool-tips

Hovering over a block will give you the basic information about it. Sometimes this is enough.

I need more help

No worries - the help icon (?) in the top right corner drops down a menu of links to different resources within the main MakeCode documentation. Clicking on a link creates a scrollable pop-up help, which you can close/collapse, and which also gives you the option to open in a new tab/window (see arrows):

No, I actually need project ideas, lesson plans, and courses!

I got ya. Also, here's links to tons of lesson plans and courses. And if you're really serious...

Sharing & remixing

Just like with Scratch, with the MakeCode editor projects can be shared and remixed, which means:

• You can create starter projects to share with your students, which they can then remix

• They can share their work with you, for assessment

• They can collaborate on projects (potentially...)

Sharing online

You can share your project from directly within the MakeCode Editor (as we saw previously) by clicking on the share icon. This brings up a confirmation box, then once you press Publish Project you will see:

Unlike Scratch, every time you make a change to your code, you need to re-share your project, which is why you and students should only share at the end of the project, once it's all been tested and is working well.

Sharing offline

Remember how you can save your code as a hex file to your computer? Well, you can also import these files via the Home screen:

This means you can save them locally or upload to Google Drive or OneDrive or DropBox, attach them to emails and share the digital file with anyone.

You can also save the Javascript code as a text file or in a document, so that you can copy & paste this into new projects.

The 11-block Wero (Challenge)

Now we're going to "remix" a micro:bit project - your challenge is to see what you can create with just 11 coding blocks!

Click the Edit button in the top right corner of the code above - this will open the code up in a separate window/tab - and see what you can create! Make sure you test your code out on the simulator, and try it with the real micro:bit too!

If you're feeling brave, share your amazing project with everyone!