7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
  1. Code
  2. Site Builds

The Ultimate Guide to Creating a Design and Converting it to HTML and CSS

Scroll to top
Read Time: 1 min

This screencast will serve as the final entry in a multi-part series across the TUTS sites which demonstrates how to build a beautiful home page for a fictional business. We learned how to create the wireframe on Vectortuts+; we added color, textures, and effects on Psdtuts+; now, we'll take our completed PSD and convert it into a nicely coded HTML and CSS website.

Please note that, even if you haven't read the first two tutorials, you'll be able to follow along with this video quite easily.


Please note that this tutorial series was originally posted on Nettuts+ about sixty days ago. However, it's recently come to my attention that many of you had trouble watching the screencast for Section 3. This has now been resolved. Enjoy!

Part 1: Build a Promotional iPhone App Website Wireframe in Fireworks

Part 2: Create a Promotional iPhone App Site in Photoshop

Part 3: Converting Our Design to a Nicely Coded HTML and CSS Website

  • Section 1: Slicing the PSD - 0:00
  • Section 2: Coding the Markup - 18:43
  • Section 3: Adding the CSS - 47:11

Other Viewing Options

Series Complete!

If you followed along for this entire series, congratulations are in order! If enjoy the idea of tutorial series' that span multiple TUTS sites, be loud and let us know! I hope you learned a bit from this third entry; and thanks again to Sean Hodge (Psdtuts+/Vectortuts+ editor) for writing the first two tutorials in this series.

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 Code tutorials. Never miss out on learning about the next big thing.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.