This is exciting! I needed this memory refreshing!

This will certainly be the best tutorial and more expected of all.

Excellent.

Nice! I comment in my blog. I’m sure this is very helpfull to newbies.

nice tutorial!
but what’s application luncher do you use at the beggining of the video?
really cool, if you give me the name i’m happy becouse i looking for that applicaion for a long time…
exscuse for my english, i’m italian.

@Andrea – The name of the IDE is “Visual Studio” from Microsoft. It’s a bit pricey, but you can download a free version that works fantastic. It’s called “Visual Web Developer” You can get it here:

http://www.asp.net/downloads/essential/

It’s designed to be an IDE for the ASP.NET framework, but you can create simple HTML websites and ignore the ASP functionality.

Guys, sorry for the delay with the second two videos going up. They were uploading when I went to bed last night, but my computer automatically restarted. So, I had to start over. They’re almost done and will be posted ASAP.

I worked really hard on this tut, so the Diggs are appreciated!

Awesome video. Thanks for sharing. Its always neat to see how others do it.

Just one note for slicing the images in photoshop:

You have the option of just saving selected slices by changing the drop down box in the “Save As Optimized” box from “All Slices” to “Selected Slices”. Saves some time down the road…

THANKS A LOT JEFFREY !!

@Josiah – Ahh…great tip. I knew there was a way to do it! Thank you.

In CS3 you can select User Slices before you click Save in the Save for Web & Devices dialog.

Just viewed the demo in FF3 and its not very clean, there’s some sort of mismatch with the background in the header area.

nice article thanks!

Hey, great video tutorial. I have a question about the ie 6 fixing stuff. Do you know a great site where I can see the different ie 6 fixes with examples and so on ? Sometimes I get crazy because of the rightright and !important stuff for ie 6.

By the way:
Visual Studio is very great and I saw that you are using jquery. on The jquery page there is great plugin for VS to implement IntelliSense for jQuery. There is also a PHP IntelliSense Plugin called VS.PHP. Its very great!

@ANeuby – Thanks! Yeah, I did know that. It’s going to be built into the future versions of Visual Studio. I wrote about it on the ThemeForest blog.

VS.PHP is a great extension. I have that installed as well and use it on a lot of the screencasts on this site.

Jeffrey Way, very good tutorial! Thx.

Nice tutorial. I’m just wondering how many designers use EM’s for padding/margins? Personally I’ve always used pixels for that. I’ve only used EMs for text.

Dugg

This is awesome… Keep up the good work. Any chance you could do a complete div myspace overlay, from psd to xhtml, with some java etc… Or even a music myspace. That would be amazing and would love to see the envato network tackle this… I think this would be a very popular tut as well.

Thanks in advance

Great, thanks

great one thanks for it.

Thanks for this very essential tutorial, Jeff! This would be very helpful for newbies like me whose just starting to learn Photoshop. Looking forward to create my own website. Kudos to NETTUTS as well!

Very nice. Thanks

This is pretty fantastic stuff. Should be useful to a lot of people.

Nice work, I’ll be going through this tonight.

I’m in the middle of the first video atm, but I wanted to chime in that when you are in the save for web workspace you can shift+select all of the slices that you want to save out then when the save dialog box comes up select “Selected Slices” from the slices pull down menu. This way you won’t get all the crap images that you have to hunt down and trash later on.

Great tut so far, thanks!

Awesome tut!

Thanks!

Great Tutorial Jeffrey! The screencasts are so much better than text tutorials for me because I learn better visually than I do with text. I learned some cool things in the XHTML while you were going through which is very cool. The rounded corners using moz made my night as i always used to make images to put the text over, to make it look like a rounded cornered border. Also the header icons was something that I also learned which was pretty cool.

Great job again I cant tell you how much this has helped me on alot of things.

@Brandon – Thank you! I’m the same way. Videos help so much more – at least for me.

Just remember with the “-moz” and “-webkit” styles…they only work on Firefox and Safari. They will still come out as square on IE7 and below. But it’s really not a big deal.

I’m glad to hear it helped you…makes me feel good.

