Video Screencasts

#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 …

#90: Simple TextMate Tips

TextMate is a mac-only code editor. Sorry to all the PC users this time around. If you've been watching these screencasts for a long time, you know I used to …

#89: Organizing a Photoshop Document

If you are like me, you are both guilty of seriously unorganized Photoshop documents and appreciate well organized ones. The disorganization isn't intentional, it's just born of (if you'll pardon …

#88: Intro to Compass/Sass

Ask a bunch of designers what they wish CSS could do that it can't now, and you'll get a big list that reads much like the list of features for …

We have a pretty good* newsletter.