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

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

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

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

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

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

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

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

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

  10. Build a Dynamic Grid with Salvattore and Bootstrap in 10 Minutes

    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.

  11. Finishing the Responsive Timeline Portfolio Page

    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.

  12. Why I Choose Stylus (And You Should Too)

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