Computing

Computer programming

Learn how to program drawings, animations, and games using JavaScript & ProcessingJS, or learn how to create webpages with HTML & CSS. You can share whatever you create, explore what others have created and learn from each other!
Create: New Program (JS + ProcessingJS) New Webpage New SQL script Browse Projects
Help Requests
Project Evaluations Community Questions

Intro to JS: Drawing & Animation

Learn how to use the JavaScript language and the ProcessingJS library to create fun drawings and animations.

Intro to HTML/CSS: Making webpages

Learn how to use HTML and CSS to make webpages. HTML is the markup language that you surround content with, to tell browsers about headings, lists, tables, etc. CSS is the stylesheet language that you style the page with, to tell browsers to change the color, font, layout, and more.

Intro to SQL: Querying and managing data

Learn how to use SQL to store, query, and manipulate data. SQL is a special-purpose programming language designed for managing data in a relational database, and is used by a huge number of apps and organizations.

Advanced JS: Games & Visualizations

Once you've taken Intro to JS, go here to learn techniques to help you make multi-scene programs, 3d graphics, button menus, and scored games.

Advanced JS: Natural Simulations

Once you've taken Intro to JS, you can go through this course to learn how to combine JS, ProcessingJS, and mathematical concepts to simulate nature in your programs. This course is a derivative of "The Nature of Code" book by Daniel Shiffman (natureofcode.com), used under CC BY-NC.

HTML/JS: Making webpages interactive

Once you've taken both Intro to JS and Intro to HTML/CSS, take this course to learn how use HTML/CSS with the JavaScript DOM API to make your webpages interactive.

HTML/JS: Making webpages interactive with jQuery

Learn how to use jQuery, the world's most popular JS browser library, to add interactivity to your webpages.

Meet the professional

What can you do with computer science and programming skills once you've learned them? We've invited people from all around the world and the industry to introduce themselves to you. Find out how diverse our field can be!
Computer programming

Intro to JS: Drawing & Animation

Learn how to use the JavaScript language and the ProcessingJS library to create fun drawings and animations.
New Program Documentation
Help Requests
Project Evaluations Community Questions
All content in “Intro to JS: Drawing & Animation”

Intro to programming

If you're new here, watch our intro video and get a brief tour of our programming course. Then get coding!

Drawing basics

We'll show you the basics of programming and how to draw shapes.

Coloring

We'll show you how to color and outline your shapes!

Variables

We'll cover how to use variables to hold values, animate your drawings, and more.

Animation basics

Learn how to animate your drawings.

Interactive programs

Learn how to make programs that draw shapes based on the mouse location, like painting apps.

Bonus: Resizing with variables

Learn how to use variable expressions to resize parts of your drawing relative to other parts. (This requires a bit more math, so if you don't feel you have a good grasp of fractions yet, you can skip over this.)

Text and strings

Learn how to display text on the canvas, resize it, color it, and animate it.

Functions

Make your code more re-usable by grouping it into functions, and then make those functions accept parameters and return values.

Logic and if Statements

Teach your program to make decisions!

Debugging programs

How can you figure out what's wrong with your code? Learn tips and tricks for debugging your programs.

Looping

Repeating something over-and-over? Loops are here to help!

Writing clean code

Learn how to write JavaScript code that is easy to read and understand, with good use of indentation, spacing, naming, and comments.

Arrays

Store multiple values in your variables with arrays!

Objects

Learn how to store complex data in objects.

Object-Oriented Design

How to use object-oriented concepts in JavaScript to make more re-usable code.

Becoming a better programmer

Now that you understand the basics of programming, learn techniques that will help you be more productive and write more beautiful code.