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

Building a Slider with Metafizzy’s Flickity

Tutorial • Intermediate

Flickity is a JavaScript slider library, built by David DeSandro of Metafizzy fame. It’s optimized for touch gestures, performance, and includes things like...

Thoriq Firdaus • 23 Jul 2015
Animation

Silky Smooth Web Animation with Velocity.js

Tutorial • Intermediate

Animation, when thoughtfully applied, can improve website interfaces and, ultimately, the user experience of a website. In this tutorial, we are going to...

Thoriq Firdaus • 13 Jul 2015
JavaScript for Designers

Bower in 60 Seconds

Tutorial • Intermediate

Bower is a package manager (which helps organize your front-end development). This is a rapid fire explanation of how you use it, in 60 seconds!

Adi Purdila • 24 Jun 2015
Animation

TimelineMax: Getting a Handle on Bézier Tweening

Tutorial • Intermediate

Plugins for GSAP are great when you need advanced capabilities. The BezierPlugin I’ll be explaining in this tutorial helps animate virtually any property (or...

Dennis Gaebel • 21 May 2015
Animation

Introducing ScrollMagic 2.0

Tutorial • Intermediate

If you’re desperate to generate beautiful scroll animations in your next project, then look no further. ScrollMagic is a JavaScript library to help you...

Dennis Gaebel • 19 May 2015
HTML

Native Popups and Modals With the HTML5 “dialog” Element

Tutorial • Intermediate

Many processes on the web these days require users’ full consent in order to be completed. For example, users may need to remove an account, change their...

Thoriq Firdaus • 13 May 2015
Animation

TimelineMax: Controlling Playback With addPause()

Tutorial • Intermediate

In this tutorial we’ll learn how to control animations, on demand, using a method called addPause(). Ready? Set? … slight pause … Let’s go!

Dennis Gaebel • 22 Apr 2015
HTML

The Perfect Lightbox? Using PhotoSwipe With jQuery

Tutorial • Intermediate

I recently came across a JavaScript library called PhotoSwipe, and I am truly impressed. It is a brilliant library which overlays an image or a group of...

Thoriq Firdaus • 9 Apr 2015
SVG

Adobe Illustrator’s SVG Interactivity Panel Explained

Tutorial • Beginner

In today’s tutorial we’ll take a look at a tool in Illustrator which helps authoring of SVG interactivity. It’s called–wait for it–The SVG Interactivity...

Dennis Gaebel • 3 Apr 2015
JavaScript for Designers

The Command Line for Web Design: Wrapping Up

Tutorial • Beginner

I hope you had a great time with this tutorial series, and discovered some of the incredibly useful ways the command line can be incorporated into every day...

Kezz Bracey • 1 Apr 2015
JavaScript for Designers

The Command Line for Web Design: Live Reload & BrowserSync

Tutorial • Beginner

In this lesson you'll learn how to create commands that add an extra layer of awesome to your projects, enabling live reload and browser synchronization.

Kezz Bracey • 26 Mar 2015
JavaScript for Designers

The Command Line for Web Design: Automation With Gulp

Tutorial • Beginner

In the previous tutorial we setup a project and used Grunt to watch and automatically compile Stylus and Jade. In this tutorial we’ll be doing the same, but...

Kezz Bracey • 24 Mar 2015