Skip to content

Dan Grace / MPCS_52553_Winter_2020

Go to a project
Commit b16ab836 by Jeff Cohen
Options

Assign hw2

parent 061d7535
Inline Side-by-side
Showing with 65 additions and 0 deletions
hw2/README.md 0 → 100644
# Homework #2
15 points
**DUE: Thursday, January 30 by 5:30pm**
For easiest viewing of these instructions, view online or use a Markdown previewer.
### Instructions
This assignment will help you get practice with page layout and
mobile design. Some HTML and CSS research will be required.
**1. Large Layout**.
Take a look at the "above the fold" screenshot I took of the [Etsy home page](etsy-target.png).
* Think about how you would begin to build this page yourself.
* Can you organize the design into a series of rows?
* Within each row, can you identify the columns?
* Refer to the [etsy-specifications](etsy-specifications.png) to make
sure you do not try to implement the text-on-image technique.
* Modify [the starter page](etsy.html) so that it looks as like [the target](etsy-target.png).
* You can add as many other files as needed (for example, you should add a CSS file instead
of using a `<style>` element in the HTML itself).
* You are encouraged to learn additional CSS techniques not covered in class
but you may NOT use a full CSS framework such as Boostrap or Foundation.
* It will NOT be possible to build an exact replica. You can use
the "system font" instead. Use this tutorial: https://css-tricks.com/snippets/css/system-font-stack/
* You are encouraged to study and/or steal from the live https://www.etsy.com/ to determine margins,
colors, the orange checkmarks, and anything else that you would find helpful
(assuming their home page hasn't changed drastically by the time
you work on this assignment).
* Because the live site may have changed by the time you work on this
assignment, I saved two images called etsy2.jpg and etsy3.jpg
for you to use.
**2. Mobile Layout**
Next, the page should respond appropriately to mobile devices: [etsy_mobile.png](etsy-mobile-target.png)
The target is a screenshot of the iPhone X simulator inside the Chrome Inspector, but
it should be about the same for any mobile phone.
**Grading Rubric**
* 7 points: Large layout closely resembles the target
* 4 points: Mobile layout closely resembles the target
* 2 points: Reasonable choice of typography (use the "system font" trick mentioned above
or pick your own fonts) & reasonable match of font weights/color schemes
* 2 points: Fine details: rounded corners as needed, icons in toolbar,
nice search form with seamless "Search" button,
orange custom checkmarks, search placeholder text ("Search for items or shops")
hw2/etsy.html 0 → 100644
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>Your Etsy clone goes here.</p>
</body>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment