qr card component

Community feedback

• 

  P

  Øystein Håberg•10,710

  @Islandstone89Posted 4 months ago

  Hey, wonderful job!

  Some of the things I like about your submission:

  • Custom Properties
  • CSS Reset
  • Font size in rem instead of px (this is an essential accessibility requirement!)
  • No fixed widths or heights in px
  • Max-width on the card

  Most of these are usually missing from submissions, so again, well done!

  A few tips:

  HTML:

  • Every webpage needs a <main> that wraps all of the content, except for <header> and footer>. This is vital for accessibility, as it helps screen readers identify a page's "main" section. Replace <article> with <main>.

  • The alt text must also say where it leads(the frontendmentor website). A good alt text would be "QR code leading to the Frontend Mentor website."

  • As the card heading would likely not be the main heading on a page, I would change it to a <h2>.

  CSS:

  • I like to add 1rem of padding on the body, to ensure the card doesn't touch the edges on small screens.

  • You don't need to declare font-weight: 400 on the body, as that is the default value.

  • You also don't need min-height on the image wrapper.

  • According to MDN, will-change "is intended to be used as a last resort, in order to try to deal with existing performance problems. It should not be used to anticipate performance problems."

  Keep up the great work :)

  Marked as helpful

  0