Updates to Assignment

Update Minimal Viable Product: Create the layout for Zen Garden with its media query breakpoints, ignoring other details.

Update: Once the layout is done, we recommend spending 30 minutes a day working on the rest of this assignment.

Update: Only spend 1-2 days completing the layout. Feel free to ask an instructor for clarification or guidance.

Note: The purpose of this assignment is to do what you can with what you know (eyeball and guestimate). If there is something new, you are welcome to learn/google it, but is not required to pass the assignment (ignore details such as the fixed backgrounds, which use the background-attachment property.)


One of the most common tasks for front-end web developers and web designers is to receive a "PSD" (Photoshop Document) that contains the design of a desired website and to have to translate what you see in the PSD to the web.

One excellent way to practice for this task is to find a website you like the look and feel of, and mimic it.

Project Requirements

Open the website http://www.csszengarden.com/

Your task is to replicate this site without simply copying the source code. This will have to be an on-your-honor requirement.

Part of replicating the site will require you to make it responsive. You may either use bootstrap or do it from scratch to fulfill this requirement. Change the width of your browser to see what the original site would look like on a mobile device, and try to mimic it in your own version of the site.

You are permitted to pull things from the original site like the logos and other photos, and you're also allowed to inspect the code to get insight into some of the styling aspects of the original site, such as the font family and colors being used. Do not inspect the code of the original site to learn how you should lay out your HTML, position things with CSS, etc. As a rule of thumb, you're not allowed to copy aspects found in the site's original code that you wouldn't be given by a designer in a PSD. (In Photoshop, you can get the font family of text, the hex codes for the colors used, and the logos and photos being used, but receive no insight into writing the HTML or positions/sizing with CSS).

Passing Criteria: Visual inspection by an instructor or TA and a short interview.
An instructor will check the site for general similarity to the original web site, as well as have a quick discussion about what the hardest parts of this assignment were and what was most helpful in the process.

HINTS and Help

  • Links and JavaScript functionality do not have to work.
  • Fonts, images, etc can be found in the sources tab.
  • Write your HTML and CSS from scratch. Do not copy and paste from Chrome dev tools.
  • This project is expected to take 20+ hours for many people. It's difficult. Please don't get stuck on any one aspect for too long. Ask your class mates how they approached different problems.
  • USE YOUR DEV TOOLS. Switching from chrome to your editor will WASTE TIME.
  • The social media icons at the bottom of the page are actually a font, not images. Check the sources tab to find the font and feel free to download it from there


In my personal opinion (Eric Jones) 10 main divs should be used. One for each section of the page. display: grid can be used on their parent.


This is for responsive design. If you watch how the layout changes when your screen size shrinks down, you'll see how they pieces are detached.

It very may well be worth your time to learn CSS Grid if you haven't looked at it already. A mix of CSS Grid and media queries is the best grid system for this site in my opinion. It's going to be better for setting up the layout of the whole site than flexbox, Bootstrap's grid system, and for sure better than the old CSS positioning, or using HTML Tables. Flex box and Bootstrap have their place. Flexbox is good for the social icons in this assignment. Feel free to use it inside any of the panels.