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.
Read moreRead less
All content
Courses
Tutorials

All JavaScript for Designers tutorials:

  1. How to create a color gradient tool in JavaScript

    How to create a color gradient tool in JavaScript

    Tutorial • Beginner

    Time to make things pop! By the end of this tutorial, you'll have your own gradient tool to generate CSS and create stunning gradients that bring a striking...

  2. Create a currency converter with HTML, CSS, and vanilla JavaScript

    Create a currency converter with HTML, CSS, and vanilla JavaScript

    Tutorial • Intermediate

    Let’s create a currency converter using HTML, CSS, and vanilla JavaScript, with data from the Exchange Rate API.

  3. Build a “button-to-modal” animation with GSAP

    Build a “button-to-modal” animation with GSAP

    Tutorial • Intermediate

    In this new tutorial, we’ll be working with GSAP, learning how to create an easy-to-follow, attractive, button-to-modal animation.

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

  5. How to build a Connect Four game in HTML, CSS, and Vanilla JavaScript

    How to build a Connect Four game in HTML, CSS, and Vanilla JavaScript

    Tutorial • Intermediate

    Follow along and learn how to build a fully functioning Connect Four game in HTML, CSS and Vanilla JavaScript.

  6. Build a website page configurator with CSS & JavaScript

    Build a website page configurator with CSS & JavaScript

    Tutorial • Intermediate

    In this new tutorial, you’ll learn how to build a flexible website page configurator to customize the page UI on the fly. 

  7. Make your own URL shortener in JavaScript

    Make your own URL shortener in JavaScript

    Tutorial • Beginner

    Have you ever wondered how those short URLs in social media bios are made? In today’s digital world, long URLs can look unappealing, especially in places...

  8. Create a slot machine game in vanilla JavaScript

    Create a slot machine game in vanilla JavaScript

    Tutorial • Beginner

    Let me show you how to create a slot machine game in JavaScript. Play along, spin the wheels, and win some “money” if you are lucky!

  9. How to create animated snow on a website (with CSS and JavaScript)

    How to create animated snow on a website (with CSS and JavaScript)

    Tutorial • Beginner

    In this tutorial, we’re going to implement an animated snow effect on a webpage using CSS and vanilla JavaScript, just in time for the holiday season.

  10. Create a breakout game with HTML, CSS, and vanilla JavaScript

    Create a breakout game with HTML, CSS, and vanilla JavaScript

    Tutorial • Intermediate

    Let’s create a Breakout game using Vanilla JavaScript. In a Breakout game, the player uses a paddle to bounce a ball and hit bricks, removing the bricks one...

  11. How to create a scratch card effect with vanilla JavaScript

    How to create a scratch card effect with vanilla JavaScript

    Tutorial • Intermediate

    Learn how to create a scratch card effect using vanilla JavaScript. The tutorial will guide you through creating a realistic scratch-off effect with HTML...

  12. Create a JavaScript tab component with an adaptive stepper UI

    Create a JavaScript tab component with an adaptive stepper UI

    Tutorial • Beginner

    In this tutorial, we'll build a simple responsive JavaScript tab component where the clickable tabs will appear as a stepper component.

Related Categories

CSS
HTML/CSS
UI Design
Sketch
Unlimited Downloads
From $16.50/month
Get access to over one million creative assets on Envato.
Over 9 Million Digital Assets
Everything you need for your next creative project.
Create Beautiful Logos, Designs
& Mockups in Seconds
Design like a professional without Photoshop.
Join the Community
Share ideas. Host meetups. Lead discussions. Collaborate.