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

  1. How to Build a Draggable Image Gallery and a Custom Lightbox With GSAP

    How to Build a Draggable Image Gallery and a Custom Lightbox With GSAP

    Tutorial • Intermediate

    Let's build a responsive JavaScript image gallery with a draggable featured image/main slide plus a custom lightbox. To make the target element draggable,...

  2. Best React Dashboard Templates (Frontend JavaScript)

    Best React Dashboard Templates (Frontend JavaScript)

    Tutorial • Beginner

    React dashboard templates that will help you build visually stunning and efficient dashboards for your web application in no time. 

  3. How to Hide/Reveal Header Notification Bar on Scroll with JavaScript

    How to Hide/Reveal Header Notification Bar on Scroll with JavaScript

    Tutorial • Intermediate

    Let’s build a sticky header whose top part (a notification bar) will disappear on scroll down, and reappear when the user scrolls back up.

  4. How to Recreate Material Design Floating Labels

    How to Recreate Material Design Floating Labels

    Tutorial • Beginner

    Labels-as-placeholders are a popular design choice for creating minimalist and accessible forms. In this tutorial, we’ll recreate the Material Design...

  5. How to Generate Random Background Colors With JavaScript

    How to Generate Random Background Colors With JavaScript

    Tutorial • Beginner

    In this tutorial you’ll learn how to change the background color of a page randomly, using JavaScript. You’ll also learn how to modify your code to generate...

  6. How to Hide/Reveal a Sticky Header on Scroll (With JavaScript)

    How to Hide/Reveal a Sticky Header on Scroll (With JavaScript)

    Tutorial • Intermediate

    In this tutorial we’ll learn how to hide the page header when scrolling down the page, then reveal it when scrolling up. As a bonus, we’ll also make the...

  7. Switch Between Color Schemes with CSS Variables and JavaScript

    Switch Between Color Schemes with CSS Variables and JavaScript

    Tutorial • Beginner

    In this tutorial, we’ll discuss how to implement different colour schemes (light mode, dark mode, 90’s neon mode, you name it) on your website using CSS...

  8. How to Preserve the Menu State on Page Load (Using Local Storage)

    How to Preserve the Menu State on Page Load (Using Local Storage)

    Tutorial • Intermediate

    In this tutorial, we’ll create a simple static site with Tailwind CSS and then learn how to preserve its menu state on page load. Ready for another challenge?

  9. Build a JavaScript Page Loading Animation With GSAP

    Build a JavaScript Page Loading Animation With GSAP

    Tutorial • Beginner

    In today’s tutorial, we’ll learn how to create a JavaScript page loading animation with GSAP, one of the most dominant and popular JavaScript animation...

  10. How to Build a Reading Progress Bar With CSS and JavaScript

    How to Build a Reading Progress Bar With CSS and JavaScript

    Tutorial • Intermediate

    In this tutorial we’re going to use JavaScript to build a simple “reading progress indicator” (or progress bar). Our progress bar will sit at the top of a...

  11. How to Use JavaScript to Play Sound (Typewriter Effect)

    How to Use JavaScript to Play Sound (Typewriter Effect)

    Tutorial • Advanced

    Today, we're going to create a typewriter effect using CSS and JavaScript. To push things further, we’ll use JavaScript to play a typing sound on the page...

  12. Create Beautiful Scrolling Animations With the CSS Clip-Path Property

    Create Beautiful Scrolling Animations With the CSS Clip-Path Property

    Tutorial • Intermediate

    In this tutorial we’ll use modern front-end features like CSS Grid, clip-path property, and the Intersection Observer API to build a cool scroll effect that...

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.