How to Convert a PSD to XHTML

Pretty good tutorial thank you.

CLAP CLAP CLAP
VERY GOOD WORK.

THANK YOU

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.

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

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

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

Thanks!
A real BOOST to my knowledge.

hey, JW!!! I love your work! haha.
great job, man! i’m enjoying it all.. good enough!
:D
thank u very fucking much!

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

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

:P

peace, guys!!

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.

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

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

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

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

Happy to learn it, thanks

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

have no words… excellent

great tutorial learnt ALOT!!!

thxs … very useful and easy to understand tutorial :)

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

hmmm… very easy for understanding….

Thanks