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 memory game with vanilla JavaScript

    How to create a memory game with vanilla JavaScript

    Tutorial • Intermediate

    In this tutorial, we will build a memory game with JavaScript. The memory game will require a player to match pairs of cards. Once all the pairs are matched...

  2. Build an asymmetric JavaScript slideshow with CSS Grid & GSAP

    Build an asymmetric JavaScript slideshow with CSS Grid & GSAP

    Tutorial • Beginner

    In this tutorial, you'll learn how to build an asymmetric JavaScript slideshow with the power of CSS Grid and GSAP, the industry-standard JavaScript...

  3. How to build a website search bar with JavaScript

    How to build a website search bar with JavaScript

    Tutorial • Beginner

    In this tutorial we’ll use JavaScript to implement a basic search bar and search function to filter a list of articles.

  4. How to create a canvas drawing tool with vanilla JavaScript

    How to create a canvas drawing tool with vanilla JavaScript

    Tutorial • Intermediate

    Let’s create a canvas drawing app that allows users to draw freehand and choose shapes, such as rectangles, circles, etc. It will also have an eraser feature...

  5. How to build a tic-tac-toe game with vanilla JavaScript

    How to build a tic-tac-toe game with vanilla JavaScript

    Tutorial • Intermediate

    Tic-tac-toe is a popular two-player game that uses a 3×3 grid. Players aim to get their three symbols in a row to win the game. Let’s build one with JavaScript!

  6. How to make a custom mouse cursor with CSS or JavaScript

    How to make a custom mouse cursor with CSS or JavaScript

    Tutorial • Beginner

    Personalizing a website is one of the more fun aspects of web design. In this tutorial, we’ll look at 2 methods to add a custom cursor to your website: a...

  7. Build a simple calculator with HTML, CSS, and JavaScript

    Build a simple calculator with HTML, CSS, and JavaScript

    Tutorial • Intermediate

    In this tutorial, we'll build a JavaScript + HTML + CSS calculator that performs basic operations such as subtraction, addition, multiplication, and division.

  8. Build an animated JavaScript accordion component, with overlapping panels

    Build an animated JavaScript accordion component, with overlapping panels

    Tutorial • Beginner

    Let me explain how to build an animated JavaScript accordion component with overlapping panels.

  9. How to create an auto “text typing effect” with vanilla JavaScript

    How to create an auto “text typing effect” with vanilla JavaScript

    Tutorial • Intermediate

    An auto text typing effect is one way to grab a user’s attention. It can give users cues when using an application, and it’s also a way to convey an...

  10. Create a 🍅 Pomodoro timer with HTML, CSS, and vanilla JavaScript

    Create a 🍅 Pomodoro timer with HTML, CSS, and vanilla JavaScript

    Tutorial • Beginner

    The Pomodoro technique is a widely used tool for increasing productivity. In this tutorial, we'll create a JavaScript, HTML, and CSS timer that follows the...

  11. How to add custom JavaScript to your WordPress site

    How to add custom JavaScript to your WordPress site

    Tutorial • Beginner

    To customize your WordPress theme, you frequently have to add custom JavaScript. It’s a bit more complicated than adding custom CSS, as you can’t use the...

  12. How to update webpage content based on URL parameters

    How to update webpage content based on URL parameters

    Tutorial • Intermediate

    In this JavaScript tutorial, we’ll be looking at how to use URLs to update the content on a webpage. Specifically, we'll be looking at using URL parameters...

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.