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

Animation

How to Create Smooth Page Transitions with JavaScript

Tutorial • Intermediate

In this JavaScript tutorial you’ll learn how to create an animated page transition with a JavaScript library called Highway.

Adi Purdila • 29 Dec 2020
HTML

JavaScript Skills: Create a Responsive Header Animation on Scroll

Tutorial • Beginner

In this tutorial we’ll learn how to animate header elements on scroll. First, we’ll build a fully responsive top navigation header with three different...

George Martsoukos • 9 Sep 2020
HTML

Quick Tip: How to Create a Simple Fade Effect on Scroll

Tutorial • Beginner

In today’s super quick tutorial, we’ll learn how to build a simple, yet useful scroll effect. As we scroll within the page, the visibility of two elements...

George Martsoukos • 29 May 2020
JavaScript for Designers

How to Build a Grayscale to Color Effect on Scroll (CSS & JavaScript)

Tutorial • Intermediate

In this tutorial, we’ll start with some grayscale images and learn how to smoothly reveal their colored variants on scroll. To achieve the desired effect,...

George Martsoukos • 19 May 2020
HTML

How to Build a Simple Full-Screen Slideshow With Vanilla JavaScript

Tutorial • Intermediate

In this tutorial you’ll learn how to create a responsive full-screen slideshow with plain JavaScript. To build it, we’ll go through several different...

George Martsoukos • 17 Mar 2020
WordPress Plugins

Add a Live Ajax Search Bar to Your WordPress Website

Tutorial • Intermediate

Help the people who visit your website find the content that matters to them by adding live search and advanced filtering to your website, using the Ajax Pro...

Jessica Thornsby • 10 Dec 2019
JavaScript for Designers

A Guide to Dependency Management in Front-End Development

Tutorial • Beginner

Package managers, task runners, and module bundlers are build tools that you can use for dependency management. In this article, we’ll look into how they are...

Anna Monus • 10 Dec 2019
HTML

Quick Tip: How to Build a MouseOver Navigation Slide Effect

Tutorial • Beginner

In today’s exercise, we’ll take inspiration from Slider Revolution’s mini toolbar and build a menu that smoothly animates on hover.

George Martsoukos • 18 Oct 2019
Animation

Try Our Practical Web Animation Course, With New Bonus Projects!

Tutorial • Beginner

Join the thousands of people who have learned web animation in our popular course, Practical Web Animation. Try some of the brand new projects we've added.

Andrew Blackman • 20 Sep 2019
JavaScript for Designers

Sticky Positioning Without JavaScript (Thanks to CSS Position: Sticky)

Tutorial • Intermediate

Sticking elements when the user scrolls to a certain point is a common pattern in modern web design. This behaviour has now become a standard (CSS position:...

Thoriq Firdaus • 16 Sep 2019
HTML

An Introduction to CSS-in-JS: Examples, Pros, and Cons

Tutorial • Beginner

With CSS-in-JS libraries, you can style component-based applications securely and efficiently. They also let you add complex UX logic and dynamic...

Anna Monus • 9 Sep 2019
Navigation

How to Make the Bootstrap Navbar Dropdown Work on Hover

Tutorial • Beginner

in this short tutorial we’ll build a typical Bootstrap navbar with a quick solution for showing its dropdowns on hover.

George Martsoukos • 2 Sep 2019