Yeah it helped a lot. And I will remember that. I use Firefox anyways and so far all my clients that I have worked with use Firefox, and if they do not…I tell them why its better than IE lol. When I do that I rant on. Yeah you spent a lot of time on that video lol. It was worth it though and also worth my time as I learned some new things today. And I greatly appreciate it. The rounded corners now has inspired me to use them in my current client project for Home Depot.

Amazing tutorial!

@ Dan Harper:
Ems are linked to the size of the default font character. This means that they will scale with your user’s font size (think zooming in etc.)
When the scale changes the relative distances between em-spaced elements will remain the same. Pixels on the other hand are hard coded to the screen/render resolution.

very useful,thanks for sharing

I’m literally very impressed and very speechless. Awesome job and awesome tutorial. It’s good to see more of these tutorials coming out, when there was a time not long ago where tutorials like this were non-existent.

Dwayne.
http://probablysucks.com

i agree with everything above. this is very useful to me, especially the fact that it’s in video format.

i second the request to tackle myspace theming cause that site is still very popular.

thanks again jeff

Great job Jeff. As always. I love your screen casts. keep em coming.

Amazing tutorial!! lots of techniques to remember! this is definetly a ‘must have’ guide…! Thanks Jeffrey.

twitter: ipad

In the second video at around 12 minutes when you find weird stuff with the list styles… it’s because when you cut part of the selector you still had the comma on the line above, causing the whole thing to be ignored since there was a comma but no second selector… that’s what happened.

You nailed this tutorial!

keep them coming. I love psd to xhtml tuts, especially screencasts!!

Thank you so much. I’ve learned something more from your videos.

great, and i was really needed this, coz i have done a layout in Adobe Fireworks and don’t know how to convert, but this lil bit help me, as a developer i was facing a conversion issue, now i dont think, coz TUTS+ Gave me a solution. i mean it u Jeff
hope yo will make some nice articles like this….

Cheers…………………….
M.A.Yoosuf
http://yoosuf.awardspace.com/

nice tutorial again.

Awesome tutorial, very clean, and Usefull

Tnx Again for Sharing This ScreenCast is Value Added.

Jeffrey, you Rockz

Good help for the “new guys”

@insic, STOP spamming EACH and EVERYONE of the TUTS!

very useful 4 me ..thx a lot !

very nice article, I was looking for something like this since ages, thanks man

Esse tipo de tuturial já está “manjado” na web!

Very good job! I’ll forward this the apprentices at the firm. This will definitely make my life a little easier

Thanx!

great tutorial!
thanks!!

Interesting but I wonder when people are going to start using Fireworks because apps like Illustrator or Photoshop are not webdesigner apps.
Once you get used to it Fireworks is a really nice piece of software !

pretty amazing!

is a input inside a h5 ok?

Props

The tutorials are really Nice…
Thanks a lot..

Job well done…

Nice, very helpful. Keep up the great posts!

What a bogus slogan! haha

While it wasn’t really something I needed, this is the perfect example of how to do a screencast.

Anyone who does a screencast should pay attention to this tutorial to see how it is done. It was very well done.

Very Awesome! Keep this stuff coming!

Thanks for the tutorial. I agree with everyone else that the screencasts are a great addition! I have used Lynda.com for a while because I, like others have mentioned, am much more of a visual learner and really appreciate video tutorials.

Many thanks for this. This is a great starter tutorial and a great refresher as well. Looking forward to the CSS portion!

very interesting to watch. I think you should have used label tags instead of small tags on the contact form.

Very interesting tutorial, i finally understood where i was getting stuck. Thanks again….

Very, very good but…

You changed the image formats (png and gif into jpgs) when renaming them… I am pretty sure this was a mistake and is not good practice to change the format of an image by simple changing the extension.

@John – Yeah, I noticed that afterwards. It’s easy to forget things when doing the screencasts. I fixed the error.

very cool tutorial! think this is the most important part of webdesign.

Awesome job, well worth the sit =}

how can i slice single layer without other in the back

any one help?

@sad dude – Look for an option called “layer-based slice”.

very good screencast!!! thanks its a lot of help,Regards from Mexico City

Hey, Pretty good tutorial.

