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. A Flexible Approach to Responsive Navigation

    A Flexible Approach to Responsive Navigation

    Tutorial • Beginner

    Many responsive websites provide a horizontal navigation bar on large screens and drop-down navigation for smaller viewports. It's a perfectly decent...

  2. Super Simple Lightbox With CSS and jQuery

    Super Simple Lightbox With CSS and jQuery

    Tutorial • Beginner

    Rather than using a bloated plugin that has features you’ll never use, this tutorial shows you how to create a super simple lightbox for handling images....

  3. Adding a jQuery Countdown to Our "Coming Soon" Page

    Adding a jQuery Countdown to Our "Coming Soon" Page

    Tutorial • Intermediate

    To finish off our Coming Soon page let's now give the countdown timer some functionality. We're going to use a jQuery plugin which will allow the timer to...

  4. Styling Dark Select Dropdown With Dropkick.js

    Styling Dark Select Dropdown With Dropkick.js

    Tutorial • Beginner

    HTML select elements with their option tags cannot be completely customized using CSS, but what if we want to style a dropdown just as easily as <div>,...

  5. Writing a Flexible Grid Script for Photoshop

    Writing a Flexible Grid Script for Photoshop

    Tutorial • Beginner

    Being a capable web designer means having a solid grasp on grids, especially if you want to pursue responsive web design. In this tutorial we'll take a look...

  6. Create a Parallax Scrolling Website Using Stellar.js

    Create a Parallax Scrolling Website Using Stellar.js

    Tutorial • Intermediate

    One of the biggest trends in recent modern web design is use of parallax scrolling effects. In this tutorial I'm going to show you how you can create the...

  7. Create a Customized HTML5 Audio Player

    Create a Customized HTML5 Audio Player

    Tutorial • Intermediate

    During this tutorial I'm going to be introducing you to HTML5 audio and showing you how you can create your own player.

  8. Put Users in Control With Confirmation Feedback Buttons

    Put Users in Control With Confirmation Feedback Buttons

    Tutorial • Beginner

    This tutorial will teach you how to create a responsive web page with buttons which take on different states depending on the user's interaction. This type...

  9. Build a Popup Modal Window Using the jQuery Reveal Plugin

    Build a Popup Modal Window Using the jQuery Reveal Plugin

    Tutorial • Beginner

    Today we'll be taking Orman's Popup Modal Window and recreating it with HTML and CSS. We'll then make use of the jQuery Reveal plugin to give it full...

  10. Skin Orman Clark's Video Interface Using jPlayer and CSS

    Skin Orman Clark's Video Interface Using jPlayer and CSS

    Tutorial • Intermediate

    Coding up Orman Clark's Premium Pixel designs is great fun, this time we'll have a look at his Video Player Interface! We'll build it using an awesome HTML5...

  11. How to Create Link Tooltips Using CSS3 and JQuery

    How to Create Link Tooltips Using CSS3 and JQuery

    Tutorial • Beginner

    We recently posted a tutorial on how to create script-free CSS3 tooltips... Today, we're posting a script-enhanced version that's SEO friendly and used a...

  12. Create A Simple User Interface Kit From Scratch (Themeroller + FW Phase!)

    Create A Simple User Interface Kit From Scratch (Themeroller + FW Phase!)

    Tutorial • Beginner

    Last week, we took a look at how to create a simple user interface kit in Photoshop as a way to expedite work in some of your web design projects. We got a...

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.