Grow your CSS skills. Land your dream job.

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

In this series:


Comments

  1. Kudzai
    Permalink to comment#

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

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

  3. Rodney
    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 ?

  4. Permalink to comment#

    Nice Tut!! man!!! Congratulation

  5. britta
    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!
    Britta

  6. Mike Dedmon
    Permalink to comment#

    The link to Arby’s… hilarious!

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

    • 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. 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. bechi
    Permalink to comment#

    U play wow?

  10. Permalink to comment#

    Informative|Interesting|Insightful

  11. waseem
    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 ?

    • Thomas
      Permalink to comment#

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

  12. Permalink to comment#

    Hi ,

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

    Thanks

  13. Darin Thompson
    Permalink to comment#

    Chris,

    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…

    help?

    • Bilal
      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. Burepe
    Permalink to comment#

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

  15. Alfredo
    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. Paul
    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. jambo
    Permalink to comment#

    Great work and really appreciated!

  18. Vikram
    Permalink to comment#

    Thank you for this! Very nice

  19. raj
    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. Deepak
    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.
    Deepak

  21. Eugene

    Hi,
    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>
            &lt/ul>
    
    
    
        &lt/div>
    

    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. Chris,
    You are simply the best teacher I have ever seen.
    I learn lot from your tutorials, thanks lot and God Bless you :)

  23. 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,

    Frederick

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

    • 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. Birju
    Permalink to comment#

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

  26. Namraj Pudasaini
    Permalink to comment#

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

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like this:

```
<div>Example code</div>
```

You don't need to escape code in backticks, Markdown does that for you. If anything screws up, contact us and we can fix it up for you.

*May or may not contain any actual "CSS" or "Tricks".