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. Create a Sticky Navigation Header Using jQuery Waypoints

    Create a Sticky Navigation Header Using jQuery Waypoints

    Tutorial • Beginner

    In this tutorial, we'll be creating a navigation bar that stays with you as you scroll down — and we'll also throw a gimmick or two into the mix to polish it...

  2. All You Need to Know About the HTML5 Data Attribute

    All You Need to Know About the HTML5 Data Attribute

    Tutorial • Intermediate

    The HTML5 data attribute lets you assign custom data to an element. This article looks at how to use it and provides examples of when it would be ideally used.

  3. Build a Responsive, Filterable Portfolio, with CSS3 Twists

    Build a Responsive, Filterable Portfolio, with CSS3 Twists

    Tutorial • Intermediate

    The inherent visual appeal of filterable portfolios (like the Tuts+ hub) has made them very popular. Today, we’ll be making one using straight-forward...

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

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

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

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

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

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

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

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

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

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.