20+ Best Tutorials to Convert Psd to Html/CSS

Source: http://dzineblog.com/2009/04/tutorials-psd-to-html.html

You’ve designed your site but you’re having a little trouble turning your design PSD into a coded layout. Here I’ve listed 20+ Best Tutorials to convert Psd to Html/CSS.These tutorial should help you learn how to find the best way to code it.

1. The Design Lab: PSD Conversion
2. From PSD to HTML, Building a Set of Website Designs Step by Step
3. Coding: Design Lab TV Styled Layout
4. PSD to CSS/HTML in Easy Steps – Part 1
5. Slice and Dice that PSD
6. Converting a Photoshop Mockup: Part Two, Episode One
7. Build a Sleek Portfolio Site from Scratch
8. Portfolio Layout – Learn To Code It
9. Converting a Design From PSD to HTML
10. How to Convert a PSD to XHTML
11. How to Convert PSd to Html
12. Creating a CSS Layout from scratch
13. PSD > HTML/CSS
14. Encoding a Photoshop Mockup into XHTML & CSS
15. CSS Template Tutorial
16. Portfolio Layout 4: The Code
17. Tutorial Coding a Layout
18. Converting a Photoshop Mockup
19. Killer site – From Illustrator to Xhtm to Drubal
20. From PSD to HTML
21. Coding a Car Sales Layout

Coding a Clean Web 2.0 Style Web Design from Photoshop

Source: http://sixrevisions.com/tutorials/web-development-tutorials/coding-a-clean-web-20-style-web-design-from-photoshop/

This is the second installment for the article How to Create a Clean Web 2.0 Style Web Design in Photoshop. A bit of CAUTION: It is huge! I mean very long but somehow really interesting and exciting (hey, anything about the new web is exciting right?). So get some Starbucks or better yet, Coke/Pepsi and read the whole article without blinking!

How to Create a Clean Web 2.0 Style Web Design in Photoshop

Source: http://sixrevisions.com/tutorials/photoshop-tutorials/how-to-create-a-clean-web-20-style-web-design-in-photoshop/

Mockup

This is exactly what I was looking for this afternoon. I don’t usually make any mockup in Photoshop but saw many advanced designers gain success by producing mockups. You definitely should give this a try.

How to Convert a Photoshop Mockup to XHTML/CSS

Source: http://line25.com/tutorials/how-to-convert-a-photoshop-mockup-to-xhtml-css

This article is highly recommended if you often create mockups in Photoshop and then “try” to slice it into a nice, standard compliant XHTML page:

Follow this walkthrough of coding up a graphical website layout into valid, standards compliant XHTML and CSS. Starting with the initial process of exporting the individual images from the Photoshop document through to building the complete page.

In case you missed it, the first part of this tutorial, Create a Clean Modern Website Design in Photoshop went through the stages of producing the visual concept of the Pixel juice website.

30 HTML Best Practices for Beginners

Source: http://net.tutsplus.com/tutorials/html-css-techniques/30-html-best-practices-for-beginners/

Just for your curiosity, I am naming the main 30 practices:

1. Always Close Your Tags
2. Declare the Correct DocType
3. Never Use Inline Styles
4. Place all External CSS Files Within the Head Tag
5. Consider Placing Javascript Files at the Bottom
6. Never Use Inline Javascript. It’s not 1996!
7. Validate Continuously
8. Download Firebug
9. Use Firebug! (duh!)
10. Keep Your Tag Names Lowercase
11. Use H1 – H6 Tags
12. If Building a Blog, Save the H1 for the Article Title
13. Download ySlow
14. Wrap Navigation with an Unordered List
15. Learn How to Target IE
16. Choose a Great Code Editor
17. Once the Website is Complete, Compress!
18. Cut, Cut, Cut
19. All Images Require “Alt” Attributes
20. Stay up Late
21. View Source
22. Style ALL Elements
23. Use Twitter
24. Learn Photoshop
25. Learn Each HTML Tag
26. Participate in the Community
27. Use a CSS Reset
28. Line ’em Up!
29. Slice a PSD
30. Don’t Use a Framework…Yet