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 more
Read less
All content
Courses
Tutorials

All JavaScript for Designers content:

  1. 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. It does this by breaking work intervals into 25 minutes of focused work followed by...

  2. Build an Interactive Image Gallery with HTML, CSS, and JavaScript

    Build an Interactive Image Gallery with HTML, CSS, and JavaScript

    Tutorial • Intermediate

    Want to learn how to turn your static image gallery into an interactive one with lightbox functionality? Hang on and sit tight, cos we’re about to embark on...

  3. Demystifying JavaScript Arrow Functions

    Demystifying JavaScript Arrow Functions

    Tutorial • Intermediate

    Arrow functions are one of the many powerful JavaScript tools that ES6 introduced. Arrow functions provide a concise way of writing functions by simplifying...

  4. 5 Awesome CodePen Demos: CSS Transitions and Animations

    5 Awesome CodePen Demos: CSS Transitions and Animations

    Tutorial • Intermediate

    Want to learn how to create visually engaging effects on your websites using CSS transitions and animation? These 5 CodePen demos are ready for you to fork...

  5. How to Hide/Reveal a Sticky Bottom Nav Bar on Scroll (With JavaScript)

    How to Hide/Reveal a Sticky Bottom Nav Bar on Scroll (With JavaScript)

    Tutorial • Intermediate

    In this tutorial, we'll learn how to create an app-like sticky mobile navigation bar and slide it based on the scrolling direction.

  6. How to Build a JavaScript Popup Modal From Scratch

    How to Build a JavaScript Popup Modal From Scratch

    Tutorial • Intermediate

    In this tutorial we’ll learn how to build flexible popup modals (windows) with HTML, CSS, and JavaScript–without using a framework like Bootstrap!

  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 will build a simple calculator that will allow us to perform basic operations such as subtraction, addition, multiplication, and...

  8. How to Code an Animated Toast Notification with JavaScript

    How to Code an Animated Toast Notification with JavaScript

    Tutorial • Beginner

    One popular type of notification in UI design is the “toast” notification; a small pop-up message that appears on the screen to inform users about an event...

  9. Let’s Build a Multiple Choice Quiz App With JavaScript

    Let’s Build a Multiple Choice Quiz App With JavaScript

    Tutorial • Intermediate

    Interactive quizzes are a great way to engage users and test their knowledge on various topics. In this tutorial, I’ll walk you through the steps involved in...

  10. How to Build a Responsive Slider With Swiper.js

    How to Build a Responsive Slider With Swiper.js

    Tutorial • Intermediate

    In this tutorial, we'll build a unique page layout by taking advantage of Swiper.js, one of the most popular JavaScript sliders available now.

  11. How to Add and Subtract Time From a Date in JavaScript

    How to Add and Subtract Time From a Date in JavaScript

    Tutorial • Beginner

    In this post, I'll show you how to manipulate dates with a JavaScript Date object. Specifically, I'll show you how you can add and subtract time from a Date...

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

Related Categories

CSS
HTML/CSS
UI Design
Sketch
Unlimited Downloads
From $16.50/month
Get access to over one million creative assets on Envato Elements.
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.
Quick LinksExplore popular categories