Hand-picked PSD to HTML Tutorials that Teach Stuff Right!

When I first started out learning HTML and CSS, there was no shortage of tutorials all over the web explaining how to code PSDs into HTML. I surely read and followed dozens of them, but only a few really stuck with me and really helped me. There are endless exhaustive roundups of these tutorials, but they focus on quantity over quality.Many of the tutorials I came across taught me a lot of bad habits which took time to break, so I’m offering this short list as a way to sift through the junk and find the really valuable tutorials.

Many of the tutorials I came across while doing research were not necessarily wrong, but their approaches weren’t the best for teaching newcomers to the field, for one thing, many of them focused too heavily on CSS too early on in the process, which isn’t wrong, but I believe you should always focus on a solid markup structure before worrying about styling. Disagree? Let me know! Enjoy!

From PSD to HTML, Building a Set of Website Designs Step by Step by Collis Ta’eed

This is a massive, thorough tutorial over at Nettuts that I highly recomend. Collis started PSDtuts ages ago and is certainly a reputable web developer and designer, and his tutorials always follow best practices. You can trust pretty much anything he writes.

Encoding a Photoshop Mockup into XHTML & CSS by Chris Spooner

Chris Spooner is your go-to guy for all things CSS, and his tutorials never disappoint, they’re clear, and concise, but with thoughful and helpful commentary throughout, and you know that you’re learning how to do things the right way.

How to Convert a Photoshop Mockup to XHTML/CSS by Chris Spooner

Another one by Chris Spooner, this is one of the first tutorials that I ever actually completed when I was first starting out, and one of the only ones that really helped me! I kept referring back to it time and time again in early days with HTML and CSS to see if he might have already answered my questions.

Creating a CSS layout from scratch

This is a really fantastic tutorial that takes you through the process step by step, from slicing to CSS coding, and everything in between, and clearly explains concepts along the way. This one was also essential for me when I was first starting out.

How to Design and Code a Flexible Website by Myself!

And now for a bit of self-promotion, check out this tutorial I wrote over at Nettuts. I spent a good amount of time being very thorough and making sure I was teaching only best practices. This tutorial focuses on making a web page accesible and flexible to all viewers, “unbreakable” as it were. I got a lot of positive feedback on this tutorial and wound up in the “Best of Tuts Network” roundup in October.

How to Convert a PSD to XHTML by Jeffrey Way

Another authority on HTML coding (and really all things internet…) Jeffrey Way is the editor over at Nettuts, and he routinely posts screencasts that are always massively helpful, he uses the Firefox plugn Web Developer so that you can see the changes he makes to the css in real time. I’m personally not much of a screencast fan (too impatient) but if you have the patience (and the bandwidth) all his screencasts are worth watching.

Bonus: More shameless Self-promotion!

Slicing and Coding a PSD into XHTML

Check out my brand new two-part tutorial for coding a free PSD template into XHTML and CSS! Complete with lots of pictures for your viewing pleasure.

Conclusion

I hope you found some valuable resources here! What do you think? What do you look for in a good tutorial? What are your impressions on the current stock of tutorials out there?