DEV Community

Cover image for Draw with code - Introducing kids to coding using simple type-in JavaScript programs
Adrian
Adrian

Posted on

Draw with code - Introducing kids to coding using simple type-in JavaScript programs

Introduction

Let’s make a journey in time and remember those early home computers of 80s that started the entire IT revolution. Perhaps you can still remember the ZX-Spectrum, the Commodore 64 or the BBC Micro.

Although very primitive by current standards, those early computers were perfect platforms for learning to code.They provided everything a user needed to make the jump into programming: a language (BASIC), a library of friendly commands and a code editor.

A whole generation of today’s professional developers started their careers by learning to code as kids on those early computers.

Back in those days there were plenty of books and magazines containing code listings - the so called "type-in programs". A beginner would just pick up a magazine and start typing.

Modern times

The entry path to coding is no longer as simple at is was back then. Modern computing devices are friendlier and easier to use than ever, but their advanced design makes them very difficult to program them.

In this article I'm proposing a solution that tries to bring back the benefits of the 80s with the advantages of modern times computing.

Introducing codeguppy.com - this is a simple JavaScript environment that allows kids and beginners to play with graphical JavaScript programs.

Draw with code

"Drawing with code" is a very well received way to introduced kids to coding. It consists in providing kids with small JavaScript programs printed on a piece of paper and asking them to type them in.

Using the codeguppy.com code editor and a few printed programs, kids can begin to code in a real text based language (e.g. JavaScript) from the very first moment.

After the program is typed in, kids can have a lot of fun trying to customize it. E.g. change colors, add new shapes, etc.

Examples

Below are a few example of that exemplify this method. They contain real working code.

Please go ahead and try them ... but remember: first print the image and then try to type-in the program.

If it works for you, then try to use this methods when teach others to code.

Example 1

Example 2

Example 3

Happy coding!

Please leave your feedback in the comments. I can also provide much more type-in code examples if you are interested to use them with a larger group.

Top comments (1)

Collapse
 
jdforsythe profile image
Jeremy Forsythe

Just went through a bunch of tutorials with my daughter. It was really fun!