I have some comments. How come none of the form elements are in Form tags with fieldset, legend and labels for the inputs?

The form could then be used instead of the div for “Have a Question” and the “Login”

Also on the navigation you could have made the a block element and this could have had the arrow on the :hover state rather than the li. This would make the whole area clickable and IE6 would then get the arrow on hover.

GREAT tutorial. I really enjoyed the 2nd one. Seeing the CSS slowly take shape was very educational.

Question: I can understand the use of EMS for padding, but why the EMS for the featured image? don’t images scale anyway when you use the browser’s zoom? wouldn’t a width in pixels be easier?

somebody else also mentioned that the use of moz-border and webkit-border for rounded corners will not work with IE. as much as I dislike IE, this rounded corners solution seems…um…not very worthwhile.

@David – I disagree. It’s not imperative that those boxes are slightly rounded. In such instances, there is absolutely nothing wrong with adding a bit of flare for Firefox and Safari users.

Please give us some more information about fixing ie bugs and showing more tehcniques in making a good site.

Thanks a lot. It is very useful for me

ah… one nice comprehensive guide.. good for a learner like me.. thanks u have no idea how long ive been waiting for this..

thank, great tut

brilliant stuff.. im always waiting for psd2html tutorials.. for a learner like me.. this is like gold.. thanks again

Thanks you very much. It’s great for me
I saved my bookmark. Keep up !

Nice tutorial video and an interesting news, thanks, keep up the good work!

really helpful
thanks a lot

great tut thanx! is there any way that i could download videos to my computer?

Very helpful!

Very Very helpful. good stuff

Very nice tutorial, but am I the only one wondering where the PSD file is? I would have thought that a tutorial about converting a PSD file would include one in the source. Maybe I’m missing something here.

Just one SEO note…
I saw this mentioned somewhere else (maybe here, who knows). It’s about hiding the h1 in the header in favor of the background for the main logo.

It’s been my understanding that display:none; *could* get you punished by search engines and that text-indent: -99999px; is the preferred alternative?

Anyone mind clarifying?

Great to see how others style their sites and pick up on a few tricks.

Thanks!

Thanks

Very useful tutorial, thanks so much!

I can’t find a site design PSD file anywhere.

Nice!

Maybe the next slicing tutorial, could use some CSS framework. Like Blueprint, 960 or 37signal

Excellent tut! I’m breaking into the world of CSS and Web design and this has helped part the fog in my brain on some aspects. Thank you very much.

That’s because I didn’t include it. You can get it off ThemeForest in a week or so.

This tutorial is juste P-E-R-F-E-C-T !

Thx for your help !

I can tell you how to convert a PSD into XHTML … simply write the code yourself from scratch while using your mockup from Photoshop as a reference. Simply the best way to do it.

I was disappointed to see that the DEMO doesn’t look properly in IE 6. I also noticed that the rounded corner effect must have been achieved my using CSS 3…which isn’t supported in many browsers yet, so I wouldn’t recommend using some of those attributes at this time.

This tut is just superb. Bookmarked!

when u select several elements of code and u move them let and right. how do you do that?

@gendale – I adjust the positioning of the parent element – meaning the wrapping “div” tag. Think of divs like a bucket. Anything between the div tags are placed in our “bucket”. So, to move everything, we only need to adjust the positioning of the div. Then, everything inside of it will adjust accordingly.

Hope this helps!

Excellent.. already bookmarked!

easy to understand tutorial.

thanks a TON!

Great screencast, Jeffrey! I’m already working like a XHTML slicer but I’m sure this tutorial is very helpful for everyone new in making the .psd into living file for the browser. Thumbs up for the good work!

I’m very thankful! is very easy for each way

This is really nice! Is it possible to have this tutorial in the written form?

I can’t seem to view the CSS video over 36 minutes

Thanks a lot Jeffrey! Very good tutorial. It really helped me.

Very good article, also, if you dont want to mess your hand you can hire professional PSD slicing service to get job done.

Great tutorial.
I don’t know if someone said this already, but when exporting the images in photoshop for web, you can select “user slices” instead of “all slices” in the save to dialog box dropdown menu, to export only the slices you did manually…if you wanna save 10seconds.

