#1: Converting a Photoshop Mockup (part 1 of 3)

In this first-ever video podcast, I start the conversion process of an Adobe Photoshop mockup of a website, into a real live CSS based website. This is pretty rough here folks, I'm sure these will get more focused with time. Please let me have it with criticisms at my contact page.

Links from video:

In this series:


  1. User Avatar
    Permalink to comment#

    Awesome. Thanks! (And btw, not “rough” at all, as you mentioned in the intro. Very well done).

    • User Avatar
      Mayank Agarwal
      Permalink to comment#

      Thanks for this amazing tutorial.You guys are doing awesome work in guiding newcomers in field of webapps…..

  2. User Avatar
    Permalink to comment#

    Nice work. Look forward to watching the rest of this short series.

    However, you might want to add a link in the description to the other two parts. It would make it easier for people to follow along to the next step, instead of having to go back to the category archive and scroll all the way down.

    • User Avatar
      Chris Coyier
      Permalink to comment#

      Added cross links for this series, hopefully that will be helpful.

  3. User Avatar
    Permalink to comment#

    Just noticed this cast through your “Thank You (2008 Edition)”-post.
    Simply love it.
    Question: What kind of doc-type do you use on new files ?

    • User Avatar
      Chris Coyier
      Permalink to comment#

      Depends on the situation… but generally XHTML 1.0 STRICT

  4. User Avatar
    Permalink to comment#

    Nice Tut!! man!!! Congratulation

  5. User Avatar
    Permalink to comment#

    Hey Chris,
    “sehr schön” like we say in Germany ;-)
    I’m learning webdevelopment in school… but I don’t understand some stuff and sometimes our teacher can’t explain it at all. with your tutorials its very easy even if its in english!!
    Thanx a lot!

  6. User Avatar
    Mike Dedmon
    Permalink to comment#

    The link to Arby’s… hilarious!

  7. User Avatar
    Elias Ishak
    Permalink to comment#

    A good teacher is hard to find. An excellent one is even harder. Believe me, you are exceptionally great. I really enjoy your delivery of this difficult subject.

    Thank you, thank you, thank you, thank you!
    A thousand thank you to an excellent teacher is a mere drop in the ocean.

    The clear, and distinct way you explained, and walked us through each steps is a great pleasure to listen. Most importantly, the reason behind each step, each action, why it has to be that way, make this tutorial and the reason for using CSS so meaningful. Your video podcast is great and exemplary.

    To borrow a phrase from an old song by Tom Jones: “You got style. You got grace. You’re a winner.”

    Thanks again.
    Elias Ishak. Kuala Lumpur, Malaysia.

    • User Avatar
      Pist Kubarai
      Permalink to comment#

      I also can borrow a song. The song is “I got a feeling that tonite gonna be a goodnite, oh yeah oh yeah auwww!

  8. User Avatar
    Lisa Austin
    Permalink to comment#

    Hi Chris, you have really done a splendid job. I came across your video tutorial when I was fed up of all those text tutorials that couldn’t put anything it my head. The way you explained every detail, it was wonderful. Everything seemed to be much simpler and easy. Great job. Would be looking back for more such posts. And you are not rough at all. Great job. Keep posting.

  9. User Avatar
    Permalink to comment#

    U play wow?

  10. User Avatar
    Permalink to comment#


  11. User Avatar
    Permalink to comment#

    i have a problem here :S i complte the first part every thing is according to the tutorail but the header-bg location is lil down from body-bg. how to fix it ?

    • User Avatar
      Permalink to comment#

      you should add
      margin: 0px; padding:0px; to your “body” class in the css-file.
      hope this helps you out!

  12. User Avatar
    Permalink to comment#

    Hi ,

    it’s very helpful tutorial for create web page from psd


  13. User Avatar
    Darin Thompson
    Permalink to comment#


    When I use:

    ul#nav {
    height: 236px;
    width: 800px;
    margin: 0 auto;
    background: url(images/header-bg.jpg) no-repeat:

    it’s not centering on the page…and I don’t know what the deal is…


    • User Avatar
      Permalink to comment#

      Although I have not practice yet. But I am in a fix how the header comes in center as we didnt use any center attribute.

  14. User Avatar
    Permalink to comment#

    Great guide.
    For the guides, what dimensions did you use?

  15. User Avatar
    Permalink to comment#

    WOW! Also like many others just stumbeled upon here (yes googe after getting sick of shitty books :)

    … amzaing stuff! Thanks a 10000000 times :D

  16. User Avatar
    Permalink to comment#

    This was great and helped me build me first CSS site. Could anyone tell me what I need to do to use templates, or a good way to update the pages once the whole site is built?

  17. User Avatar
    Permalink to comment#

    Great work and really appreciated!

  18. User Avatar
    Permalink to comment#

    Thank you for this! Very nice

  19. User Avatar
    Permalink to comment#

    superb stuff bro… welldone…

    if i need to add a horizontal div above footer (about 200px in height)

    how could it be done …? is it to be floated to bottom or any simialr thing…?

  20. User Avatar
    Permalink to comment#

    cool stuff bro.

    Just would like to know Is there any way to reduce the Images so that website loading time can be increased. I mean, header Image is too big and Is it possible to do something about it?

    Thanks a lot.

  21. User Avatar

    So when i do this I get: http://cl.ly/3x2J0x2h0a1d2e442Z2r
    For some reason not all of the image displays and it doesn’t center.
    My HTML: (not sure why my list moves over in the display)

        <div id="page-wrap">
            &ltul id="nav">
        &ltli> &lt/li>

    My CSS:

    body {
        font-size: 62.5%;
        font-family: Helvetica; Sans-serif;
        background: url(img/header.png) repeat-x top #f8f8f8;
        margin: 0px;
        padding: 0px;
    ul#nav {
        height: 129; width: 365; 
        margin: 0 auto;
        background: url(img/mylogo.png) no-repeat;
  22. User Avatar
    Nauman K

    You are simply the best teacher I have ever seen.
    I learn lot from your tutorials, thanks lot and God Bless you :)

  23. User Avatar
    Frederick Park
    Permalink to comment#

    Hey Chris,

    Stopped by to review the tutorials you built here a few years back.
    Great stuff, really. Thanks.

    Wondering if we’ve met? I see that you’re a fan of old-time music. I just returned from a tour of the great NW, including getting on staff at Fiddle Tunes.

    I’ve lots of friends in Portland. Would love to get up with you when next I’m there. You’re welcome to stop by here in NC too, if ever you get this way. I run a little community dance once a month in Celo.

    Loads of questions for you but I’ll hold off for now. You’re a serious and fun teacher! Keep up the good work.

    Best regards,


  24. User Avatar
    John Smith
    Permalink to comment#

    As a CSS newbie, I got a lot from your guide, thanks so much!
    Yet there’s something that I thought could be improved. Now if I hover a little bit left of “history”, it actually links to “press”, and the link has no height. I wonder it might be better to write a CSS like:

    ul#nav li a {
                display: block;
                padding: 15px 33px;
                float: left;
                margin-top: 154px;

    Again, thx for your great work.

    • User Avatar
      John Smith
      Permalink to comment#

      well, I think I just found a better trick:

          ul#nav li a {
              display: block;
              width: 113px;
              height: 45px;
              line-height: 45px;
              text-align: center;
              float: left;
              margin-top: 155px;
  25. User Avatar
    Permalink to comment#

    Wow…..such a awesome tutorial here..
    You are fabulous.. You are god for newcomers and freshers….

  26. User Avatar
    Namraj Pudasaini
    Permalink to comment#

    The mockup videos are awesome..You guys doing great job.

  27. User Avatar
    Permalink to comment#

    2016 :)

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.