A few people have asked me recently where to start with learning Web design, or re-learning standards based Web design. I figure this is a question I’ll have to answer on several occasions, so I thought I’d create a post about it. There are whole sites out there dedicated to Web design, but the purpose of this post is to point the direction to the starting line. So, here we go.
update 8.31.2007: I’m bringing this article up to date with my current set up and a few other links.
### Tools Of The Trade ###
Like any trade, you will need a few tools in order to be a successful Web developer. Here’s what you’ll need.
1. **A computer**. If you are reading this, you already have one. If you are serious about “this whole Web design thing” you’ll probably need a better one. I recommend an iMac or MacBook Pro with 2GB of RAM. If it is possible to own both a PC and a Mac (get a cheap PC or a Mac Mini) this will also help. Web development is not a processor intensive trade like print design or movie editting, but having a zippy computer will make your whole life easier. If you are a contractor, you can write it off on your taxes.
2. **An Internet connection**. If you are reading this, you have one.
3. **A good graphics program**. Use Fireworks, it’s the best. You will probably also eventually need to familiarize yourself with Illustrator and Photoshop as well, but this can wait. (Dear Photoshop kiddies. If one is just getting started, Photoshop is NOT the best app for the job. It is the industry standard because it was first out of the gates. Fireworks is better on so many levels for Web graphics.)
4. **A text editor**. You will spend most of your time here. For PC, use TopStyle, for Mac, I use Coda, and TextMate. There are a lot out there, and many people have many opinions. Everyone agrees on TopStyle for PC though.
5. **An FTP Program**. I use Filezilla for PC, and Transmit on Mac. Note that Coda comes with Transmit built in.
6. **A variety of Web browsers**. On PC get IE, FireFox, Opera, and Lynx. On Mac, get Safari, FireFox, Opera, and Lynx. You will be checking all of your sites in all of these. Make FireFox your default browser, use it for everything. If a site doesn’t work in it, complain to the site admin and don’t go back..
7. The Web Developer Toolbar and Firebug addons. Two extremely useful tools that will help you debug your code and explore other people’s code.
8. **A Web Host**. Use Dreamhost, they are the best value by a million years.
### Getting Educated ###
#### Books ####
Buy these books, read them, highlight them, and refer to them frequently.
1. **Don’t Make Me Think**. The usability bible. How to build a user-friendly Web site. A bit dated in its examples, but the concepts are timeless.
2. **Web Standards Solutions**. A very pragmatic, hands on, learn as you go type of book. Read it cover to cover once. Start building a site. Refer back to it as you go.
3. **CSS Mastery: Advanced Web Standards Solutions**. After you have done a project or two with CSS based layout, pick this book up and read it. It will help you clean up your act.
4. **HTML Mastery: Semantics, Standards, and Styling** – A great, fairly comprehensive book about all things HTML related.
#### Web Sites ####
**Reference Sites** Get an RSS aggregator (Bloglines or such) and subscribe to these sites. Follow them closely.
1. W3Schools – Great tutorials to get you started with HTML and CSS (and other things actually…)
2. Web Design From Scratch – A great compilation of resources for nearly every facet of Web design.
3. Godbit – Has a great community of very knowledgable Web designers.
4. A List Apart
5. Digital Web
I subscribe to many other blogs of designers and developers in order to keep a finger on the pulse of what is happening in the very active Web developers community. This is a good thing to do, but you should find these people on your own. I can give you a list to get you started if you so desire.
### Any Questions? ###
Please feel free to contribute or argue with any of the above. I’d love to hear what you think.