Design Shard
CSS Tricks
Six Revisions
A List Apart
Function
Smashing Magazine
Noupe
Design Mag
Before & After Magazine

Good luck!

This site is fairly one-dimensional, but it delivers on its dimension. As you can see, there are two panels on the screen. The one at left represents the ‘visual’ of your finished product. The panel at right is the code that creates that product. In most WYSIWYG web editing programs, you can pull sliders and enter values to change the formatting. Now, however, you have a real-time view as to the results.

When working with CSS, probably the biggest problem first-timers have is a desire to work ‘outside the box’ too often. While it is true that CSS permits a very wide range of formatting, the problem is that we are all constrained by what our users can support. That means that if you pick a weird font, and the viewer of your website doesn’t have it, the viewer won’t see it the way you drew it up.

The best recommendation I can give to the beginning CSS artist is – work within the simplest of solutions, but do it creatively. An example of this is that, while Arial and Verdana are the most widely-used fonts on the Internet, you can still keep them fresh. See the shot below:

By adding a slightly different value in ‘line-height’, ‘word-spacing’, and the like, you can get something that barely resembles the text of so many others’ websites. And you get it with only a .00001% chance that the user will see something different. That’s really important.

Oh, and of course the reason I love the site so much: I didn’t have to pull 1.5 em, 2.2pt letter-spacing out of thin air!

To further discuss web standards, best practices, and great websites, check out our 8-hour session call Web Design Theory and Best Practices. It’s worth your time, I promise.