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. Dropdown Navigation: How to Maintain the Selected Option on Page Load

    Dropdown Navigation: How to Maintain the Selected Option on Page Load

    Tutorial Intermediate

    Today we'll learn how to maintain the selected option when navigating to a new page using a element.

  2. How to Build a SaaS Dashboard in React With Google Sheets and FusionCharts

    How to Build a SaaS Dashboard in React With Google Sheets and FusionCharts

    Tutorial Beginner

    In this tutorial I’ll explain the process of creating a SaaS dashboard by fetching data from Google Sheets using the Google Sheets API. To create this...

  3. How to Create an Animated Spirit Day Presentation With fullPage.js

    How to Create an Animated Spirit Day Presentation With fullPage.js

    Tutorial Intermediate

    October 18th 2018 is Spirit Day, something we recognize each year at Tuts+, and on this day we speak out against LGBTQ bullying, especially among LGBTQ youth.

  4. Quick Tip: How to Manipulate the Cursor Appearance With CSS

    Quick Tip: How to Manipulate the Cursor Appearance With CSS

    Tutorial Beginner

    In this quick tip, we’ll learn how to customize the cursor appearance with CSS. We’ll be changing our cursor into arrows to make navigating a slideshow easier.

  5. How to Build a Full-Screen Responsive Carousel Slider With Owl.js

    How to Build a Full-Screen Responsive Carousel Slider With Owl.js

    Tutorial Intermediate

    In this tutorial, we’ll learn how to build an animated, responsive, full-screen carousel slider with Owl.js.

  6. Master the Three.js 3D Web Graphics Framework in Our New Course

    Master the Three.js 3D Web Graphics Framework in Our New Course

    Tutorial Beginner

    Learn how to use 3D graphics in your web design projects in our new short course, Three.js: Beyond the Basics.

  7. 5 Essential Tips for Service Worker Development

    5 Essential Tips for Service Worker Development

    Tutorial Intermediate

    This tutorial will furnish you with five essential tips for service worker development, and we hope they’ll help you avoid classic beginner hiccups and save...

  8. How to Build an Attractive Responsive Image Gallery With slick.js

    How to Build an Attractive Responsive Image Gallery With slick.js

    Tutorial Intermediate

    In this tutorial we’ll use slick.js, a popular jQuery plugin, to build an attractive responsive image gallery.

  9. How to Add Deep Linking to the Bootstrap 4 Tabs Component

    How to Add Deep Linking to the Bootstrap 4 Tabs Component

    Tutorial Intermediate

    In this new tutorial we’ll learn how to add deep linking to the Bootstrap 4 tabs and make them shareable.

  10. How to Build a Sticky Sidebar on Page Scroll With ScrollMagic.js

    How to Build a Sticky Sidebar on Page Scroll With ScrollMagic.js

    Tutorial Intermediate

    In this tutorial we’ll use ScrollMagic.js, a popular JavaScript library, to build a sidebar that becomes sticky on page scroll.

  11. Quick Tip: Beware When Using the Slim Version of jQuery

    Quick Tip: Beware When Using the Slim Version of jQuery

    Tutorial Beginner

    In this quick tip I’m going to explain to you when you should and shouldn’t use the “slim version” of jQuery. For this tip I’ll assume you’re familiar with...

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