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. What to Expect From Web Design in 2016

    What to Expect From Web Design in 2016

    Tutorial Beginner

    2015 was a year to remember! From the first shipment of the Apple Watch to the landing of the Mars rover, to the long-awaited release of the next instalment...

  2. HTML5 Mastery: Fragments

    HTML5 Mastery: Fragments

    Tutorial Intermediate

    The third part of the "HTML5 Mastery" series focuses on the special `DocumentFragment` structure. We look at its API, the possibility of reducing DOM...

  3. “Copy to Clipboard” Made Easy with Clipboard.js

    “Copy to Clipboard” Made Easy with Clipboard.js

    Tutorial Intermediate

    Owing to browser restrictions, adding copy functionality to web pages used to be a real hassle. Fortunately now we have a JavaScript library that allows us...

  4. PostCSS Deep Dive: Create Your Own Plugin

    PostCSS Deep Dive: Create Your Own Plugin

    Tutorial Intermediate

    In this tutorial you’ll learn how to create a basic plugin of your own for PostCSS. We won’t be going too heavily into the plugin API, and we won’t use any...

  5. Completing Our Draggable Off-Canvas Menu with GreenSock

    Completing Our Draggable Off-Canvas Menu with GreenSock

    Tutorial Advanced

    In the first part of this Draggable journey, we discussed how to include scripts, investigated the ThrowPropsPlugin, including the requirements to jump start...

  6. Using PostCSS for Cross Browser Compatibility

    Using PostCSS for Cross Browser Compatibility

    Tutorial Intermediate

    In this tutorial we’re going to use PostCSS to create a stylesheet designed for cross browser compatibility.

  7. PostCSS Quickstart Guide: Grunt Setup

    PostCSS Quickstart Guide: Grunt Setup

    Tutorial Intermediate

    In the last tutorial we went through how to setup a PostCSS project with Gulp. In this tutorial we’ll achieve the same ends, by using Grunt. By the end of...

  8. PostCSS Quickstart Guide: Gulp Setup

    PostCSS Quickstart Guide: Gulp Setup

    Tutorial Intermediate

    In this tutorial we’ll go through how you can use PostCSS with the task runner Gulp, allowing you to decide for yourself which plugins you want to use and...

  9. Combining Pattern Lab with Gulp for Improved Workflow

    Combining Pattern Lab with Gulp for Improved Workflow

    Tutorial Intermediate

    Do you and your team work with styleguides? Do you have documentation for your modules? If not, don’t panic. In this tutorial I’ll show you how it’s possible...

  10. Connecting an API-Driven Web App with Javascript

    Connecting an API-Driven Web App with Javascript

    Tutorial Intermediate

    We have our little app looking just the way we want, but it doesn’t actually do anything yet. So, let’s work on adding some JavaScript to make the app...

  11. Planning a Basic API-Driven Web App

    Planning a Basic API-Driven Web App

    Tutorial Intermediate

    APIs are a big part of web design and development these days. They help power rich, dynamic experiences in the browser. In this tutorial, you’ll learn the...

  12. Three Local Site Preview Methods in 60 Seconds

    Three Local Site Preview Methods in 60 Seconds

    Tutorial Beginner

    Here are three ways to setup local website previews, in 60 seconds! First, we’ll look at Prepros. Then we’ll use BrowserSync with Gulp. Lastly, we’ll look at...