A New Project

Background

Last year, CSS Zen Garden became 10 years old. I'm not quite sure why I went there again recently but it took me back to when I first made a webpage, back in the 1990s. That, and the consequent pages, were to distribute information to my students so that if they missed a lecture they could still access all the material they needed. This was for maths. No support for symbols. To get past this, I made images of the mathematics by taking screenshots of LaTeX and I painstakingly included images in my pages. I made as little into images as I could so there were symbols for less than or equals to, or subset or union. I was somewhat obsessed with my pages passing tests. I checked my page with Bobby, which checked for accessibility, and the W3 validator, which checks for correct markup. I'm sure the html I wrote back then was horrible. Without CSS, formatting was done using tables embedded in tables embedded in...oh dear, yuck!

In 2003, CSS Zen Garden made its appearance. Oh how I admired those pages. The feeling of wonder I felt back then comes so easily when I think of the beautiful sites that could be created from the same page. How I longed to be able to do something so beautiful but I didn't. I had done some very basic css to get away from those horrible tables, but by then I'd left my job and the need to make pages was much diminished.

Today

Now, 10 years on, we have so many more tools at our disposal. CSS is so much more powerful. Browsers can display more. The new pages on CSS Zen Garden are so much more amazing than ever. The creativity shown by these amazingly talented people is wonderous. The interactivity and interesting features included in the page makes me want to stay there and just play. I want to learn two things.

1. What is it about the pages that I love? What makes me want to stay? What makes me want to play?
2. How, technically, are the pages created?

For the first part, I'm going to pick two pages, one I like and one I don't like and try to work out what I like and don't like. For the second, I'm going to pick a page from CSS Zen Garden and investigate how each feature is made.