Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

E-Commerce Product Page

Toni 420

@ToenSh

Desktop design screenshot for the E-commerce product page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


This was a pretty challenging project for me especially the lightbox and image sliding features but I think overall it came together nicely even though my code isn't really as clean as I'd like it to be. Any feedback or suggestions are much appreciated!

Community feedback

@ZeyadMohamed1805

Posted

Awesome work there mate! I just want to point out a few things to adjust:

  1. When the images are clicked, it logs to the console the image tag. You must have forgot to remove it after coding XD
  2. When the cart has some items and i start incrementing the counter from outside, the items in the cart react to that without clicking on the add to cart button. Its really not that big of a deal, but it would be more efficient to only set the quantity of the cart items after clicking the add to cart item.

Thats all I have for now. These are just some minor things, but over all your solution is fantastic!

1

@VCarames

Posted

Welcome to FEM @ZeyadMohamed1805!

As a friendly reminder, please avoid the following as it is against FEM’s policy:

  • "If you find this comment helpful, please mark it as a helpful feedback"

Which can result in your getting your account flagged and banned temporarily/permanently.

"Ask people to mark your comment as helpful — A big part of Frontend Mentor is helping each other out and providing feedback. If you give some feedback, please avoid saying things like, "if you found this feedback useful, please mark this comment as helpful". It places unnecessary pressure on the solution author to mark your comment as helpful, which is best avoided. Feel free to say something like, "I hope you find this helpful", but please avoid asking for your comment to be marked as helpful outright."

The goal of providing feedback is to help individuals learn and grow as developers; not about gaining points.

Thank you for contributing to the FEM community!

Happy Coding! 🎆🎊🪅

1

@ZeyadMohamed1805

Posted

@vcarames Thanks for pointing this out I was completely ignorant about it! I also just updated the other feedback I've made to other people

1

@VCarames

Posted

@ZeyadMohamed1805

No problem. Keep up the great work and thank you for providing helpful feedback to the community.

1
Toni 420

@ToenSh

Posted

@ZeyadMohamed1805 Thanks a lot for taking the time to check it out, yeah I didn't think too much about that functionality with the card but now that you point it out it makes more sense like that. Thanks again for your feedback!

1

@ZeyadMohamed1805

Posted

@ToniSh69 Anytime brother! Keep up the great work 👊😎

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord