Order Summary Component

Community feedback

• 

  P

  Øystein Håberg•10,390

  @Islandstone89Posted 8 months ago

  HTML:

  • The image and icon are decorative, meaning their alt text should be empty:alt="".

  • The background pattern should be placed as a background-image in CSS.

  • Headings should always be in order, so you cannot go from a <h2> to a <h5>. I would also change "Annual Plan" to a <p>.

  • .attribution should be a <footer>. As <main> and <footer> are separate landmarks, the <footer> needs to be moved outside of <main>.

  CSS:

  • It's good practice to include a CSS Reset at the top.

  • Add around 1rem of padding on the body, so the card doesn't touch the edges on small screens.

  • Remove the width on the card.

  • Add a max-width of around 20rem on the card, to prevent it from getting too wide on larger screens.

  • font-size must never be in px. This is a big accessibility issue, as it prevents the font size from scaling with the user's default setting in the browser. Use rem instead.

  • Media queries should be in rem, and we usually have the mobile styles as the default.

  Marked as helpful

  1

  ---

  

  Forester Erick•290

  @Forester04Posted 8 months ago

  Thank you very much for taking the time to review my code and provide such insightful feedback. I truly appreciate your expertise and attention to detail.

  Regarding your suggestions, I find them incredibly valuable and will certainly incorporate them into my work. @Islandstone89

  1

  

  P

  Øystein Håberg•10,390

  @Islandstone89Posted 8 months ago

  @Forester04 happy to help! 🙂

  0