Learn JavaScript for Designers

Bring your websites to life with interactive elements using JavaScript. These tutorials are tailored to web designers and are full of practical examples and tips.

All JavaScript for Designers tutorials:

  1. Building a Weather App With the DarkSky API

    Building a Weather App With the DarkSky API

    Tutorial Intermediate

    Building for the web is just about as much fun as anyone can have, especially when you’re working with an API to dynamically pull in data. Some might call...

  2. A Noob’s Guide to Three.js

    A Noob’s Guide to Three.js

    Tutorial Intermediate

    Three.js is to WebGL what jQuery is to JavaScript, offering declarative syntax loved my so many, and abstracting away the headaches for 3D in the browser....

  3. Sass to CSS: How to Preserve Whitespace on Compile

    Sass to CSS: How to Preserve Whitespace on Compile

    Tutorial Intermediate

    Ever wanted to keep the visual structure of your Sass files, when you compile to CSS, without losing any of the whitespace? In this quick tip I’m going to...

  4. The Noob’s Guide to Choosing a JavaScript Framework

    The Noob’s Guide to Choosing a JavaScript Framework

    Tutorial Intermediate

    When it comes to choosing the right JavaScript Framework it certainly is a wild and confusing landscape out there. This guide will help you–a budding...

  5. How to Create a “Sticky” Floating Video on Page Scroll

    How to Create a “Sticky” Floating Video on Page Scroll

    Tutorial Intermediate

    In this tutorial I’m going to show you how to recreate a “Sticky” Floating Video; something you may have seen on media websites, video platforms, and social...

  6. How to Create a Line Chart With Chart.js

    How to Create a Line Chart With Chart.js

    Tutorial Beginner

    In this video tutorial from my course on Data Design With Chart.js, you’re going to create a simple line chart by using the Chart.js framework to plot out a...

  7. 3 Methods for Automatic Browser Reloading

    3 Methods for Automatic Browser Reloading

    Tutorial Beginner

    In this screencast tutorial you’ll learn about browser reloading–specifically automatic reloading–and we’ll consider three different methods for doing so....

  8. 3 Courses to Help You Master Scrolling Animation

    3 Courses to Help You Master Scrolling Animation

    Tutorial Beginner

    Scrolling animation can be a great way to provide more interest for your users and to make your websites more interactive. The idea is that, as a user...

  9. How to Track User Behavior With Google Analytics Events

    How to Track User Behavior With Google Analytics Events

    Tutorial Intermediate

    In this tutorial I’ll show you how to leverage the Google Analytics Event Tracking API (what a long name!) to find out how visitors use and interact with...

  10. Performance Enhancement: How to Load Images Using in-view.js

    Performance Enhancement: How to Load Images Using in-view.js

    Tutorial Intermediate

    In this tutorial I’ll show you how to improve the performance of your web pages by using in-view.js. This JavaScript library reports back when something has...

  11. Remove Unnecessary CSS With PurifyCSS and Grunt

    Remove Unnecessary CSS With PurifyCSS and Grunt

    Tutorial Intermediate

    In this tutorial I’ll show you how to use Grunt and PurifyCSS to create a super-lightweight stylesheet with minimal effort. We’ll install it, then learn how...

  12. Try Our New Course on Data Design With Chart.js

    Try Our New Course on Data Design With Chart.js

    Tutorial Beginner

    In our new course, Data Design With Chart.js, you'll get a comprehensive introduction to Chart.js, a powerful JavaScript library for dynamically displaying...