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

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

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

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

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

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

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

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