CSS Zen Garden

FINAL:

Here is my completed CSS Zen Garden. I love how it turned out. I spent a lot of time fixing and adjusting changes I made. I'm very proud of myself. Lastly, this time I added a dotted border around each box.

Preview:


My CSS Zen Garden, "Small World" by Susan Lei.

Process Page for Zen Garden

Week 10: Process page

The CSS Zen Garden page originally looks like this:

My theme of the CSS Zen Garden will be called "Small World."

I spent A LOT of time working on my Zen Garden page. I really mean it.. because I made so many changes throughout. I've decided to change my colors again. I have 3 main colors and some other random colors for the layout and background. I also used different font types, about 2-3. I definitely used a lot of images and design them on Photoshop. Headers have image backgrounds. The bullet lists also have images of an icon. All of the contents are in boxes. I also had to make the layout big enough so it can repeat if other users have different monitor size. When I make the layout large, other users won't see any cutoffs of the layout when they zoom out. It took a while for me to figure out of some of the coding to separate boxes, display in blocks and inline.. that was hard. I used gradients on the layout and reflection to make the title look better. The headers have images. I couldn't separate the "download the html and css" and the "A demonstration.." quote part. I couldn't figure it out, so I can't place it at different places. I changed the background with a white-greyish box now, instead of the yellow squiggly lines on the side. It made more sense with the box attached with the background instead of having the yellow lines lying on the side.

Here are the colors & font types I used:


Here are some of the images I used. I got them from Getty:

You will see the rest when I have it done and ready on the website! :) I am almost done!

Incorporating into Zen

Week 9

Blog how you are creating your project to stand out from all the other submissions. Reflect on how you might use the allowed .css code to give a different look to your zen page. How can you incorporate what you've learned from Bulletproof Web Design?

In my final CSS Zen Garden, I will use images and nice designs for the background, banner, and headers if possible. I'm going to choose nature colors or a bit of bright colors that relate to the garden and greens. I changed the CSS stylesheet a lot. I might move boxes around; hiding or unhiding things. I have seen many designs as examples and inspirations. I hope it will turn out different. By incorporating the book, Bulletproof Web Design, I will follow the book about the sidebars and background images for headers. I might draw my own images or Photoshop anything if needed. I used a lot of the margins and paddings to separate each box, so they are not so clumped together. I will choose a good typeface for the banner. Images will be taken from Getty. I'm guessing CSS3 won't be allow, so CSS1 & 2 will be there, of course. I am working on it~

Mezzoblue - CSS Zen Garden designs from people

Wireframe for CSS Zen Garden

Week 8:
Here is the wireframe for my css Zen garden:

I'm going to use images for the background and the banner. I'm going to have boxes for the content and the side navigations. The colors I chose are green, yellow, and orange. I want to use light colors, tint. My theme is using garden, flowers, or nature things. I'm still deciding what kind of images to get from Getty. Changes may apply.

I have a sketch as well. It will be up soon.