Incredible videos. Great job, Jeffrey.
Hope there’ll be some more videos coming along in the future.

Hi all,
I wanted to THANK you for this great tutorial.
I definetely learned more then i’ve expected.
Keep it Up.
Cheers from Spain.

I couldn’t stop watching and loved that you left in the little mistakes and hunted them down… That is a bonus. Sometimes it is a bit intimidating watching tutorials when the tutor is a to ready to impress.. You impressed with your thoroughness. Thanks

Best tutorial on this topic i’ve ever seen! Thanks a lot!

Just watch the first half of the first video,and i have to say congratulations!!! I’m kind of a newbie on this whole html css thing, and never before watched someone actually working it out… and never watched a video tutorial without FALLING ASLEEP after the first 45 secs!! And i don’t have any coffee near…(just fruit smoothie lol) again, CONGRATULATIONS, so far… i’ll post a final comment when i finish the whole stuff. THNX!

Good Stuff. Watched all of them. I appreciate the help!

well.. well… i have to say… i switched from my mac to my pc (just to check if the thing works on IE) and the DEMO doesn’t look good at all in IE6

I’ll post a screencap later.

the video does not loading ….

@Manuel- That’s weird. I fixed that issue already. The demo must not be picking up my IE6 stylesheet – maybe a typo in the reference. I’ll get that taken care of today.

Excellent tutorial m8. Thanx a lot!

Wow Good job !

I needed this refresh

One things : Where did you took your icons images ?

Does anybody tell you you sound like Steve Carell? Helluva tutorial, man! Kudos to you!

Great stuff.
Thank You!

@Brian – No, never. He’s twice my age.

But he is the star of my favorite show on television. So maybe it rubbed off.

THX

Awesome tutorial! I’m a .NET guy myself, and I almost cried when you opened VS It’s really a great tool, and as you said, the free VWD is very nice. It can be used by everyone, whether you use asp.net, PHP or create a web site with html pages, CSS, maybe some jQuery, and no server code.

For a future screencast, maybe you could create a small asp.net app, kind’a like this one with the PSD to XHTML, but also with a little asp.net functionality. Maybe a blog, with a wordpress style theme, but with limited functionality ofcourse, since I know it takes time.

My point is to show that .NET isn’t this anti-standards monster. You CAN create the same standards compliant apps, using semantic code, and asp.net let’s you do some awesome stuff.

Note; I don’t want to start a technology geek fight

Happy thanksgiving

The slicing tutorial is a bit backwards.

First of all, you should always name your slices. For example, give your header slice the name “header” and you will end up with “header.jpg” not “image001whatever.jpg”.

Then you really should disable the unused slices by changing the property to “No Image” then you don’t have to worry about deleting unwanted images.

This way you can make periodic changes to the design and output to a source folder without having to worry about doing any extra work.

Question, whats the name of the addon with which you edit the css within firefox?

Hello. Where did you get the imagess? I never heard you say on the tutorial(s)

firebug or web developer toolbar.

I’m in a real problem with dreamweaver. That is I dont know how to configure remote server, Testing server and how they use. Pls help me with how to design a web site and publish…

Thank you.

These lessons are very helpful for me.

hi
nice tutorial, but it fails in IE 6.. .. my boss fire me if i don’t give him IE compliant design ..

I’ve read many tutorials and i saw a lot of video’s but this one has explained the slicing of a layout very clearly.
Thank you very much for making this video.
Excellent!

Very cool. I learned alot and I was amazed at how quickly you were able to assemble this. I also liked your presentation style and the flow. Didn’t find the CSS boring at all. Would love to see some more JQuery stuff though…I am fairly New to that.

Lovely tut, really usefull!

this was great!! I picked up at least 4 tricks that will greatly simplify my life!! thanks

Wow, I hope I can learn to bang pages out that quick.

It would be very interesting to see a Myspace div overlay
tut on this site. Nobody has tackled that tut on any site that i
have seen.

Nice screencast on template designing

Excelent tutorial, very helpfull!!

what can I say…this is excellent!
I consider it the designers Bible…well…just because it’s the best tut I’ve seen so far!

