Teaching Kids JavaScript

Lots of kids are starting to learn to code these days, and I’m proud to join the movement to get even more kids coding. While Scratch is a popular starter language for younger kids, we’ve seen that when kids get to about 10-11, transitioning them to Javascript is a great next step.

Transitioning with Code Combat

A fairly structured way to get a young student to their first typed language is Code Combat, which supports Javascript (and Python). The platform is a great game-ified way to learn to code, as kids solve puzzles and defeat enemies through Javascript code. Fun for even some of us more seasoned coders! While the graphics and game play are addicting and fun, we’ve found Code Combat to be more of a short-term solution for exposure, so we tend to use it in short bursts. After all, nothing beats unrestricted straight up Javascript coding!

Unstructured JS Coding

To start kids off on their first Javascript “apps”, we’ll often use Codepen or a similar online IDE like JS Fiddle. Most Javascript coders know and use these platforms often, so we’ll leave it at that. We might start kids off with some simple stuff like DOM manipulation - number generators, simple calculators, etc. Kids tend to like interactive things, graphical things - kinda perfect for Javascript in the browser!

Advanced JS with PlayCanvas

For our more advanced students (with our more advanced Coaches), one cool option is a 3D Engine called Play Canvas. By the time you say “3D”, you’ve hook 90% of the kids, and if you add “game engine”, you’re done! PlayCanvas supports rigid-body physics simulation, handling three-dimensional audio (yeah!), 3D animations, and a boatload of other stuff if you have the time to look through it. It’s got a great set of tutorials you can check out too.

Quick caveat, take a quick click through to Play Canvas or even just read some of the functionality above, and you’ll sense right away that this isn’t easy-breezy stuff for kids. The tool itself can be a steep rampup especially for kids, so we’re always careful with balancing tool learning vs. Javascript learning. The instructor (what we call a Code Coach) may need to do some pre-setup for some kids - creating a 3D app from scratch is often quite hard for most kids.

PlayCanvas Project Ideas

PlayCanvas comes with a basic tutorial that kids can use to change up a little. One of our students created a cool little challenge by turning the ball into a watermelon and adding some deadly spikes as an obstacle. I’ve tried about 50 times and still can’t get the watermelon across the spikes! We’ve also defaulted to good old spaceship games, like this one a student of ours created of a 3D Asteroids game.

Another project idea that we’ve done is to allow your student to design and even 3D print out their own fidget spinner. A little past the trend, but hey, kids still love the stuff! For the actual 3D print, we used Blender, but in PlayCanvas you can recreate it with a student, and get it spinning just like in real life. The Instructor/Code Coach might need to get a basic spinner ready to go, along with a rotation script, allowing the kids to change rotation speeds or even chuck balls at it - but when you’re talking fidget spinners, you’ll get any kid engaged and having fun!

There’s lots of great platforms out there to help kids code JavaScript and other languages, such as Juni Learning. PlayCanvas happens to be one of the cool ones we use, but it’s really only one of many. Don’t forget, in the end it’s about balancing kids’ engagement and fun with hardcore coding. Don’t stray too far in either direction! Happy Coding! (ps, high five to Joe for letting me jump in on a guest post!)

---

For more resources on how to teach coding to your kids, feel free to visit Coding For Kids.