The original CSS Zen Garden
CSS Based Design
I started by downloading the basic Zen Garden template and inspecting the code to see how much flexibility I had with the layout.
Starting to design a layout
I sketched a layout for my Zen Garden page, marking each section with its main containing element to allow me to position the content.
Using my sketch as a guide I styled the page by targeting the element tags within the HTML.
Editing the stylesheet
By using the CSS background property I was able to add images to the layout without editing the HTML.
As the page was starting to come together I began to style the main titles of each section giving them color and larger font size.
My final CSS Zen Garden Layout.
The final design for my CSS Zen Garden page can be viewed here.