#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. User Avatar
    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. User Avatar
    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. User Avatar
    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. User Avatar
    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. User Avatar
    Permalink to comment#

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

  6. User Avatar
    Permalink to comment#

    just out of curiosity where the PSD file please?

  7. User Avatar
    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. User Avatar
    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. User Avatar
    Permalink to comment#

    Thank! Enjoy it.

  10. User Avatar
    Permalink to comment#

    Thank you for your tutorials!

  11. User Avatar
    Permalink to comment#

    Absolutely awesome! Your help is so much appreciated!

  12. User Avatar
    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!

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.