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.
  1. Linking Up the Google Maps and Flickr APIs

    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...

  2. The Google Maps API and Custom Overlays

    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...

  3. Getting Creative With the Google Maps API

    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...

  4. Filler Content: Tools, Tips and a Dynamic Example

    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...

  5. Build a Multi-Step Form Interface

    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...

  6. Reveal Content When Needed With an Expanding Footer

    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...

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

    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...

  8. Create a Sticky Navigation Header Using jQuery Waypoints

    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...

  9. All You Need to Know About the HTML5 Data Attribute

    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.

  10. Build a Responsive, Filterable Portfolio, with CSS3 Twists

    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...

  11. A Flexible Approach to Responsive Navigation

    A Flexible Approach to Responsive Navigation

    Tutorial Beginner

    Many responsive websites provide a horizontal navigation bar on large screens and drop-down navigation for smaller viewports. It's a perfectly decent...

  12. Super Simple Lightbox With CSS and jQuery

    Super Simple Lightbox With CSS and jQuery

    Tutorial Beginner

    Rather than using a bloated plugin that has features you’ll never use, this tutorial shows you how to create a super simple lightbox for handling images....