Video Screencasts

Like reading, but with more sound and moving pictures.

#110: Quick Overview of CSS Position Values

This is a quick beginner-level overview of the different CSS position values. In a nutshell: relative allows you to "nudge" and leaves the element's original position in the page flow. …

#108: Using Chartwell

Chartwell is a font specifically for making simple and beautiful pie charts, bar charts, and line graphs. It's as simple as writing out simple equations like 40+20+25+15. In desktop software …

#105: Using SpriteCow

In which I take a real example of somewhere I knew using sprites would be a good idea, create the sprite by hand in Photoshop (my preferred method), and then …

#100: Let’s Write Semantic Markup

We spend an entire hour looking at a Photoshop design and writing HTML5 markup that describes what we see. We try and be as semantic as we can and discuss …

#98: Playing with Body Borders

Putting a border around the inside of the browser window is such a simple little idea and can be a nice design effect. But how do we do it so …

#97: Intro to CSS Animations

Animations, like transitions, can alter page elements over time. Animations are more powerful and more complex in many ways. You need to declare an animation with a special syntax before …

#96: localStorage for Forms

HTML5 has an incredibly simple method for storing persisting data called localStorage. Natively, you just call a method with key/value pair and that is saved (pretty much) forever. Knowing …

#95: A Tale of Border Gradients

Turns out there is a simple way to accomplish gradients on borders. That took me longer than it should have to arrive at though, this screencast covers all the ways …

#94: Intro to Pseudo Elements

Pseudo elements are visible elements on a web page that aren't "in the DOM" or created from HTML, but are instead inserted directly from CSS. This allows you to do …

#93: CSS3 Slideup Boxes

Follow along as we use a few very simple CSS3 transitions to create a "slideup" box effect. Roll over the box with your mouse, and the title of the box …

#92: Code Walkthrough of Drawing Table

The Drawing Table is in essence a mini one-page jQuery application. It has one primary function, creating a colored design by changing the colors of cells in an HTML table. …

#91: The WordPress Loop

There is no shortage of documentation on WordPress' famous content-spewing structure, but I still feel like there is more confusion and mystery surrounding "The Loop" than there should be. In …

We have a pretty good* newsletter.