You can use the Firebug Lite bookmarklet in class. Due to our security settings you won’t be able to drag the bookmarklet to the Favorites/Bookmarks bar as described on the Firebug Lite Web page. Instead use the following instructions to add Firebug lite to your Favorites.

1. Visit http://getfirebug.com/lite.html
2. Scroll down the page until you see the link that says Firebug Lite
3. Right click the Firebug Lite link and select Add to Favorites… from the menu
4. Click yes to the security alert
5. Select the Favorites folder and click OK

To start Firebug Lite in Internet Explorer

1. Open the Web page you want to analyze
2. Click Favorites > Firebug Lite

Firebug Tutorials

• Build Better Pages With Firebug
• Firebug Tutorial: Getting Started
• HTML/CSS/Javascript in Firefox
• How to Test CSS Rules with Firebug
• How to use Firebug for CSS
• Live CSS Editing and Debugging with Firebug

In his post, Become A WordPress Theme Developer Who Rocks In Four Steps (and 50+ readings), Pievincenzo outlines his four step process for developing WordPress themes and includes links to tutorials for developing themes in Photoshop, converting Photoshop (PSD) files to a HTML/CSS layouts, coding specifically for WordPress, and finally hacks (suggestions) to improve your themes.

This is a great roundup of resources, so be sure to check it out along with the other great tutorials and resources at PV.M Garage.

While you are over at Tripwire, check out 45+ CSS Grid Systems, Layout Generators and Tutorials that every Designer should know, 7 New Essential CSS 3 Techniques Revealed, 160+ Mega Web Design Tutorial Roundup, and 150 Worth Knowing Web Developer Tools and Techniques too.

This is a roundup of wonderful articles that deal with coding Web pages. Most are tips on HTML & CSS, but there are also a few JavaScript and PHP resources.

Remember, these are articles I “tweet” on Twitter. Click the @username to see the posts of some of the people who I respect and love to “follow” on Twitter, the #hashtags to search the related topics, and of course the actual links to read the awesome articles.

HTML & CSS Coding Resources

1. Handy Tips for Creating a Print #CSS Stylesheet http://bit.ly/XRk08
2. In the Woods – HTML, CSS, PHP and jQuery Killer Tutorials http://tr.im/kif7 (via @del_javascript @IsaacVanName)
3. RT @mlane: 13 Must-Have Add-ons To Strengthen Firebug – http://bit.ly/14KZQ0
4. Adaptive #CSS Layouts: New Era In Fluid Layouts? http://bit.ly/13gUdJ
5. RT @nishanjoomun: Experimental #CSS compatibility table http://tinyurl.com/qre2cb
6. 6 Reasons Why Designers Should Code http://bit.ly/n7IXQ great article and discussion
7. 6 Free PSD/(X)HTML-Templates http://bit.ly/g96kg
8. RT @Koufie: 16+ Easy #CSS Techniques that Simplify the Webdesigner’s Life http://is.gd/O9wB
9. Fixed vs. Fluid vs. Elastic #Website Layout: What’s The Right One For You? http://bit.ly/OqF1M (via @phaoloo)
10. RT @mlane: Everything You Need to Know About the !important #CSS Declaration – http://bit.ly/V69B7
11. RT @pairadocsdesign @giographix: 10 #HTML Tag Crimes You Really Shouldn’t Commit http://bit.ly/DPYcg
12. Best of TutorialFeed http://bit.ly/17yCrI http://ff.im/3t1EM (via @mytutorialfeed) #css and more
13. 10 Professional Looking Free #CSS Menu’s – http://bit.ly/VgZ3j (via @Minervity)
14. 14 Free Tools To Validate Your #HTML, #CSS & #RSS Feeds http://is.gd/Ika9 (via @briancray)
15. RT @ronicadesign: 30 Tutorials On Converting A PSD To #XHTML And #CSS > http://bit.ly/qJEJJ #photoshop
16. RT @ruhanirabin @IsaacVanName @designresources #CSS Tip: Create effective headline typography – http://bit.ly/OiHfc
17. How AJAX Works: 10 Practical Uses For #AJAX http://bit.ly/6qpw2 (via @webdesign_news) great for students!
18. RT @paviles @justdesign @RobStajo: #jQuery for Absolute Beginners: The Complete Series: http://is.gd/qNYE

