e-commerce-product-page

E-commerce product page solution

This is a solution to the E-commerce product page challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Learn how this page works
  • Screenshot
• My process
  • Built with
  • What I learned
  • Continued development
• Author

Overview

The challenge

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

Learn-how-this-page-works

If you want me to teach you how to build this page or if you want to learn front-end development, feel free to contact me. My email: zkhan52607@gmail.com

Screenshot

My process

• Analysing the design
• writing the a HTML
• writing the css
• Adding logic with Javascript

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Desktop-first workflow

What I learned

I learned how to design an e-commerce page, and to be honnest, I have never done that before. It was a very good experience.

To see how you can add code snippets, see below:

<h1>Some HTML code I'm proud of</h1>

.proud-of-this-css {
  color: papayawhip;
}

const proudOfThisFunc = () => {
  console.log('🎉')
}

If you want more help with writing markdown, we’d recommend checking out The Markdown Guide to learn more.

Continued development

I want to continue working on the javascript used in this project. The logic I used is very lengthy and I don’t like it. So, if someone wants to improve the javascript, feel free to do it.

Author

• Website - Muhammad Zohaib
• Frontend Mentor - @zohaibxJackie