Christian Montoya

A CSS Walkthrough

Months ago, I had an idea to put together a seminar for students at Cornell with almost zero web design experience. My idea was to teach them CSS by example and get them to the point where they would be capable of writing their own basic CSS and making simple webpages.

I don't know what I was thinking.

When I started working on a tutorial for this seminar, I found that it was taking forever to write. I would finish a page at most, and not come back to it for a week or two, and maybe do another page. I had so many other things on my plate, and this was not easy to do at all, so I was always putting it off. For a while it seemed like it would never come together. There were just too many things to think about; too much I wanted to say. After a little less than 2 months of teaching this material to web design students, I've realized that a basic seminar for total beginners would be downright impossible. There is just no way to teach CSS without a lot of time and practice. I know that now for a fact.

However, even with scrapping the seminar idea, I decided I would keep working on this tutorial until it was done. I found a couple hours here and there every couple weeks that I could devote to working on it and kept at it. I'm very proud to say that today, I am done. Here it is: A CSS Walkthrough.

I call it a walkthrough because it really is a lot like a walkthrough guide that you might buy for a videogame. I start with a simple draft sketch, and work towards a completed design, detailing every HTML and CSS change I make along the way. It's probably suited for anyone who has little experience with XHTML or CSS but at least has seen the stuff before, and I managed to cover various techniques that might be useful to learn. I don't actually know if anyone will find it useful, but I just had to finish it. This is the final design that the walkthrough leads to:

result.jpg

Feel free to check it out, share it with others, etc. It's under a Creative Commons Attribution-Sharealike license. Have a look and let me know what you think.

Thank you for reading • Published on October 22nd, 2006 • Please take a moment to share this with your friends