ECommerce Product Page Solution with Vanilla HTML, CSS, and Javascript

Community feedback

• 

  Shashree Samuel•9,260

  @shashreesamuelPosted over 2 years ago

  Hey ZakSchenck, good job with completing this challenge. Keep up the good work

  Your solution looks good however I think that's your notification icon indicator needs just a bit of padding. Kudos for your implementation though

  In terms of your accessibility issues

  • heading tags must only increase by one level which means if you have a <h1> tag then the preceding tag should be <h2>

  • images need alternative text, simply mention the alt attribute in your image tag and have a description of your image. This description will be useful to screen-readers or if the image fails to load

  • Wrap all your content between <main> tags to get rid of the rest of accessibility issues

  In terms of your validation errors

  • Attribute tab-index not allowed on element img at this point. I suggest reading on the html <img> tag to ensure that you are using the correct attribute.

  • Element img not allowed as child of element ul in this context.

  The rest of the validation errors will be resolved when the accessibility errors are fixed

  I hope this helps

  Cheers Happy coding 👍

  Marked as helpful

  0

  ---

  

  P

  Zak Schenck•40

  @ZakSchenckPosted over 2 years ago

  @TheCoderGuru Thanks dude. I definitely do be forgetting the accessibility part haha. I'll remember it for my next submission!

  0

  

  Shashree Samuel•9,260

  @shashreesamuelPosted over 2 years ago

  Zak Schenck, no problem your solution was good, kudos once again for your implementation of the notification indicator.

  Keep up the good work

  In addition I recommend you start using html semantic tags as it will greatly improve your code and prevent these accessibility issues

  You can read all about semantic tags here https://www.w3schools.com/html/html5_semantic_elements.asp

  I hope this helps

  Cheers Happy coding 👍

  0