1. RT @mayhemstudios @Jason_Pollock @cheth: 400+ Beautiful twtter Icons 4 yr Website | Blog Godown http://bit.ly/Ni7yC
2. RT @DesignerDepot: 33 Excellent Web Layout #Photoshop Tutorials: http://tinyurl.com/qoyp7h
3. RT @PSDTUTS: 40 Logo Design Tutorials http://bit.ly/OmuMg #photoshop #illustrator
4. Zixpk.com – Gorgeous #wallpapers and more http://www.zixpk.com/
5. RT @blellow @myreactiveone @DesignerDepot 10 Tips for #Photoshop beginners: http://tinyurl.com/o4bdwg
6. 15 Free Amazing Social Icons Sets For Your Blog http://bit.ly/16QR0
7. RT @eExecutives: What to do when you don’t know what to do in your #job search: http://bit.ly/crpRA (via @jlipschultz)
8. Reading: 14 MORE Tools of Highly Effective Twitter Users – http://is.gd/FHh1 (via @problogger)
9. Applications: One Day in the Life of a Web Designer http://bit.ly/dNnbb
10. Formatting Typography and the Use of Styles in Adobe #InDesign http://bit.ly/RMVsT
11. RT @10steps Sewing a Fabric Badge in #Photoshop http://bit.ly/NeqLL
12. 32 Free Vectors – Mega #Vector Mix Collection http://bit.ly/8aisf
13. 5 Page #Website Design in #Photoshop with Source | Tutorial Lounge http://tinyurl.com/o7xjyh (via @photoframd)
14. Aperture Explained http://bit.ly/lvhfr #photography
15. Career Advice – 5 Tips to Using the Informational Interview to Find Your Dream #Job http://bit.ly/Gx63u
16. RT @DesiznTech: Desizn Tech :How to Create a Stunning Grunge Portfolio http://bit.ly/T8WX3 #photoshop
17. CyberNotes: Firefox Extensions cause Memory Leaks and Crashes http://bit.ly/16xQVe
18. Minimem memory optimization solution http://bit.ly/iv52o #firefox #tweetdeck
19. 46 Sites To Get Inspired And Familiar With Hand Drawing Style http://bit.ly/jznyb (via @DesignNewz)
20. RT @photoframd 23 Best Fire Effects in #Photoshop http://bit.ly/SDZLb
21. Beginner #Illustrator Tutorial – Create a Vector RSS Icon http://bit.ly/s9Abk
22. 22 Neat Code Editors for Windows http://bit.ly/yJRic
23. RT @djR3Z: 33 best #photoshop tutorials of May 2009 http://bit.ly/coTv5 (via @BuzzEdition)
24. 22 Creative Uses of Robots in #Web Design http://bit.ly/32L4fT
25. RT @blellow @chadengle @kristofcreative: 10 #Twitter Hacks For #WordPress http://bit.ly/148NV7 (via @cameronolivier)
26. RT @blingafe @PSDTUTS: Graphic Design Week Wrap-up http://bit.ly/18CY1u #photoshop #illustrator #indesign
27. Suggestions for moms headed back to work http://bit.ly/LWclv (via @twitlinker) #jobs #career
28. Amazing post about twitter in the classroom: http://bit.ly/aTOJk (via @lgesin)
29. RT @bkmacdaddy: 30 Best #Photoshop Abstract Effect Tutorials - http://bit.ly/rBca4 #design (via @divyasharad)
30. Updated: How To Modify #WordPress Themes The Smart Way http://bit.ly/1afyY5 (via @iandstewart)
31. Checking out: 10 Online #Photography Magazines We Love http://bit.ly/E7IA4 (via @blingafe)
32. 9 Things You can do with Categories in #WordPress – http://bit.ly/1XaPD (RT @bkmacdaddy @ruhanirabin)
33. CrazyLeaf Design Blog : Surf #Photography… http://inblogs.org/go/nl3xc (via @inBlogs) Wow!
34. RT @abduzeedo: Awesome Milk Typography Effect in #Photoshop http://tinyurl.com/ovelqg (via @iBlend)
35. RT @pranavrastogi Download “Colors” – A free Colorful #WordPress Theme http://bit.ly/WcSL8 (via @naldzgraphics)
36. RT @iblend @sharebrain How to Draw A Cute Clownfish in #Photoshop http://tinyurl.com/p7ts74
37. 35 Amazing Things You Didn’t Know Your PC Could Do! http://bit.ly/O9Ke6 *Yup, you read that right, a PC! (via @FlashDenNet)
38. RT @DianaKhalil @Minervity How To Create a Realistic Water Text Effect – http://bit.ly/jSEdX #photoshop
39. RT @DianaKhalil @mayhemstudios @Minervity 52 Professional Website User Interface #Photoshop Tutorials http://bit.ly/CqHah
40. RT @DianaKhalil @Minervity @rockstaronline +60 Fantastic #Creative #Photo #Inspiration http://bit.ly/WBUe2
41. RT @BuzzEdition @mayhemstudios @Minervity 5 Different Ways To Create Stylish Contact Form Layouts – http://bit.ly/vyBFf
42. RT @ahdesign @VideoHive @redheaddesign 30 Excellent #WordPress Video Tutorials http://bit.ly/OktkQ
43. 150 valuable #Photoshop Action sets + Tutorials http://bit.ly/UEjW8 (via @Tutostube)
44. RT @mayhemstudios @santoscreative @mlane @Minervity What the future of web fonts is looking like http://bit.ly/yrWIg
45. How to #Photograph Baseball http://bit.ly/14vaHR #photography
46. 12 Awesome links shared on Twitter http://bit.ly/TxZDo
47. Top 20 Colour Application #Photoshop Tutorials http://bit.ly/137cbX
48. Ultimate Cheat Sheet Collection http://bit.ly/19Qmmo #html #css #php #jquery #photoshop #illustrator
49. Design a Ready to Print Brochure in #Photoshop http://bit.ly/zDgxB
50. RT @GabeSEO @blellow @pimpmywordpress A collection of 30 free stock photo sites http://budurl.com/3qz2
51. RT @saurabhshah @iamkhayyam @mparent77772: Essential #WordPress Plugins For Small Business http://bit.ly/EZ8oM
52. RT @gaksdesigns: 50 Best Tutorials To Design Wallpapers-http://bit.ly/BzKCa #photoshop #illustrator
53. How to End Suffering http://bit.ly/75r45
54. RT @FlashDenNet: The Art of Building Self-Esteem http://bit.ly/yXAtX
55. RT @FlashDenNet: It’s Like Firebug, but for Flex Apps: FlexSpy http://bit.ly/wlyUz
56. RT @webaddict @BuzzEdition @mayhemstudios Properly Set Up Your Twitter Background For ALL Resolutions http://bit.ly/Lkurw
57. The Everyday Web Expert : Customer Service is a MUST!… http://inblogs.org/go/ep8yj (via @inBlogs)
58. 43 Really Useful #Photoshop Tutorials For Excellent 3d Effects http://bit.ly/GtdV (via @dustyedwards)
59. JOB SEARCH: Social Media to Get a #Job? http://bit.ly/11MKPZ (via @danschawbel)
60. 10 #Powerpoint Tips for Preparing a Professional Presentation http://tinyurl.com/ptb35f (via @deliciouspop)
61. Design an awesome web layout based on typography http://tinyurl.com/q56jxc (via @pulseblogger) #photoshop
62. 30 Beautiful Web Designs Inspired by Nature http://bit.ly/bCH0n (via @phaoloo)
63. How to Create a Realistic 3D “Stone” Text Effect – http://bit.ly/12mPit (via @mayhemstudios @minervity) #photoshop
64. Jan, @mj12982, updated her layout tutorial http://is.gd/BHvR to include instructions on diagonal lines (via @jggube) #photoshop
65. Tweeting Your Way to a Job – http://is.gd/C4A2 (via @copyblogger)
66. 6 (More) Free File Hosting Websites That Would Be Useful – http://bit.ly/HSCWF (via @mlane)
67. Art of Choosing Right Keywords http://bit.ly/vTRTz (via @rob_dale)
68. Huge (Inspirational) Resource: 500 Free Premium #WordPress Themes Gallery – http://bit.ly/zi12g (via @mlane)
69. How to Use a Blog to Post Your #Resume http://bit.ly/19g33g
70. Create a Dark Abyss with an Emerging Blue Light #photoshop http://bit.ly/E1JLG
71. RT @briancray: The Future of Open Source CMS – by 23 Web Designers & Developers | Dezinerfolio http://tr.im/m8OW
72. Create and Print a Brochure with #Photoshop, #Indesign and UPrinting.com – Part 1 http://bit.ly/j6rLd
73. 9 Things to Understand About a Client When Starting a Design Project http://bit.ly/AoJOz
74. RT @David_North @techandlife 15 Common WordPress Blunders http://bit.ly/179OvZ (via @hashwordpress)
75. How to Create Screencasts – Nettuts+ http://bit.ly/3O1OUV (via @deliciouspop)
76. RT @ruhanirabin: 11 ways to increase your RSS feed count http://twurl.nl/m0nzcj (RT @giographix @DianaKhalil) #wordpress
77. RT @DesiznTech: 20 Useful Websites for Graphic Design Textures and Patterns http://bit.ly/kseJx Please Some digg guys
78. RT @inBlogs: Layers Mag: Why does #HDR bring out the best/worst in you as a #Photographer? http://inblogs.org/go/ewqiv
79. RT @3drockz: 30 Artistic and Creative Resumes  http://tr.im/m7Tq
80. RT @photoshoptips: 23 Most Incredible #Photoshop Tutorials http://snurl.com/ikd9l
81. RT @spicydesign: 150+ Beautiful #Twitter #Icons And Buttons http://bit.ly/LeRez
82. An Open Source And Free Invoicing Web Application http://tinyurl.com/qb5tgy (via @SmashingApps)
83. RT @hashphotoshop Design a realistic website layout in #photoshop http://inblogs.org/go/zhdrd (via @inBlogs @webbtech)
84. Digg Design: Web Design Industry Jargon: Glossary and Resources http://bit.ly/SjQIv (via @justdesign)
85. Take The Plunge Into #Freelance Work http://bit.ly/O1fIx (via @DesignNewz)
86. CSS3 Exciting Functions and Features: 30+ Useful Tutorials | Noupe http://bit.ly/2IiDeC (via @GRAPHACTORY) #css
87. Quick Picks: Two Must-Have Resources for Designers http://bit.ly/pjxim (via @ViralGFX)
88. RT @abduzeedo: Tutorial: Making a Planet in #Photoshop http://tinyurl.com/rchdns (via @iBlend)
89. RT @smashingmag @stevensnell How to Set Up a Killer #WordPress Testing Environment Locally – http://is.gd/C2YD
90. RT @DianaKhalil @designfeed How To Be The Freelancer That Everyone Wants To Work With http://bit.ly/YYdCx
91. New blog post: Northern California Career and Leadership Summit http://bit.ly/wBC5S
92. RT @abduzeedo: Tutorial: Making a Planet in #Photoshop http://tinyurl.com/rchdns (via @iBlend)
93. RT @CreativeOpera @andysowards New blog post: #WDNDL For 5/20/2009 – CSS, WordPress, and Type Edition! http://bit.ly/pxEze
94. 30+ Amazing Tutorials for Creating Icons in #Photoshop http://bit.ly/ZBSqf
95. 3 Beautiful #CSS Effects With Tutorials And Source Files By Dragon Labs http://bit.ly/aaAJ6
96. How to Create an Abstract Vector Design in #Illustrator http://bit.ly/vDCVA
97. RT @MRHYPERPCS @adellecharles RT Darren Rowse Reading: 30 Untypical #WordPress Sites – http://bit.ly/xlor9.
98. 25 of the Best Websites for Educational Institutions http://bit.ly/gut6z
99. 8 Layout Solutions To Improve Your Designs http://bit.ly/GouyT
100. RT @graphicidentity @fragments77 @DeliciousHot 70+ High-Quality Free #Fonts for Designers http://tinyurl.com/ofzt7b
101. RT @JamesRivers: Reading: Twitter Tips: How to Catch Up After a Few Days Away http://cli.gs/Typ31p
102. RT @iBlend @noupe: Going Freelance: The Pros and Cons With Top Web Designers http://tinyurl.com/o4756q
103. RT @JorgeMudry 44 Must Learn Web Design Layout Tutorials in #Photoshop http://tinyurl.com/okwrwh (via @dustyedwards)
104. RT @liammckay: Graphic Design Week. Today: Icons Icons Icons! http://bit.ly/uCpL6 Great stuff! (via @cameronolivier)
105. Your Online Footprint and Your #Job Search! Nice post from http://twurl.nl/1xg5q7 (via @Fishdogs @careerrocketeer)
106. Sharpening – Unsharp Mask #photoshop http://bit.ly/vGyrK
107. RT @Go_Media: Create A Vector Art Twitter Bird Character Icon In #Illustrator http://tinyurl.com/ot9pb6 (via @iBlend)
108. 100 Amazing Free #WordPress Themes for 2009 http://bit.ly/188HCP
109. New blog post: Twitter Weekly Updates for 2009-05-17 http://bit.ly/H2Cnl

