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

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
Navigation

Create a Sticky Navigation Header Using jQuery Waypoints

Tutorial • Beginner

In this tutorial, we'll be creating a navigation bar that stays with you as you scroll down — and we'll also throw a gimmick or two into the mix to polish it...

Adam Avramov • 22 Jan 2013
HTML

All You Need to Know About the HTML5 Data Attribute

Tutorial • Intermediate

The HTML5 data attribute lets you assign custom data to an element. This article looks at how to use it and provides examples of when it would be ideally used.

Aaron Lumsden • 29 Nov 2012
JavaScript for Designers

Build a Responsive, Filterable Portfolio, with CSS3 Twists

Tutorial • Intermediate

The inherent visual appeal of filterable portfolios (like the Tuts+ hub) has made them very popular. Today, we’ll be making one using straight-forward...

Akshat Srivastava • 18 Oct 2012