Order Summary Component using HTML and CSS

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted almost 3 years ago

  👋Hi there!

  🎉 Congratulations on finishing your third challenge! I have some feedback on this solution:

  • Accessibility
    • Every img tag should have an alt attribute. But, if you don't want to put an alt attribute on it, you can put role="presentation" to any decorative images. But, keep in mind that this method is not widely supported yet according to the W3C WAI site.

  // First method to handle decorative image
  <img src="/images/decorative.jpg" alt="" aria-hidden="true">
  // Second method
  <img src="/images/decorative.jpg" role="presentation">
  

  • Use heading tags in chronological order. I would recommend using h2 instead of h4.
  • Create a custom :focus-visible styling to any interactive elements (button, links, input, textarea). This will make the users can navigate this website using keyboard (Tab) easily.
  • All page content should live inside a landmark (header, main, footer). In this case, you can wrap all the page content with main tag.
  • Use rem or sometimes em unit instead of px. Using px will not allow the users to control the size of the page based on their needs.
  • Visual
    • I would recommend setting a max-width instead of setting width, since right now, on my mobile view (360px * 640px), the card is overflowing.
    • Add padding to the body element to prevent the card touch the corner screen.
    • In my opinion, the best way to make the card perfectly center on the page is making the body element as the flexbox container.

  /* 1. Make the card vertically center and still 
          allowed the body element to grow if needed */
  body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;  /* 1 */
  }
  

  That's it! Hopefully, this is helpful!

  Marked as helpful

  1