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

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

on Dec 27th 2009 with 219 comments
Tutorial Details
  • Technology: HTML, CSS
  • Difficulty: Beginner

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


Final Design

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.


Tags: CSSVideos
 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

I'm the editor of Nettuts+, and love making the process of building for the web as easy as possible. Also, I'm finishing up my latest book on Laravel Testing! If you want be friends, say hi on Twitter.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
← Older Comments
Newer Comments →
  • http://www.brandledesign.com Graphic, Web, Blog Design | BrandleDesign

    Great advice. Thanks for sharing with us!

  • jimmyjack

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

  • Víctor

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

  • lordnova

    When will the new javascript tut come

  • http://kreativtstudio.no Roaa

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

    • Dave

      This is the same tutorial that was posted ages ago but now it’s on the front page? what is going on?!

      • http://www.jeffrey-way.com Jeffrey Way
        Author

        Did you guys not read the big UPDATE at the very top of this page??

    • http://kreativtstudio.no Roaa

      oh :)

  • http://www.mywedding.ie gabriel

    great tutorial

  • http://www.gravatar.com/avatar/1e6070e971df1d6a75a23f62fbfcf2a4?s=80 Willy

    Pretty Cool

  • Michael Fouquette

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

  • Andrew Miesner

    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!

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      You try coding, and talking into a microphone at the same time. It’s hard! :-)

  • Towel

    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?

  • http://computersight.com/software/photoshop-tips-1-gradients/ al
  • http://pcandweb.com Subhadeep Gayen

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

  • Prashant

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

    But where is JavaScript from Null- Chapter 4 ?

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Will come either Tuesday or Wednesday. Skipped last week due to Christmas.

  • Al

    thanks for the update Jeffrey

    now should be able to view the final part

    Al

    • Al

      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

        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

  • r_jake

    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…

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      The idea is to promote forward thinking. For a fictional site that focuses on iPhone Apps – I’d be willing to bet that 98%+ of all visitors will not be using IE6. :)

  • Karyl

    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.

  • http://www.google.cl Dilip

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

  • eliot

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

  • Marc Sanders

    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.

  • Tonikart

    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!

  • Vinicolas

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

  • http://yourcleanboat.com Dwight

    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.

    • http://yourcleanboat.com Dwight

      Well, I had to move the frame to another site, I will leave it up there for a while so if you want to see it, it is at the address below. Thanks again.
      YourFirstAttempt.com

  • http://www.faiyazhaider.com Faiyaz Haider

    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

  • Faiyaz Haider

    Where did my comment go??

  • Joe

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

  • Rob Cozzens

    Best tutorial ever!

  • Arman

    Thanks for great tutorial. Realy informative & usefull.

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

  • Stewart

    I’ve only watched the first part of this tutorial, but It’s already helped me a great deal! I’m one of those who would be considered more of a graphic designer than a web programmer, but I’m trying to be better rounded, and this tutorial is helping immensely.

    I love the cross-site aspect of this tut as well! Keep it up! Most people who are doing stuff for web are using several programs, and this is a great way to break things apart while still keeping a semblance of structure.

  • SikDave

    !!!!!!! Fantastic !!!!!!!!

    Thanks so much for spending the time to demonstrate this workflow, I learnt so much, and you’ve cut down my conversion speed by about 60% on the old way I was doing it.

    Really appreciate this tute.

    Dave

  • http://www.des-on.com Ebrahim

    thank u , Best tut ever

  • Willage

    Great Tut!!

    Please know we learn as much, possibly even more from your mistakes, so take the time to walk us through what you did wrong.

    Thanks and keep them coming!

  • Stanley

    for some reason, my background only works in html { } and not in the other #_____ { }
    so I can only see the top bar and the coloured background..

  • http://gordongordon.tumblr.com Val Kalinic

    can I modify and use this site for my webpage?
    or is it illegal?

  • http://www.vinfotech.com Web 2.0 Design

    Awesome post. . It will surely help the website professionals. Many thanks for sharing. Kudos to you :)

  • hugo

    Thanks! This is really helpfull and interesting

  • Brave Heart

    It would be nice if the video download link can be provided specially for those having slow internet connection. They can view the video in offline mode after downloading it.

  • Justin

    In my case i suck at the nav. The list items are not next to each otherbut they are on top of each other. I sucked at this on another site before.

  • Wouter

    I just put on your reader survey I’d like tuts like this, then an hour later I found this! More of these, please! B)

    IMhO this does highlight one problem however: due to the blog-like structure, it’s sometimes hard to find articles about a specific subject. Or even to find them again once visited. I bookmark useful tuts, but ideally I shouldn’t have to.

  • Beefy

    Great tutorial, i found it really interesting and comprehensive!

    Thanks for giving us this amount of advice in such a short timespan.

  • Dougieladd

    As always, a great tutorial… you are the man when it comes to this sort of thing (and I know, I view a LOT,)… Really appreciate the effort you put in… you make it look effortless, easy but comprehensive at the same time.

    You’re a gentleman and a scholar sir. Thank you.

    MORE please!!

  • http://www.visual-blade.com Daquan Wright

    You’re doing a wonderful job Jeffrey, please keep making tutorials! I’m finally getting out of a rut and for the first time, I’ll be doing a complete PSD to HTML/CSS conversion. This is just what the doctor ordered. :D

    Question: Do you wireframe, mark-up, and design in Photoshop, or do you do the wireframe, design, and then do the mark-up? By design I mean the interface in PS, not CSS.

    I just wonder since I had elements labeled on my wireframe if I had to do the structure first.

  • Daquan Wright

    Never mind, I’m a noob to this process but I figured it out (looked at the title). lol

  • Sue

    This video was EXACTLY what I needed. I know you kept saying how boring it was to watch you hand code the same things over and over, but……seeing it over and over is what made it stick with me. Thank you so much.

  • http://www.rickgrossman-blog.com Colleen Murphy

    The conversion process is amazing, thank you.

  • tomasz

    great tutorial! thanks!

  • http://envmanu.carbonmade.com manuel

    thanks for your video, it was of great help. I always wanted to learn to work with a grid system.

  • Gspirollari

    After 2 month searching tutorials and study W3chools those 2 hours of you video makes me noot to go to my bed at 6 am :)

    thank you Jeffrey.

  • sylvia

    Hi the third link is not working

  • Ren

    Wow, I didn’t see this before now. And it’s three years old….

    What a shame I didn’t see this one earlier. Anyway: I learnt so much! Love you, man. Thanks.

  • http://www.kartes-artinred.gr Kartes

    Old but very usefull , thanks a lot!!!

← Older Comments
Newer Comments →