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

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.

Update

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

• iTunes/Downloadable Version

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.

• Follow us on Twitter, or subscribe to the Nettuts+ RSS Feed for the best web development tutorials on the web.