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(HTML,CSS and JavaScript)

#accessibility#itcss#jss#vanilla-extract
Kml_joshi 560

@KamalJoshi-web

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


This is my 8th Frontend Mentor project and my first Intermediate where I am learned about cart functionality. And this challenge has tested my JavaScript skills. If I made any mistakes in this project, please feel free to correct me.

Community feedback

@Kamasah-Dickson

Posted

  1. Your solution looks great but not responsive. Use max-width for your card instead of just width .
  2. To help with the accessibility issues wrap your card in a main semantic tag.
  3. Bonus Headings must be used in reducing order e.g h1,h2,h3,h4 do not mixed them up they should be used in descending order.
  4. Disable the next and prev button when there is a modal
  5. Add a margin between your header and the grid section. its too closer to the header and there is not enough space there.
  6. There should be a heading before a <section> tag. Don't use a section tag if there won't be any immediate heading.

I hope this was helpful.

Happy coding and have a nice day👍

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