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

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

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