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 ...

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 slic...

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 differ...

We go back to a blank Photoshop document and re-create it. There is no HTML/CSS in this episode, just pure Photoshop work

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 h...

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 reque...

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. F...

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. ...

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...

Conversion process of an Adobe Photoshop mockup of a website, into a real live CSS based website series.

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...

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...