javascript icon

JavaScript

Understand the programming concepts through creating visuals!

javascript icon

JavaScript class

Understand the programming concepts through creating visuals!

This course is for students interested in learning JavaScript.

It is a perfect course to introduce a child to programming. In this course students will learn programming through building graphic and interactive experiences, creating colorful, dynamic, and engaging visuals, animations. They will build an understanding of programming concepts through creating visuals, modifying them, experimenting with the code. The course covers the main concepts of variables, functions, loops, conditionals. 

Schedule a meeting in zoom prior to signing up for better placement of your child in our course!

javascript icon

Lesson Plan

  1. Introduction to “Three little piglets” in web development: HTML, CSS and JavaScript.
  2. Introduction to shapes in p5js library.
  3. Coordinate system.
  4. p5js functions.

Goals: students have been introduced to the most important concepts in web development. They can use p5js library to draw simple shapes.

  1. Introduction to HTML and CSS.
  2. Making simple HTML tags.
  3. Writing CSS code for colors of the webpage.

Goals: students have been introduced to the building blocks of HTML and CSS. They use CSS to modify the webpage.

  1. Introduction to RGB and HSB color modes.
  2. Introduction to the ‘Random’ function.
  3. Learning about built-in draw loop function.

Goals: students now get the gist of RGB and HSB color modes.

  1. Teaching computer to remember things by using variables.
  2. Updating a variable.
  3. Special keywords in JavaScript.
  4. Initializing a variable.

Goals: students can use variables in their projects.

  1. Understanding the x and y coordinates for computer screen.
  2. How do coordinates work in JavaScript? JavaScript vs Scratch.
  3. Making drawings with combined simple shapes using coordinates.
  4. Movement as a change in coordinates.

Goals: kids learn how to use 2D coordinates to animate shapes.

  1. Using conditionals. 
  2. Operators if, else if, else. 
  3. Using conditionals for generating visuals.
  4. Learning various functions in p5js to control animation.
  5. Making variations of the project using math.

Goals: students can start working on their first projects with conditionals.

  1. Introduction to loops.
  2. JavaScript syntax for the ‘for’ loop.
  3. Loop counters.
  4. Learning nested loops.

Goals: students use loops, multiple variables to create complicated animations.

  1. Introduction to functions.
  2. Making your own function.
  3. Calling the function in your animation.

Goals: students use loops, multiple variables to create complicated animations.

  1. How to use images in JavaScript projects.
  2. How to use sounds in JavaScript projects.
  3. Understanding how to create jumps and simulate gravity in your projects.
  4. Creating a mini game.

Goals: students create their own mini game.

digital art icon

Digital Art and Animation

This course is lighter of programming and mostly introducing children to computer graphics and animation. Course is designed to help children to develop abstract thinking through building visuals. Student will be learning the concept of vector graphics (SVG). They will also learn raster graphics manipulation. Different software will be used. It is a fun course that brings out a lot of creativity and teachers a lot of computer skills. Please, schedule a meeting in zoom prior to signing up for better placement of your child in our course.

Projects by our students

Check out what kids can achieve with Coding Butterfly.

Projects by our students

Check out what kids can achieve with Coding Butterfly.

javascript icon

Blurry flowers

javascript icon

Everything is connected

javascript icon

Rose windows

javascript icon

Growing flowers

javascript icon

Everything is connected

javascript icon

Rose Windows