A common question in class is “how do I overlap images and still see the background?” The answer, you use some type of transparent image. Traditionally we used a transparent GIF, but the quality isn’t so great. PNG has really become the preferred image format for transparency. PNG 8 gives you a transparent image, but you may see some white pixels around the edges of the image. PNG 24 transparent images are crisp and clean, but sometimes a bit bloated. Still PNG 24 now being widely used.

Unfortunately, it is well documented that transparent PNG 24 images will not display properly in Internet Explorer 6 without applying some type of fix. Instead of getting a truly transparent image you will see a blue background around the image like the image above. I’m not going to go into the technical reasoning for this problem, this is an article for beginners and there are numerous fixes and articles for this issue, Perishable Press has a great write up on the subject.

I’ve prepared a page that shows both of these problems; this page was created from the Six Revisions’ tutorials How to Create a Grunge Web Design Using Photoshop and How to Code a Grunge Web Design from Scratch – great tutorials, but I’ll write about that later. If you open my PNG transparency example page in Internet Explorer 6 you should see that the header image “Get Your Hands Dirty” has a blue background – not good. If you look at the heading “Featured Work”, a PNG 8 image, you should notice, albeit subtle, little white dots around the edges of the image – not good either. If you look at the heading “About this Website”, a transparent GIF, you will also see the little white dots around the edges of the image.

Now if you look at my example with PNG 24 images and a JavaScript fix applied in Internet Explorer 6 you will see that all of the images look great.

So how did I fix this? If you read the article PNG Fix for Internet Explorer from Perishable Press you will see that there is a general method for fixing PNG 24 images in IE 6. You’re going to need to create an IE specific CSS file, this file is linked in the head section of your HTML document after your regular CSS link within conditional comments.

<link href="styles.css" rel="stylesheet" type="text/css" />

<!--[if lt IE 7]> 

<link rel="stylesheet" type="text/css" href="ie-specific.css" /> 

< ![endif]-->

The conditional comment starts with

<!--[if lt IE 7]>

This tells the browser that if the visitor is using a browser version older than IE 7 then use this special CSS file in addition to the styles.css file. It doesn’t replace the styles.css file, it just allows you to send specific CSS rules to IE 6.

In the ie-specific.css file you will need one declaration for the transparency fix.

.png { behavior: url(png.htc); }

You created a class called png. Behavior is a CSS property that allows you to attach a script to an element, class, or id. The png.htc file contains a JavaScript that will fix the PNG 24 display issues in IE 6 and earlier versions. You can learn more about this property and htc files in the SitePoint Reference.

You also need a special JavaScript file, the htc file. You will find this file all over the Internet, but here is a zip of the png.htc file that I used. You will also need a transparent GIF file, this is a 1px x 1px transparent GIF that the HTC file uses.

To make this fix easier to use, the files ie-specific.css, png.htc, and transparent.gif should be placed in the same folder. If you place them in different folders you will need to edit the paths in the CSS file and the HTC file. This isn’t really a big deal, but sometimes it can cause problems for the beginner.

Ok, you have got your CSS file created and linked using conditional comments, your HTC file and transparent GIF files are in the same folder as your CSS and you preview your page in IE 6 and it still looks like crap, oh I mean bad. We’ve got a little more editing to do – remember that class we created in the ie-specific.css file? Ok, in case you forgot, this one

.png { behavior: url(png.htc); }

You now have to apply this class in your HTML file whenever you use a PNG 24 image. For example the “Get Your Hands Dirty” PNG 24 logo was applied as a background image in the main styles.css file with this code

h1 a {
display: block;
background: url(images/title.png) no-repeat left top;
float: left;
height: 92px;
width: 426px;
}

so the png class from the ie-specific.css file needed to be added to the HTML

<h1><a href="#" class="png">Get Your Hands Dirty</a></h1>

Here is another example of how it was added to the featured work image

<h2 class="featured-work png">Featured Work</h2>

In the above example two classes have been applied – featured-work is from the main styles.css file and png is from the ie-specific.css file.

The ie-specific.css file can also contain other declarations that are for Internet Explorer 6 only; you are not limited to using this file just for fixing transparent PNG files. Anytime you think about putting * html in your regular CSS file to fix an IE 6 issue you can put the declaration in the ie-specific.css file instead.

