Social Media Video Production /Animation Web Design /Development Photography /Design Contact /Blog

Web Design/Development

CSS Zen Garden

screenshot of CSS Zen Garden site

Screenshot taken from CSS Zen Garden

CSS Zen Garden is a website that shows the powerful capabilities of CSS. Each page has exactly the same HTML and yet they all look extremely different due to the CSS. For this project, I was asked to create my own variation of a CSS Zen Garden page centered around a theme. Being the film nerd that I am, I chose to style my page as an old school horror movie.

The Evil Dead poster

Photo taken from IMDb

I always begin my web design in Photoshop. Here, I edited and overlayed images from Unsplash to make them look and feel as if they were taken from vintage horror movie posters. I then experimented with font and placement before settling on my desired layouts.

Top of CSS Zen Garden horror page layout Middle of CSS Zen Garden horror page layout Bottom of CSS Zen Garden horror page layout

From there, I took the basic HTML code from CSS Zen Garden and began styling each element one by one before playing with the placement of the items and animation. I had to add images by using the background-image property in CSS as I could not add them as I normally would through the HTML. This is just one of several examples of how my workflow had to change by not being able to code in the HTML document.

My full site can be viewed by clicking here. This assignment helped me to realize the importance and broader impact of CSS in web development. It also encouraged me to use my problem-solving skills to come up with new ways to code my desired layout in order to avoid using the HTML.

To the top ↑