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 content:

  1. How to Add Custom JavaScript to Your WordPress Site

    How to Add Custom JavaScript to Your WordPress Site

    Tutorial Beginner

    To customize your WordPress theme, you frequently have to add custom JavaScript. It’s a bit more complicated than adding custom CSS, as you can’t use the...

  2. How to Build Horizontal Marquee Effects With GSAP

    How to Build Horizontal Marquee Effects With GSAP

    Tutorial Intermediate

    Let me show you how to create infinite marquees with the GSAP JavaScript animation library. This is a common UX pattern I’m sure you’ve seen on plenty of sites.

  3. How to Update Webpage Content Based on URL Parameters

    How to Update Webpage Content Based on URL Parameters

    Tutorial Intermediate

    In this JavaScript tutorial, we’ll be looking at how to use URLs to update the content on a webpage. Specifically, we'll be looking at using URL parameters...

  4. How to Create a Chrome Extension With Vanilla JavaScript

    How to Create a Chrome Extension With Vanilla JavaScript

    Tutorial Intermediate

    This tutorial will cover how to build a minimalistic homepage Chrome extension, with JavaScript, designed to help users stay productive.

  5. Build a Simple Weather App With Vanilla JavaScript

    Build a Simple Weather App With Vanilla JavaScript

    Tutorial Intermediate

    In today’s tutorial, we’ll learn how to build a weather app that is simple yet fully functional with Vanilla JavaScript. We have a lot of interesting things...

  6. Build a JavaScript Dropdown Filter Component With Shareable URLs

    Build a JavaScript Dropdown Filter Component With Shareable URLs

    Tutorial Intermediate

    In this new tutorial, we'll learn how to create a JavaScript dropdown filter component where each filtering option will have a unique shareable URL. 

  7. How to Animate on Scroll With Vanilla JavaScript

    How to Animate on Scroll With Vanilla JavaScript

    Tutorial Intermediate

    In this tutorial, we’ll combine CSS animations and JavaScript event listeners to create an animate on scroll feature that works on all browsers.

  8. Building a Vertical Timeline With CSS and a Touch of JavaScript (Updated)

    Building a Vertical Timeline With CSS and a Touch of JavaScript (Updated)

    Tutorial Intermediate

    In this tutorial, we’ll learn how to build a responsive vertical timeline from scratch. First, we’ll create the basic structure with minimal markup and the...

  9. How to Create a Typing Test Game with Vanilla JavaScript

    How to Create a Typing Test Game with Vanilla JavaScript

    Tutorial Beginner

    How many words per minute can you type? In this tutorial you’ll learn how to create a typing test game with JavaScript. The app will feature a timer that...

  10. Learn How to Code a Simple JavaScript Calendar and Datepicker

    Learn How to Code a Simple JavaScript Calendar and Datepicker

    Tutorial Beginner

    A JavaScript calendar is the best tool to understand date functionalities in JavaScript. This tutorial will create a real-time calendar similar to the one in...

  11. How to Build a Responsive Navigation Bar With Flexbox

    How to Build a Responsive Navigation Bar With Flexbox

    Tutorial Intermediate

    Time for a practical exercise in flexbox! In this tutorial we will use flexbox to create a mobile-first, responsive, toggleable navigation bar with different...

  12. Create Your Own AI Image Generator App With JavaScript and DALL-E 3

    Create Your Own AI Image Generator App With JavaScript and DALL-E 3

    Tutorial Beginner

    In this tutorial, we’ll build an AI image-generation app with JavaScript. Users will enter text describing the image they want, then behind the scenes we’ll...