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 with Flexbox, Grid, SASS/SCSS, VanillaJS

Nguyen Le Vinhβ€’ 530

@VinhNguyenLe

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


Interesting project, I still have a small bug in the product overlay, I learned more about SASS and got to practice some animations. I will be very happy to receive your suggestions.

Community feedback

Ivanβ€’ 2,630

@isprutfromua

Posted

Hi there. You did a good job πŸ‘

keep improving your programming skills

your solution looks great, however, if you want to improve it, you can follow these steps:

🟒 use border radius only for the sliders wrapper.

🟒 I can't navigate to cart , +/- icons and button with keyboard, because it's just icons =) Please place them into a button

🟒 Add alternative text to avatar. You can add hover effect just with css, it would be better for performance )

🟒 Cart counter isn't disappearing after deleting products

🟒 It would be great to add closing the navigation on the backdrop click

I hope my feedback will be helpful

Good luck and fun coding 🀝⌨️

Marked as helpful

0

Nguyen Le Vinhβ€’ 530

@VinhNguyenLe

Posted

@isprutfromua Hello,

  • Just adds border radius to wrap tag, i get it, that's why when transform transition the product image is poked out.
  • The navigate to cart part I do not intend to use the keyboard, I feel it is quite inconvenient. Suppose when the website has many such sections, when you want to change, the user still has to choose, so using the keyboard I don't feel is necessary.
  • :D ah yeah, Cart counter, when I put the page on netlify I saw this error and I fixed it but I haven't put the code back yet, I'm so clumsy.
  • I will try to follow your instructions

Thank you, this very helpful for me

0
Ivanβ€’ 2,630

@isprutfromua

Posted

@VinhNguyenLe Hi there

I am glad that my help was useful to you

Cheers, peace and happy coding!

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