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. Quick Tip: Create a Very Simple Parallax Effect With CSS & JavaScript

    Quick Tip: Create a Very Simple Parallax Effect With CSS & JavaScript

    Tutorial Intermediate

    In this short tutorial, we'll learn to add a simple yet useful parallax scrolling effect to a hero image. To achieve it, we'll use some JavaScript code. Keep...

  2. How to Build a Static Portfolio Page With CSS & JavaScript

    How to Build a Static Portfolio Page With CSS & JavaScript

    Tutorial Intermediate

    In this tutorial we’ll use all the power of flexbox and learn to build a simple, yet attractive static HTML portfolio page.

  3. New Course: Take Your Presentations to the Next Level With Reveal.js

    New Course: Take Your Presentations to the Next Level With Reveal.js

    Tutorial Beginner

    Learn all about the Reveal.js HTML presentation framework in our new short course, Take Your Presentations to the Next Level With Reveal.js.

  4. Better Data Presentation for Infographics: Practical Animation Examples

    Better Data Presentation for Infographics: Practical Animation Examples

    Tutorial Beginner

    Using the animation framework we created previously, in this tutorial you’ll learn how to animate three infographic examples: data counters, progress bars,...

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

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

  7. New Short Course: Interactive JavaScript Maps With Leaflet

    New Short Course: Interactive JavaScript Maps With Leaflet

    Tutorial Beginner

    Leaflet is a robust JavaScript framework for creating interactive maps on the web. Learn how to use it in our quick half-hour course, Interactive JavaScript...

  8. New Course: Essential JS Libraries for UI

    New Course: Essential JS Libraries for UI

    Tutorial Beginner

    Learn how to use JavaScript libraries for UI design in our new course, Essential JS Libraries for User Interfaces (UI).

  9. Learn 3D Web Animation in Our New Three.js Course

    Learn 3D Web Animation in Our New Three.js Course

    Tutorial Beginner

    If you want to improve your 3D web animation skills but have limited time available, our new course, 3D Animation With Three.js, is for you.

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

  11. 11 Practical Web Animation Courses

    11 Practical Web Animation Courses

    Tutorial Beginner

    Here are 11 courses that will teach you how to create beautiful animations with CSS, JavaScript, and dedicated frameworks like GreenSock and Sequence.js.

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