Part of the Photoshop class project is to create a Web site mockup. I have recently found several tutorials that may help you to complete this project. This post is updated as new tutorials are found. I would recommend that you read How to Effectively Organize your Photoshop Layers before you begin these tutorials so you understand how to properly organize your layers for easy XHTML and CSS development.

Create a Sleek, High-End Web Design from Scratch – put together a high-end Web design using a crisp, thin font, gorgeous background images, and clever use of space and layout. You can easily use the technique to create your own unique designs.

Build a Sleek Portfolio Site from Scratch – take a PSD file and build it with some nice clean HTML and CSS.

How to Convert a PSD to XHTML – a screencast that shows you exactly how to convert a PSD into perfect XHTML/CSS.

From PSD to CSS/HTML in Easy Steps – Part 1 – how to take a PSD file and convert it into a fully CSS based html page. Be sure to check out parts 2, 3, and 4.

From PSD to HTML – how to take the design created for the Fundamentals of Interface Design tutorial and turn that into a usable web interface.

From PSD to HTML, Building a Set of Website Designs Step by Step – entire process of getting from Photoshop to completed HTML. Build out a set of 4 PSD mockups of a website that eventually will become a WordPress theme.

Creating CSS Layouts: The Best Tutorials on Converting PSD to XHTML – a collection of tutorials to help you to convert PSD files to CSS based layouts.

