Copy a Design From the CSS Zen Garden

What it is

The CSS Zen Garden is an interesting showcase of what CSS is capable of. The rules are simple: every designer starts with the same HTML file, and they aren’t allowed to modify it. Using CSS alone, they must lay out and style the page into a unique and compelling design.

For this project, you’ll choose a design that appeals to you and copy it using your new CSS layout skills.

Why it matters

If you completed the first project, I bet at some point you were frustrated with trying to get Google’s CSS out of the developer tools. Copying a design when you have access to the original source code is valuable because it will help you see what high-quality CSS code looks like.

Picking apart multiple designs will show you how different developers use CSS to solve various problems. For instance, many designs use an image to replace the header with an image. What are the pros and cons of this decision, you think?

What you'll learn

As with the Google project, the purpose of completing this project is to put your new skills to the test. Reading a tutorial on flexbox is one thing, but can you use it in a real setting? The purpose of this project is to give you confidence that you have the tools you need to build any kind of site you want. In the next section, we’ll delve into the skills needed to design a website of your own from scratch.

The Project

There are hundreds of CSS designs in the Zen Garden. Take a look and find one that appeals to you. Pick one that is visually interesting, but keep an eye out for how the site is laid out.

Simpler designs with static layouts like this or this will be easier to achieve than fancy ones like this that use animations and scroll effects.

Pick one that you think will be appropriately challenging for your skill level. Focus more on getting the layout of the site correct than nailing details like the typography or gimmicks.

Download the HTML file and set up a new project folder on your machine. Start a new git project, and commit your work as you go along. Not sure when to make a commit? Try planning your commits. For example, get the header done and commit that, then move on to another section.

The CSS file for the design you choose is available on the page, but as with the Google homepage project, avoid looking it as much as you can manage. You won’t learn anything by mindlessly copy-pasting CSS from one file into another.

Based on what you’ve learned, you should be able to lay out the page without peeking. If you don’t know the specific values they’ve used for margins and padding, guess and check until it looks close. Getting an intuition for these numbers is great practice for making your own layouts. At the same time, don’t spend all day pixel pushing: close enough is fine.

When you get stuck, use developer tools and/or read the source to get hints. You’ll probably be surprised when you see the real CSS by it's sheer volume. Why do you think this is? How is it organized? Is it easy to find what you are looking for? Things to ponder when you try to keep your own CSS tidy.

It's a great idea to pick apart the CSS of a few designs before you begin.

Tips

If the design you chose uses media queries to make it responsive, ignore them for this lesson. Just make it look correct for whatever screen size you are developing on. We’ll tackle responsive design in the next section.

Be intentional and mindful of your time when doing this exercise. Lots of developers are perfectionists, and it is a valuable character attribute. So is time management: our goal here is to practice layout, so if you’ve spent 30 minutes trying to get those stupid spinning shinies behind the robot to look right, just move on.

This site relies on your feedback! These lessons are free. Please take this 2 minute survey when you finish each lesson so I can make them better.