Video Screencasts

Firebug is an essential Firefox extension for web designers and developers. You are able to quickly target any element on a page to see the markup, the CSS, the layout, … Read article “#15: Introduction to Firebug”

We wrap up the mockup conversion here in Episode Three. We create the “article area” and the “sidebar” (semantic class naming!), and then we clear the float. We use Firebug … Read article “#14: Converting a Photoshop Mockup: Part Two, Episode Three”

In Episode Two of this series, we continue on with the structure of the site. In Photoshop, we create the three different states of the menu, then slice them up … Read article “#13: Converting a Photoshop Mockup: Part Two, Episode Two”

There has been LOTS of great feedback on the first series of Converting a Photoshop Mockup into HTML/CSS. So let’s do it again! Every website is different will require different … Read article “#12: Converting a Photoshop Mockup: Part Two, Episode One”

Many sites do not use any fancy Content Management System (CMS) to generate their pages, they are just just good ol’ static HTML content. A site for your grandmothers pie … Read article “#11: Working Modularly with PHP”

There are three different types of layouts for websites: Fixed Width, Fluid Width, and Elastic Width. In this screencast we look at all these three varieties of sites out on … Read article “#10: Fixed Width, Fluid Width & Elastic Width”

Using three layers of alpha transparent PNG files, we can can create a pseudo 3-dimensional looking background for a web page. This screencast covers how to do that from start … Read article “#9: Starry Night: 3D Background with the Parallax Effect”

Being organized and using good formatting in your CSS files can save you lots of time and frustration during your development process and especially during troubleshooting. The multi-line format makes … Read article “#8: CSS Formatting”

Using a variation of the CSS Sprites technique, we can create a “three state” menu using only one image per menu item. This reduces the number of requests on your … Read article “#7: Three State Menu”

Before I get too far along in these screencasts, I thought I would introduce you a little to my working environment and explain the tools that I use. First off, … Read article “#6: Tools of the Trade”

Forcing multiple columns to be of equal height is one of those tricky things in web design. In this screencast I’ll show you a little trick around it. Instead of … Read article “#5: Columns of Equal Height: Super Simple Two Column Layout”

In this screencast I talk about how to force vertical scrollbars onto websites. Without doing this, pages with centered content can appear to “jump” to the left or right when … Read article “#4: Forcing Scrollbars: Eliminating “Horizontal Jumps””

I finish up the design in part three of this series on coverting an Adobe Photoshop website mockup into an actual HTML/CSS website. This one focuses on the main content … Read article “#3: Converting a Photoshop Mockup (part 3 of 3)”

In part two of this series on converting a Photoshop mockup to an HTML/CSS Website I continue on with the header/menu section of the site. I change the way in … Read article “#2: Converting a Photoshop Mockup (part 2 of 3)”

In this first-ever video podcast, I start the conversion process of an Adobe Photoshop mockup of a website, into a real live CSS based website. This is pretty rough here … Read article “#1: Converting a Photoshop Mockup (part 1 of 3)”