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

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

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

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

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

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

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

  8. Building a Responsive Layout With Skeleton: jQuery Plugins

    Building a Responsive Layout With Skeleton: jQuery Plugins

    Tutorial Intermediate

    Our responsive layout is coming on in leaps and bounds, so let's crank it up even further! Today we'll look at various jQuery plugins which we'll use to pull...

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

  10. Design and Code an Integrated Facebook App: PHP + jQuery

    Design and Code an Integrated Facebook App: PHP + jQuery

    Tutorial Beginner

    Welcome to part three of “Design and Code an Integrated Facebook App.” At this point, I’m assuming that you have created the HTML and CSS for your app. If...

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