#14: Converting a Photoshop Mockup: Part Two, Episode Three

Avatar of Chris Coyier
Chris Coyier on (Updated on )

Grow sales with a smart marketing platform. Try Mailchimp today Mailchimp tracking pixel

Download Video
(Only MVP Supporters can download original high-quality recordings for offline viewing.)

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 to steal the typography from the live CSS-Tricks. Then we fix up the header a little bit in Photoshop and use CSS Image Replacement for the logo.

Links from Video: