Skip to content
Submitted about 3 years ago

Ecommerce product page with vanilla JS and pure CSS3

pawel975•190
@pawel975
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...E-commerce product page
  • HTML
  • CSS
  • JS
3intermediate

Design comparison

SolutionDesign

Solution retrospective

I had a problem with implementing same slider in few different variants and places. Would anybody get me advice about duplicating elements but with great control about it's styling in each "instance"? I find writing it again each time from the start not so efficent.

Community feedback

  • Sammy•280
    @soyedPosted about 3 years ago

    Hi @pawel975 This looks good! Just a couple of things I would add

    • Add cursor: pointer on the header items
    • Add cursor: pointer on the delete icon in the cart as well
    • one more thing I noticed was you had several ids # attached to your CSS. may I ask why you opted for that?
    • Another thing I noted on Firefox is the page layout looks different. I do not see a modal for the images.
    • Also, remember to make the accessibility changes as well

    But great job overall. Keep grinding! 🤝

    Marked as helpful
    0
    pawel975•190
    @pawel975Posted about 3 years ago

    @soyed thanks for your advices! I used IDs because all items with IDs are accessible in script.js without using document.querySelector etc. I noticed this technique in some tutorial and wanted to try :)

    0

Please log in to post a comment

Log in with GitHub

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