Order Summary Component - Using Flex Box

Community feedback

• 

  P

  Ken•4,915

  @kens-visuals

  Posted over 3 years ago

  Hey @AbhijitSarode 👋🏻

  I've got some suggestions to help you fix the accessibility and HTML issues.

  • In your markup, <div class="card">...</div> should be <main class="card">...</main>. This will fix the accessibility issues. Don't forget to generate a new repot once you fix the issues.
  • The hero image should have a description in the alt tag, something like, alt="happily dancing girl"
  • For the music icon, add aria-hidden="true”, because it's for decoration. You can read more about aria-hidden here.
  • If srcset attribute is not used, it should be removed, otherwise it causes some errors. So the image tag should look something like this:

  <img src="/images/icon-music.svg" alt="" aria-hidden="true">
  

  • Also, I suggest adding transition: all 0.2s; to the button and the links, this will make :hover smoother.
  • Hero image should have a display: block;, it removes the line underneath the image. If you want to know what's causing it, check out the 3rd section of this video.
  • I won't go into details about resetting CSS, but I'll leave this cool article here, which will make more sense than my brief explanation.
  • Next, I suggest using <h2> or <p> instead of <h4>, because headings in HTML have to increase gradually, such as h1, h2, h3…..
  • li is only allowed in ul as a list item, so you should remove it from <a> tag.

  I hope this was helpful 👨🏻‍💻 all in all, for the second project, you did a good job. Cheers 👾

  15

  Marked as helpful