Could you tell me where to find more information on the usage of .em?
I’m a beginner and also dutch so simple and easy to understand language would be greatly appreciated!

Me agaen!
Well, I never didnt know how to code in CSS. But now, with your help I made this site http://www.fakone.com/designs/sd/ from 0 !!

Thx a lot!

You are the Best!

I have no idea about CSS or similar.

During to show your work, I must write you – because I am happy to see so good explanatory stuff.

I be overjoyed, really.

For your work – Thanks a lot!

From Germany

Excellent Tutorial,

I learned lot from it.

good explanations with clear picture

Thanks and need many tutorials something like this

From United Arab Emirates

Wow, what a great detailed tutorial! Really helpful in all ways! Thanks for taking the time to make this. Really appreciate it.

Cheers

the menu arrows don’t work in ie6?
very helpful otherwise.

Fantastic Tut. Just in time for my next homework assignment. Thank You!

Tracked back to from here: http://www.presidiacreative.com/the-most-helpful-psd-to-xhtml-and-css-tutorials/

Thanks for taking the time to put this out. It was extremely useful

Everything is starting to click. Awesome and thanks!

Thanks so much for this, followed with this and basically learned and taught myself css along with it.

Was such a help.

one word … SUPER …

i sat down for this tutorial and the time was over in a blink !
Saw some really cool new things here and i’m really gonna try it out on my website

Keep these screencasts coming !

Cheers

This tutorial is not only for the beginners but a refresher for who are already enlightened

the video is straeming very slowly, if something can be done about it, it will be graet. The tutorial is great

Jeffrey you are good man!
I know this tut was only about markup
But if we see the whole of a situation IE and Opera users can’t see rounded edges
I mean if you have explained about it you should show an alternative for others borwsers
Cuz Cross-browser-compatibly is still paramount at this time

In the desgin slice the top and bottom of the rounded edges
then create another css file for ie and call the background image for the h3 tags as your sliced images.

It works for me.

Best tuts again, maybe one more can be done but with a bit more complicated design like so much curves and background images and so on, as with this design it is easy to slice and use to convert to xhtml, but i think its time to rock and roll with a bit more complicated one, give it to us plz……. please base it on a black theme maybe jewelery, watch, clothing, photographers something like armanis tagheur website design, what do you say you up for it. More than happy to design and send in as a contribution.

VERY HELPFUL!!!!!!!!!!!!!!!!!!!!!!!!!!!

thanks Jeffrey for great tutorial. I used to do the same layout with very time-comsumed way. this tutorial will help me a lot.

just one question. for the rounded background. I see you use -moz-border-radius css property that work only in firefox. is there any way to it work the same on internet explore? so far I just use the background for rounded conner.
once again, thanks so much
LMTran

@ Andrea, you can get Visual Express for free from Dreamspark.com is you are a student

Pretty good tutorial thank you.

I basically love you. THANKS FOR THE SCREENCAST!

CLAP CLAP CLAP
VERY GOOD WORK.

THANK YOU

Thanks for the video tutorials, they have been handy in helping me to learn how to turn PSD templates into XHTML templates

Thats a great tutorial.
I have a question about part 2 (CSS), im following Jeffery on a design i created. and in the Header part (where he set up the header image),i dont get the same result. what i mean is that my image dosent seem to upload.
Everything else seems to work fine by now.
If anyone can comment on that one ,that would be great.

I have learned a lot from lynda website.
BUT THE TRUTH WITH YOU “JEF” YOU ARE THE BEST SO FAR.

AUSTRALIA

Very nice to see the Tuts and Learnt a lot from it !!!!!!!!!!!!!!

Would you Guys Digg this Tutorial please? Give something in return as well.

This article deserves a huge traffic and I really appreciate the work of Author. Anyway I am sure Nettuts will be the first choice of every new web developer or even advance very soon. Thank you Author.

Thanks a lot for this tut! It helps me to understand, how i need to built my own site.

Thanks Jeffrey Way and Nettuts, you are the best !

Theres no need to hack or use 2 .css files to fix IE6. Just DONT USE margin at all.

