If your connection isn’t fast enough to stream this video (it’s a bit large due to the length), I’m currently exporting a Flash and iTunes version. I’ll update this posting when they’re ready.

This kind of tutorials is very useful for the designers who are confused about the right way to design an actual website .. Thank you Nettuts

ok will check the iTunes ,this is loading to slow.

Nice Tutorial… Thanks a lot…

Nice. Great job Jeffrey.

I just wish that you guys would do the same thing, but add one more section at the end, converting a site into Wordpress.

This looks like it would be helpful to people new to web design.

Can you please post the download link here? I really need it

I really liked how this series spanned three of the tutsplus sites. Really cool idea!

I want a download link…

Jeffery! did you design this website??
Its very good.

Hi
It is worth enough to say, thank you very much … but could you please provide the download link as well.

I haven’t watched this yet, and to be honest I haven’t really been aware of the other tuts about these but kudos for what looks like alot od detail about an iPhone App cos as far as I know no-one else has even touched on that as a subject yet.

Well done Jeff.

Although this is targeted towards beginner designers, it is a good refresher for seasoned pros as well. I commend you for your job well done and keep up the good work!

Thank you so much for this series Jeffrey. I’ve never used Fireworks, so it’s gonna be a good start !

Nice work, Jeffrey.

Thanks

Great tutorial!
Just a couple quick tips/different ways to copy things in photoshop.
-You merged and rasterized some things before copying. But if you select, then Ctrl+Shift+C, it “copies flattened.” And it does what it says, basically copying exactly what you see on screen, layer styles included.
-When you select an object, the selection does not include any outer effects (outer glow, outer stroke, drop shadow, etc.) My method of copying such objects is to solo the layer (alt click the layer’s ‘eye’con) then go to Image>Trim, select Transparent Pixels (so that it includes the drop shadow and such), trim on all sides, OK.

I watched whole video and honesty you cover every little detail that one might to consider with different browsers.

It presents professional way of coding a website from scratch and it is a great deatiled tutorial. I am really thankful.

That’s amazing

I’m always had trouble in coding PSD to XHTML/CSS
Thank you

nice tutorials and converting psd to html always help in many ways. i hope, you will post the screen-cast converting this website in wordpress in November. we are waiting jeff.

Thanks Jeff. Really helpful.

hey guys,

well, i’ll leave here a suggestion: why not provide closed captions on all videos, or at least on many videos, because many people (as me) do not understand english very well, and with cc, it ll be much easier understand what is said on the tutorials.

thanks.

Looks very nice, will have to get the time to watch it all. Pity I have to keep supporting IE6 at work though, pain in the b-hind.

thanks for this great post

Amazing tutorial!

Looking really good tut again, Thanks Jeff

love your tuts but please don’t do them white on black, very hard for me to read, old eyes you know

Al

thank you very much Jeff for this new tutorial. I’m a plus member so i got the psd and convert it also so i guess we I can check if i got it right . Thanks again

All I see is a black box. MP4 link, s’il vous plait?

Error #2044: Unhandled IOErrorEvent:. text=Error #2035: URL Not Found.

getting the same black box rather than the video.

This is AWESOME!

Seriously, how you explain everything and work with the files: super easy to understand and to learn from.

You did a really, really good job! Thank you so much!

hmmm, there must be some tremendous server-strain going on over this screenCast. Waiting for nearly an hour for it to load…

I did get a chance though during that time to look over the other to segments.
Again, great job Jeffrey and crew.

I just downloaded the mp4 last night and dragged it into my movies folder on iTunes. Been watching all morning (almost done.) In my company, I do the website programming and the design is done by others. Perhaps that’s why I am giddy like a geek on Christmas morning. Perhaps it is because I come form the old school of design (chop up a huge image and suffer why you try to modify anything or pull your hair out trying to program layout!) This is excellent Jeffrey! I couldn’t believe this wasn’t a plus tutorial. I think I am becoming a Jeffrey Way fan boy I lack the patience for long text tutorials and the visual learning is better than being in a classroom even. So I look for video tuts quite often and, @jeffrey, yours are the best hands down.

On another note, you can learn a lot about a person watching them write code. Like when Jeffrey couldn’t see an “r” because he was expecting a “4.” I have a slightly dyslexic friend who does stuff like that. It’s interesting that all the really smart people I know in development are mildly dyslexic or have attention deficit disorder, etc. Not saying you are dyslexic @jeffrey. Just interesting.

Thanks again for an awesome tut!

Awesome work, Jeffrey Way. That’s a amazing tut you got there. Keep up the good work – Cheers!

Hey Jeff,

Great tutorial, I think its great. Just a quick thing about using an image as a logo though, I know there are issues with using text indent however, what I do is just use a span tag within the h1 or h2 tag, apply the background to the h1/h2 tag and set the span tag to display:none.

I dunno what you think of that method but I find it works the best.

Great tut, very nice
Keep more coming…
Thanks

about time you started using Fireworks Mr. Way

okay…go somewhere else

I’ve been waiting so long to find a good tutorial about how to slice up a PSD file, glad NetTuts is on it!

Website planning is probably the most important part of building a website. It can also be the most frustrating if you don’t start with a good understanding of how the Internet works and or have unreasonable expectations about how your site should be designed.

thanks jeffrey you greats

Thanks JW for another great tutorial.

I can’t see the video hmm will wait for bandwidth. but I know this tutorial is also same as your previous one. thanks again.

Fantastic tutorial, but the video isn’t loading up. Wouldn’t it have been better if you did it in multiple parts?

Also, could you put a downloadlink please? I’ve been searching everywhere for it, its not on iTunes!

OMG! THANK YOU SO MUCH! This is honestly one of my favorites sites. Im sucha proud nerd, I love CSS.
Thanks cuz this is so much better than my uni teachers, lol.

This is huge Jeff. I learn a lot from you.

I’m excited to see this! Where is the video?? Usually there is no problem viewing these. I’ll check back later…

started watching video this am, then had to go, now cannot get video at all.

what do I need to do to see the video? clicking on the other options does not seem to work either.

can this be fixed?

Al

test

last message is lost in the ether

trying again, watched part of this in morning, now trying to watch the rest, no go, cannot get into it.

alternate links no good either.

is this going to be fixed, is this a problem with screencast??

Alf

Blip tv one is not working and i tunes, well it keeps resending me to download page for itune!

And Itunes? Couldn’t you have added this to plus content too so we can download, I had to download the Itune programme just to watch this and it’s not coming up….it’s 3:23am, I’ll try in the morning.

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.

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.

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!

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

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

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

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.

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

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

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.

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.

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

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?

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.

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?

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.