Site Builds

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.


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.

Related Posts
  • Web Design
    Community Projects
    Community Project: The Tuts+ Illustrator Wireframe KitWireframe thumb
    Calling all community members! We have a little project for you to take part in! We're compiling a wireframe kit for Adobe Illustrator, built by you, the Tuts+ community. Read on to see how you can take part.Read More…
  • Computer Skills
    App Training
    How to Turn Your Data Into Interactive Tables with SilkSilk preview image
    Data mining isn't just for corporations. Here's how you can use Silk to easily turn your data into interactive charts, tables, maps and more.Read More…
  • Design & Illustration
    10 Tips for Building Wireframes With IllustratorPreview wireframe
    Adobe Illustrator is experiencing a come-back in the world of web design. Not only is SVG becoming commonly used online, but more and more designers are using vectors for wireframing. The following tips will help you make the most of Illustrator as a wireframing tool.Read More…
  • Web Design
    Applications and Tools
    Five Useful Things You Can Do With Adobe Reflow Right NowReflow thumb
    Whether or not Adobe Reflow ever becomes a fully functional website creation tool, there are some really useful things you can do with it right now, and we're going to cover five of them.Read More…
  • Design & Illustration
    12 Ways to Get the Most From Behance0946 behance preview400
    I often talk to other creatives about the ways they share their work online. Most admit that they really enjoy this part of their job, but many feel like there just isn't enough time in the day to devote to the task. In my opinion, one of the most important things an artist can do with their time is to share their creations with others. Read More…
  • Code
    Theme Development
    Creating a WordPress Theme From Static HTML: Preparing the MarkupCreating wordpress theme from html 400
    Last year I did a small (and admittedly very un-scientific) survey among other WordPress developers. What I wanted to know was this: When they built their first WordPress theme, how did they do it? Did they hack an existing theme or did they start with their own static HTML and turn it into a theme? The majority of people I spoke to used the second approach - they were all experienced frontend developers who had built sites using HTML and CSS, and found it easiest to take their existing HTML files and convert them to a theme. Two of the people I spoke to were lecturers or teachers, and told me that this is the approach they use with students. So in this series I'm going to show you how to do just that.Read More…