The first thing I tackled was the overall design of the page. I wanted to replace the single column of flowing data with three columns: links on the left, the course information in the center, and some fun stuff on the right. I went looking on the web for some examples of doing three column layout with CSS. At first, I experimented with the "negative margins" layout from A List Apart, but I decided to go with the "holy grail" layout because it was newer and used fewer divs. Not surprisingly, it took some fiddling to get the column widths to be appropriate for my content, but overall I think it looks pretty good. You can see the final CSS here.
One of things that I've wanted to add to my homepage for years is a list of books that I've read and recommend for my students. While I do not believe that you can learn to be a good software engineer just by reading a book, there are a lot of good books out there that can help you develop your skills and expand your technical horizons. A friend of mine had a link to LibraryThing on his blog and I thought it would be a cool way to list my books. (Yes, LibraryThing links you to amazon.com. Buy your books from Powell's instead.) I also added a link to my LinkedIn profile so that former students can keep in touch with me.
The main content of my homepage is the course description and schedule for CS399J. Even though this information is doesn't change much, I always found it to be kind of a pain to edit the HTML when preparing for the term. Adjusting all those list items and hyperlinks was sometimes error prone. I wanted to separate out the data being displayed (what lectures and assignments were given on each night) from the display itself (all those list items). Unfortunately, HTML doesn't allow content to be split up across multiple files easily and my pages are not generated programmitcally.
Along the way, I developed and tested my homepage using the Firefox web browser with the FireBug and MeasureIt plugins. Don't leave home without them. Of course, I also had to spent some time accounting for the differences between Firefox and Internet Explorer. All of the files were edited in emacs (old habits die hard) on my MacBook Pro.
DaveBack to my homepage