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. Using Grunt to Make Your Email Design Workflow Fun Again

    Using Grunt to Make Your Email Design Workflow Fun Again

    Tutorial Intermediate

    Designing email is hard and archaic. Inlining CSS, table design, varying CSS support, multiple devices, multiple clients, the list is endless. In this...

  2. A Quick Introduction to BrowserSync

    A Quick Introduction to BrowserSync

    Tutorial Intermediate

    In this quick video tutorial I'm going to introduce you to BrowserSync, a tool so good Google built it into their recent Web Starter Kit. You can think of...

  3. How They Did It: StarWars.com

    How They Did It: StarWars.com

    Tutorial Beginner

    If you haven't watched Star Wars yet, as soon as you finish this article, go watch it. All of it. (Make sure you come back and let us know if you prefer...

  4. Getting Started With Amazon Simple Email Service (SES)

    Getting Started With Amazon Simple Email Service (SES)

    Tutorial Intermediate

    In this tutorial I am going to talk about Amazon’s Simple Email Service (SES) and go over a few ways you can utilise it.

  5. Quick Tip: Sticky Navigation, Without the Awkward Jump

    Quick Tip: Sticky Navigation, Without the Awkward Jump

    Tutorial Intermediate

    In this quick tutorial we're going to use jQuery and make a simple sticky navigation. With that done, we'll improve on our efforts by using jQuery Waypoints...

  6. Introduction to Webhook: Custom CMS and Website Builder

    Introduction to Webhook: Custom CMS and Website Builder

    Tutorial Beginner

    Webhook is a new site building platform which was successfully backed on Kickstarter in May 2014 and has just been released to the public. The concept behind...

  7. Recreating the Touch Ripple Effect as Seen on Google Design

    Recreating the Touch Ripple Effect as Seen on Google Design

    Tutorial Intermediate

    Google's new design efforts are vast and justify a significant amount of conversation. But instead of talking about the theory of "Material Design" and the...

  8. Get up and Running with Google Web Starter Kit

    Get up and Running with Google Web Starter Kit

    Tutorial Intermediate

    In this post, I'm going walk you through several of Google Web Starter Kit's key features and also demonstrate how to use it for your next new project....

  9. Create a Single Page “About Me” Site With Prepros, Jade & Stylus

    Create a Single Page “About Me” Site With Prepros, Jade & Stylus

    Tutorial Intermediate

    Today we'll be learning how to create a static one page "About Me" website using the awesome free app Prepros from Alpha Pixels.

  10. Quick Tip: What to do When You Encounter a Bower File

    Quick Tip: What to do When You Encounter a Bower File

    Tutorial Beginner

    Have you ever cloned or downloaded a GitHub repo, only to find a number of strange and extraneous files which you don't recognise? For example, you may well...

  11. How to Build a Page Scroll Progress Indicator With jQuery and SVG

    How to Build a Page Scroll Progress Indicator With jQuery and SVG

    Tutorial Intermediate

    Today we will be looking at a few techniques for displaying scroll progress for users who are reading a page. We will cover two specific techniques you can...

  12. How to Add Branded Branch Locations to Google Maps

    How to Add Branded Branch Locations to Google Maps

    Tutorial Intermediate

    In this tutorial we'll walk through the process of creating a branded Google map for an imaginary client.