Intro to JS: Drawing & Animation
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
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!
כל התוכן ב"Intro to JS: Drawing & Animation"
If you've never been here before, check out this introductory video first. Then get coding!
We'll show you the basics of programming and how to draw shapes.
We'll show you how to color and outline your shapes!
We'll cover how to use variables to hold values, animate your drawings, and more.
Learn how to animate your drawings.
- Intro to Animation (Scratchpad)
- Challenge: Exploding Sun (Scratchpad)
- Mouse Interaction (Scratchpad)
- Challenge: Tasty Tomato (Scratchpad)
- Challenge: Mouse movement mania (Scratchpad)
- Incrementing Shortcuts (Scratchpad)
- A shorter shortcut (Scratchpad)
- Challenge: Parting Clouds (Scratchpad)
- Project: Shooting star (Scratchpad)
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.)
Learn how to display text on the canvas, resize it, color it, and animate it.
Make your code more re-usable by grouping it into functions, and then make those functions accept parameters and return values.
- Functions (Scratchpad)
- Challenge: Say Your Name (Scratchpad)
- Function Parameters (Scratchpad)
- Challenge: Moles in Holes (Scratchpad)
- Function Return Values (Scratchpad)
- Challenge: Calculator (Scratchpad)
- Local and Global Variables (Scratchpad)
- Special ProcessingJS functions (Scratchpad)
- Review: Functions (Article)
- Project: Fish Tank (Scratchpad)
Teach your program to make decisions!
- If Statements (Scratchpad)
- Challenge: Bouncy Ball (Scratchpad)
- More Mouse Interaction (Scratchpad)
- Challenge: Your First Painting App (Scratchpad)
- Booleans (Scratchpad)
- Challenge: Number Analyzer (Scratchpad)
- Logical Operators (Scratchpad)
- Challenge: Your First Button (Scratchpad)
- Challenge: Smarter Button (Scratchpad)
- If/Else - Part 1 (Scratchpad)
- Challenge: Flashy Flash Card (Scratchpad)
- If/Else - Part 2 (Scratchpad)
- Review: Logic and if Statements (Article)
- Project: Magic 8-Ball (Scratchpad)
How can you figure out what's wrong with your code? Learn tips and tricks for debugging your programs.
Repeating something over-and-over? Loops are here to help!
- Intro to While Loops (Scratchpad)
- Quiz: While Loops (Exercise)
- Challenge: A Loopy Ruler (Scratchpad)
- More While Loops: Balloon Hopper (Scratchpad)
- Challenge: A Loopy Landscape (Scratchpad)
- For Loops! A New Kind of Loop (Scratchpad)
- Challenge: Lined Paper (Scratchpad)
- Nested For Loops (Scratchpad)
- Review: Looping (Article)
- Project: Build-a-House (Scratchpad)
Store multiple values in your variables with arrays!
Learn how to store complex data in objects.
Now that you understand the basics of programming, learn techniques that will help you be more productive and write more beautiful code.