How My 10-Year-Old Learned Javascript

“Papa . . . What do you do for a living?”

It’s a question that comes out of nowhere and makes every parent proud. It’s one of the first signs that your child sees you as a person and not just a caretaker.

“I’m a web developer.”

“What’s that?”

Let’s go back in time three years . . .

My son was seven years old and the coding for kids movement was gaining momentum.

“I’ll teach him how to code!” I thought.

Parents like teaching their kids — it’s instinctual. We teach them language, values, skills, how to throw and kick a ball and many important life lessons as they grow up.

What about computer programming?

It’s not as glamorous as building a house. It’s not as instantly fun as assembling a LEGO car, opening a fresh pack of Play-Doh, or experimenting with a classic Erector set. However, it is a form of creativity and expression — I can use computer programming to make something that wasn’t there before, using a set of tools.

Starting from Scratch

He started with Scratch from MIT’s Lifelong Kindergarten group. For those unfamiliar, Scratch is a block-based, visual programming community for kids. It’s very fun and intuitive — like connecting LEGO bricks. Kids can quickly get started making games, stories, and animations then share their creations within the Scratch community (over 18 million projects have been shared on scratch.mit.edu). A big thank you to the Scratch Team for providing such an excellent platform! He spent at least two years “Scratching” — and still does today.

I also hosted a Scratch coding club at his school a few years ago, posted a getting started lesson for teachers and mentored at CoderDojo.

What about “real” coding?

Ah . . . The big moment! Moving from the warm and cozy world of Scratch visual programming to the stark, cold and unforgiving world of typing plain text, the command line and cryptic error messages. Where, in the time it used to take to build a something interactive in Scratch (complete with fart sounds), you can output “Hello World” to the console.

Moving from Scratch to Text. It’s a big change!

His first programming language: A “milestone” to remember

I’ll never forget his first steps . . . or his first programming language.

I read the recommendations and selected Python.

I ordered Python for Kids from no starch press. I had no prior experience with Python (I work primarily with HTML/Javascript, PHP/Laravel, Node/Express), but it was great! Python is a very readable and elegant language. It’s a nice fit for kids — and a lot less typing compared to C-family languages.

My first programming language was BASIC on an Apple IIe. I remember spending hours typing pages of code from magazines and books — and debugging all the typos — just to play simple dungeon games. The games weren’t even that fun and always seemed to crash with syntax errors, but it was the closest we had to actual computer games and that made it worth the effort!

I re-purposed an old laptop and installed Python and Sublime. (I actually took his mother’s laptop and gave her the old one. She only uses the web browser and Office anyway.)

His Scratch skills transferred well — control flow, variables, conditionals, loops and lists. It’s amazing how much he learned in Scratch, while having fun.

All was going well — until he stopped.

The Python slithered away . . .

He just lost motivation. I guess command line output only motivates a kid so much these days. The games in Part II of the book just couldn’t compete with Scratch — let alone Xbox!

Looking back, I would still start with Python and the same book, since it was a great experience for both of us and I’m sure he will pick it up again in the future — Python has so many uses.

But I was determined . . .

Javascript to the rescue!

I remember showing him how to “View Source” on his favorite websites. He seemed most excited after learning how to change content on web pages with Chrome DevTools . Adding “poop” to the headings of actual web pages is very compelling for kids!

I decided to give HTML and Javascript a try and ordered the JavaScript for Kids book from no starch press. The book covers the basics of Javascript (ES5), HTML and basic jQuery (even if it’s not cool anymore). Little by little, he worked through the book — an hour or so on weekends. There were plenty of gaps, but he made solid progress. Great book!

CodeSchool saves the day!

After a few months, his momentum really slowed. Web development is a pretty broad topic and I needed some help. I signed up for CodeSchool and hoped for the best. It turns out their mix of original music/jingles, slow-paced video training and in-line exercises works really well for my son. Although, there are times when he just plays the jingles over and over again and searches the site for new ones — CodeSchool jingles are good!

He worked through Front-end Foundations and Front-end Formations then moved on to Javascript Road Trip Part 1.

