K and J Diaries

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 kandjdiaries.com (a health/beauty blog by V School Founder Michael Zaro's wife Karen and her sister Jessica). 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.