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

Links from video:

In this series:


  1. User Avatar
    Permalink to comment#

    great ,im learning a lot with that

  2. User Avatar
    Permalink to comment#


  3. User Avatar
    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.

    • User Avatar
      Permalink to comment#

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

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

    heheheh . thanks :))

    hope to be one of your Students :DD

  7. User Avatar
    Permalink to comment#

    Very helpful for a css starter like me.

  8. User Avatar

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

    great session

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.