Get a free trial // Grow your CSS skills // Land your dream job

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

In part two of this series on converting a Photoshop mockup to an HTML/CSS Website I continue on with the header/menu section of the site. I change the way in which the site is centered when I decide to wrap the entire site in a page-wrap div instead of centering each major page element. Then I plug in some "filler" content for the main area before I end with building the footer.

In this series:


  1. Flavio
    Permalink to comment#

    great ,im learning a lot with that

  2. Kudzai
    Permalink to comment#


  3. Melissa
    Permalink to comment#

    I did everything exactly the same as you (downloaded the files and following along), but my links are all on different levels, like stair steps :(. Not sure why.

    • alif
      Permalink to comment#

      i think you have to use (list-style-type:none) in ul#nav section in your css file.

  4. James
    Permalink to comment#

    @Melissa dont let yourself get stuck on one part. Just go with the tutorial and things will work out themselves.

    Like the step-stair will get solved once u get to 05:50.
    Plus, you can check your code with the downloaded example files at the end if your website doesnt like exactly like the mockup(which i doubt would ever happen). Cheers !

  5. Niels
    Permalink to comment#

    Awesome tutorial. Exactly what i was looking for. The information you give on the CSS is reaaaally helpful. Keep it up!

  6. Fouad
    Permalink to comment#

    heheheh . thanks :))

    hope to be one of your Students :DD

  7. Robin
    Permalink to comment#

    Very helpful for a css starter like me.

  8. Grant

    Awesome video series. I have been designing website mockups in photoshop for a long time but never coding them myself. I have coded two small web projects since watching this series. Thanks a bunch!

  9. Dave
    Permalink to comment#

    Great tutorial. You answered a lot of questions in the process. I suspect I’ll be watching many more of your videos.

  10. mgalalm
    Permalink to comment#

    Since I am a web developer, I had hard times to learn how to slice a psd , I even decide to give up from attempting.

    Thank you so much

  11. YING WAN
    Permalink to comment#

    great session

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 in triple backtick fences like this:

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

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed