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 using CSS grid, flexbox, crud javascript

#accessibility#jss

@webzma

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


Me resultó un poco difícil cambiar el comportamiento de la imagen principal del producto. Me entretuve mucho haciendo este proyecto.

Community feedback

@EmmanuelOloke

Posted

Hello @WilberkLedezma, great work on this challenge, you've got the mobile view implementation absolutely spot on.

Just some observations I made and will like to bring to your notice:

  1. When I view the solution on a widescreen monitor, the whole page content is aligned to the left of the screen. I think central alignment on the page will look much better.

  2. On the Lightbox thumbnails styling, according to the design files, there should be some opacity on the thumbnail image as well as an orange border/outline when a particular thumbnail is clicked. With you solution, the opacity and border show only onClick and disappears afterwards.

  3. When I increase the item quantity and click on the Add To Cart button, the cart icon badge in the navbar only changes to 1 instead of the quantity selected. I think using State Hooks and ContextAPI in ReactJS can help solve this issue.

Overall, awesome job with the challenge. Thanks.

Marked as helpful

0

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