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

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:


  1. User Avatar
    Jon Wilson
    Permalink to comment#

    I've got a couple questions.

    The first is why does the date say November 19th at the top when today is the 22nd, and you created that many months ago?

    The second is why didn't you show us how to make it multiple pages so we can use the tabs at the top. I'm now going to try to do this for a while, but it would have been nice if you had concluded with that.

    Besides that you did an awesome series, I watched them through to the end, and am working on my side now. Hopefully i'll be able to integrate some of this with that moo stuff and have it be crazy.


  2. User Avatar
    Permalink to comment#

    The weird date is because I'm in the process of moving these video pages away from static pages like they were on into WordPress pages. The date is the day I created the WordPress page not the original date of the publishing. I didn't really think about that…. if I find some time I'll try to figure out those dates and adjust them.

  3. User Avatar
    Permalink to comment#

    Absolutely awesome!!!!!!!!!!
    I really appreciate all of these screencasts.. very informative and i have to admit that i have no idea how you talk to yourself for that long.. heh
    love this site!!

  4. User Avatar
    Chris Coyier
    Permalink to comment#

    Yep, you are right, sorry about forgetting that. If you check out the "Three State Menu" tutorial, it covers that and shows you can can set that state via an ID on the body.

  5. User Avatar
    Benjamin Becerra
    Permalink to comment#

    I don't think that you explained how to code the ON state of the menu buttons.
    I'm pretty sure I can figure it out. Just change the state to top instead of bottom on the backgrounds right?

  6. User Avatar
    Permalink to comment#

    My menu works perfectly in firefox but appears like a staircase in internet explorer. I’m not sure how to go about creating a workaround for ies quirks-I’m working on a mac-is it a matter of trial and error-or do you think it is a matter of inserting the workaround for the transparent png?


  7. User Avatar
    Freemind Designs
    Permalink to comment#

    Seriously one of the BEST web design videos i have seen. Finally someone who explains an goes step by step with css an making stylesheets and using photoshop to make websites in clear examples and best of all for free.

  8. User Avatar

    Hi, Chris!
    I found your website a couple days ago, and since then I’ve learned a lot of things from you. I like how you explain us how to do, and I find your advices very useful :). You are doing a great job and I thank you for this.

  9. User Avatar
    Permalink to comment#

    Been here few years ago, revisited today and, though many things can be done with css3 nowadays, still a nice reminder on how we slice n dice ;).

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.