All Courses Javascript Tutorials

Learn Creative Coding with Vanilla JavaScript

Learn Creative Coding with Vanilla JavaScript
Learn Creative Coding with Vanilla JavaScript

Learn Creative Coding with Vanilla JavaScript

Let’s build some art with code while learning object-oriented programming with some simple vanilla JavaScript.

What you’ll learn

Learn Creative Coding with Vanilla JavaScript

  • You learn how to code in HTML, CSS, and JavaScript.
  • Learn to draw with computer code.
  • Understand HTML canvas drawing methods in depth.
  • It creates a whole generative art creation.


  • HTML, CSS, and JavaScript expertise are recommended.


Learn how to code creatively and go from a single line to complex randomised fractal designs. Then, to produce a “fractal rain” effect, transform it into a particle system. Today, we’ll take a deep dive into HTML canvas drawing methods, step by step, to ensure that we grasp everything.

In generative art, the artist constructs a process that is then put into motion autonomously, culminating in a finished artwork. It reminds me of a human-machine partnership. HTML, CSS, and JavaScript are the machinery these days, and we are the artists. Create your own work of art with me while also honing your front-end web programming abilities. As we move along, I’ll explain each line of code in detail.

Fractal Rain is a class project.

Beginner to intermediate skill level


Object-oriented programming is all about classes, constructors, encapsulation, and abstraction.

2) HTML canvas with translation, resizing, rotation, shape drawing, and web animation

3) Deep learning in JavaScript only (no frameworks or libraries).

This workshop is not for total novices, but if you have a basic understanding of HTML, CSS, and JavaScript, then join me and let me teach you how to use the machine to help us build something unique and beautiful. Enjoy yourselves!

Who this course is for:

  • Front-end web developers who are just starting out are fascinated about creative coding.

Learn Creative Coding with Vanilla JavaScript

Learn Advanced HTML5 Course Site

Download Now