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. New Course: A Practical Approach to Working With Vue.js and APIs

    New Course: A Practical Approach to Working With Vue.js and APIs

    Tutorial Beginner

    Vue.js is an increasingly popular open-source JavaScript framework for building user interfaces. Learn how to use Vue and integrate it with an API in our new...

  2. How to Build an Accordion Component With CSS and a Touch of JavaScript

    How to Build an Accordion Component With CSS and a Touch of JavaScript

    Tutorial Beginner

    In today’s tutorial we’ll learn how to build a show/hide component with CSS and a little bit of JavaScript.

  3. How to Make Multi-Preview Thumbnails With JavaScript Mouse Events

    How to Make Multi-Preview Thumbnails With JavaScript Mouse Events

    Tutorial Intermediate

    In this tutorial we’ll have some fun with JavaScript mouse events by building something useful and interesting: thumbnails which, when hovered over, display...

  4. A Practical Approach to Working With Vue.js and APIs

    A Practical Approach to Working With Vue.js and APIs

    Course Intermediate

    In this course, you’ll make practical use of the Vue.js framework. In five lessons you’ll learn to use an API to pull in data that you will then display...

  5. A Designer’s Guide to Vue.js Components

    A Designer’s Guide to Vue.js Components

    Course Intermediate

    In this course we’re going to go beyond the basics of the Vue.js framework as we discuss Vue’s component system, allowing us to create modular, reusable...

  6. How to Externalize and Minify JavaScript

    How to Externalize and Minify JavaScript

    Tutorial Beginner

    In this video from my course The Designer’s Guide to JavaScript Optimization, you'll learn how to externalize and minify JavaScript.

  7. How to Build a Responsive Tab Component With CSS and a Touch of JavaScript

    How to Build a Responsive Tab Component With CSS and a Touch of JavaScript

    Tutorial Intermediate

    In this tutorial, we’ll learn how to build a responsive tab component with CSS and a little bit of JavaScript. It’s absolutely possible to create pure CSS...

  8. Stimulus: A JavaScript Framework for People Who Love HTML

    Stimulus: A JavaScript Framework for People Who Love HTML

    Tutorial Intermediate

    Stimulus is a “modest JavaScript framework”, built by the folks at Basecamp. In this tutorial we’ll discuss its differences to mainstream JavaScript...

  9. A Designer’s Introduction to Vue.js

    A Designer’s Introduction to Vue.js

    Course Intermediate

    Vue is a progressive framework for building user interfaces using HTML and JavaScript. In this short course aimed at designers, you will learn the basics of...

  10. What Is Gulp?

    What Is Gulp?

    Tutorial Beginner

    What is Gulp? One description is that Gulp is a task runner. Another would be that it’s a toolkit for automating time-consuming tasks. Find out more in this...

  11. Intersection Observer: Track Elements Scrolling Into View

    Intersection Observer: Track Elements Scrolling Into View

    Tutorial Intermediate

    In this article we’ll take a look at a few demos and discuss the relevance that Intersection Observer will play in the future for web developers.

  12. 2 Ways to Create an Animated Particle Background

    2 Ways to Create an Animated Particle Background

    Tutorial Intermediate

    In today’s screencast I’m going to show you how to create an animated particle background. Particles are a great alternative to standard hero sections on a...