#12: Converting a Photoshop Mockup: Part Two, Episode One

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 conversion technqiues so there will be plenty to learn this time around that will be different from last time. The mockup we will be using here is a mini-version of the current version of CSS-Tricks itself! (note: Not anymore... but this is sorta how CSS-Tricks used to look :) )

Links from Video:


  1. Richie
    Permalink to comment#

    Just wanted to say your vids are really helpful for those of us learning CSS (and other stuff for web development too) and that this series of vids espescially is a huge benefit for my assignment work, so thank you.

  2. ankur
    Permalink to comment#

    please never take these vids down. possible one of the most valuable resources on the internet for up-and-coming developers. thank you for ur time.

  3. Niels
    Permalink to comment#

    This tutorial is great, but I do have a question: On about 14:41, you come in with your own stylesheet to start with, but when I start a new CSS File in Dreamweaver, it’s just empty. What do I do now?

  4. aimee
    Permalink to comment#

    you are awesome. do you every get to rest. big fan for awhile just thought i would post it so you know. keep it up!

  5. dan
    Permalink to comment#

    Thanks for the videos Chris, though try CTRL+SHIFT+D in textmate for duplicate line.. easier than copy pasta!

  6. dillon
    Permalink to comment#

    just out of curiosity where the PSD file please?

  7. Kieran
    Permalink to comment#

    Hi Chris
    Great vidoe tutes. I like the idea of placing the header div outside the page-wrap.
    This allows for more hooks for css backgrounds.
    I also like the new trend of having deep footers with links, extra info etc. It frees up space for main content, and again, you’re placing the div outside the page-wrap!
    Many books press home the wrapper-takes-all approach – boring designs ensue.
    I will be a regular visitor. Keep the videos coming thanks

  8. Galago
    Permalink to comment#

    I’m a newcomer to all of this CSS/HTML/Photoshop business, and your tutorials are REALLY helping me progress. Thanks a lot for all the time you’ve put in to help others like myself.

  9. Romesh
    Permalink to comment#

    Thank! Enjoy it.

  10. Robert
    Permalink to comment#

    Thank you for your tutorials!

  11. Dave
    Permalink to comment#

    Absolutely awesome! Your help is so much appreciated!

  12. Marc Turn er

    I love the training and you have been the “Go To Site” for information but it seems that things are not working right for me on this training. I think because of the type of html format that this trianing is out dated and does not work with HTML5.

    I can’t seem to get my navigation to visually show so what do you have for HTML5?

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.