20 Wonderful Photoshop Tutorials for Designing Professional Navigation Menu – a collection of 20 Photoshop Tutorials on creating professional, clean and stylish navigation/menu bars.

For those of you who prefer to use Illustrator, check out Use Adobe Illustrator to Create a Clean Website Layout.

For Fireworks users check out Taking a Fireworks comp to a CSS-based layout in Dreamweaver – Part 1: Initial design, Taking a Fireworks comp to a CSS-based layout in Dreamweaver – Part 2: Markup preparation, and Taking a Fireworks comp to a CSS-based layout in Dreamweaver – Part 3: Layout and CSS

Edit 11/17/08 – DesignMag has come out with a list of Top 10 Tutorials for Converting PSDs to HTML/CSS

Edit 11/21/08 – CSSTricks has numerous videos/podcasts on creating and converting Photoshop Mockups. You can find all of these tutorials and more on their video page.

Edit 12/4/08 – New tutorial, Photoshop Paper Texture from Scratch then Create a Grungy Web Design with it!, released at PSDTuts.

Edit 12/15/08 – New tutorial, Converting a Design From PSD to HTML from NetTuts

Edit 2/3/09 – 40 Useful Photoshop Web Layout Tutorials from Six Revisions

Edit 3/17/09 – 60 Layout design tutorials – 60 layout design tutorials, from which you can learn how to make your own website design.

