Code Samples

These are the finished examples from lessons 2, 3, and 4. They are the same as the ones in the videos, except for a couple of differences:

  • The Javascript is all in a <script> within the page's <head>, instead of being in a separate pane in JSBin.
  • Some examples use Polypage to show notes right in the page. In these examples, there is a "Notes" link in the top-left corner of the page for turning the notes on and off.

Lesson 2

How to Make Tea

Styling text and other page elements—typography, colors, borders, margins, padding, shadows, etc.


A Bunch of Boxes

Google Reader-style page layout


Lesson 3


A simple tab example


A Bunch of Boxes: Tabs

Incorporating tabs in our existing Google Reader-style page layout


Inline Editing

Single-field inline editing


Inline Edit (Multiple Fields)

Inline editing with multiple fields


Selection-dependent Inputs 1: Drop-down List

Shows different forms depending on what is selected in a drop-down list


Lesson 4

Selection-dependent Inputs 2: Drop-down List with Multiple Lists (Lazy Way) (Download)

Selection-dependent Inputs 3: Drop-down List with Multiple Lists (Better Way) (Download)

Selection-dependent Inputs 4: Drop-down List with Multiple Lists (Even Better Way) (Download)

This expands the selection-dependent inputs example from earlier, and shows three different ways to do the same thing: the lazy way, which shows and hides chunks of HTML, and two better ways, which use JSON to store and retrieve the data that is used to assemble a drop-down list on the fly.

Animation 1: Slide-down Notification

Uses jQuery animation to slide a notification down from below the header, wait a bit, then slide it back up again.


Animation 2: Sticky Slide-down Notification

Same as the above example, but the notification is sticky—it stays there until you dismiss it.


Animation 3: Selection-dependent Inputs (Again, but Different)

This is the selection-dependent inputs example again, but now it uses radio buttons instead of a drop-down list, and the form for the selected option appears right below it. It animates showing and hiding the forms so that it is not jarring or disorienting.


Animation 4: Expanding Search Box

A search box that expands when you click on it, and shrinks again when it loses focus.


Animation 4.1: Expanding Search Box—More

The same as the previous example, but now more things are animated (font size, color, border, body opacity)


Quick Example 1: Accordion

An accordion, like you often see in settings pages


Quick Example 2: Date Picker

A date picker. Also demonstrates how to detect invalid values and show an alert and highlight the invalid field based on this.


Quick Example 4: Menu

A menu (including positioning it, and hiding it)


Quick Example 5: States

Demonstrates jQuery's built-in states, for both static items ("interaction cues") and dynamic items ("interaction states").


Quick Example 6: Drag and Drop 1

A list that can be rearranged using drag and drop


Quick Example 7: Drag and Drop 2

The same as the previous example, except there are now two lists, and you can drag items from one to the other.


Lessons 5 & 6

Custom CSS for Polypage

This applies some nice styling to Polypage notes.


Awesome To-dos

The prototype to-do app that we build in Lessons 5 and 6.