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 Chrome Extension With Vanilla JavaScript

    How to Create a Chrome Extension With Vanilla JavaScript

    Tutorial • Intermediate

    This tutorial will cover how to build a minimalistic homepage Chrome extension, with JavaScript, designed to help users stay productive.

  2. Build a Simple Weather App With Vanilla JavaScript

    Build a Simple Weather App With Vanilla JavaScript

    Tutorial • Intermediate

    In today’s tutorial, we’ll learn how to build a weather app that is simple yet fully functional with Vanilla JavaScript. We have a lot of interesting things...

  3. Build a JavaScript Dropdown Filter Component With Shareable URLs

    Build a JavaScript Dropdown Filter Component With Shareable URLs

    Tutorial • Intermediate

    In this new tutorial, we'll learn how to create a JavaScript dropdown filter component where each filtering option will have a unique shareable URL. 

  4. Building a Vertical Timeline With CSS and a Touch of JavaScript (Updated)

    Building a Vertical Timeline With CSS and a Touch of JavaScript (Updated)

    Tutorial • Intermediate

    In this tutorial, we’ll learn how to build a responsive vertical timeline from scratch. First, we’ll create the basic structure with minimal markup and the...

  5. How to Create a Typing Test Game with Vanilla JavaScript

    How to Create a Typing Test Game with Vanilla JavaScript

    Tutorial • Beginner

    How many words per minute can you type? In this tutorial you’ll learn how to create a typing test game with JavaScript. The app will feature a timer that...

  6. Learn How to Code a Simple JavaScript Calendar and Datepicker

    Learn How to Code a Simple JavaScript Calendar and Datepicker

    Tutorial • Beginner

    A JavaScript calendar is the best tool to understand date functionalities in JavaScript. This tutorial will create a real-time calendar similar to the one in...

  7. How to Build a Responsive Navigation Bar With Flexbox

    How to Build a Responsive Navigation Bar With Flexbox

    Tutorial • Intermediate

    Time for a practical exercise in flexbox! In this tutorial we will use flexbox to create a mobile-first, responsive, toggleable navigation bar with different...

  8. Create Your Own AI Image Generator App With JavaScript and DALL-E 3

    Create Your Own AI Image Generator App With JavaScript and DALL-E 3

    Tutorial • Beginner

    In this tutorial, we’ll build an AI image-generation app with JavaScript. Users will enter text describing the image they want, then behind the scenes we’ll...

  9. How to Create an “AI Quotes Generator” With OpenAI and JavaScript

    How to Create an “AI Quotes Generator” With OpenAI and JavaScript

    Tutorial • Intermediate

    In this tutorial, we’ll learn how to create an AI Quotes Generator app with JavaScript. This app will demonstrate how to fetch data from the OpenAI API and...

  10. How to Build a Text-to-Voice Application With JavaScript

    How to Build a Text-to-Voice Application With JavaScript

    Tutorial • Beginner

    Let’s convert text into speech using JavaScript and the WebSpeechAPI. Our app will feature a simple interface where the user adds the text, then clicks a...

  11. How to Create a Simple Tip Calculator with HTML, CSS, and Vanilla JavaScript

    How to Create a Simple Tip Calculator with HTML, CSS, and Vanilla JavaScript

    Tutorial • Intermediate

    In this tutorial, we will cover how to create a simple tip calculator with HTML, CSS, and JavaScript.

  12. How to Create a 2D Digital Clock with HTML, CSS, and Vanilla JavaScript

    How to Create a 2D Digital Clock with HTML, CSS, and Vanilla JavaScript

    Tutorial • Intermediate

    Wouldn’t it be fun to create your own beautiful Digital Clock with basic web technologies? This tutorial will cover how to create a faux-3D digital Clock...

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.