41 thoughts on “Converting a PSD to HTML — Part 1 of 3

  1. Gabi Linko Post author

    Excellent tutorial, will certainly be passing these along!

  2. Birdazoid Post author

    Great tutorial. I really appreciate when you explain what the pieces of the code means as well as what it does. Not enough people explain thoroughly. Tutorials should assume the viewer knows nothing and I think you did great with that. Thanks.

  3. Jhonas Opada Post author

    Thanks dude for explaining it deeply it really help a lot like me that just starting to learn the coding.

    Hope to see more tutorials from you! tHanks………

  4. Cloud797 Post author

    You lost me when you got into html.
    Is it normal to want to shoot yourself when you see coding?

  5. MrWufa Post author

    how can you combine the html,css and images in one document,so that they relate to each other?I don`t get it.It`s right at the beginning.Thank you for your help!

  6. AJax Post author

    what's the best dimension to use for the psd file? thx x

  7. DiabetusFetus Post author

    u dont download it you save the PSD file from photoshop

  8. Andy8422 Post author

    For the purpose of this tutorial is there any way to get this exact psd file

  9. Shah90022 Post author

    PSD file for this tutorial is at:

    css-tricks [dot] comvideo-screencasts1-converting-a-photoshop-mockup-part-1-of-3

  10. Mike Marc Post author

    nice one! it's really a big help for my project. keep up..I hope you're gonna post more advance and different design out there. Thanks!

  11. Sourour Post author

    hi, from where can i downald this psd please !! thank you for the video 🙂

  12. z0mgrugbyREUP Post author

    Changing the margin to -8px fixed it for me. Still though I don't know why I needed to do that and would like to find out why the image was starting 8 pixel down the page rather than at the very top…

  13. Md. Raihanul Ihsan Post author

    Pls give 1 video file in all tutorials.

  14. Zakaria Chefi Post author

    He cant do 1 video. Cause he care about seo… For now 55000 view. X 3

  15. Rich Brooks Post author

    I may be mistaken. But, do you add a reset.css to your style routine? It makes everything start from a very basic starting point. Try it and let me know.

  16. Юрий Пикин Post author

    Soo many mistakes… How do you teach people?!

  17. Lewis Robert Post author

    I make $3550 from just $15 in Liberty Reserve account using this way. MAKEMONEYATHOME.COMYR.COM

  18. sandryc leonard Post author

    the system relies on you NOT having to drive any traffic (or affiliates drive you traffic) whatsoever. Google Sniper is true autopilot income. And is now infamous for being known as the one system where you really do set something up once, and get paid forever.Everything you'll need to know is right here RNMONEAEYATHOME.HOSTEI.COM

  19. Alona Pavlenko Post author

    I like your tutorial and layout and I want to try to do the same with my hands to have a practice. Could You, please, upload the psd file for this video?

  20. Gentlesmith80 Post author

    WHAT is the width of the centered sections combined

  21. Jo G Post author

    I noticed the crop tool is being used over the slice tool. Is that just so you don't have to deal with saving the slices?

  22. ratnakar muramalla Post author

    Great Tutorial…. Thanks dude it helps me alot….!

  23. Laith Post author

    why it doesnt work with me? WHY ????

    * {
    margin: 0;
    padding: 0;


    font-size: 62.5%;
    font-family: helvatica, sans-serif;
    background: url(images/body-bg.png) repeat-x top #f4ebcb;

    ul #nav {
    margin: 0 auto;
    ` background: url(images/header-bg.png) no-repeat;


  24. Laith Post author

    haha.. anyone tried to remove the height??
    it will not change the dimensions, it will make the image under the body-bg.png image.. 


  25. Noxid The Gamer Post author

    I'm having troubles getting my header to show up in the back

  26. Federico Vázquez Post author

    World of Warcraft icon CAN'T be missed !!! 😛

  27. suvankar Mondal Post author

    Can i convert PSD to HTML without any coding?????? please reply me…


Leave a Reply

Your email address will not be published. Required fields are marked *