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 100% HTML and CSS

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! :)

Extra Resources

If you’re new to converting PSD to HTML, we’d recommend a number of introductory courses to get you up to speed with the basics:

• PSD to HTML: The Responsive Portfolio Build - by Craig Campbell
• PSD to HTML for Designers by Adi Purdila

If you’re interested in getting some help with your PSD design conversion, Envato Studio has a great collection of PSD to HTML services that you might like to explore.