hey i watch your tutorials its excellent and have a question like for safari and firefox you give -moz-border-radius and -webkit-border something to give rounder corner what about ie6 and ie7?.

Thanks!
A real BOOST to my knowledge.

1´000.000.000 Thanks Jeffrey, Y espero que alguien lo tradusca

hey, JW!!! I love your work! haha.
great job, man! i’m enjoying it all.. good enough!

thank u very fucking much!

so, it’d be interesting if we can download the screencast…

hey, iBull .. do u asking to some1 put subtitles on the video, is it?

peace, guys!!

This is great stuff! Dugg and bookmarked!

Jeff, I was interested when stumbled upon this. I’ve sliced hundreds of PSDs, and I agree with you that there’s always more than one way to accomplish the same task and you never know when you might learn a new trick or two from somebody doing things in a slightly different way.

First off – hats off to you for taking the time to produce this screenshot!

I accept your argument about not being to nitpicky (must code always validate, what makes a good class/ID name, etc) in a production environment. However, I still think you can stick to fairly strict standards-based practices while remaining fast and efficient. That said – here are a few nitpicks

1. No reason to use XHTML Transitional, as that DOCTYPE is specifically meant for “transitioning” from table-based designs with presentational elements (b, font, etc.) to semantic markup and pure CSS-based designs. For this design, you absolutely should go with the Strict DTD – be bold!

2. Rather than wrapping your form labels with presentational elements like the small tag (or even a non-semantic span), you should use the HTML element specifically intended for this purpose: the label tag. This gives you the CSS hook you need, plus adds the accessibility advantages and semantics inherent with the label tag (don’t forget to use the “for” attribute).

3. As far as I’m on the markup – I would probably have kept the headers in proper order in that “news” div, using an h2 first and then h3. You can of course set the styles with CSS to have the headers display however required by the design, while keeping the hierarchy of the document outline more structural intact.

4. As for the CSS – rather than the text-align hack for centering content, try using auto margins instead – e.g. margin:0 auto; — that along with a width declaration with effectively center a block level element within its parent container. The text-align method is really only necessary if you need to support *very old* browsers – as in IE5.x (and IE6 if you force it into quirks mode, but you shouldn’t be doing that, right?).

5. I’d avoid using display:none; for your image replacement, as that will also render that text inaccessible to screen readers. Instead, try a more accessible method like throwing the text off screen (text-indent:-999em;, ala “Phark method). I actually prefer an even more robust method (sometimes called “Gilder/Levin”) which also works if CSS is on but images are turned off. Point is: you don’t need to sacrifice accessibility to meet design requirements like image-replaced text.

6. Finally, I’d also recommend that you can perhaps do better with the content source order by having the #mainContent first in the markup, followed by the #sidebar. Obviously you can still control the display / layout of this content with CSS (using opposite floats, #mainCotent floated right and #sidebar floated left). This way, when the spiders (or screen readers or folks browsing without CSS) read your content, they get the most important stuff first – the actual content! – and not a long list of links.

OK, I’m getting off the soapbox. This was a great tutorial for those just starting off, especially if they follow along with the files. You flew through the process, demonstrating quick and efficient use of CSS. I’ve been doing this a few years now and I even picked up a new trick – developing CSS in Firefox directly with the Web Developer Toolbar – that’s a great tip!

Keep up the great work.

Dude, you are a good man

Thank you very much! Very helpful tutorial, clear explained.

@David | WebModia : I agree with you

tag is a presentational tag . it should not use. style in css with class instead using this

Very nice tutorial!

this tut is what I’ve been looking for for years…really enjoy your screencast. thanks for your working hard.

great tutorial. thank you very much for taking the time to put this together. i’ve been looking for a tutorial like this for a long time. i especially found it helpful that you talked through why you were doing something, and when you made a mistake how you fixed it. so helpful.

keep up the great work!

Very Great tutorials..TWO THUMBS up…i can’t imagine about HaRD coding ACTION,,grrrr..super dooper believe..please me a tutorials stuff about xhtml and CSS.. im a newbies…please send me here at grindcrusties@gmail.com..representing philippines

