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.

• Frontend Mentor - E-commerce product page solution
  • Table of contents
  • Overview
    • The challenge
  • Screenshots
    • Home Page
    • Women’s Product Page
    • Product Details Page
    • Lightbox Gallery
    • Cart Functionality
    • About Page
    • Contact Page
    • Links
  • My process
    • Built with
    • What I learned
    • Continued development
    • Useful resources
  • Author

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 thumbnail images
• Switch the large product image using a slider
• Add items to the cart
• View the cart and remove items from it

Extended Tasks: In addition to the initial project requirements, I have completed the following extended tasks:

• Created the Home, Men, Women, About, and Contact pages.
• On the Men and Women pages, added a sorting feature for the models.
• Added another color to the buttons, considering the rotation aspect.
• Created pages for each model on the Men and Women pages.
• Added the Back to Top feature.

Desktop View: The main landing page on desktop, showcasing navigation and featured products.

Mobile View: The main landing page on mobile, demonstrating responsive design.

Desktop View: The Women’s product page with sorting feature on desktop.

Mobile View: The Women’s product page with sorting feature on mobile.

Desktop View: Detailed view of a product on desktop.

Mobile View: Detailed view of a product on mobile.

Lightbox Gallery (Desktop): The lightbox gallery opened by clicking on the thumbnail images on desktop.

Cart (Desktop): View of the cart showing items added and the option to remove them.

Desktop View: The About page on desktop, providing company information.

Mobile View: Focused view of the contact form on the Contact page.

• Solution URL: solution URL here
• Live Site URL: live site URL here

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• Vanilla JavaScript
• BEM (Block Element Modifier) naming convention for classes
• Lighthouse for performance and accessibility

Through this project, I have developed my ability to:

• Build a lightbox gallery feature that activates when images are clicked.
• Implement a slider to cycle through large product images.
• Enable users to add products to their shopping cart.
• Develop a shopping cart interface that displays selected items and allows for their removal.

Additionally, I tackled some extended tasks:

• Implemented a feature to sort products on the Men and Women pages.
• Developed detailed product pages for individual items on the Men and Women pages.
• Added a "Back to Top" button for improved navigation.

Looking ahead, I am excited to build another e-commerce project using React. In this future project, I plan to:

• Add size options for products, along with a size chart for users to consult.
• Implement a "heart" favorite feature to allow users to save their favorite items.
• Include a slider for product models that lets users preview different models before accessing their details.

I am eager to apply what I've learned and expand on these features to create a more interactive and user-friendly shopping experience.

• Lighthouse Documentation - This documentation was crucial for optimizing the performance and accessibility of the site. It guided me through using Lighthouse for auditing and improving various aspects of the project.

• BEM Methodology - This resource helped me learn and implement the BEM (Block Element Modifier) naming convention for my CSS classes. It made my code more readable and maintainable, and I plan to continue using this methodology in future projects.

• W3Schools - JavaScript Array sort() - This resource was extremely helpful for implementing the sorting feature for products on the Men and Women pages. The examples and explanations provided a clear understanding of how to use the sort() method effectively.

• Frontend Mentor - @Doileo
• LinkedIn - @Doina