Edit 3/17/09 – 43 PSD to XHTML, CSS Tutorials Creating Web Layouts And Navigation – More resources for create Web mockups in Photoshop and converting them to XHTML and CSS based sites.

Edit 3/17/09 – psd2css Online – An online service that allows you to upload your Photoshop PSD file and convert it automatically to an XHTML and CSS based layout. Be sure to read the documentation and tutorials for this service before you begin you begin your project. There is also a forum for support.

Edit 3/24/09 – 150 Useful Adobe Photoshp Web Design Layout Tutorials and Techniques

Edit 3/25/09 – Converting a PSD to XHTML/CSS

Edit 3/31/09 – 44 Must Learn Web Design Layout Tutorials in Photoshop – Here is a collection of 44 Web Design Layout Tutorials in Photoshop to teach you create your own layout for your website.

Edit 4/1/09 – 80+ Photoshop Tutorials: Practical Web Interface Design

Edit 4/2/09 – 25 Photoshop Tutorials for Creating that Perfect Web Page Design – Includes some WordPress Mockup tutorials

Edit 4/2/09 – The 100 Most Popular Photoshop Tutorials 2008

Edit 4/2/09 – 150 Useful Adobe Photoshp Web Design Layout Tutorials and Techniques

Edit 4/2/09 – 35 Awesome User Interface Design Tutorials

Edit 4/28/09 – Website Layout Toolbox

Edit 4/28/09 – How to Create a Sleek and Textured Web Layout in Photoshop

Edit 4/29/09 – 20+ Best Tutorials to Convert Psd to Html/CSS

Edit 4/30/09 – Make a Professional Business Website Template Using Photoshop

Edit 4/30/09 – How to Create a Simple, Dark Yet Stylish Portfolio Design

Edit 4/30/09 – 52 Professional Website User Interface Photoshop Tutorials

Edit 5/4/09 – How To Build Your Own Single Page Portfolio Website

Edit 5/4/09 – Create a Clean Modern Website Design in Photoshop

Edit 5/5/09 – Top 30 Photoshop Web Design Layout Tutorials

Edit 5/11/09 – How to Convert a Photoshop Mockup to XHTML/CSS – A 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.

Edit 5/11/09 – 16 PSD To HTML/CSS Tutorials For Creating Website Layouts.

Edit 5/12/09 – How to Create a “Worn Paper” Web Layout Using Photoshop

Edit 5/12/09 – Create a sleek web 2.0 hosting layout

Edit 5/13/09 – Design a Beautiful Website From Scratch & Coding a Beautiful Website From Scratch: Plus Tutorial

Edit 5/15/09 – Ultimate Round Ups Of Photoshop Interface Design Tutorials

Edit 5/16/09 – 2 Designs From PSD to HTML

Edit 5/16/09 – Create a dark portfolio pixel layout

Edit 5/17/09 – How to Elevate Your Website Design Process and Results

Edit 5/20/09 – How to Create a Clean Web 2.0 Style Web Design in Photoshop

Edit 5/21/09 – 44 Must Learn Web Design Layout Tutorials in Photoshop

Edit 5/26/09 – 5 Page Website Design in Photoshop with Source

Edit 5/26/09 – How to Create a Stunning Grunge Portfolio

Edit 5/26/09 – How To Design Studio Header

Edit 5/26/09 – Design Studio Layout #2

Edit 5/26/09 – Clean Photo Gallery Website Layout

Edit 5/26/09 – Coding: Design Lab TV Styled Layout

Edit 5/26/09 – Watercolored Design Studio Blog Layout

Edit 5/26/09 – Coding: Corporate WordPress Style Layout

Edit 5/26/09 – MyBlues WordPress Style Layout

Edit 5/26/09 – Awesome Tutorial Portfolio Design

Edit 5/26/09 – 33 Excellent Web Layout Photoshop Tutorials

Edit 5/26/09 – 30 Tutorials On Converting A PSD To XHTML And CSS

Edit 5/27/09 – 18 Photoshop Header Tutorials

Edit 5/28/09 – 45 Step-by-Step Tutorials on Web Design with Photoshop

Edit 5/29/09 – Design and Code a Slick Website from Scratch – Part I and Design and Code a Slick Website From Scratch – Part II

Edit 5/29/09 – Coding a Clean Web 2.0 Style Web Design from Photoshop – you may want to complete How to Create a Clean Web 2.0 Style Web Design in Photoshop before beginning this tutorial.

Edit 5/29/09 – Create an awesome portfolio layout

Edit 5/30/09 – Design and code a layout without using slice tool

Edit 6/1/09 – Create a modern blog layout

Edit 6/2/09 – Create a Dark and Sleek Web Layout Using Photoshop

Edit 6/3/09 – 24 Top Sources for Photoshop Website Layout Tutorials

Edit 6/4/09 – 6 Free PSD/(X)HTML-Templates @ Smashing Magazine – Very nice!

