homework_5

05-430 / 05-630 Fall 2018 – Programming Usable Interfaces

Assignment 5: Web HTML and CSS Prototypes (21 pts) Assigned: Wed Sep 19 2018

Due: Mon Oct 7 2018 11:59pm

To Do

For the client that you based your Assignment 2 and 3, and based on the high-fidelity prototypes you created in Assignment3 you will create Web HTML/CSS Prototypes.

HTML:

1. Create HTML files for each of the 3 required pages:
   • (2 pts) The home page
   • (2 pts) The product browsing page that shows the variety of items the store has
   • (2 pts) The product detail page (pick 1 of the client’s products, and create a detail page for just that product. Make sure to show in the detail page the options that can be used on that product, i.e. color or size. Note: They do not need to be interactive, static HTML and CSS is ok for this assignment)
2. (2 pts) From the home page, the other 2 pages should be reachable with an <a href=...> tag link.
3. (2 pts) Make sure each of the pages renders without error. Use the Developer Tools in Chrome to do this, and also use the HTML validator to validate your HTML file.
4. (2 pts) Indent and comment your code; follow the HTML style guides.

CSS:

5. (2 pts) Create and include at least 1 CSS file.
6. (1 pts) Make sure the CSS file is well formatted and use the CSS validator to validate your CSS file.
7. (1 pts) Indent, comment and follow the CSS style guides. Both HTML + CSS:
8. (3 pts) These web prototypes should look as close to your high-fidelity digital mockup as possible. Certainly, you should implement in your web prototype what changes are necessary.
9. Note: You can use VANILLA HTML/CSS code only; don’t use frameworks like Bootstrap or other libraries (you can “look at it” means you can look at how they do the HTML and CSS and format in a similar way, but DON’T import Bootstrap or other libraries).
10. Please cite any external resources you use.

Submission:

1. In your main Github PUI folder in your computer, create a new folder and call it homework_5.
2. You should include all the files required in this write up in that folder.
   • HTML, CSS files.
   • Reflection file. The reflection can be pdf or MSword.
3. Make sure you do a git pull before you start working.
4. Always (for every change, big or small) do a:

git add *
git commit -m “Please write a message that makes sense here; it is good practice”
git push

5. The deadline for the Assignment is Mon Oct 7 2018 11:59pm. We will count as your final submission the last git push before that time. Anything pushed after that date and time will be counted as late submission.

★ Bonus (maximum 5 pts total) ★

• Prototype with HTML and CSS additional site pages or add product detail pages for more than one product item

Resources​:

1. HTML Validator
2. CSS Validator
3. Final Code for Lab from Week 4

From Assignment 2

Muddy Paws Adventure Gear: We are a small store that sells customizable hiking and adventuring gear for your cat or dog. We are committed to helping all cats and dogs live to their full potential, experiencing the wild alongside their human hiker pals! Our online store helps people buy our line of gear.

Items:

1. Cat harness
2. Dog harness
3. Food storage attachment to harness
4. Water storage attachment to harness
5. Dog/Cat GPS tracker collar
6. Cat backpack

Sizes (Tiny/Small/Medium/Large)

Colors (Strawberry/Blackberry/Crazyberry/Fire Orange)