Helping UX designers to learn how to code
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.
Lesson 3
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 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 5: States
Demonstrates jQuery's built-in states, for both static items ("interaction cues") and dynamic items ("interaction states").
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