Again, there are numerous fixes for this issue and this may not be the perfect fix for you. Check out the great article at Perishable Press on the subject or remember that Google is your friend.

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

Well, it would in a perfect browser world

The truth is it probably won’t, especially when you’re first learning to code. Unfortunately, each browser interprets and displays HTML & CSS code differently. Sometimes these differences can be slight, an image may be a few pixels further to the right in Opera or a font may appear slightly smaller in Safari. Sometimes these inconsistencies can be MAJOR, you may find that entire div is positioned in the wrong place or an absolutely positioned image doesn’t even appear in Internet Explorer 6.

In addition to interpretation differences between browsers there are also numerous browser bugs that can be triggered by a simple property/value addition or even a minor change to a pixel value in the CSS. Browser bugs can cause entire layouts to break; floats can drop to the bottom of the page, containing elements with background images and/or colors can collapse around their contents, and elements may just disappear!

The browser bugs and workarounds are well documented; Great CSS Resources and Articles for Students has links to terrific resources around the Web for learning more about these issues and how to fix them. I know that all of the articles may seem overwhelming at first, but taking the time to start to learn about browser issues will save you time and headaches in the future. When you encounter a layout issue remember that Google is your friend. Searching for the browser name and version, display issue, and the word “bug” should give you a lot of resources.

Comments and CSS Code

In a perfect world, we would all have a photographic memory. I know that I don’t – I rely on bookmarks, printed articles, notes, overly highlighted books, and search engines.

When I develop or edit CSS and HTML documents I include notes or comments in my code. I use comments to set reminders or to “talk to myself” as I’m developing or as I’m troubleshooting student code. Developers frequently use comments to explain code snippets to other developers.

Comments begin with a forward slash and an asterisk /* and end with an asterisk and a forward slash */

So here is the format of a typical comment:

/* comment text goes here – comments can be single line or multiple lines */

CSS Design Notes

You may find it helpful to include design notes such as colors and fonts, and frameworks that may have been used at the top of the CSS file within a comment. It’s also helpful to include a table of contents that lists each section of code.

/* Design Notes
Author/Designer: Debb Designer

Table of contents
Wrapper – Container to set width, center page, and define background color
Header – logo and name of site
Sidebar – navigation menu
Content – content area
Footer – contact information and copyright
*/

By putting this information at the top of the CSS file you can quickly see the hex values (colors), fonts, etc. for the site instead of having to scroll through the entire CSS document.

Structural CSS Comments

As you are building the CSS file you should include simple comments about each section of code. This makes for better organization and easier editing.

/*—– Wrapper —–*/

CSS declarations

/*—— Header —– */

CSS declarations

/* —–Sidebar—– */

CSS declarations

/* —–Content—– */

CSS declarations

/* —–Footer—– */

Before you edit!

Before you make major changes to the CSS file be sure to save a backup. You can always revert to this copy if the layout breaks during editing. You can also use this copy to compare to the edited file.

Comment as you edit

Once you have the basic layout done you may need to tweak pixel values. Unfortunately, sometimes an increase of just a few pixels to a margin, padding, or width value can cause a layout to break. As you increase or decrease the original values comment the CSS.

#sidebar {
float: left;
width: 200px; /* increased sidebar width from 175px */
padding: 5px;
}

When you make a value change, preview the code in multiple browsers before you make additional changes. This makes it easy to see if the change caused a problem to the layout. If you make numerous changes to different selectors without previewing and a problem with the layout occurs it will be more difficult to trace the error. This may seem like overkill to experienced developers, but when you’re learning it’s very helpful to see how each change affects the layout of the page. Once the layout is complete you can remove these comments.

Comment instead of delete

If you think you don’t need certain CSS code snippets or you think a piece of code may be causing problems, comment the code out rather than deleting it. Once you’re done developing you can delete these comments and code snippets.

/* this code is no longer needed
.alignright {
float: right;
margin-left: 5px;
border: 1px solid #000;
}
*/

Comment CSS Workarounds

You will probably encounter some browser specific bugs and layout issues, especially in Internet Explorer 6. If a workaround is added for a specific browser issue, add a comment.

