Teaching Kids to Code

Teaching Kids to Code Picture

Summer is here and school is out. Unlike past years, both of my children, ages 9 and 6, will be with me at the office throughout the summer. I have made it my goal to teach them to code!

This article was the basis for a talk that I gave at the June, 2016 EP Web Tech Meetup. In the image above, my daughter Abby did a bit of Q&A during the meetup to talk about coding with Bitsbox.

As someone who writes code for a living (well, HTML and CSS), it’s not really surprising that I’d find the ability to write code important. What you may (or may, not) find surprising is that most other parents want their kids to learn to code as well - even if they don’t have any experience coding themselves. According to Code.org, 9 in 10 parents want their child to study computer science, while only 1 in 4 schools actually teach computer programming. This leaves it up to parents to provide resources and encouragement. The question is, how can parents with little familiarity with code teach their children how to code themselves?

When I decided to tackle this endeavor, and give this talk, my focus was going to be on Scratch and Scratch Jr. but I found a couple of other tools that I thought were a bit more interesting and appropriate for my kids.

Writing Code?

First, let’s define what we’re talking about when we talk about teaching kids to code.

Code = Programming

Programming is the act of writing a computer program, and computer programs are written in code. Because of this, many people say “coding” instead of “programming”, but they mean the same thing. Personally, I think the coolness factor goes way up (and the intimidation factor way down) when we call it coding as opposed to programming. I know from experience that kids love to say that they “learned to code.” And, most people have a tough time programming the clock on their microwave so anything we can to do decrease the intimidation is a step toward getting everyone on board and comfortable.

Programs = Apps

Additionally, when we talk about building apps, we’re talking writing programs. It just sounds a lot cooler - and impressive - to call them apps.

Key Concepts

The key concepts that kids need to start them on a path toward writing code for a living (or, for fun) varies based on age but focusing on sequential thinking creates a good foundation for coding. Sequential thinking can be taught in many ways but in its most basic form it should teach children to be able to follow and, more importantly, create a set of instructions for others to follow. Computers are dumb and can really only do what we explicitly tell them to do. Sequential thinking helps children break down a task to its essential parts and steps. A good way to practice sequential thinking and communicating is to have the child create a set of instructions for building a Lego object. They can test how well they’ve done by passing those instructions on to a sibling or parent to see if they come up with the same object.

Meet Jack

My son Jack is 6 years old and just finished kindergarten. Like most kids his age (and younger), he has no problem working with a smartphone or tablet. Again, like most kids his age, manipulating the computer with a keyboard or trackpad is often difficult and leads to unexpected results so it made sense to find a solution that didn’t require a computer, keyboard or mouse. Enter Osmo Coding.

Jack - learning to code with Osmo Coding

A bit about Osmo.

Osmo is an accessory for the iPad that includes a base and a reflective mirror. The initial launch of the project included tangram shapes and letters for word games. Recently, they launched a new product called Coding which helps young kids develop sequential thinking skills that correlate to writing code.

The tactile nature of Osmo Coding is the real benefit for younger children. The Coding set comes with 19 magnetic code blocks which you use to control Awbie, your strawberry eating, on-screen character. Much like dragging instructions from the shelf to form commands in Scratch, a child uses the code blocks to explore Awbie’s island and collect strawberries which are then used to build a campsite and plant a garden of rainbow strawberry plants.

Key Concepts Taught

  • Commands
  • Parameters
  • Sequencing
  • Loops
  • Conditionals

Verb Command Blocks

Osmo Coding has four different verb commands, which are the building blocks of Awbie’s interaction with the world. Three of the verb commands (Walk, Hand, and Jump) have turnable arrows and can use quantifers. Combining verb commands will result in longer chains of strawberries, faster movement and huge bonuses!

Quantifiers

The Quantifiers are the yellow number blocks. If you attach a quantifier to a command verb (Walk, Jump, or Hand), Awbie will repeat the action X times. Quantifiers range from 1 to 5. Think of quantifiers as parameters to a function.

Sequencing