Edit 6/4/09 – How to Create a Large Header with a Simple Western Scene

Edit 6/5/09 – 40+ Tutorials on Photoshop Website Design and PSD to HTML

Edit 6/5/09 – Design a Layout for a Non-Profit Organization in Photoshop

Edit 6/6/09 – Design a clear website layout in Photoshop

Edit 6/6/09 – Quality Web Layout Tutorials Roundup

Edit 6/6/09 – Photoshop to WordPress: A Basic Guide

Edit 6/7/09 – 10 excellent website layout tutorials courtesy of psdvibe.com

Edit 6/9/09 – 18 Absolutely Stylish Designs Using Photoshop Brushes and How to’s

Edit 6/9/09 – 6 Free PSD/(X)HTML-Templates

Edit 6/9/09 – Create a web 2.0 layout in Photoshop

Edit 6/9/09 – Design a creative unusual layout

Edit 6/9/09 – 25 Beautiful One Page Portfolio Websites of Designers on Twitter – This is really more for inspiration than a tutorial.

Edit 6/10/09 – 30 Best Photoshop Web Layout Design Tutorials to Design Decent Websites

Edit 6/10/09 – 45 awesome Photoshop website template/layout tutorials

Edit 6/10/09 – How to Create a Dark and Sleek Web Design from Photoshop

Edit 6/11/09 – Original Clean Style for Your Website

Edit 6/11/09 – Design a creative clean blog theme in Photoshop

Edit 6/15/09 – 16 Best Photoshop Tutorials for Creating Web Designs

Edit 6/15/09 – Top 30 Photoshop Button And Interface Tutorials

Edit 6/15/09 – Design a two color website layout in Photoshop

Edit 6/15/09 – How to Create a Grunge Web Design Using Photoshop and How to Code a Grunge Web Design from Scratch

Edit 6/15/09 – Website Design Tutorial for Shopping Cart with Source PSD

Edit 6/16/09 – Create a Clean and Colorful Web Layout in Photoshop

Edit 6/16/09 – 20 great tutorials on PSD to XHTML Conversion

Edit 6/19/09 – PSD to HTML Slicing Tutorials

Edit 6/21/09 – Create a Nice Web Portfolio Design with a Watercolored Background in Photoshop

Edit 6/30/09 – WaterColored Portfolio Coded, Free CSS Template With PSD to HTML Tutorial

Edit 6/21/09 – Design a premium WordPress blog with Photoshop

Edit 6/22/09 – Creating a tech blog layout in Adobe Photoshop

Edit 6/22/09 – 26 Complete WordPress Blog Design Tutorials

Edit 6/23/09 – 7 Highly Practical Photoshop Site Mockups + 1 Amazingly Detailed Tutorial About Converting Them into Working Web Pages

Edit 6/24/09 – How to Create an Illustrative Web Design in Photoshop and Coding a Clean & Illustrative Web Design from Scratch

Edit 6/28/09 – Photoshop tutorial to design a clean business layout

Edit 7/01/09 – WordPress Design and Theme Tutorials

Edit 7/02/09 – How to Design a WordPress Theme in Photoshop

Edit 7/05/09 – Creating an Amazing Layout Using Textures

Edit 7/07/09 – WordPress Layout #5

Edit 7/07/09 – Web Design Layout #10

Edit 7/08/09 – Create a webdesign company layout in Photoshop

Edit 7/08/09 – 70 Tutorials Using Photoshop To Design A Website

Edit 7/08/09 – Let’s Design Rock’n’Rolla Website Design Tutorials

Edit 7/09/09 – Web Design Tutorials: The Ultimate Roundup

Edit 7/09/09 – Web Site Design Tutorial: Wellknown.as Case

Edit 7/10/09 – Coding a Clean & Illustrative Web Design from Scratch

Edit 7/10/09 – Create a Stylish Business Layout in Photoshop

Edit 7/12/09 – SportNewsPvm Coded, How To Plan A Web Layout For A WordPress Theme

Edit 7/13/09 – Top 20 User Interface Design in Photoshop

Edit 7/13/09 – How to Design a Portfolio Site

Edit 7/13/09 – 30+ Easy To Follow Photoshop Layout Design Tutorials

Edit 7/13/09 – Web Design Layout #10: Sitebuild

Edit 7/14/09 – Create a communication layout in Photoshop

Edit 7/14/09 – 23 Inspirational Photoshop Tutorials For Creating Impressive Web Layouts

Edit 7/15/09 – 8 Tutorials about How to create a WordPress theme

Edit 7/15/09 – Essential Web Designers Guide on PSD to HTML/CSS – Scroll down the page to see the tutorials

Edit 7/15/09 – How to Design a Space Futuristic Gallery Layout in Photoshop

Edit 7/19/09 – Design a travel PSD layout with Adobe Photoshop

Edit 7/19/09 – 30 Web Design Tutorials from Scratch in Photoshop

Edit 7/20/09 – How to Make a Green & Sleek Web Layout in Photoshop

Edit 7/21/09 – Software Layout #4

