QR Code Component Using CSS Flexbox

Community feedback

• 

  P

  Øystein Håberg•10,390

  @Islandstone89Posted 9 months ago

  Hey, Aykin. Congratulations, you have done a great job on this!

  Just a few things to take note of - well done :)

  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. Make .card a <main>, or wrap the card in a <main>.

  • The alt text 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.

  • Change width to max-width on the image.

  Marked as helpful

  1
• 

  Daniel 🛸•44,250

  @danielmrz-devPosted 9 months ago

  Hello @aykinsancakli!

  Your solution looks excellent!

  I have just one suggestion:

  • Use <main> to wrap the main content instead of <article>.

  📌 The tag <article> would make more sense if the card was part of a bigger website (in certainly would in real world), but here it is all we have on the screen.

  This tag change does not impact your project visually and makes your HTML code more semantic, improving SEO optimization as well as the accessibility of your project.

  I hope it helps!

  Other than that, great job!

  1