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.
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Update me weeklyEnvato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post