That was so exciting ,,

I was searching like this tutorial ,,

Thx JW

Happy to learn it, thanks

Wow man I have to applaud you. To be honest this is like the first video tutorial I ever completely watched from start to finish. I usually find myself getting bored, because the instructors jsut talk in circles. You got straight to the point and I like the fact that you even showed when you had a problem and how you went about to fix it. Most videos I try and watch, they make it seem like they are perfect and never have a problem. I learned alot more then just how to take a PSD and make it into a website. Great work man.

Dear
can i do slicing with fire works if i follow this vdo tutorial

jeff, do you have a screencast for xhtml and css for beginners? thank you!

have no words… excellent

Dear JW,

A great tutorial. I am a newbie passionate to the world of creative functional website design. When I was searching for a tutorial on conversion of PSD to XHTML, your tutorial served me a feast in the mid of desert. And I need one more small help from you….

I don’t have a good internet access at my home. I am practicing it by noting down the steps on a book in my office and implementing them at my home. So it takes too long to debug. So…

Can you please provide me the video files, or any link to download?
Here is my mail: merog_designer@yahoo.com

Please JW! Awaiting your reply….//MEROG

great tutorial learnt ALOT!!!

I’m just starting out and your tutorial has given me hope that even a noob such as I can produce a functional site based off a PSD.

thxs … very useful and easy to understand tutorial

Another great tutorial. Thanks Jeff.

Great tutorial. I recently created my first screen cast, and I really appreciate the time involved.

nice

hmmm… very easy for understanding….

Thanks

I can’t find a .psd file, can you send me it?
mike@vodopyanov.ru
Thank you a lot

nice one :

Thank you soooo much for this tutorial. I have been playing around with Photoshop, Dreamweaver, etc. for some time now and this is by far the most helpful source for integrating the two in order to produce a VALID a site. Thanks a lot!

umm I got a problem,JavaScript won’t work….I did exactly as you no error…no type nothing…it simply doesn’t appear,just first image,any help please?

Cool way to do this converting from PSD to XHTML. I will forward this link to my team to check out and see if we can fasten our work.

I can’t believe I’m just now watching this! How did this tut slip past me? This is REALLY great and very useful to watch. The visual side and not just the textual step by step helps a LOT. Thanks Jeff!

Excellent

Awesome! I really needed this tutorial!

Yummy! love it! two thumb ups!

love it man! Thanks.

Great screencast, thanks for the helpful tutorials.. all the best..

Thanks for this detailed screencast . Post more articles like these.

awsome tutorial dear, keep posting more about PSD for CSS

Is there a free trial for MicroSoft Visual?

Seems like a great tutorial, but for a tactile learner like me, I wish you would give us .PSD’s to follow along… your “Slice and Dice that PSD” tut is also without this. I watch them anyway, and it all seems great, informative, and interesting, but in one ear out the other, no way to retain the info… Are there others out there like me who need hands on stuff to learn and retain new skills?

is this valid css ? i don’t think so.
do -moz and -webkit work in IE 6 ?? i don’t think so.

thanks for share…

Jeff,

Correct if i am wrong,

————————————

————————————

i guess it should be,

your tuts are really great man.

good work

SGJ

great work jeff!

Very well done. Thank you so much.

Great tutorial. Thanks!

Woow Thank you so much!!.. I learned a lot!. I was checking a lot of tutorials to convert psd to xhtml but this is the Best!. Greetings from Venezuela!

Very nice tutorial, you can typ and code so fast

Thanks for sharing this man!!

Thanks so much for this tutorial! I’m just a newbie and it helped a lot!
It was just like downloading webdevelopment directly into my brain!!

Amazing!

great article,,

i’ve looking for thes,

thank you,,

Hi,
very good tutorial! Thanks,

but if possible can i have the source files “the PSD file”?
thanks

I found this incredibly helpful and boring at the same time, lol. The fundamentals usually are.

Thank you for your time on this Jeff!

This tutorial was amazing! It answers almost every question I had about CSS!

Thanks a lot for this helpful tutorial! I want to become a excellent webdesigner and to achieve this target I need to learn from experienced webdesigners. Thanks again!

