Web Design Resources
DoIT offers a wide variety of free technology courses for UW-Madison students, faculty, and staff, including a number of web design courses.
For do-it-yourselfers, the following links will help you get started with web design. All outside links open in a new window.
design :: HTML :: CSS :: text editors :: images & colors
Designing your site
Web Style Guide
Focuses on concepts, not code; covers the planning and organizing of information across sites and within individual pages.
CSS Redesign: A Web Designer's Journey
Argues for the value of CSS-based over tables-based layouts.
Watchfire WebXACT
A site you can use to verify the accessibility of web pages.
HTML
HTML cheatsheet
Quick overview/reminders about the most commonly used HTML tags. The place to go if you can't remember how to put in an image, add a link, etc.
Introduction to HTML
A beginner's walk-through of HTML basics: headings, paragraphs, images, links, lists.
Intermediate HTML
The next level of HTML: line breaks, special characters, anchor links, image maps, tables, rollover images.
Cascading Style Sheets (CSS)
Intro to CSS
Covers the use of CSS to affect text appearance (size, style, color, spacing), borders, and backgrounds. Does not cover using CSS for layout and design.
Brainjar's CSS Box Model
Explains how CSS boxes work for layout; covers margins, padding, borders, and positioning. Includes illustrations and sample code.
glish.com Layout Techniques
Offers advanced techniques and further resources.
CSS Zen Garden
Shows off the flexibility and versatility of CSS-based design: all pages use exactly the same HTML, but use different CSS to create very different effects. Includes an excellent resources page of its own.
BlueRobot Layouts
Offers basic CSS-based layouts that can be borrowed and customized. Messing around with these layouts is one of the best ways to get comfortable with CSS.
Ruthsarian Layouts
Somewhat more complex layouts that are royalty free.
Text Editors
EditPad™ Pro (PC)
Simple yet powerful text editor designed for coding; includes global search-and-replace capability.
UltraEdit (PC)
Another great text editor.
TextWrangler (Mac)
A flexible, inexpensive text editor from the makers of BBEdit (the standard professional software for Mac hand-coding).
Images & Colors
Getty Images
Image bank of rights-managed and royalty-free stock photos and illustrations.
FreeFoto
Free photographs for non-commercial use.
Edoceo, Inc. color chart and
Backpackit.com color chart
Two sites that list HTML codes for various colors.