CSS Zen Garden Project is a demonstration of CSS-based design. Using CSS Zen Garden web page HTML and CSS files, we are to redesign this site through the rewrite of CSS alone. Looking forward to this!
Our first task was to choose two winning designs we liked and blog about why we liked them. Two designs that appealed to me were Dark Rose and Under the Sea.
Dark Rose uses a narrow content box and page layers for interest. The font is clean and relaxing. The graphics used are minimal yet enough to draw your eye through the content.
Under the Sea also draws all your attention into the center of the page and uses graphics that are static at the bottom of the page. The page is a continuous scroll making the content appear from behind the graphics as the page moves upward. This makes for a very clean design where your eyes do not have to move all over the page to read everything. Yet, they used dialog boxes and graphics to make the page look interesting.
CSS selectors between the two sites are very similar with declarations being vastly different.
I completed a mood board for my CSS rewrite of CSS Zen Garden page.
I’ve included the photos I intend to use in my mood board. It was fun creating this and great hands-on learning. Next step: ;wire-frame..
My wire-frame is complete.
This is the basic setup I want to go with but once I start putting it into practice things will probably change a little.
Now time to rewrite CSS and make this site my own.
At this point I have uploaded HTML and CSS files without editing. My site is only text at this point but very soon will be looking fabulous! http://marywatkinsdesigns.com/ZenGarden/
