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

    great ,im learning a lot with that

  2. Kudzai
    Permalink to comment#


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

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

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