Assignment 2: Responsive Product Page

Posted on | by nayeon

Overview

For this assignment, you will create a mobile-first, responsive web page about a product. Choose any product you wish to “sell.” You can grab images and text about any existing product or you can make up your own.

Requirements

HTML & CSS
  1. Create a new folder named assignment02.
  2. Create a brand new HTML file in this folder. Name it product.html.
  3. Use at least ONE custom font (meaning not a default font like Times New Roman or Arial). You can use google fonts or your own font.
  4. Do not use flexbox or bootstrap on this assignment. You must use floats, percentages, and media queries to create rows and columns for this page and make it responsive to different screen sizes.
  5. Required components:
    1. A colored bar on top that states name of your online store.
    2. A product that is being sold. Display the name, image, price, number of reviews (ok if it’s an image), and description.
    3. A colored promo code box.
    4. A related products section where at least four (4) other product names and images are displayed.
      1. Each product column must have some spacing and border around it.
  6. Your site needs to be implemented using mobile-first approach.
    1. Default CSS should be for mobile (0-767px). Then use media queries to handle tablet sizes (768px – 992px) and desktop sizes (992px and above).
    2. Hint: See slides for a better understanding of writing CSS mobile-first vs desktop-first.
    3. Hint 2: See mobile-first sample code here: https://codepen.io/nayeon/pen/OJLQXKz?editors=1100 . Try resizing the browser and see what happens to the header. Read comments in the CSS panel.
  7. Before writing code right away, you may find it helpful to review the samples and plan on how to construct your divs first. Sketch out boxes on a piece of paper and plan out how divs will change depending on the screen size.
  8. Mobile Devices (0-767px):
    1. Single-column layout,
    2. Name of the product is above the product image.
      1. Hint: You can hide any elements using display, visibility or opacity. Show this product name on only mobile screen sizes.
    3. Below the product image, display a colored promo code box with some info in it.
    4. Promo code box width is smaller than the main product’s image.
    5. Promo code box is horizontally centered.
    6. One (1) related product item is displayed per row.
      1. Create a <div> for every related product. Put image inside this div. Add border around the <div> and not the image.
      2. Each related product image has some spacing around it.
      3. Background color for each related product column is not required but will be helpful to visualize what your code is doing.
    7. Related products all have a width that is smaller than the main product’s image.
    8. Related products are all horizontally centered.
    9. All images scale up as browser size increases.
  9. Tablet Devices (768px – 991px):
    1. Two-column layout – the product image and promo code box on the left and the product details on the right.
      1. Product name is on top of the product details on the right.
      2. Hint: You can hide any elements using display, visibility or opacity. Show this product name on screensizes for tablet devices and up.
    2. Two (2) related products listed per row.
    3. All images scale up as browser size increases.
    4. The bar on top with store name is as wide as the browser
  10. Desktop Devices (992px – above):
    1. Two-column layout,
    2. Four (4) related products listed per row
    3. All images scale up as browser size increases.
    4. The “box” that contains all the product information must not grow wider than 1000px.
    5. The bar on top with store name must always be as wide as the browser.
  11. Hover effect:
    1. When user hovers over any related product, show an overlay (div) that contains the related product’s name.
    2. The overlay must overlap the related product image (not be below the image).
    3. The overlay must be positioned at the very bottom of each product.
    4. The width of the overlay box must be exactly the same width as the related product column at all screen sizes.
    5. Horizontally center the related product’s name in the overlay.
    6. The overlay must have a background color that is slightly transparent.
      1. Hint: CSS value rgba() is helpful here.
  12. For each device, adjust font sizes, images sizes, etc. as necessary.
  13. All elements and content need to be readable.
  14.  Feel free to add additional features, as long as all requirements above are satisfied.
  15. Check your HTML and CSS syntax. You will be deducted points for any syntax errors, tags not closed/not used, etc.
    1. Use a validator like this one: https://validator.w3.org/#validate_by_input.
Submission/Upload to the server

Until the server is fixed, submit all files to Blackboard. Follow the below steps:

  1. Rename the folder that contains all your A2 files to: ITP303_Assignment2_[usc username]
  2. Compress this folder to a .zip file.
  3. On Blackboard, go to Assignments -> Assignment 2: Responsive Product Page and upload the .zip file here.
  4. You will be able to make unlimited submissions. Only the last submission will be graded.

Sample

Note: Samples below don’t always meet all the requirements. Make sure to follow the requirements rather than solely relying on the samples.

Mobile:

Tablet:

Desktop:

Desktop sizing details:

Hover Effect: