Advertisement
  1. Web Design
  2. HTML/CSS
  3. HTML

Converting a Design From PSD to HTML

Scroll to top
Read Time: 1 min

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 PSDThe PSDThe PSD

The 100% HTML and CSS

The PSDThe PSDThe PSD
Website With Markup NotesWebsite With Markup NotesWebsite 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! :)

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:

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.