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:

Filters

UI Design

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...

Louie Rootfield • 7 Mar 2017
JavaScript for Designers

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...

Louie Rootfield • 30 Nov 2016
Performance

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...

Louie Rootfield • 28 Nov 2016
JavaScript for Designers

Designers, We Need to Talk About Development

Tutorial • Beginner

In this series, we’ll discuss how to navigate the elusive rabbit hole that designers often find themselves in when dealing with developers on creative projects.

Daine Mawer • 24 Oct 2016
Running a Photography Business

Who Needs AMP? How to Lazy Load Responsive Images Quick and Easy With Layzr.js

Tutorial • Intermediate

Lazy loading allows a visitor to start engaging with content sooner, and the enhanced load speed can boost your search engine rankings. The more images you...

Kezz Bracey • 30 Sep 2016
HTML

How to Code a Scrolling “Alien Lander” Website

Tutorial • Intermediate

In this tutorial, the second in a two part series, we’ll be taking the awesome vector-based illustration produced in How to Create a Long Scrolling...

Kezz Bracey • 25 Jul 2016
HTML

How to Create a Web Component for Embedding YouTube Videos

Tutorial • Advanced

In this tutorial we are going to create a fully-functioning custom HTML element using “Web Components”.

Thoriq Firdaus • 5 Jul 2016
Performance

How to “Lazy Load” Embedded YouTube Videos

Tutorial • Intermediate

In this tutorial I’ll explain how to “lazy load” multiple embedded YouTube videos. Doing so will improve the performance of our initial page load, and hand...

Thoriq Firdaus • 30 Jun 2016
Forms

Form Design: How to Automatically Format User Input

Tutorial • Intermediate

In this tutorial you’ll learn how to format, real time, user input in a form field. As a user types something into an input field the value will be adjusted...

Thoriq Firdaus • 27 Jun 2016
HTML

How to Create a Fixed Header Which Animates on Page Scroll

Tutorial • Beginner

In this tutorial, we’ll learn how to create a pattern seen on many websites these days: a fixed header which animates to a less obtrusive state as we scroll...

George Martsoukos • 20 Jun 2016
Animation

How to Animate a Coffee-Drinking Sprite With ScrollMagic

Tutorial • Intermediate

Creating scroll-initiated motion can be immensely gratifying. We’ll be diving into a particular effect seen on the Casper Mattress website (created by Jonnie...

Dennis Gaebel • 14 Jun 2016
HTML

How to Build an Infinite Scroll Experience With the History Web API

Tutorial • Advanced

In this tutorial we are going to reinforce our History Web API skills. We’re going to build a UX pattern on the Web which is loved and loathed in equal...

Thoriq Firdaus • 6 Jun 2016