Ecommerce product page | My 1st Intermediate level Challenge 🏆🥰

Hi @nawfelsekrafi,

Very well done! The cart functionality works as it should and the layout looks great on all screens.

Now the neat-picking part. Here's a couple of things that I think can take it up a noch:

1. On smaller screen-sizes where the mobile menu kicks-in, it seems like the default state of the menu is to be open. So when the page loads on small screens, or when I resize the screen, the menu is open and hides everything.

2. While on the mobile menu subject, instead of display:none to hide it, try transform: translateX(-100%) or something like that. That way you can add a transition effect, plus it takes less power for the browser to load it, so the transition will be smoother. Here's an informative video on which properties to animate for better performance: https://www.youtube.com/watch?v=N5EW4HnF6FU

3. Expanding on no2, a few CSS animations and/or transitions here and there would make the design really shine. For example, on the mobile menu as it opens and closes, on the cart modal as it opens and closes, on the img slider, or even on the hover state of the Add to cart button.

Overall, great work!

Cheers!

Hi! I love your work. The responsiveness is solid.

Few things I think it can improve on:

• when you hover over the avatar, it moves a little and the cart as well. I think it's better if they are still fixed to their position.
• when I keep on pressing the add to cart button, the orders don't really add up without changing the quantity.
• it'd be good if you can close cart/drawer/lightbox by pressing outside them aside from pressing the close button.
• you have an accessibility issue that is very important. <li> elements should be nested inside an unordered list

I'd love to see you actually put animations/effects to this project.