QR Code Component

Community feedback

• 

  P

  Øystein Håberg•10,390

  @Islandstone89Posted 8 months ago

  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 the "main" section of a page. Wrap all of the code in a <main>.

  • Use classes instead of IDs for styling.

  • The alt text should be written naturally, with lowercase letters and without using - between the words. It must also say where it leads(frontendmentor.io).

  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.

  • On the body, change height to min-height - this way, the content will not get cut off if it grows beneath the viewport.

  • Remove gap, it isn't a valid value without declaring display: flex.

  • I would use em for word-spacing instead of px. I don't think you need it on this challenge, though.

  • Remove the margin on the image, and change max-width to 100% - the max-width prevents it from overflowing its container. Also remove cursor: pointer - it should be used for interactive elements, like links.

  • Add around 1rem of padding on the card, to create the space between the image and the card edges.

  Marked as helpful

  1

  ---

  

  Kennedy Barreto•20

  @KennedyBarretoPosted 8 months ago

  @Islandstone89 Thanks for the feedback and tips. I usually use semantic HTML, but since this is a relatively small piece of code, I let it slide. I wasn't familiar with all these CSS resets, but I'll definitely be using them more frequently from now on.

  1

  

  P

  Øystein Håberg•10,390

  @Islandstone89Posted 8 months ago

  @KennedyBarreto Happy to help :) Always use semantic HTML, though!

  0