Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Teaching Kids JavaScript

DZone's Guide to

Teaching Kids JavaScript

Children are the future of any industry, and programming is no different, so how can we get kids hooked on coding? In this post we take a look at a few ways to make learning JavaScript fun and engaging--whether you're a kid or an adult!

· Web Dev Zone
Free Resource

Tips, tricks and tools for creating your own data-driven app, brought to you in partnership with Qlik.

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

Image title

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 gameplay 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

Image title

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 hooked 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 ramp up, 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

Image title

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.

Image title

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 are lots of great platforms out there for JavaScript (and otherwise) to help kids code. 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!)

Explore data-driven apps with less coding and query writing, brought to you in partnership with Qlik.

Topics:
ide ,javascript ,learning and development ,web dev ,kids coding

Published at DZone with permission of Hansel Lynn, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}