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. How to Create Smooth Page Transitions with JavaScript

    How to Create Smooth Page Transitions with JavaScript

    Tutorial Intermediate

    In this JavaScript tutorial you’ll learn how to create an animated page transition with a JavaScript library called Highway.

  2. JavaScript Skills: Create a Responsive Header Animation on Scroll

    JavaScript Skills: Create a Responsive Header Animation on Scroll

    Tutorial Beginner

    In this tutorial we’ll learn how to animate header elements on scroll. First, we’ll build a fully responsive top navigation header with three different...

  3. Quick Tip: How to Create a Simple Fade Effect on Scroll

    Quick Tip: How to Create a Simple Fade Effect on Scroll

    Tutorial Beginner

    In today’s super quick tutorial, we’ll learn how to build a simple, yet useful scroll effect. As we scroll within the page, the visibility of two elements...

  4. How to Build a Grayscale to Color Effect on Scroll (CSS & JavaScript)

    How to Build a Grayscale to Color Effect on Scroll (CSS & JavaScript)

    Tutorial Intermediate

    In this tutorial, we’ll start with some grayscale images and learn how to smoothly reveal their colored variants on scroll. To achieve the desired effect,...

  5. How to Build a Simple Full-Screen Slideshow With Vanilla JavaScript

    How to Build a Simple Full-Screen Slideshow With Vanilla JavaScript

    Tutorial Intermediate

    In this tutorial you’ll learn how to create a responsive full-screen slideshow with plain JavaScript. To build it, we’ll go through several different...

  6. Add a Live Ajax Search Bar to Your WordPress Website

    Add a Live Ajax Search Bar to Your WordPress Website

    Tutorial Intermediate

    Help the people who visit your website find the content that matters to them by adding live search and advanced filtering to your website, using the Ajax Pro...

  7. A Guide to Dependency Management in Front-End Development

    A Guide to Dependency Management in Front-End Development

    Tutorial Beginner

    Package managers, task runners, and module bundlers are build tools that you can use for dependency management. In this article, we’ll look into how they are...

  8. Quick Tip: How to Build a MouseOver Navigation Slide Effect

    Quick Tip: How to Build a MouseOver Navigation Slide Effect

    Tutorial Beginner

    In today’s exercise, we’ll take inspiration from Slider Revolution’s mini toolbar and build a menu that smoothly animates on hover.

  9. Try Our Practical Web Animation Course, With New Bonus Projects!

    Try Our Practical Web Animation Course, With New Bonus Projects!

    Tutorial Beginner

    Join the thousands of people who have learned web animation in our popular course, Practical Web Animation. Try some of the brand new projects we've added.

  10. Sticky Positioning Without JavaScript (Thanks to CSS Position: Sticky)

    Sticky Positioning Without JavaScript (Thanks to CSS Position: Sticky)

    Tutorial Intermediate

    Sticking elements when the user scrolls to a certain point is a common pattern in modern web design. This behaviour has now become a standard (CSS position:...

  11. An Introduction to CSS-in-JS: Examples, Pros, and Cons

    An Introduction to CSS-in-JS: Examples, Pros, and Cons

    Tutorial Beginner

    With CSS-in-JS libraries, you can style component-based applications securely and efficiently. They also let you add complex UX logic and dynamic...

  12. How to Make the Bootstrap Navbar Dropdown Work on Hover

    How to Make the Bootstrap Navbar Dropdown Work on Hover

    Tutorial Beginner

    in this short tutorial we’ll build a typical Bootstrap navbar with a quick solution for showing its dropdowns on hover.