Web Interactivity

You know how to make (simple) websites. But you've visited sites that are more like experiences: they're interactive, they use fancy animation, they have flashy animations. How do they do that? And how can you do that? Maybe you've been put off by JavaScript in the past, but we'll show that they're actually two ways to learn: through adapting examples, or by taking the "fundamental" route, going deep into programming. This course focuses on the former, getting the job done. You'll learn what JavaScript can do and how to take existing code and bend it to your will. After this course you'll know how to integrate any kind of existing code into your own website.

Part 1

Part 2

Goals

• Understand how to write and run code in JavaScript.
• What to do if things go wrong: using the developer tools.
• Understand the very basics of programming: loops, variables, conditions.
• Understanding how to manipulate elements on the page using the DOM.
• You will be able to react to events on the page (e.g. clicks, mouse movement).
• Understand how to work with lists and why they're so useful.

Requirements

If you want to follow this workshop, make sure you have followed the previous workshop about web design (there is a video recording). Otherwise, check the internet for some basic tutorials about HTML and some CSS as well.

Just like the web design course, you'll need Visual Studio Code. and Chrome. or Firefox.

Project

We'll take a simple existing, static website and make it interactive: we'll add a hamburger menu, scrolling web gallery, and animate elements on scroll.

Next Steps

• Challenge yourself with the JavaScript 30 Coding Challenge: build 30 exciting things in 30 days.
• Follow the Creative Coding with p5.js workshop to learn how to use JavaScript to generate new visual designs.