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

Final
  • 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

Add Comment

Discussion 192 Comments

Comment Page 3 of 3 1 2 3
  1. Great advice. Thanks for sharing with us!

  2. jimmyjack says:

    I can’t see the videos, what is wrong?

  3. Víctor says:

    Nice series, keep´em comming. Thank you !!

  4. lordnova says:

    When will the new javascript tut come

  5. Roaa says:

    is it just me or have i’ve seen this before? Anyway, it’s a great tutroial :)

  6. Michael Fouquette says:

    Wow. Great tutorial. Hopefully people realize the value they can get from this type of extended/spanned event. Thanks.

  7. Andrew Miesner says:

    Haha Jeffrey, I never get tired of watching your thought process when it comes to code. You do make me want to grab your mouse and fix your typos sometimes when you can’t seem to find where you went wrong, but that’s just part of the process.

    Amazing tutorial as always!

  8. Towel says:

    Love the tutorials, they never cease to interest me. I have a question though, dumb, yet simple. Why do you put a space before and after each header tag text. For example, you put ” Features ” instead of “Features”. I was wondering, why? Are there benefits to it, or is it just a habit of yours?

  9. al says:

    want to learn more about gradients?http://computersight.com/software/photoshop-tips-1-gradients/

  10. I realy realy realy need this book, please give it to me..

  11. Prashant says:

    Long download !!
    742 for this video. close to 1 GB !!!!

    But where is JavaScript from Null- Chapter 4 ?

  12. Al says:

    thanks for the update Jeffrey

    now should be able to view the final part

    Al

    • Al says:

      tried watching.

      just as you were describing #banner p CSS code, the video shut down and quit on me, this wouldn’t be about the 72-74 min mark, would it? that is, the same problem area as before. this is the third time I have tried to watch this video and so far have been unsuccessful in doing getting past this area in the video.

      any body else having problems like this? unfortunately you need to watch more that an hour to find out…

      Jeffrey, I would love to be able to watch the whole video but so far have been very unsuccessful in doing so, not sure what the problem is but if you can suggest other ways to try it, I may try one more time. as I said, it takes over an hour before I find out if it is going to work or not. good lesson learned – long videos no good, short videos better to get around problems with. at least you could replace elemnts if shorter.

      Al

      p.s. XP SP3, IE7

      • Al McR says:

        jut tried again using FF

        success, and I was even able to fast forward to get to the part I had not seen before

        thanks jeffrey for a great video (problems notwithstanding)

        Al

  13. r_jake says:

    Great tutorial, and I haven’t been experiencing any problems viewing, unlike everyone else, and my connection speed is pretty lousy.

    I wonder Jeff if it is worth highlighting to those newish to HTML/CSS that support for IE6 still needs to be factored in for most projects. I reckon you could probably acheive the same results using just JPGs and basic selectors and reduce page load time in the process. Not quite as sexy as all that CSS3 stuff though…

  14. Karyl says:

    This is one of the most awesome-nest complete tutorials I’ve ever followed. I’m taking a web design class and this series has become indispensable to my learning. I thank the author(s) for the lesson and hope to see more like it. The only thing I wished that was covered in steps is multiple column layouts. I know it was a little too much to add to the already long video, but if like me, you like to know how the grid is composed in CSS, it would have made this series absolutely complete.

    I think it is a good habit for beginners to learn how to hand code layouts rather than copying and dumping already-made files because as we know, sometimes markup isn’t forgiving when it starts falling apart. Coding by hand helps newbies like me understand the “why’s” a lot better when the layout isn’t working.

    Maybe multiple column layouts could be a suggestion for future tuts? :)

    Hope so….

    Thanks again.

  15. Dilip says:

    I think that the vimeo video doesn’t work, or its maybe me, well anyways can somebody check it please?

  16. eliot says:

    i just did the whole thing. I had just basic knowledge of html and css and now i feel pretty confident. Thanks

  17. Marc Sanders says:

    Hi Jeffrey,

    I am a graphic designer / web designer working for Third Floor Design based in Gloucester, England but do alot of design and web learning in my spare time. I have recently watched your nettuts video regarding building and coding the ilovemyapps website. Got to say it was a really good video demonstrating some features of css3, grid960 and a few other bits and bobs I had never used before. One of those being the first & last-child selectors which I had never used before. I have looked further into these now and introduced them into a site I am currently building. The only problem is that they seem to work fine in safari / firefox but when it comes to ie, it all goes to pot. I have included the following as you did:

    But this seems to of not fixed the problem with the last child selectors and makes the page jump out. It’s like ie doesn’t even pick up on these. Can you explain why and if you have a work around? You can take a look at the following test address http://www.marc-antoni.marcsanders.co.uk to see the page I am working on.

  18. Tonikart says:

    This was an excellent tutorial! Im a graphic designer but have never learned web design. I was looking for a simple tut to get me started and this was perfect. The guy is very clear, calming to listen to and made the whole process a lot less daunting for me. Much appreciation!

  19. Vinicolas says:

    Nice!!!!!!!
    I learned more of a firebug …. and I did not know that jquery selectors were based on the css .. thanks ….

  20. Dwight says:

    Thanks Jeffery Way for such an excellent tut. It took me more than 3 days to put together what you guys seemed to have done in 3 hours, and it came out beautiful…YourCleanBoat.com I got me a product page to be proud of.

    Best to you Jeff.

  21. I have officially watched this video on iTunes like almost 6 times. It’s a classic for me. Great Tutorial, liked it so much, that I’m thinking of signing up for a plus membership just to grab the other tuts you have, like the watercolor psd file to Xhtml, and grab as much more as I can, simply based on your awesome way of teaching. I have actually enjoyed writing css your way, than what I’ve learned in school.

    Thank you Jeffry

  22. Faiyaz Haider says:

    Where did my comment go??

  23. Joe says:

    Thanks for this great tutorial! Your hard work is very appreciated :)

  24. Rob Cozzens says:

    Best tutorial ever!

  25. Arman says:

    Thanks for great tutorial. Realy informative & usefull.

    *offtop* Can anyone tell me what font in textmate was used in this tutor?

Comment Page 3 of 3 1 2 3

Add a Comment