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 218 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://blog.eyoosuf.com Yoosuf

    hmm Where is the download link, http://blip.tv/file/2764133 is not working any more….

    Safari can’t open the page.
    Safari can’t open the page “http://blip.tv/file/2764133” because the server where this page is located isn’t responding.

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

      It’s just because Blip.tv is currently down – maybe for updates.

  • matt

    ok… in PS Ctrl + Shift + C instead of all this merging layers and smart objects will copy all visible layers in a selection to the clipboard.

    • http://net.tutsplus.com Jeffrey Way

      Well that’s just a fantastic tip that I can’t believe I’ve never picked up on before. Thanks. :) I wish I could update the video now.

  • http://daniel.roeven.com Roeven

    This is an incredible tutorial, but the site isn’t really compatible with major browsers. It looks horrid in IE6, with an overkill of transparent PNGs. Also the 960 grid system doesn’t quite work. The round borders you added around the navigation links don’t work either, do they work in browsers like Opera or Chrome?

    Still, an incredibly useful tutorial, many thanks!

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

      An iPhone app site doesn’t need to work in a decade-old browser like IE6. I even mention in the screencast that we won’t be supporting it. Rounded corners are not required in every browser. :)

  • Evan-XG

    Great tutorial

  • Al

    Jeffrey,

    tried watching again this morning, 75 mins in, the audio continued on but the videio slowed down to a crawl, it was really weird to see you changing the banner CSS and talking about the main and then the bottom CSS code.

    using Win XP IE7

    not sure but this “screencast” seems to be generating a lot of problems, perhaps go back to the way you recorded videos befoe, this one has been very frustrating to watch, or try to watch.

    I have never had problems like I have had with this video before, usually they play quite nicely but this one has been very frustrating to watch, at least 75 mins into it anyway.

    I want to watch the whole video, any suggestions as to how to do this without tearing my hair out? I don’t have much left to tear out

    Al

    • http://www.gabri.me Ahmed

      I have downloaded the video and I`m having a problem with the video too the video stops after 1 hour while the audio continues.

      • http://net.tutsplus.com Jeffrey Way

        Hey guys – It seems that it was a problem with the FLV conversion, I think. Did you download the M4V from iTunes? That one appears to be working perfectly.

      • http://www.gabri.me Ahmed

        so to see the screencast i need to install iTunes ? that`s doesn`t sound good .

        plz next time check the video versions you upload or split big ones into small ones to save us time and hassle downloading a corrupted version cause not all of us have hi speed connections.

        Thanks

  • Jay

    Hi Jeffrey,

    What a great tutorial, you shouldn’t worry about how long the screencasts are because I really enjoy the long ones, they go a lot more in depth and I learn a lot of great tips along the way from you.

    Great work Jeffrey, I always look forward to your screencasts.

  • flora

    thanks jeffrey
    thanks jeffrey
    thanks jeffrey
    thanks jeffrey
    thanks jeffrey
    thanks jeffrey
    thanks jeffrey
    thanks jeffrey
    thanks jeffrey ………………… :) YOU ARE THE BEST..

  • http://gr80.net Shady A.Sharaf

    Great tutorial in here, very very good work ..

    I benefited some small but great tips in CSS ( like the ‘overflow:hidden’ trick , i always used a “div” with “clear:both” to do that ) ..

    A small note: In styling the borders , you set the majority of items to use border-bottom , and cleared that using last-child advanced selector ..
    while that works very good with modern browsers, It’s better the reverse the selector ( use border-top and first-child to clear ) .. as last-child is not supported in some browsers, IE of course :) but first-child ..

    Again, thank you very much for the tutorial , now you’ve got another sincere fan of your works :)

    • http://gr80.net Shady A.Sharaf

      o0o0ps ,, i’m sorry, you really explained that trick at the last minutes .. sry about that ..

      SelfTip: Do not comment before you watch the whole video :X

  • raymi

    hey Jeffrey in case you haven’t see my reply to your request of sending you the links of my videos here they are http://www.vimeo.com/raymicha/videos . I didn’t know were to send you the links so i just post them here.
    I already made six videos and working on a convertion for wordpress for a new series :D

  • http://tutorijali.hdonweb.com/ Tutorijali HDonWEB

    Great tutorial, very very nice work, Greating’s from Croatia :-)

  • http://www.behance.net/jaimemh Jaime

    Wow. Did the first 2 tuts today and I’m already downloading the video to code it! Amazing guide!

  • anton

    nice tut

    thanks again… Jeffrey…

  • Danilo

    This is an awesome videotutorial Jeffrey, The way you teach is really easy to follow, thank you for not making it plus.

    BTW a really last step to finish this guide would be to turn it into wordpress, that would be epic, Thanks man.

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

      Thanks! Will definitely think about it. :)

  • http://www.elimcmakin.com Eli

    I haven’t watched the video yet, but this is totally awesome. It makes me wonder why I went to college. I could learn everything here.

  • http://www.crearedesign.co.uk Stephen Webb

    Thanks for addressing this topic, turning a Photoshop document to an actual XHTML and CSS website can sometimes be quite a challenge so any tutorials which address this are much appreciated.

    I’ve heard a lot about wire framing recently and am still getting to grips with this. I will be watching the separate tutorial on that approach soon.

    As for the video function of this, I too am having problems viewing it. Would it be possible for a screen shot version of the key points in the future? Maybe this would alleviate the download issues a lot of us are suffering from at the moment!

  • http://projukti.com.bd/ A.R Zico

    Just Great. thanx jeffrey.

  • sp

    video is not working and itunes tells me “its not available for your country”
    great :|

  • http://www.3pasos.es Pepitoto

    Aaaaaggggghhhhhh!!

    How can a so good tutorial cut before about 70 minutes (just the image. Sound still runs…).
    Now i have to wait about 50 minutes to get it from iTunes and watch what’s coming next…

    Anyway, it’s a great, great work

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

      I’m so sorry. Screencast.com is upping our bandwidth allocation. :)

  • Saman

    Thanks for the nice tutorial, but why don’t you open and save the smart objects instead of copying and pasting each object to a new document? that’s a lot easier, and will save you more time plus you can always refer to your PSD to export the objects again! I guess that’s a less painful process! :)

  • Cinq

    If you need sample tekst (Lorem ipsum) for HTML (for example that Features list in there), a good website to look at is http://html-ipsum.com/ . Then you won’t have the same list-item duplicated but some actually (!?) different dummy items.

    Saves a few seconds :D

  • http://cssah.blogspot.com/ cssah

    Thanks jeffrey ,what ican i say to you man, you are the best.
    thanks so much.
    for any one who can’t see or download the video you can download with iTunes and it will work properly.

  • http://URL(Optional) Cannon

    Hey Jeffrey,
    I do not use iTunes and was wondering if there was another option for downloading. I am sure there are other people that feel the same way, and if you want to send me the video I would be willing to make it a .torrent and seed it for everyone.

    Let me know,

    Cannon

  • David

    Very nice screencast, i enjoyed every minute of it and your voice wasn’t even that annoying after 2 hours ;) But seriously, i think this was a very inspiring tutorial, especially the line by line coding like you said and not the copying of complete blocks of code, hope we see more of this on nettuts.
    greets from Belgium

  • http://geek.michaelgrace.org/ Mike Grace

    I LOVE THIS TUT!!
    It’s that simple. : )

  • http://www.clippingimages.com Clippingimages

    Looks like :(

  • Meshach

    Great code, ugly design. :D

  • Jeremy

    I suppose this could be in the comments somewhere, but since the final design makes use of png’s would you consider including a png fix so they render correctly in all browsers?

    If someone is using this tut to learn from the ground up it’d be a good thing to cover—even though developers, myself included, hate *those browsers.

    Anyhow, excellent, thank you.

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

      I could – though the intention was to ignore IE6. :)

      • Jeremy

        Good to know, thanks.

    • r_jake

      Dean Edward’s IE8.js includes a PNG fix so it’s covered, although I’m sure it would be possible to convert this design and make it IE6 friendly – the overheads from all those PNGs and IE8.js makes for a pretty hefty download…

  • Yanin

    Dear Jeff, I really like your stuff. but I don’t like the flash video player this site uses. forwarding and skipping features are bad or lacking and i also cant pause and wait for it to download all the way so that I can watch the video uninterrupted.

    that being said, I can’t download it as well since iTunes store isn’t available in Israel… could you please provide another method of downloading or mirror the casts to amazons3/youtube/vimeo ?
    Or even a download link in the plus section…

    Thanks !!! and keep up the good work.

  • Al

    yuck, yuck, yuck,

    more problems trying to virew video, 71.34 mins in, stopped playing and loading gif came up, waited for a while, then gave up.

    is there any way to view 71.34 mins + w/o using iTunes?

    really do want to watch the end of the video but don’t really want to watch through over 70 mins to encounter a problem again. may have to give up on this one.

    what’s the iTunes link if I eventually givre up on the screencast method?
    as someone mentioned above, I don’t really want to d/l iTunes either,
    if this is my only option, going to iTunes seems to bring up the d/l option, does the link to the video show up after you have d/led the pgm?

    Jeffrey, is there any way you can split this up so we can see it? I won’t try again until I feel it is going to work for me. You really do need to split these up so they play better for all of us or find some way to get around these problems. fast forwarding through the video does not seem to be an option.

    Al

    • http://URL(Optional) Cannon

      Indeed,

      As I said eariler, I would be glad to make it into a .torent for you!

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

      I’m just waiting on Screencast.com to get back to me on the video issue. Hopefully soon! Thanks for your patience.

      • Al

        OK thanks Jeff

        Al

      • Al

        should I try again for the third time to view the full video?

        Jeff, have you heard anything back from Screencast that would give me good feelings about trying this again. Don’t want to watch 70 mins again and find yet another problem.

        Al

  • Happy Chap

    Hi,

    I’ve downloaded the tut twice now, and it plays absolutely fine up until about 1hr 10m in, when the audio carries on fine, but the video doesn’t update at all.

    The first half of the tut is brilliant and I want to see the second half!!

    Is this just affecting me?

    • Happy Chap

      Managed to download the MP4 version from blip.tv now and that plays just fine so I can now watch the other half (it was as bad as an episode of Lost, only seeing half the story!!)

      Thanks again for the really excellent tut!

      • http://URL(Optional) Cannon

        How did you do that? Does blimp allow downloading, I couldn’t find the button :D

      • Happy Chap

        Not sure why, but I can’t reply to you Cannon (no reply link on your post) but I use a Firefox add-on called Download Helper (http://www.downloadhelper.net/) – makes life very easy.

      • http://URL(Optional) Cannon

        The commenting programing probably limits the number of tiers you can go down. Thanks for the tip, restarting Firefox now ;)

  • Jamie Brewer

    Great tutorial it answered a lot of lingering questions I had when it comes to slicing. Thanks for the tut!

  • http://www.jennieroutley.co.uk Jen

    Fantastic as always! Thanks JW.

  • dj

    Jeff… What good is giving us the three start times when the embedded player does NOT support skipping forward??!!!

  • Ehab Shaker

    Great tutorial ! thanks. I hope you create such detailed tutorial in wordpress designing and developing theme as soon as possible .
    very useful tut Jeff.

  • XHTML 7 Turbo

    Photoshop is for idiots. Look at its price: It’s just an integral part of jewish religion.

    • r_jake

      Wow, Photoshop is certainly over-priced, but that’s the first time I’ve seen someone link it to anti-semite rhetoric!

  • RamoN

    Great tutorial JW,

    Really nice to see how it’s done instead of reading static pages.

    Since I’m working with a PC and totally new to CSS, I wonder if there’s a substitute for the application Textmate?

  • Ryqiem

    Slicing the PSD – 0:00

  • http://designinformer.com Design Informer

    Awesome tutorial.

    I love how you went into very great detail and you used all 3 different Tuts+ sites to accomplish this.

    On a side note, just ran across this template from Jon Notie and it is an XHTML/CSS iPhone template. Looks great as well. http://jonnotie.nl/templates/

    Keep up the great work Jeffrey!

  • http://www.globae.com Malxico

    I can’t wait to get my teeth into this…

    Thanks

  • Zoran

    Wow, i am impressed, you make the HTML and CSS look not so boring to me, considering the fact that i love working with PHP and jQuery more than HTML and CSS, but since i started watching your tutorials, you helped me realize how much i don’t know about CSS and now i am loving it. Thank you very much for this tutorial and for sharing.

  • sherri

    hi, i love this one very nice i am learning this but video always stuck in the middle, can you please add me download of this video so i could download and play it?

    thanks for this golden video

  • B

    I watched the entire thing- enjoyed and learned a few new things I did not know before. Started this video around 2 am and didnt realize it was going to last for 2 hours..but what the hell..never watch a video where a gentlemen coded an entire site top to bottom. Very good tutorial.

    Thank you for perspective and a few new good tools

  • http://www.dauntlessds.com Chris Mills

    This is my first nettuts tutorial i have looked at period. I have never done web design and i was able to accomplish this task with ease and learned SO MUCH from it. Amazing tutorial and worth the 4 days spent going over every detail. I do have a few bugs because I designed my site close to the same look but by far still too different to use your exact coding. I was wondering if there was a way I may be able to get help from you on 2 particulars about my site. 1 is the bottom-wrap will not wrap the image of the bottom border, i wasn’t using a footer or footer nav so wondered what i could be doing wrong. 2 I have an image on the side that was your testimonials. The image is not oversized but I can’t get it to come up to that spot. The image is under as a ul li but won’t move…. these are my only 2 problematic issues. Fantastic job and hope to see a LOT more tutorials by you.

  • http://www.fotostatik.com Micheal Beaulieu

    Great Series!
    BUT I feel like this isn’t over yet! I mean, what about those links, where do they go? How would I design the rest of the site?

    I am a photographer and want to design my own site using the methods shown in this screencast, but I’m left hanging. I’m not someone with training with web design but this didn’t cover the overall design of the site.

    If the answer to my questions is so easy that I just don’t get it, would someone please spell it out for me.

    Thx,

  • thomas lah

    this tutorial was amazing.
    i followed the whole way- it helped me so much and showed me a brandnew way of webdesign workflow

    PLEASE PLEASE MAKE MORE OF THESE BIG TUTORIALS ..THEY ARE VERY DETAILED AND STRUCTURED….
    MORE STUFF ON CSS AND DESIGN AND FLASH STUFF.!!
    EVERYTHING

    THANKYOU its soo appreciated

  • Sherman Jackson

    How do I download this VIDEO?? I am from INDIA….

  • Erdinc

    I visited this page with Chrome and all I saw was a black box. Nothing happened when I clicked the play button.

    Then I visited this page with firefox and it worked just fine.

    I absolutely hate itunes. I don’t understand why you would give a link to itunes and no other alternative link for those who want to download the video. Not everybody uses itunes.

    Also can you please add the year to the dates? I found it annoying that you dropped it. I am slightly annoyed because even though I can guess that the dates refer to the current year, I would prefer to know for sure. For instance what would happen if I visit this very page the next year this time? Would the years appear next to the dates?

    But that main annoyance for me is that there are web developers out there who think dropping the year from dates is acceptable. This is totally annoying.

  • absmugz

    WHEN WILL THE FLASH AND ITUNES VERSIONS BE ONLINE….COZ THIS IS DAMN GOOD STUFF.

  • http://www.md5technologies.com/ sandy bamford

    I am getting message while downloading from itunes “The item you’ve requested is not currently available in the Indian Store.”
    Pls help me out

  • Daniel

    thanks for a great tutorial Jeff! Don’t think it was a bad thing that it was so long. it’s important to do things thoroughly ;)

    One thing I wanted to point out thuogh. the last javascripty IE-fix could easily have been solved with some extra css. no need for :not(.current) either :D. If you wrote one more rule, only for .current, and specified the margins there too, they would override those of the :hover rule

    • Daniel

      hah.. sorry for my bad english. it’s not my native language

← Older Comments
Newer Comments →