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.

Overview
My process
Author
Acknowledgments

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

Screenshot

My process

Built with

Semantic HTML5 markup
CSS with:
- Flexbox
- CSS Grid
Mobile-first workflow
Gitflow
JavaScript

Continued development

I still feel like much of my code could be more DRY. In the future, I wish to improve the reusability of many functions

Useful resources

Example resource 1 - This helped me for implementing the lightbox.

Author

Website - Robertson Akpan
Frontend Mentor - @bobb-rob
GitHub: @bobb-rob
Twitter: @___Robertson
LinkedIn: RobertsonAkpan

Acknowledgments

Acknowledge Frontend Mentor team for the good putting this challenge out there.

Simple jQuery plugin that will allow users to zoom in your images, perfect for product images and galleries.

Image Zoom (jQuery) Plugin Simple jQuery plugin that will allow users to zoom in your images, perfect for product images and galleries that is less th

Aug 3, 2022

A simple, lightweight, clean and small library for creating guided product tours for your web app.

Tourguide.js Simple, lightweight library for creating guided tours for your web, apps and more. A tour guide is a person who provides assistance, info

Dec 12, 2022

Pay Creators to Promote your Product in $CRYPTO

Next.js + Tailwind CSS Example This example shows how to use Tailwind CSS (v3.0) with Next.js. It follows the steps outlined in the official Tailwind

Feb 7, 2022

Tiny API that provide product/library name for a URL

JSer.info Product Name API Tiny API that provide product/library name for a URL. Usage Supported All products. curl https://jser-product-name.deno.dev

Oct 21, 2022

A product system made with NestJS. It's a service where you list products, create products or even delete them.

Products-API A product system made with NestJS. It's a service where you list products, create products or even delete them. What I used in this proje

May 18, 2022

A full query console for Cloudflare's D1 database product.

D1 Console A console/REPL for Cloudflare's D1 Database product. NPM | GitHub Supports all the features expected of a modern database client, including

Dec 23, 2022

scaffold-stark is a forkable StarkNet dev stack focused on fast product iterations, inspired by scaffold-eth.

💠 scaffold-stark scaffold-stark is a forkable StarkNet dev stack focused on fast product iterations, inspired by scaffold-eth. Drop in your Cairo sma

Oct 7, 2022

Event Bus Demo - This product is built with Remix

Event Bus Demo This product is built with Remix Remix Docs Netlify Functions Google Maps API Development The project requires an API key. You can get

Jan 4, 2023

JS Cloudimage 360 View - A simple, interactive resource that can be used to provide a virtual tour of your product

Jan 7, 2023

Comments

Frontend Mentor - E-commerce product page - Image Slider component
Implement the image slider functionalities:

[ ] navigate to the image slider popup, when a user clicks on the image

[ ] Select the next image when the user clicks on the thumbnail and next/previous icons

[ ] Close pop-up with the close Icon
opened by bobb-Rob 0
Frontend Mentor - E-commerce product page
IMPLEMENTED THE FOLLOWING:

[ ] Build the full mobile version designs at all states

[ ] Add all functionalities including :

Slide in Menu

Add to cart

increase & decrease quantity

delete product in cart
opened by bobb-Rob 0
Hotfix - From Issues raised by @PhantomOz
@PhantomOz

Implement the following:

<a href="##"> <img class="logo" src="" alt="Sneakers logo"> </a> Remove the extra # in the href attribute.

<button type="button" class="btn add-to-cart-btn"> <p>Add to cart</p> </button> . Replaced the the block element p with span in an inline element button.
opened by bobb-Rob 0