We’re currently up to JavaScript Road Trip Part 3 and the exercises are very challenging — for both of us. I’m definitely learning a lot myself along the way — looking at you Closures.

Explaining programming concepts to kids

Kids relate well to things in the real world. As we worked through the books and exercises, I found myself translating various abstract computer programming concepts into familiar scenarios.

Below are some of the explanations that worked for my son — hopefully, I didn’t mess him up too much.

VariablesNothing too exciting here. The “variable is a container” analogy worked very well.

“Variables in Javascript are like boxes that hold things. You give them names, just like labeling a box of Pokémon cards, so you can find it quickly. Use good names, so you know exactly what’s inside — like ‘Ultimate Pokémon Deck’.”

Arrays“A Javascript array is like your bookshelf (see header photo). It holds many different things in one place and makes them easy to access and find later. Your bookshelf has books, toys, drawings, photos, pencils, cards and more. If you ask me to find your Harry Potter book at the end of the bottom shelf, it would be easy.”

Objects“Most things around you are objects — people, cars, planes, trains. Objects have certain things that define who/what they are and things they can do. In Javascript, the things that give an object its identity are called ‘properties’ and the things they can do are called ‘methods’. Think about your class made up of Student objects: some properties of a Student are: name, age, school, class. Some methods of a Student are: talk, run, and jump.”

“Arrays can also hold objects. You can make an Array of your entire class that contains 30 Student objects then use a loop to print out all of the students in your class.”

Functions“Functions are like cooking recipes or the instructions that come with a LEGO set. Running a function goes through each of the steps until it reaches the end or is told to stop — like when we call you down for dinner!

A ‘bake-a-chocolate-chip-cookie()’ function includes all the steps required to bake a chocolate chip cookie — gathering and preparing ingredients, mixing, placing on baking tray, preheating oven and baking.”

Parameters “Parameters are like bits of information you share with your functions — giving them extra powers. Instead of having to write a separate ‘bake’ function for every type of cookie, you can write one ‘bake()’ function and tell it which type of cookie to bake as a parameter — bake(‘chocolate_chip_cookie’).”

*Don’t get too bogged down in the difference between parameters and arguments; it’s not worth it at this point.

ClosuresThis was fun! CodeSchool did a great job in Javascript Road Trip Part 3, but it just didn’t click for my son right away. Closures still trip me up to this day.

My first explanation attempt:“A closure is like a dinosaur fossil — a snapshot from a moment in time preserved for millions of years. You can get still get information about the dinosaur from the fossil, even though the dinosaur itself has been gone for millions of years.”

Closures were starting to make sense, so I tried using cookies again . . .

“Let’s say I go to the same bakery every day and ask the baker for a cookie. The first thing he/she asks is, ‘What kind of cookie do you want?’ After a few days, the baker might already know what cookie I like and simply ask, ‘The usual?’. By saving my cookie choice in memory, he/she is able to reuse the same function from the previous day to get me the proper cookie without having to ask again.”

Eh… It was still a bit fuzzy, until my son asked me…

“So, it’s like when we go to the barber and he just cuts our hair without asking what we want? He always asks new customers how they want him to cut, but never asks us anymore.”

Ding, ding, ding! He got it!!!

After finishing the remaining CodeSchool exercises, it all started coming together — for both of us.

It’s a Long Journey

Learning computer programming takes time — not something accomplished in an hour of code (BTW: the Hour of Code is a great initiative and Code.org is an amazing organization — help them if you can).

Coding is a craft. Like any activity you sign your kid up for, it takes practice, patience and commitment—not always the easiest things for kids.

We’re still at the beginning of the journey, but moving along.

We attended an indie game event recently and he was inspired to make games. He starting watching some Unity videos, but that dropped off rather quickly.

I try to not to limit his propensity to pivot and experiment with new things.

I recently introduced him to PhaserJS, which is a great Javascript 2D game framework I’m also trying to learn myself — we’ll see how it goes.

What Next?

The next big step for him is to build a real application. His first shipped MVP — another milestone! Who knows when or if that will ever happen or what it will be, but I’ll hope for the best and support him along the way.

Now it’s time to start the journey with his younger sisters!