Edit 7/24/09 – 10 awesome PSD to XHTML tutorials

Edit 7/24/09 – Design a creative wordpress theme

Edit 7/26/09 – 160+ Mega Web Design Tutorial Roundup

Edit 8/04/09 – Create a Portfolio Layout with Wooden Background in Photoshop

Edit 8/04/09 – Create A Forum Layout Using Photoshop

Edit 8/08/09 – 33 Newly Fresh Web Design Layout Tutorials

Edit 8/08/09 – Create a Nature Inspired WordPress Layout

Edit 8/09/09 – Design web 2.0 wordpress themes

Edit 8/09/09 – Portfolio Themes in WordPress, Examples and Tutorials

Edit 8/10/09 – How To Create a Green Grunge Web Layout

Edit 8/10/09 – 50 Really High Quality Photoshop Navigation Menu Tutorials

Edit 8/10/09 – 25 Detailed Tutorials for Coding Up Your Web Designs

Edit 8/10/09 – 11 Excellent Clean Corporate Style Layout Tutorials

Edit 8/10/09 – How to Create a Clean Blog Design with Photoshop

Edit 8/16/09 – 90 New And High Quality Photoshop Web Layout Tutorials

Edit 8/16/09 – Create An Orange Web Layout Using Photoshop

Edit 8/17/09 – How to Effectively Organize your Photoshop Layers

Edit 8/19/09 – Create an amazing consulting layout

Edit 8/19/09 – Design a corporate WordPress layout

Edit 8/20/09 – 22 Photoshop Web Design Interface Tutorial Sites

Edit 8/23/09 – Business Layout #6

Edit 8/26/09 – How to Design the Web in a High-Def World

Edit 8/26/09 – Design a creative cosmetics layout with Photoshop

Edit 8/30/09 – Design an impressive web hosting layout

Edit 8/30/09 – Over 500 Layout Design Tutorials

Edit 9/1/09 – How to Design and Code a Flexible Website

Edit 9/1/09 – YoDaa – The Design Process

Edit 9/1/09 – Design a breath-taking portfolio layout

Edit 9/1/09 – Design a Transparent Website Layout in Photoshop

Edit 9/8/09 – How to Create a Dark and Sleek Blog Design in Photoshop

Edit 9/8/09 – Create a Web Layout with 3D Elements using Photoshop

Edit 9/15/09 – Design A Clean And Fresh Company Website In Photoshop

Edit 9/15/09 – How to Make a Light and Sleek Web Layout in Photoshop

Edit 9/15/09 – Making the ‘Clean Grunge’ Blog Design

Edit 9/15/09 – Create a web 2.0 business layout

Edit 9/15/09 – Create a Business PSD Layout in less than 10 minutes*

Edit 9/15/09 – WordPress portfolio layout

Edit 9/16/09 – Photoshop 101 – Working with Slices

Edit 9/16/09 – Create An Orange Web Layout Using Photoshop

Edit 9/16/09 – How To Create a Green Grunge Web Layout

Edit 9/16/09 – Design a Beautiful Website From Scratch

Edit 9/16/09 – Learn a Professional Workflow for Illustrating a Comic-Style Header Image

Edit 9/16/09 – Create a Professional Portfolio Design in 17 Easy Steps

Edit 9/16/09 – How to Design a WordPress Theme in Photoshop

Edit 9/16/09 – Create a grunge personal portfolio layout

Edit 9/16/09 – How to Create a Unique WordPress Theme

Edit 9/16/09 – Design a Furniture layout or a Manufacturer layout

Edit 9/16/09 – Design a creative design studio layout

Edit 9/16/09 – 70+ Ultimate Round-Up of Free PSD Website Templates

Edit 9/17/09 – How to Create a Minimalist and Typographic Blog Layout From Scratch

Edit 9/17/09 – Design an amazing 3d hosting layout

Edit 9/17/09 – Software Layout #5

Edit 9/21/09 – How To Create Professional Looking Website Layout With Photoshop

Edit 9/22/09 – Create a wordpress interface in Photoshop

Edit 9/23/09 – How to Create a Unique Colorful Site Layout

Edit 9/25/09 – Create a photorealistic web layout – CSS/XHTML available

Edit 9/28/09 – Build a Promotional iPhone App Website Wireframe in Fireworks

Edit 9/28/09 – MakingSEO coded, Free CSS Template with PSD-to-HTML tips and Design A Clean And Fresh Company Website In Photoshop

Edit 9/29/09 – How to Make an Impressive Blog Layout in Photoshop

Edit 9/30/09 – Create a Promotional iPhone App Site in Photoshop

Edit 10/2/09 – How to design a simple and sleek web Portfolio

Edit 10/5/09 – Create a Very Simple Portfolio Web Layout with Photoshop

Edit 10/6/09 – Design a car dealer website layout with Photoshop

Edit 10/13/09 – Design a Clean Portfolio Site in Photoshop and How to Code a Clean Portfolio Design (Plus Free Five-Page Template)

Edit 10/13/09 – BoxedArt Website Design Tutorial

