CSS Cheatsheets & Overview

The CSS cheatsheet can be found at:
I love Jack Daniels

An online CSS reference is available at:
Style Gala: CSS Tag Reference

CSS Quickstart Tutorial and Guide can be found here:
Web Page Design: CSS from the Ground Up

Rounded Corners

For tables:

Trick Rounded Corners for Tables
Tables: Rounded Corners Tutorial

For CSS:
Rounded Corners in CSS

Validation

Validation is used to check that your code has no bugs.

W3C Markup Validator
Go to this website to validate your html/xhtml codes.

W3C CSS Valdiator
Go to this one for your CSS codes.

Review of CSS concepts

Why tables for Layouts is Stupid

Units of Measure

What does the unit "em" stand for? Where did it get is name? Read the article to find out this and more on:

CSS Sizing Issues

The Box Model

A very helpful page with links explaining the Box Model in 2-D and 3-D.

Box Model discuss

Imagemaps

Here is a good imagemap example:

Microsoft USA Locations


Imagemap coding:
Imagemap: How do I do it?

Using Dreamweaver:
Dreamweaver Imagemaps

Example Portfolio Sites

Jamey Stillings Photography
Michael Bartalos Illustration
Dialog Box
Robert Shearing: Industrial Design Portfolio
Cefaratti Design
Mesh Smith

Inspired By Color

Color in Motion:
Color and Meaning

Looking for some inspiration? Here is a directory of websites sorted by color.
pages.think

All About Color

The browser-safe web pallette
Although this does not really apply that much any more on today's computers which can display millions of colors, its good to know the history of color on the web.

Color Worqx
This is a great website on color theory.

HTML Color Code Combination Chooser
A helpful little tool to choose a pallette if you're having trouble.

Tip:
If you are using a background image, use the eyedropper tool to sample colors from the image to find a matching color pallette for your site.

Fonts

Not all fonts are created equal. Choose one that will work on both of the major platforms: PC and Mac.

Safe web fonts

Places to download fonts used for graphics:
Abstract Fonts
Font Garden
Font Center

Imagery

CSS Zen Garden

Designs that I liked from Zen Garden:
Night Drive
White Lily
Japanese Garden
Punkass
Assasination
Lego
The Defenders of Style

Design Elements : C. R. A. P.

The key elements in Website Design is based on C.R.A.P.

C - Contrast , Consistency
R - Repetition
A - Alignment
P - Proximity, Placement

Read this article:
How C.R.A.P. is your Site Design

Photoshop Review

Photoshop is a huge application to master. Here are a few reference sites for those who are still new to it.

Toolbar with short-cut keys
Palettes

The Photoshop Interface

Page Layout

When designing for the web, you must design for the graphic safe area. All important navigational elements such as buttons should be placed in this area for easy access.

Graphic "safe area" dimensions for layouts designed for 800 x 600 screens:
Maximum width = 760 pixels
Maximum height = 410 pixels (visible without scrolling)


Read Web Style Guide: Page Dimensions
for more info.

Some examples:
Wellesley College Instructional Technology
Marianne Moore
Yue Hu

OK Go

Ok Go