#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. 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. chriscoyier
    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. JoeyJoJOMcShebadue
    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. 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. 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. nate
    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. 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. Marian

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

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.