The Ultimate Guide to Creating a Design and Converting it to HTML and CSS
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
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.
- Follow us on Twitter, or subscribe to the Nettuts+ RSS Feed for the best web development tutorials on the web.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Jeffrey Way
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
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.
It’s just because Blip.tv is currently down – maybe for updates.
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.
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.
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!
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. :)
Great tutorial
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
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.
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.
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
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.
thanks jeffrey
thanks jeffrey
thanks jeffrey
thanks jeffrey
thanks jeffrey
thanks jeffrey
thanks jeffrey
thanks jeffrey
thanks jeffrey ………………… :) YOU ARE THE BEST..
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 :)
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
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
Great tutorial, very very nice work, Greating’s from Croatia :-)
Wow. Did the first 2 tuts today and I’m already downloading the video to code it! Amazing guide!
nice tut
thanks again… Jeffrey…
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.
Thanks! Will definitely think about it. :)
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.
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!
Just Great. thanx jeffrey.
video is not working and itunes tells me “its not available for your country”
great :|
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
I’m so sorry. Screencast.com is upping our bandwidth allocation. :)
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! :)
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://www.lipsum.com is another good one.
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.
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
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
I LOVE THIS TUT!!
It’s that simple. : )
Looks like :(
Great code, ugly design. :D
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.
I could – though the intention was to ignore IE6. :)
Good to know, thanks.
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…
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.
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
Indeed,
As I said eariler, I would be glad to make it into a .torent for you!
I’m just waiting on Screencast.com to get back to me on the video issue. Hopefully soon! Thanks for your patience.
OK thanks Jeff
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
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?
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!
How did you do that? Does blimp allow downloading, I couldn’t find the button :D
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.
The commenting programing probably limits the number of tiers you can go down. Thanks for the tip, restarting Firefox now ;)
Great tutorial it answered a lot of lingering questions I had when it comes to slicing. Thanks for the tut!
Fantastic as always! Thanks JW.
Jeff… What good is giving us the three start times when the embedded player does NOT support skipping forward??!!!
Great tutorial ! thanks. I hope you create such detailed tutorial in wordpress designing and developing theme as soon as possible .
very useful tut Jeff.
Photoshop is for idiots. Look at its price: It’s just an integral part of jewish religion.
Wow, Photoshop is certainly over-priced, but that’s the first time I’ve seen someone link it to anti-semite rhetoric!
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?
Oh yes there is :) With notepad++ you can get it to even look like textmate(check the style configurator when you launch it) ;)
http://notepad-plus.sourceforge.net/
Slicing the PSD – 0:00
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!
I can’t wait to get my teeth into this…
Thanks
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.
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
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
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.
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,
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
How do I download this VIDEO?? I am from INDIA….
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.
WHEN WILL THE FLASH AND ITUNES VERSIONS BE ONLINE….COZ THIS IS DAMN GOOD STUFF.
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
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
hah.. sorry for my bad english. it’s not my native language