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 brand new HTML file. Name it product.html.
  2. Create a brand new CSS file. Write all CSS in this file. Don’t forget to link this external CSS file in your HTML file.
  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.
    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. Hint: show this only 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

Please follow the submission requirements below carefully. You will be deducted points for not following submission requirements to the teeth.

  1. Open FileZilla and connect to the itpwebdev server as you have done in Lab 1 (click File -> Site Manager). If you forgot how to connect, follow this guide on how to connect and upload files to the itpwebdev web server.
  2. After you have successfully connected to the itpwebdev server, created a folder (aka directory) named assignment2 inside the public_html folder. Then upload this assignment HTML file and images to the assignment2 folder. Refer to the guide if you’re not sure how to upload the assignment file.
  3. In your browser, go to http://303.itpwebdev.com/~yourusername/assignment2/product.html to check that the assignment file has been uploaded correctly.
  4. One last thing. In your computer, open up student_page.html that you created in Lab 1. Add a link to this assignment to student_page.html under the heading “Assignments” so that the TAs can easily access your completed assignment.
  5. Upload the updated student_page.html to the itpwebdev server via FileZilla inside the public_html folder. If it asks you want to overwrite the previous file, click Yes.
  6. (Optional) If you are having trouble uploading to the server and cannot upload on time, add all files for this assignment in a folder, compress it as a .zip file and upload it to Blackboard. On Blackboard, go to Assignments -> Assignment 2: Responsive Product Page. You will get some points deducted for not uploading correctly but at least you will not get a zero.

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:

Hover Effect: