Coding For Kids For Dummies
Book image
Explore Book Buy On Amazon
Coding, or computer programming, is your way of communicating with technology. It’s the new literacy you need to master to be successful in the coming decades. Like any form of communication, coding takes place through language. Just as there are many human languages (English, French, Mandarin, Spanish, and so on), there are many coding languages! Two examples of coding languages are Scratch and JavaScript. Scratch is perfect as a coding language for kids because it’s easy and fun to use, Scratch coding for kids allows you to build programs by snapping together commands in the same way you assemble a puzzle.

JavaScript is a step up in difficulty because it’s an authentic programming language, used by real coders. JavaScript powers many technologies, and you can use it to make both apps for your phone and control code for operating electronics gadgets. You can ease into JavaScript by using blocks to build programs (just like Scratch) and then switching to text-based coding when you’re ready. Here, discover tips for creating programs in Scratch, coding JavaScript apps in App Lab, and writing JavaScript code in MakeCode to operate the micro:bit electronics board.

Kids coding on laptops ©By Photographee.eu/Shutterstock

How to create programs in Scratch

Scratch is a coding language, but it is also an all-in-one integrated development environment (IDE) in which kids can design, code, test, and share their programs. Here are some tips for getting started with Scratch coding:

  • Open Scratch. Select Create or File→to start a project.
  • For project starter ideas, click the Tutorials button in the menu bar.
  • Every new project starts with Backdrop1 — which is blank. You can add a new backdrop by clicking the Choose a Backdrop icon and then selecting a backdrop from the Choose a Backdrop library.
  • Every new project starts with Sprite1 — which is Scratch Cat. You can keep Scratch Cat and write code for him to run, or you can cut him by clicking the X in his icon. You can add a new sprite by clicking the Choose a Sprite icon and then selecting a sprite from the Choose a Sprite Library.
  • Change sprite attributes by typing new numbers for the x position, y position, size, and direction.
  • Start a new program with an event, such as when green flag clicked. At the Code tab, select the Events category and then drag the event to the code workspace. Add one or more commands to the event, attaching each new command to the previous event, to build a code block. Run the code block by clicking the green flag (or whatever event handler you chose). Stop the code block by clicking the stop sign icon.
  • Add additional sprites to your project, and build whatever code you want on each sprite.
  • You can add new sounds. First, click the Sounds tab and then click the Choose a Sound icon. Click a sound from the Choose a Sound library to add it to your program. Then add the new sound to your code by clicking the Code tab and then clicking the Sound icon to display the sound commands. Drag a sound command such as play sound to the workspace, and attach it to a code block. Press the arrow in the play sound command and select the sound you added. Then test your code block to hear the sound.
  • Name your project and, if you want, click the Share button to make it publicly visible.

How to build apps in App Lab

App Lab is an IDE for building apps using JavaScript. You can design and code your apps in App Lab. Then you can test them in an online simulator and — when they’re working just the way you want — you can share them, even sending them to your phone. Here are some tips for getting started working in App Lab:

  • Open App Lab. Set up a new account, or log in to your existing account. Click Try It Out to start a project.
  • Click the Design button to switch to Design mode, where you lay out the appearance of your app. The Design toolbox opens, showing elements that you can drag to screen1 of the simulator.
  • To add a background to your app, work in Design mode. Click the simulator screen, and then click the Color tab in the Properties area to choose a new background color. Or click the Choose link to upload a background image. The color or image appears as the background in the simulator.
  • To create elements on your screen, work in Design mode. Click the icon for an element in the Design toolbox and then drag it to the screen. Commonly used elements are Button, Label, Text Input, Image, and Screen. For example, create a button for a user to click. In Design mode, drag the Button icon to the screen and place it anywhere you want. In the Properties area, change some attributes of the button you want, such as size and color. Note that the button ID is button1. Type CLICK ME in the text field of the button properties.
  • To code your app, click the Code button to switch your interface to Code mode. In App Lab, you create all code in a single program, which is displayed in the Code workspace. You can work in block mode or text mode, toggling between the two modes by selecting the Show Blocks/Show Text button. Each command is listed on a separate line.
  • Commands are displayed in Code mode in the toolbox, grouped by function, such as UI (user interface) controls. To build your program, drag a command from the toolbox to the workspace. Attach new commands to previously added commands, snapping them together.
  • Start a new program with an event, such as onEvent. At the Code tab, select the UI category and then drag onEvent to the Code workspace. Continuing with the button example, press the ID tab in the command and select button1 from the drop-down list. Leave the other items in the command as-is. Now make something happen when you click the button. From the UI category, drag a setProperty command to the Code workspace, placing it inside onEvent. Set the command to read setProperty("screen1", "background-color", "red");.
  • Test code in the simulator by clicking the Run button. In the button example, clicking the Run button and the clicking the Click Me button triggers the event to turn the screen red.
  • Add additional elements to your project, and build whatever code you want on each element.
  • Name your app and, if you want, click the Share button, sending it to a phone for mobile operation.

How to write control code for electronics

MakeCode is an easy-to-use IDE for writing and testing programs for controlling a kid-friendly electronics board called the micro:bit. You write JavaScript in MakeCode, testing your programs in an online simulator.

If you want, you can upload a completed program to a micro:bit board to create a real, working gadget! Here are some tips for getting started with MakeCode for micro:bit:

  • Open App Lab. Click New Project to start a project.
  • In MakeCode, you build code blocks, with each code block associated with an event. All the code blocks are displayed in the code workspace. You can work in Blocks mode or JavaScript (text) mode, and you can move between the two modes by using the toggle button at the top of the workspace. In JavaScript (text) mode, each command is listed on a separate line.
  • Commands are grouped by function, such as Basic, Input, Music, LED , Radio, Loops, Logic, Variables, and Math. You can click the Advanced tab for many additional, useful commands, including Pins. To build your program, drag a command from the code categories into the workspace. Attach new commands to previously added commands, snapping them together.
  • Commands from the Input category allow you to capture data from micro:bit sensors, including button clicks, accelerometer shakes, compass headings, temperature, light levels, and pin presses.
  • Start a new program with an event, such as on button A pressed. Drag this command from the Input category into the workspace. (You can drag the starter commands, on start and forever, which are already in the workspace at the start of a new project, back into the command categories to remove them from your program.) Then drag a command from the Basic category, such as show string “Hello!” to the code workspace, placing it inside the on button A pressed command.
  • Test code in the simulator by activating the sensors you have programmed. In the example, when you click button A in the simulator, HELLO! should scroll across the screen of the micro:bit.
  • Add additional code blocks to your project, and build whatever code you want on each code block.
  • Name your app and, if you want, transfer your code to a real micro:bit. Just attach a micro:bit to your computer using a microUSB-to-USB cable. Click the Download button in the MakeCode IDE to download your code to your computer. Then drag the downloaded file (which is in .hex format) to the icon representing your micro:bit on your computer. The micro:bit blinks orange for a few seconds to tell you that the transfer is taking place.
  • Disconnect a micro:bit (with its program onboard) from the computer, and then attach a portable battery pack to the board. You can now run the program on the micro:bit, away from the computer!

About This Article

This article is from the book:

About the book author:

Camille McCue, PhD is a STEM educator and leader who has worked for IBM, NASA, PBS, and numerous independent schools. She has taught every grade from kindergarten to grad school, covering topics ranging from Scratch to AP computer science. Camille is co-author of Helping Kids with Coding For Dummies and author of Getting Started with Coding and Getting Started with Engineering.

This article can be found in the category: