CSS Zen Garden

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 with the class about what the hardest parts of this assignment were and what was most helpful in the process.

Passing off this project completes Static Websites Level 4 of the Super Transcript.


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

MAJOR LAYOUT HINT

In my personal opinion (Eric Jones) four main parent divs should be used. One for the top:

One for the left content:

One for the right hand content:

And one for the bottom stuff:

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. Better 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, and I believe it's not for this site.