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

Bootstrap

Build a Dynamic Grid with Salvattore and Bootstrap in 10 Minutes

Tutorial • Intermediate

Today, we will use Salvattore in combination with Twitter Bootstrap 3 to make a responsively awesome flowing grid structure.

Jonathan Cutrell • 8 Apr 2014
JavaScript for Designers

Finishing the Responsive Timeline Portfolio Page

Tutorial • Intermediate

It's time to finish off our responsive timeline portfolio layout. In this tutorial we'll add some flair with CSS3 animations and jQuery.

Steve Everett • 5 Mar 2014
JavaScript for Designers

Why I Choose Stylus (And You Should Too)

Tutorial • Beginner

The world of front end web development has been steadily increasing its uptake of what we call "CSS Preprocessors", which extend the functionality of regular...

Kezz Bracey • 21 Feb 2014
JavaScript for Designers

Responsive Design, Retina Images and Debugging for Google Maps API

Tutorial • Intermediate

This final part of the Google Maps API For Designers series rounds things up by looking at responsive design, retina images and a range of testing and...

Emily Bennett • 21 Aug 2013
UI Design

Build a Dynamic Dashboard With ChartJS

Tutorial • Intermediate

Today we will be creating a dynamic dashboard with live charts, through the power of ChartJS. ChartJS is a powerful, dependency free JavaScript library which...

Jonathan Cutrell • 12 Aug 2013
HTML

Linking Up the Google Maps and Flickr APIs

Tutorial • Beginner

Imagine you've made the beautiful map a client requested; adding all sorts of interesting markers, pop-ups, custom overlays and photos. But then the client...

Emily Bennett • 8 Aug 2013
HTML

The Google Maps API and Custom Overlays

Tutorial • Intermediate

In our previous tutorial we looked at how you can add markers and customize the colors and menus of a Google map using the service's API. This tutorial takes...

Emily Bennett • 29 Jul 2013
HTML

Getting Creative With the Google Maps API

Tutorial • Intermediate

You’ve designed a shiny new website; carefully selecting the colors, typography and photographs to perfectly reflect the company's branding. Then your...

Emily Bennett • 5 Jul 2013
JavaScript for Designers

Filler Content: Tools, Tips and a Dynamic Example

Tutorial • Beginner

As designing in the browser becomes more popular (and convenient), the need for helpful design tools is increasing. One set of tools that is becoming quite...

Jim Nielsen • 9 May 2013
JavaScript for Designers

Build a Multi-Step Form Interface

Tutorial • Beginner

Form usability is an incredibly important topic in web design. As one of the primary input interfaces provided to users, the usability of a form is essential...

Jonathan Cutrell • 30 Apr 2013
JavaScript for Designers

Reveal Content When Needed With an Expanding Footer

Tutorial • Beginner

During this tutorial we're going to build an expanding footer; a user interface pattern which allows the user to click on expandable footer regions if they...

Norris • 22 Apr 2013
JavaScript for Designers

Quick Tip: Implement a Sticky "Back to Top" Button

Tutorial • Beginner

In this quick tip screencast we're going to implement a feature which you may have seen on websites with lots of page content. This button appears when the...

Adi Purdila • 25 Feb 2013