https://github.com/mohamedaridah/frontendmentor_e-commerce-product-page

This is my solution to the E-commerce product page challenge on Frontend Mentor.
https://github.com/mohamedaridah/frontendmentor_e-commerce-product-page

cart clone components e-commerce-product-page e-commerce-project ecommerce-website frontend-mentor frontendmentor frontendmentor-challenge galary scss scss-mixins

Last synced: about 1 month ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/mohamedaridah/frontendmentor_e-commerce-product-page
• Owner: MohamedAridah
• Created: 2022-04-25T00:53:14.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2022-04-25T01:02:51.000Z (about 3 years ago)
• Last Synced: 2025-04-12T21:36:08.243Z (2 months ago)
• Topics: cart, clone, components, e-commerce-product-page, e-commerce-project, ecommerce-website, frontend-mentor, frontendmentor, frontendmentor-challenge, galary, scss, scss-mixins
• Language: SCSS
• Homepage: https://mohamedaridah.github.io/frontendmentor_e-commerce-product-page/
• Size: 783 KB
• Stars: 1
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
![Challenge Design](https://raw.githubusercontent.com/MohamedAridah/frontendmentor_e-commerce-product-page/main/design/desktop-design.jpg)



 
E-commerce product page solution

 


    

    

      Live

    

     | 

    

    

      Solution

    

     | 

    

    

      Challenge

    

  

  


     Source of the project from frontendmentor.io.

  

  


    



      

      

      

       

    

  









## Table of content:

1. [About the project](#about-the-project)

1. [Built with](#built-with)

1. [What I learned](#what-i-learned)

1. [What you can do?!](#What-you-can-do?!)

1. [Useful resources](#useful-resources)

1. [Acknowledgments](#acknowledgments)

1. [Follow me](#follow-me)

   


   


## About the project

This is my 10th Frontend Mentor challenge.

This is my solution to the E-commerce product page challenge on Frontend Mentor. The goal of this challenge is to build out this e-commerce product page and get it looking as close to the [design](https://raw.githubusercontent.com/MohamedAridah/frontendmentor_e-commerce-product-page/main/design/desktop-preview.jpg) as possible.

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

## Built with

For this project i used:

- Semantic HTML5 markup

- SCSS

  - CSS custom properties

  - Flexbox

- Mobile-first workflow

## What i learned

This challenge was very tough. it contains alot of small details i should take care of. I tried to make my solution simple as possible. The good thing about this challenge that i 've learned alot from it. you can see live website from the links above.☝

## What you can do?!

I need your opinions, feedbacks , how do you find my code structure? or any suggestions i can do to make my projects better. Also if you guys like my content, follow me this makes me happy❤👍.

## Useful resources

- **Adobe Xd** - I use adobe xd to check the size of elements.

## Acknowledgments

- I don't have sketch or figma files. So the final result isn't pixel perfect.

- I want to say **Thanks** to anyone who see my work and react with it, give me his feedback and helped me to improve myself. So thank you❤.

## Author

- My website - Well I haven't made my portfolio yet, but gonna make it soon.

-   Github - [@FedLover](https://github.com/MohamedAridah)

-   Codepen - [@FedLover](https://codepen.io/FedLover)

-   Frontend Mentor - [@mo](https://www.frontendmentor.io/profile/MohamedAridah)

**See you in another project!** 👋👩‍💻