Edit 10/13/09 – The Pencil Project – The Pencil Project’s unique mission is to build a free and opensource tool for making diagrams and GUI prototyping that everyone can use.

Edit 10/13/09 – Create a Hosting Layout #2 in Photoshop, Hosting Layout #2: Sitebuild Pt.1, and Hosting Layout #2: Sitebuild Pt.2

Edit 10/13/09 – Create a WordPress Layout #6 in Photoshop

Edit 10/13/09 – Become A WordPress Theme Developer Who Rocks In Four Steps (and 50+ readings)

Edit 10/15/09 – Designing for WordPress: Complete Series & Downloads

Edit 10/15/09 – Screencasts – Building a Website (1 of 3): Photoshop Mockup, Building a Website (2 of 3): HTML/CSS Conversion, and Building a Website (3 of 3): WordPress Theme

Edit 10/20/09 – How to Make a Creative Blog Layout

Edit 10/21/09 – From Photoshop to WordPress – Part I – Design and From Photoshop to WordPress – Part II – Coding. Watch the Web Squeeze for Part III

Edit 10/21/09 – Web Design Layout #11

Edit 10/21/09 – 30 Photoshop Tutorials for Creating Web Layouts and UIs

Edit 10/21/09 – How To Create a Pure CSS Polaroid Photo Gallery

Edit 10/23/09 – 20 Mind Blowing Website Layout Tutorials in Photoshop

Edit 10/23/09 – Create a Clean Business Web Template Design in Photoshop

Edit 10/26/09 – The Ultimate Guide to Creating a Design and Converting it to HTML and CSS

Edit 10/26/09 – 75 PSD to HTML Resources for Web Designers

Edit 10/30/09 – 26 Complete WordPress Blog Design Tutorials

Edit 10/30/09 – Design a Minimal and Modern Portfolio Layout with Photoshop and Minimal and Modern Layout: PSD to XHTML/CSS Conversion

Edit 10/30/09 – 40 Quality Photoshop UI Design Tutorials

Edit 11/19/09 – How to Design a Band Website Layout in Photoshop

Edit 11/24/09 – Create a Clean and Colorful Web Layout in Photoshop

Edit 11/24/09 – Create a gritty website layout

Edit 11/24/09 – Create an advanced game or clan layout

Edit 11/24/09 – Create a clean hosting layout

Edit 11/24/09 – Design a colorful theme for wordpress

Edit 11/24/09 – Create a nature inspired layout in photoshop

Edit 11/24/09 – Create an Apple inspired website layout in Photoshop

Edit 11/24/09 – How to design a simple and sleek web Portfolio

Edit 11/24/09 – Top 10 Tutorials To Learn PSD To HTML Conversion

Edit 11/25/09 – Business Layout #7

Edit 11/25/09 – The Design Lab #2

Edit 11/25/09 – Windows 7 Inspired Navigation

Edit 11/30/09 – Web Design Process: Zee Site

Edit 11/30/09 – Design a wordpress theme from scratch – Theme available

Edit 12/3/09 – Cloud9 Web Design Layout

Edit 12/8/09 – Create a Watercolor-Themed Website Design with Photoshop

Edit 12/8/09 – 25 Photoshop Tutorials for Designing Portfolio Sites

Edit 12/9/09 – Top 10 Tutorials for Converting PSDs to HTML/CSS

Edit 12/14/09 – How to Make a Highly-Textured Site Layout in Photoshop

Edit 3/1/10 – Create a Clean and Professional Web Design in Photoshop

Edit 3/1/10 – Create a Professional Web 2.0 Layout – This is a very extensive tutorial, 121 pages.

Edit 3/1/10 – The Ultimate Collection Of Brilliant Web Design Tutorials

This post is updated as new resources are found on the Web.

Most web designers know that cheat sheets are incredibly useful. You can use them for quick reference, easy learning, and more. In this list, we’ve compiled an incredible collection of the 100 best and most useful cheat sheets out there.

Topics include:

• Color
• Adobe
• HTML
• CSS
• Ajax
• PHP
• JavaScript
• MySQL
• Action Script
• Miscellaneous

Check out 100 Terrific Web Design Cheat Sheets that Will Save you Time, Money and Mistakes.

If you’re looking for cheat sheets for coding, check Cheat Sheets for Front-end Web Developers

Edit 12/8/08: All Web Design Resources has compiled a list of 30+ CSS Cheat Sheets and Quick Reference Guides.

Firebug Official Web Site
Introduction to Firebug
Build Better Pages With Firebug
Firebug Tutorial: Getting Started
HTML/CSS/Javascript in Firefox
Debugging JavaScript in Firefox with Firebug
Debugging JavaScript with Firebug
Firebug Tutorial – Script Tab : JavaScript Debugging

These days, CSS development is a complex process. You may be working on sites with large CSS files, multiple developers ,and long development timelines. The more complex your CSS files become, the more difficult it is to work with them. This article will present some tips and tricks for keeping your CSS files organized and easy to work with.

Continue reading 21 ways to streamline your CSS

Be sure to also check out Smashing Magazine’s article 12 Principles For Keeping Your Code Clean