Skip to content

Latest commit

 

History

History
66 lines (51 loc) · 2.63 KB

1_scaffold_html.md

File metadata and controls

66 lines (51 loc) · 2.63 KB

HTML/CSS

In this exercise, we are going to build HTML and CSS into the application to design it how we like. Take a look at the following Project Description to understand the overall look and feel of the website.

Project Description

Merv Adello is the owner of a camera shop in Seattle. He wishes to build a website for his customers to purchase his cameras online to ensure he has inventory. He's looking at building a relatively straightforward interface focusing on the following:

  • Users should be greeted directly with his catalog page with cameras. A camera has the following criteria.
    • Name
    • Image url
    • Price
    • Rating (1 to 5)
  • Users can add their camera to the cart. The cart should be visible informing the customer of what they are ordering and the total cost.
  • Users can then checkout their items by clicking on the checkout button. Users can only checkout if they are logged in.
  • The checkout page should allow the user to review their cart and enter their address information (address line 1, address line 2, city, state, zip). There's no reason to put in Credit Card Information. Merv is happy to just set the orders aside for customers to pick up and pay in store.
  • Users can log in as well. They have a page dedicated to their account and view all their orders.

Wireframe

Merv has no idea about design, but he decided to provide a wireframe of something he was thinking for the catalog. He says to feel free to use it or not.

SnapShop Wireframe

Assignment

  1. Create and style the page for the catalog with HTML and CSS. Feel free to use Materialize (as that has been included for you).
  2. Create and style the page for the checkout page.
  3. Create and style the page for the authentication page.
  4. Create and style the page for the user's page to show the user his/her orders.

NOTE It might help to make the website in a separately fro this repo as we are not making the website Angular friendly yet.

Resources

Merv has offered some of his camera information for you to use.

[
  {
    title: 'Nikon D3100 DSLR',
    image: 'http://ecx.images-amazon.com/images/I/713u2gDQqML._SX522_.jpg',
    rating: 4,
    price: 369.99,
    onSale: true
  },
  {
    title: 'Canon EOS 70D',
    image: 'http://ecx.images-amazon.com/images/I/81U00AkAUWL._SX522_.jpg',
    rating: 2,
    price: 1099.0,
    onSale: false
  },
  {
    title: 'Nikon D810A',
    image:'http://ecx.images-amazon.com/images/I/91wtXIfLl2L._SX522_.jpg',
    rating: 3,
    price: 3796.95,
    onSale: true
  }
]

Bonus

Exceed Merv's expectations. Think of some other pages that might be interesting use for his website.