Frontend Mentor - 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

• 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
  • Installation Instructions
  • Dependencies
  • Usage Instructions
  • Project Structure
  • 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 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.
• On the Home page, added an interactive element through the "Take Our Style Quiz" button.

Screenshots

Home Page

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

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

Women’s Product Page

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

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

Product Details Page

Desktop View: Detailed view of a product on desktop.

Mobile View: Detailed view of a product on mobile.

Lightbox Gallery

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

Cart Functionality

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

About Page

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

Contact Page

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

Links

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

My process

Built with

• 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

What I learned

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.

Continued development

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.

Useful resources

• 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.

Installation Instructions

To set up the E-commerce Product Page on your local machine, follow these steps:

1. Clone the repository:

   git clone https://github.com/yourusername/ecommerce-product-page.git

2. Navigate to the project directory:

   cd ecommerce-product-page

3. Open the project in your browser: Simply open the index.html file in your preferred browser.

Dependencies

This project uses the following dependencies:

• Vanilla JavaScript - For implementing core interactivity like the lightbox gallery and cart functionality.
• Lighthouse - Used for auditing performance and accessibility to ensure the project meets best practices.
• CSS Grid & Flexbox - For creating a responsive layout that adapts to various screen sizes.
• BEM (Block Element Modifier) - A CSS methodology used to maintain clean and scalable styles.

There are no external libraries or frameworks used in this project apart from the ones listed above.

Usage Instructions

1. Open the project: Open the index.html file in your preferred web browser to launch the application.

2. Browse products:

   • Explore pages: Navigate between Home, Men, Women, About, and Contact pages using the navigation bar.
   • View products: Click on product images or titles to view detailed product pages with descriptions, and pricing.

3. Interact with features:

   • Lightbox gallery: On the product details page, click on the product images to open a lightbox gallery. Use the navigation arrows to browse through images.
   • Sort products: On the Men and Women pages, use the sorting feature to organize products by categories or preferences.

4. Manage cart:

   • Add items: Select a product and click the "Add to cart" button to add it to your cart.
   • View cart: Open the cart to view selected items, their quantities, and the total price.
   • Remove items: Remove items from the cart using the delete button next to each product.

5. Additional features:

   • Back to top: Click the "Back to Top" button for easy navigation back to the top of the page.
   • Style Quiz: On the Home page, use the "Take Our Style Quiz" button for an interactive experience.

Project Structure

• Root directory:

  • index.html: The main landing page for the application.
  • quiz.html: The style quiz page for users to explore their preferences.
  • main.css: Contains the global styles, including layout, responsive design, and hover states.
  • README.md: Documentation for the project.

• Folders:

  • about/: Contains the HTML, and assets related to the "About" page.
  • contact/: Contains the HTML, and assets for the "Contact" page.
  • men/: Contains the HTML and assets for the men's product section.
  • women/: Contains the HTML and assets for the women's product section.
  • js/: Contains JavaScript files for interactive elements like the style quiz and navigation.
  • images/: Contains all images and icons used in the project, including screenshots showcasing the application's features and design.

Author

• Frontend Mentor - @Doileo
• LinkedIn - @Doina
• GitHub - @Doileo