From PSD to HTML
basixvideos

Converting a Design From PSD to HTML

Several weeks ago, I showed you how to take a PSD design and convert it into HTML and CSS. Given the popularity of that particular tutorial, I’ve decided to create a second series. However, I’m not much of a designer. Instead, I asked Collis if he would allow me to use the design that he used for a recent tutorial for Web Design Week.

Just like last time, I’ll take you through the process step by step – even through the tedious parts. Enjoy!

The PSD

The PSD

The 100% HTML and CSS

The PSD
Website With Markup Notes

Thanks again to Collis for allowing me to use his design for this week’s screencast. If this screencast helped you, please do us a favor and subscribe to the RSS feed, and/or leave a comment. See you next week! :)

P.S. No downloadable source code this week. Collis might upload and sell this particular template on ThemeForest.

  • Subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.


Add Comment

Discussion 273 Comments

Comment Page 8 of 8 1 ... 6 7 8
  1. sagar says:

    I want more download able tutorials

  2. waqas ali says:

    nice post, thanks for sharing use full information….

  3. why post is not given

  4. Q says:

    Thanks for this tuto! Great job! :D

  5. Sam says:

    very nice article…thanks.

  6. Musa Sheikh says:

    thank uuuuuuuuuuuuuuuuuu very very much

  7. Susan says:

    Thanks for share tip :)

  8. Asaduzzaman says:

    Great tutorials. All tips is helpful. Thanks a lot.

  9. poonam says:

    very nice …thanks.

  10. a la caprice says:

    thank you – my first dive into this subject – great overview!

  11. arpan says:

    thanks bro

  12. mayank says:

    nice post……very explanatory..!!!

  13. udi says:

    THANKS!! GREAT

  14. Diego Ferreira says:

    Great tutorial J. Way,

    I enjoyed the whole 53 minutes spent watching your tutorial. Keep up the good work, and you will always have me coming back as an avid reader of your articles.

  15. Saba says:

    This is a really good & quite descriptive. thank u :)

  16. Wonderful cool. Great concept and execution. Love the popular principles you incorporated into the dexterity creation.Regards, JoshuahCheck up on my place as understandably

Comment Page 6 of 6 1 ... 4 5 6

Add a Comment

To add a code snippet to your comment, please wrap your code like so: <pre name="code" class="html">YOUR CODE</pre>. You can replace the class name with "js," "css," "sql," or "php." If there are any "<" or ">" within your code, please search and replace them with: &lt; and &gt; respectively.