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

Community feedback

• 

  Eleana Tyradelli•180

  @eTyradelliPosted almost 3 years ago

  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!

  Marked as helpful

  2

  ---

  

  Nawfel Sekrafi•255

  @nawfelsekrafiPosted almost 3 years ago

  Thanks Eleana, this is very helpful & organized comment ❤, for transition I am a little bit wanned to just submit the solution as fast as possible after two days 😅, It would be nicer if I add animations.

  0

  

  Eleana Tyradelli•180

  @eTyradelliPosted almost 3 years ago

  @nawfelsekrafi I know the feeling! :D

  1

  

  Thomas Kressman•110

  @tkressmaPosted almost 3 years ago

  @eTyradelli I'd just like to thank you for sharing that youtube video! That is a super useful resource.

  Also, @nawfelsekrafi, great solution! This one is a bit tricky - I'm still working on it myself!

  1

  

  ahmedzrig•0

  @ahmedzrigPosted about 1 year ago

  very good . well done . @nawfelsekrafi

  1

  

  Nawfel Sekrafi•255

  @nawfelsekrafiPosted about 1 year ago

  thanks @ahmedzrig

  0
• 

  Ren Ras•420

  @renrasPosted almost 3 years ago

  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.

  Marked as helpful

  0

  ---

  

  Nawfel Sekrafi•255

  @nawfelsekrafiPosted almost 3 years ago

  @renras thanks for your comment,

  • for the li I think frontend mentor is not updated cause I think we can use li within a menu element. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/menu
  • for add cart functionality , yeah the counter of the cart and the quantity is the same😅, maybe I should separate them. thank you again for your comment😊

  0