Sequencing is when you connect two or more blocks together. When you start using multiple blocks in a sequence, you begin an important step towards a key computational concept, sequencing. Use sequencing to activate Frenzy Mode by lining up multiple strawberries. Frenzy mode makes Awbie run faster and multiplies the number of strawberries that you earn.

Repeat

Use the Repeat Block to “loop” your code. A loop is when a sequence of commands is repeated, and is another key concept in computational thinking. By default, the Repeat Block loops the connected sequence twice. By adding a quantifier, you can repeat sequences up to 5 times.

Conditional

The gray Caution Block will prevent Awbie from hitting an obstacle. By attaching the Caution Block to a command and attaching alternate commands under the Caution Block, Awbie will listen to the alternate blocks if the original path leads to an obstacle (trees, water, etc).

Using combinations of these blocks, Jack has learned (whether he knows it or not) some fundamental coding concepts to move Awbie around the island. He would then use these concepts when he starts to learn a more formal programming language.

Conclusion

In my opinion, the advantage of Osmo Coding is the ability for younger kids to learn these concepts on their own in a fun, friendly game. The physical blocks are easy to manipulate and there are very few ways for them to get confused or create a situation where they can’t solve a problem on their own. If their program goes awry, Awbie runs into a tree or falls in the water and they begin their next sequence at the last safe tile.

I also think this is an easy entry for those parents that may be intimidated by the concept of coding. It’s easy (and fun - yes, I have my own profile) for parents to get started by throwing together blocks to see how Awbie reacts.

Meet Abby

Abby writing code with Bitsbox

My daughter Abby is a fourth grader at Tomahawk Elementary. In the past I’ve taught her some basic HTML - she started a blog one summer - but that felt more like a writing endeavor as opposed to a coding endeavor. We’ve also worked on some Arduino projects using Sylvia’s Super-Awesome Project Book: Super-Simple Arduino but that seemed a bit too much like work and we didn’t go back to it.

For Abby, I decided to give Bitsbox a try. Bitsbox is a website and subscription service where kids between the ages of 6 and 12 can learn computer programming. Each month you receive a box that includes and activity book full of projects, plus project trading cards, a small toy, coupons on toys, and stickers, temporary tattoos, or other fun stuff. The subscriptions cost between $30 and $40 per month, based on whether you pay month-to-month or on a subscription.

For parents who may be intimidated by code, there is a handy Grown-up Guide to keep you three steps ahead of your child (at least initially).

Bitsbox unboxing

How Does Bitsbox Work

Bitsbox teaches kids to build simple apps by writing real, text-based computer code. The coding language they use is JavaScript, with the addition of a few dozen special commands (words, basically) that make it easier for kids to build cool stuff quickly. To help expedite the coding process, Bitsbox uses short commands to replace longer lines of code. For example:

1
2
window.document.getElementById('app-canvas').
    style.background = 'rgba(255,0,0,1)’;

is equal to

1
fill('red’)

They each do the same thing but the Bitsbox version is much easier for a child to digest and remember. Most of the apps have between 10 and 30 lines of code which makes it easy to sit down and code a few apps in a single session.

The apps that kids build with Bitsbox are actually individual web pages written in JavaScript. That’s why they work on any computer or mobile device with a web browser. You can also save them to your home screen and they are displayed with a custom app icon. It’s really impressive for kids to be able to show off a folder of apps on a phone that they created.

Conclusion

We just received our second Bitsbox and can’t wait to get started with the next set of apps. I think Bitsbox are a great way to expose kids to real code without overwhelming them. It’s also

In addition to Osmo Coding and Bitsbox, there are some other great resources for teaching code. As I mentioned before, Scratch and Scratch Jr. are great. Here are some other resources to check out to read more about teaching kids to code.

References and Further Reading

⇠ Next Article Previous Article ⇢

About The Author

G. Brad Hopkins's avatar
  • G. Brad Hopkins
  • About Me: I bought my first computer - an Apple Performa 6320 - when I was in college and have been building websites ever since. These days I spend most of my time writing code and helping to bring interesting projects to life.
  • @gbradhopkins