Illustrated JavaScript Curriculum

What is coding? Where do I type my programs?

First steps into the wonderful world of coding. In this first lesson we will learn about canvas and graphical coordinates and how to draw circles on the canvas. We will then use the circle instruction to write a complete program that draws a bear!

We will extend our toolbox with new graphical instructions that draw various shapes on the canvas. We are now better equipped to draw complex scenes with code.

In this lesson we will see how to control the drawing color, the line thickness and text size. Our drawings are now better looking.

Variables are a core concept of any JavaScript program. In this lesson we’ll learn how to declare variables and assign values to them. We will see plenty of practical examples that showcase the benefits of using variables inside programs.

Let's see how to program the computer to execute one instruction or another based on a condition. We will learn about the if and if-else keywords, about comparison operators and how to use them to implement engaging programs such as a solver program for the quadratic equation.

In this lesson we'll learn about for loops and how to use them to automate repetitive tasks by instructing the computer to perform a set of actions a certain number of times. The lesson is packed with practical exercises such as drawing concentrical circles, calculating factorial of a number and graphing the sine function.

A nested for is a loop within a loop. Nested for loops are handy for dealing with multi-dimensional data or situations where you need to perform a series of operations within another series of operations. We will exemplify this with a series of graphical programs that displays various patterns on the x and y axes of the canvas.

Until now we only consumed instructions (aka functions) provided by the system. In this lesson we will learn how to define new functions in order to modularize our programs. There are plenty of fun exercises such as calculating prime numbers and even calculating PI.

This is a fun lesson! We will learn about how to animate shapes on the canvas and implement bouncing circles and moving cars!

Learning how to read keyboard and mouse input opens the door to implementation of interactive programs such as drawing apps or mini-games. The main focus of this lesson is the implementation of Paddle Smash game.

What is an array? How can use arrays to store big lists of numbers and strings? We will learn about the support that JavaScript offers us for working with arrays and we will also implement a series of fun programs that use arrays as core data structures.

Do you want to manipulate text in your code? This is the right lesson for that. We will learn how you can use strings to store and manipulate textual information. The flagship project of this lesson is implementation of Caesar Cipher – an educational encryption / decryption algorithm.

Arrays are great for storing lists of unrelated items, but objects shine when we need to store a bunch of related pieces of data. A fun lesson that will use objects to implement graphical programs such as bouncing balls and falling spiders.

Making games is the dream of many young coders. Making games is also a great opportunity to better learn programming in a fun and engaging way. In this lesson we will learn core game building concepts such as the game loop and how to manipulate sprites. The lesson concludes with a mini game called Plane vs Objects.

Did you know that you can design sprites on paper and then transfer them in your code? This lesson will focus on this topic, allowing you to create games with custom drawn graphics.

Do you remember the for loops? While loops are a similar construct that allows you to create loops in your programs. We will practice the new keyword with a series of exercises such as finding Fibonacci numbers, finding prime numbers and even implementing a simple Bubble sort algorithm.

In JavaScript functions are first class citizens. They can be treated just like any other data type, such as numbers or strings. We will see how to leverage this concept in a series of exercises such as implementation of a UI Button with a callback.

Since functions can be treated as any data type, we can also store them inside objects fields. This lesson introduces new concepts such as encapsulation and how to use objects to model complex entities that contain both data and behaviors. The flagship project of the lesson is the implementation of “Two paddle pong” game.

A function inside a function! Yes – that’s possible in JavaScript. We will see how this is a useful concept in implementation of modules. We will exemplify the concept by rewriting the bouncing bubble exercise using closures.

Classes provide the blueprint for creation of objects. We will see how classes help programmers to encapsulate data and behaviors of an entity and how to create a series of objects of the same type. The project of this lesson is a fun game called “Safari adventures”.