For example if you use a layout that has many floats you may encounter a “collapsed” parent element. This is common when you have a wrapper that has a background color and/or image that you want to appear behind all of the nested floats. Instead of the background wrapper expanding to surround all of the floated elements it collapses as demonstrated in the image below.

So you do some searching around the Internet and find some solutions. You decide to apply the overflow fix to #wrapper like this:

#wrapper {
width: 720px;
background-color: #4F81BD;
overflow: auto; /* fixes the collapsed wrapper */
}

Today you may remember why you added overflow: visible to the declaration, but in a few months or even days you may not. It’s a good idea to comment and workaround, fixes, and any other unusual code that may be needed.

What are you waiting for, I’m sure you have a few CSS files that need some comments.

As you start to build your own Web sites you will more than likely come across a few CSS browser bugs. You ma y encounter the “float drop bug”, the “3 pixel jog”, or the “IE double margin float bug” to name a few. Before you pull your hair out with frustration, read the articles below which contain many of the common CSS issues and solutions.

If you print any of these articles in the classroom do not print the comments. You can view the article in Print Preview mode by selecting File > Print Preview, scroll down the page until you see the last page of the article and the first page of comments and note the page number. Click the Print button and set the Print Range to Pages and enter the specific ending page. Select the HP LaserJect 2420 PCL 6 as the Printer and click the Properties button. Click the Finishing tab and select Print on both sides. Click OK twice.

Mastering CSS Coding: Getting Started – Great beginners article that covers the following: Padding vs. margin, Floats, Center alignment, Ordered vs. unordered lists, Styling headings, Overflow, Position, Background images, Image enhancement, PSD to XHTML. This article also includes tips on how to fix bugs and how to avoid them all together.

Using CSS to Fix Anything: 20+ Common Bugs and Fixes – Includes IE 6 bugs and fixes, column issues, centering horizontally and vertically, CSS positioning, floats, CSS forms, and CSS tricks.

The Mystery Of The CSS Float Property – An overview of CSS floats, bugs and solutions, sample layouts, and working with lists and form elements.

CSS Float Theory: Things You Should Know – A detailed introduction to using floats. This articles also covers issues, bugs you may encounter when you are working with floats and “fixes”.

All About Floats – Detailed information about floats, common issues, and fixes. There is also a screencast about float concepts at the end of this article.

Liquid three column layout tutorial – If you need a starting point for a three column design this is a good tutorial.

The CSS Overflow Property – Discusses the overflow property and its uses.

Ultimate IE6 Cheatsheet: How To Fix 25+ Internet Explorer 6 Bugs

9 Most Common IE Bugs and How to Fix Them

CSS Differences in Internet Explorer 6, 7 and 8 – – This article describes the differences in CSS support IE6, IE7, and IE8. This article also covers any known bugs. This article may also introduce students to some properties they haven’t used before.

Backgrounds In CSS: Everything You Need To Know -Detailed information on how to use backgrounds in CSS.

Create Sidebars of Equal Height with Faux Columns

Center Absolute Positioned DIV

CSS Box Model: The Foundation For Improving Your CSS

Additional CSS Resource Sites

The Difference Between ID and Class – IDs vs. classes confuse many people who are new to CSS. This is a great article that explains the difference.

SitePoint CSS Reference – A great, searchable CSS reference site.

Max Design – Tutorials for CSS floats, lists, and selectors.

Position is Everything – CSS bugs found in Web browsers and advanced CSS techniques.

CSS-Tricks – CSS Articles, freebies, code snippets, and forums.

quirksmode.org – CSS browser compatibility, information on conditional comments and information on quirks mode and strict mode.

Layout Gala – 40 HTML and CSS Layouts

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

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.

Here are ten CSS techniques that students frequently ask “how do I…?” in class:

1. CSS Tabs
2. Create Resizable Images With CSS
3. Making web pages extend to the bottom of the window
4. Prettier Accessible Forms
5. Multi-Column Lists
6. Optimizing Your Website Structure For Print Using CSS
7. Optimizing Your Website Content For Print Using CSS
8. Improving Link Display for Print
9. PDF Link Labeling Example
10. CSS tricks for custom bullets

This is a CSS resource worth bookmarking for future reference.