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

@rockdoginafog

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


Eveything works, I also changed some things, but brooo this code is like a spaghetti haha.

I will sort it tomorrow, or later, I'm glad it's working, it was my first advanced challenge

Community feedback

S MD suleman 3,530

@sulemaan7070

Posted

hey rockdoginafog😄, grea job!! here are a few tips to improve your site..

1.I see that you used 100% of the width.. you can reduce it to 80 or 85% and leave the rest for margin.. to make it design accurate...

2.on the mobile: when I open the mobile menu the filter: blur(5px) is not being applied to the nav-bar .. you can place the mobile-menu somewhere else to achieve that..

3.The p element named as .number should have specific width so that it won't affect the whole page when clicking on + or** -**...

4.Make the header sticky so that the user can see the items and the cart.. even when he scrolled down..

5.You can add a carousel for the mobile version to change images based on button click...

Hope that helps, happy coding💯👍🏻😄

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