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 a CRUD Web Application with Vanilla JavaScript

    How to Build a CRUD Web Application with Vanilla JavaScript

    Tutorial Intermediate

    In this tutorial, we’ll be building a CRUD application in the form of a note taking app. We’ll also explore how to use local storage to save notes in our...

  2. How to Code an Accessible JavaScript Accordion Component

    How to Code an Accessible JavaScript Accordion Component

    Tutorial Intermediate

    In this tutorial, we’ll be creating an accessible accordion block component using vanilla JavaScript, that allows a user to toggle collapsible content.

  3. How to Set Up a Multi-Filter Feature with Vanilla JavaScript

    How to Set Up a Multi-Filter Feature with Vanilla JavaScript

    Tutorial Advanced

    In this tutorial, we’re going to use vanilla JavaScript to implement a multi-filter feature, that allows a user to select and combine multiple different...

  4. Create an Animated Sticky Header on Scroll (With a Bit of JavaScript)

    Create an Animated Sticky Header on Scroll (With a Bit of JavaScript)

    Tutorial Beginner

    In the past, we’ve covered many header scroll effects, and today it’s time for another one! In this tutorial, you’ll learn how to make a header reappear and...

  5. How to Build a Responsive Off-Canvas Menu With CSS and a Touch of JavaScript

    How to Build a Responsive Off-Canvas Menu With CSS and a Touch of JavaScript

    Tutorial Beginner

    In this tutorial, we’ll go through a simple yet effective method for creating a responsive off-canvas menu with HTML, CSS, and JavaScript.

  6. Create a Click-to-Copy Utility With JavaScript

    Create a Click-to-Copy Utility With JavaScript

    Tutorial Beginner

    This tutorial is a short guide on creating a click-to-copy utility using simple JavaScript, HTML, and CSS.

  7. Build a Custom HTML Music Player, Using JavaScript and the Web Audio API

    Build a Custom HTML Music Player, Using JavaScript and the Web Audio API

    Tutorial Intermediate

    This tutorial will show you how to build a custom music player, using the Web audio API, that is uniquely branded with CSS, HTML, and JavaScript. 

  8. How to Build a TODO App With Vanilla JavaScript (and Local Storage)

    How to Build a TODO App With Vanilla JavaScript (and Local Storage)

    Tutorial Advanced

    In this tutorial, we’ll enhance our front-end skills by learning to build a “handmade” TODO app. To create it, we won’t take advantage of any JavaScript...

  9. How to Build a JavaScript Countdown Timer

    How to Build a JavaScript Countdown Timer

    Tutorial Intermediate

    In this tutorial, we’ll be implementing a timer to countdown to a specific date or time using vanilla JavaScript. We’ll also implement a feature to display...

  10. How To Scrape Data From a Webpage Using Vanilla JavaScript

    How To Scrape Data From a Webpage Using Vanilla JavaScript

    Tutorial Beginner

    In this tutorial, we’ll take a look at how to use JavaScript in a browser’s dev tools to scrape data from any webpage.

  11. How to Build a Multi Step Form Wizard with JavaScript

    How to Build a Multi Step Form Wizard with JavaScript

    Tutorial Intermediate

    In this tutorial, we will build a multi step form using JavaScript, HTML, and CSS (perfect for questionnaires and quizzes).

  12. How to Build a Pricing Table With a Monthly/Yearly CSS Toggle Switch

    How to Build a Pricing Table With a Monthly/Yearly CSS Toggle Switch

    Tutorial Intermediate

    Toggle button switches are a classic UX trend often met in different parts of a website or an app. In a previous tutorial, we discussed how to build a...