CSS Zen Garden Jabberwocky

The above piece of paper is my design for the CSS Zen Garden website. We were given a HTML file and a blank CSS file with some suggestions mapped out and spaces for us too use. We, without editing ANY of the HTML, had to create a 100% original interpretation of how the site should look. This was to help us learn the power of CSS, and that you don't need to use HTML to make a good website.

Thanks to the use of images and fluid width, I feel like I replicated my ideas very well (compared to how complicated it usually goes). With Photoshop and Illustrator used to make the background, I also used them to create the title and the lightning bolt for effect. In my mind I thought I would be able to seperate the content and the title with the bolt, and put the extra links and info next to the author, but it didn't quite work out that way. At the same time I think it works better how it came out.

One major thing I learned doing this project, and its hard to believe I didn't know about this before but somehow I didn't know that you could input images wherever you wanted through background images and/or AP Divs. I had always been under the impression that the only way to put in images was through HTML, which gave me a little concern when I started but thank goodness I found out. In fact, the background, hilariously enough, the hardest part of the project, but not because of the background images concept. I spent 1.5 periods in class (and even some outside of class! I was silly determined to see it work) just working on the background and it's respective images. There were too many things I wanted to put in and I spent so much time trying to make them all fit and have no border and all this other nonsense. 

All in all, the entire project took me about 6 class periods to create and I am very satisfied with the end result. It has a few hilarious issues with browser width, but otherwise it's good. In fact, you don't need to take my word for it, check it out yourself on my index!