CSS: Reaching a milestone of web design

For the last month, I've been working on a CSS project to create different themes for the Dorm Energy Competition webpage. CSS was fairly new to me and as I began to learn more about the language, I realize that this simple language is packed with powerful styling capabilities. As a person who learns best from hands-on experience, I jumped right into it to create my first theme, the "Dark" theme. I tried to apply what I've learned from the tutorials to create a theme that pleasing and reflects my creativity. Below is the outcome of my first attempt.


I was quite please with it until after I reviewed the design of a similar website for Saunders Hall Energy Competition. After seeing some of the design pitfalls on that website, I realized that my theme also contains similar pitfalls. I have always been a person that focus on function over form, but have I lost myself in this overwhelming power called CSS?

Luckily it was just a momentary lapse of judgement, so I quickly fixed the over sized menu images and background image to give more screen real estate for the content. Here final result of the dark theme. (There was an empty space so my creative side told me to add the door background image for more effect.)


Feeling that the Dark theme is presentable as is, I wanted to move on to my next theme. I decided to do a "Windmill" theme similar to the one for our T-shirt/button design, but for this design I wanted to incorporate a minimalist design. Something that looks clean and simple yet follows the theme. Here is the result of the Windmill design:


I am quite please with this theme and thought it looked a lot better than the Dark theme. It is clean and simple and everything played well together for the theme. I got pretty lucky finding images on the web to fit into the theme with very little editing of it. All editing was done using Paintbrush, a Mac version of MS Paint.

I realized that image editing plays a major role in CSS designs. In order to use CSS to its fullest, you will need to have right images or image editing skills to create such images. Many images on the web have copyright watermarks on them, making them unusable. Half of the time I spent was looking for and editing images.

For now I feel like I have reached a milestone as a web designer, graduating from a complete newbie to maybe an amateur/average designer. Thank you for following me on this first half of my journey and look forward to the second half.