Advertisement
News

Converting a Design From PSD to HTML

by

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 PSD

The 100% HTML and CSS

The PSD
Website 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! :)

P.S. No downloadable source code this week. Collis might upload and sell this particular template on ThemeForest.

  • Subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.


Related Posts
  • Design & Illustration
    Interviews
    Interview With Mobile Interface Designer, Alan PowerPreview
    A chat about designing mobile interfaces with Alan Power.Read More…
  • Web Design
    HTML & CSS
    A “Readability First” Approach to Media Queries and LayoutReadability first thumb
    In this article I'll be talking about a methodology that is a mixture of many approaches to Responsive Web Design, with a few extras stirred in. It's both "Content First" and "Device Agnostic", and was originally inspired by the typography focused em based "Goldilocks Approach". I like to think of it as a "Readability First" approach.Read More…
  • Computer Skills
    App Training
    What are Wikis, and Why Should You Use Them?Wiki icon
    You've surely heard of wikis, but do you know why you should be using one in your company? Here's everything you need to know about wikis, what they're useful for, and why they're better than just a standard internal website.Read More…
  • Web Design
    News
    Wanted: Talented Staff Instructor for Tuts+ PremiumInstructor thumb
    As you all know, Tuts+ Premium has been growing massively over the last twelve months! Each month, we’re releasing upwards of a dozen new courses on the topics that you most want. While we’re always open to working with new guest instructors, right now, I’m specifically in need of a talented staff instructor to serve as the go-to guy for Web Design courses on the site. The job pays well, so read on if you’re intrigued!Read More…
  • Web Design
    UX
    Walk Users Through Your Website With Bootstrap TourTour retina
    When you have a web application which requires some getting used to from your users, a walkthrough of the interface is in order. Creating a walkthrough directly on top of the interface makes things very clear, so that's what we're going to build, using Bootstrap Tour.Read More…
  • Web Design
    HTML/CSS
    Building the Merry Christmas Web App InterfaceXmas build 2 retina
    Today we're going to build the Merry Christmas Web App Interface; a Photoshop layout from an earlier tutorial by Tomas Laurinavicius.Read More…