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. How to Build an Infinite Scroll Experience With the History Web API

    How to Build an Infinite Scroll Experience With the History Web API

    Tutorial Advanced

    In this tutorial we are going to reinforce our History Web API skills. We’re going to build a UX pattern on the Web which is loved and loathed in equal...

  2. How to Integrate SmoothState.js Into a WordPress Theme

    How to Integrate SmoothState.js Into a WordPress Theme

    Tutorial Intermediate

    In our previous tutorial, we used the History Web API within a static site to serve smooth page transitions. In this tutorial we’re going to take things to...

  3. How to Create an AJAX Driven Theme for ProcessWire

    How to Create an AJAX Driven Theme for ProcessWire

    Tutorial Intermediate

    In this tutorial we will look at setting up a simple theme in ProcessWire, we’ll investigate delayed output (now the default theme strategy within...

  4. Selecting Parent Elements With CSS and jQuery

    Selecting Parent Elements With CSS and jQuery

    Tutorial Beginner

    In this tutorial we will walk through a few cases where having a CSS parent selector might come in handy, along with some possible workarounds. Let’s get...

  5. Lovely, Smooth Page Transitions With the History Web API

    Lovely, Smooth Page Transitions With the History Web API

    Tutorial Advanced

    In this tutorial we’re going to build a website whose pages transition smoothly, without the usual aggressive page refresh. To achieve this we’ll use the...

  6. New Course: Advanced Animation With GSAP Plugins

    New Course: Advanced Animation With GSAP Plugins

    Tutorial Beginner

    The GreenSock Animation Platform is a powerful JavaScript library for animating HTML elements in the browser. In our new course, Advanced Animation With GSAP...

  7. Quick Tip: Scroll Animations With fullPage.js and Animate.css

    Quick Tip: Scroll Animations With fullPage.js and Animate.css

    Tutorial Intermediate

    In this quick tip, I’ll show you how to create scroll-based animations with fullPage.js and animate.css.

  8. What Is the GreenSock Animation Platform?

    What Is the GreenSock Animation Platform?

    Tutorial Beginner

    GreenSock is a JavaScript framework which makes it easy to animate HTML elements. In this quick video tutorial, you'll get an overview of GreenSock and its...

  9. How to Use jQuery’s “ajax” Function

    How to Use jQuery’s “ajax” Function

    Tutorial Intermediate

    Having followed the previous three tutorials, you should have gained a good understanding of AJAX. In this final tutorial, we’ll wrap things up by working...

  10. A Beginner’s Guide to AJAX With jQuery

    A Beginner’s Guide to AJAX With jQuery

    Tutorial Intermediate

    In this tutorial, we’ll walk through a few of jQuery’s AJAX-related functions and methods. More specifically, we’ll take a closer look at the shorthand load...

  11. An Example of AJAX With Vanilla JavaScript

    An Example of AJAX With Vanilla JavaScript

    Tutorial Intermediate

    Following on from our introduction to AJAX, this example uses the XMLHttpRequest API to initialize an AJAX request.

  12. An Introduction to AJAX for Front-End Designers

    An Introduction to AJAX for Front-End Designers

    Tutorial Intermediate

    AJAX is an essential front-end technique that allows us to build fast and modern web applications. This article covers the fundamentals of AJAX.