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

Made with Reactjs

#react
Adrian 280

@Adrian397

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


Any feedback welcome :)

Community feedback

@EmmanuelOloke

Posted

Hello Adrian, really awesome job you've done with this challenge I must say, well done!

I really love the mobile view menu implementation, especially that sick transition, awesome job with that.

Just some observations I'd like to highlight; when I clear the cart using the delete button in the navbar cart dropdown, the checkout button still shows, which is contrary to the design file provided. Also, the number of items doesn't change back to 0 once the cart has been cleared. I think you can handle this with React's useState hook.

Another is when I view the website using developer tools, there are some messages that show up in the console as I navigate through the lightbox/modal images. Maybe some leftover console.log debugging messages😅

All in all, really great job you've done. Kudos!!

1

Adrian 280

@Adrian397

Posted

@EmmanuelOloke Thanks a lot. I will correct things u mentioned and yes, i can see now that i didnt get rid of the console logs 😅

1

@EmmanuelOloke

Posted

@Adrian397 You're welcome. One last little thing I noticed but forgot to mention earlier, on the profile icon in the navbar, you can use CSS outline property like so {outline: 1px solid hsl(26, 100%, 55%);} to set the hover state instead of border. That will prevent the image from being distorted when a user hovers, and still give that surrounding color on hover.

Hope you find it helpful.

Marked as helpful

1
Adrian 280

@Adrian397

Posted

@EmmanuelOloke Completely forgot about it, thanks!

0

@EmmanuelOloke

Posted

@Adrian397 You're welcome.

0
Rodrigo 200

@rodrisapiens

Posted

hi! Good job! you have a bug when opening the big image.It won't let you close it. also, you could have used react-router-dom to navigate through different pages.

1

Adrian 280

@Adrian397

Posted

@rodrisapiens Hi, thanks. When you select the big img - modal pops up and there is a cross button above that allows you to close it. Although i could have also make it when clicking on the backdrop.

I also didnt use router because of the design that was provided. There was no subpages visualised so i treated it as a dummy nav links.

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