Regards,
Emanuel

please sir,
where can I get the psd mockup?

can you tell me which plugin “edit css” in the Firefox，thanks~

This is truly a great tutorial, So much better than the default “save psd as webpage” feature.

I use htmlsplash for my conversions though whenever im lazy. lol

Your tutorial is awesome, but I’d like to know about those two “JQuery”?
When i save my document in Photoshop CS as PSD format and then save those images that i’ve put on my PSD file on a folder, exactly like what u did.
now my question is : when i want to start to build my web page on “MS visual studio 2008″ i can not see those JQuery files? how should i do it?
thanks alot

Would have been nice to share the psd, html, css etc for newbies to actually tried it after viewing this tutorial… Nice job

HI,
Great tutorial!! Just one question about going forward on this kind project, how to add some new sites to those links on main page? Do I need to you frames or what? Thanks

very helpful tutorial Thanks!

Awesome Job Buddy!
Tell me where can I get more tutorial like this?

Actually I am a newbie in coding world, can anyone help me! You jeffy? Please
Thanks
Qazi

There are a lot of people from foreign countries looking at your screencasts and are not so perfect in English.
So it would be a great help, if you speak more clearly and slower.
Thanks.

Hi everybody, i’m thankful to have found this tutorial. The hour watching worth it.
Now I wanna put my hands on work, can you send me the psd source please?
I think we could add english subtitles to the video, it could help to understand the video to us, the non-english people. I’d like to help to do the job.

that was GREAT! well done.. and it was definitely not boring. thank you!

Great Tutorial, Thank you so much

Hi, Jeffery!

I was thinking that I am good with xHTML and Css but now I understand, There’s a lot to learn. Thanks and GOD BLESS YOU.

I am looking for your future tutorial.

I wish someday I become like you.

Thanks for the tutorial.

Hi Jeffrey,

Great screencast. Learning new things from you all the time.

A quick question though… from a SEO perspective, pages are better ranked if the spiders see the main content first.

In your example, when you strip out the CSS, there’s the header, then the left nav, folllowed by the events, followed by the feature and then the main content.

Using such mark-up and not changing the layout of the page is it possible to make the main content appear nearer the top?

I know this can be achieved by using a table layout where you specify emtpy cells to trick the spiders to view the main content first but I don’t think anybody wants to go back to table layouts.

Any views and comments from anyone is appreciated.

Faz

Hi,

A css notation question. Are the following declaration the same thing?

#tier1 #featured { …}

#featured {…}

As you should only use unique IDs in your mark-up I was confused with having the ID followed by an ID.

Also, is there any reason why the “UL” item is referenced like:

#sidebar ul#nav {..}

why can’t the above be referenced as:

#nav ul {…}

Apologies if the above are novice questions.

faz

This is really helpful. Thank you

Great tut!

nice tutorial…..

Thats amezing! you have cleared my so many doubts,
love you jeffrey!! keep it up

That’s excelent. thx for great tutorial.

this tutorial is rock…
simply the best

This is the best tutorial ever! I especially like how personal it is.

will you release a visual tutorial of this xhtml/css? with minimum coding of course?

this is the best website for me to learn how to conver psd to html

thanks

convertpsdtohtml.com

OK….watched all of the videos. What I want to know is, How did you know it is Friday and I am going into the weekend?

But really, I am new to css and I want to say thanks. I learned a lot!

wooow! perfect tutorial…

I think the Jeffery way is the best way to get around any tuts.

hello ur rounded corners not showing in opera and ur blue part of header also dont show full some of ur boxes are also getting distorted

hi, this really is a great video tutorial.
but in the first video, the video timing is 07:01.
inside the folder show two scrip file.
just wondering how i get the script file.
do i need to create the script by myself.

thanks

Just want to add my personal thanks and appreciation to someone who just might help me make it through my semester exams…

Copenhagen

Thank you so much for taking your time to create these awesome video tutorials.
I have learned a lot from you Jeff. Please create more video for the website.

Anyway, very nice job! please keep up your good work and keep doing web tutorial for the web newbie community.

I want to be your student very badly. lol Seriously!

Thank you,