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.
Note: Delete this note and update the table of contents based on what sections you keep.
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
| Mobile Version | Menu openned |
|---|---|
 |
 |
Desktop Version
- Solution URL: GitHub Repository
- Live Site URL: GitHub Pages
- Frontend Mentor: Solution on FM
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
I learnt Responsive Layout using pure CSS with great learning experience while making this project and also I did work a lot with JavaScript.
JavaScript, ReactJS, Python Flask, Figma, Unity
- Basic Concepts of grid layout - This helped me understand how GRID works and how to use it.
- Responsive design made easy - This Kevin Powell video is a great resource to understand de concepts of responsive designs and how to do it right.
- Linkedin - Diego Felipe Florença
- Frontend Mentor - @diegoflorenca
This challenge let me practice Grid and Flex positioning. I have much to improve but, I'm getting better every time. At first, I thought the javascript portion would be super simple but, the product cart with quantities gave me some trouble. After studying React a bit more, I will try this challenge again.