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

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

Thoriq Firdaus • 31 May 2016
JavaScript for Designers

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

Ben Byford • 27 May 2016
JavaScript for Designers

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

Thoriq Firdaus • 2 May 2016
UX Design

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

Thoriq Firdaus • 28 Apr 2016
Animation

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.

George Martsoukos • 24 Mar 2016
JavaScript for Designers

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

George Martsoukos • 11 Feb 2016
JavaScript for Designers

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

George Martsoukos • 9 Feb 2016
JavaScript for Designers

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.

George Martsoukos • 4 Feb 2016
JavaScript for 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.

George Martsoukos • 2 Feb 2016
Animation

What to Expect From Web Design in 2016

Tutorial • Beginner

2015 was a year to remember! From the first shipment of the Apple Watch to the landing of the Mars rover, to the long-awaited release of the next instalment...

Jonathan Cutrell • 4 Jan 2016
HTML

HTML5 Mastery: Fragments

Tutorial • Intermediate

The third part of the "HTML5 Mastery" series focuses on the special `DocumentFragment` structure. We look at its API, the possibility of reducing DOM...

Florian Rappl • 7 Dec 2015
UX Design

“Copy to Clipboard” Made Easy with Clipboard.js

Tutorial • Intermediate

Owing to browser restrictions, adding copy functionality to web pages used to be a real hassle. Fortunately now we have a JavaScript library that allows us...

Thoriq Firdaus • 12 Nov 2015