/e-commerce-product-page

This is my solution to the E-commerce product page challenge on Frontend Mentor.

Primary LanguageCSSMIT LicenseMIT

E-commerce Product Page

Live | Solution | Challenge

Solution for a challenge from frontendmentor.io.


About The Project

The main challenge is to build out this E-commerce product page and get it looking as close to the design as possible. I used SessionStorage for keeping the cart updated simulating a loged account. (This project can scale)


Users should be able to:
  • View the optimal layout for the site depending on their device's screen size
  • See hover states for all interactive elements on the page
  • Open a lightbox gallery by clicking on the large product image
  • Switch the large product image by clicking on the small thumbnail images
  • Add items to the cart
  • View the cart and remove items from it


** I do not have access to the Figma sketch so the design is not pixel perfect.

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox
  • Mobile-first workflow
  • JavaScript
  • SessionStorage

Useful resources

Social