qr-code-component

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted almost 2 years ago

  Hi @SemihRodoplu 👋, good job completing this challenge, and welcome to the Frontend Mentor Community! 🎉

  I have some suggestions you might consider to improve your code:

  • Use the <main> tag to wrap all the main content of the page instead of the <div> tag. With this semantic element you can improve the accessibility of your page.

  • You must use a level-one heading (h1) even though this is not a full-page challenge. You can create an '<h1>' element within your 'main' element that will be hidden visually but visible and readable by screen readers. The class "sr-only" hides content visually and here are the styles to copy. e.g.: <h1 class="sr-only">QR Card Component</h1>

  • The alt attribute should explain the purpose of the image. Uppon scanning the QR code, the user will be redirected to the frontendmentor.io website, so a better alt attribute would be QR code to frontendmentor.io

  • Instead of using pixels in font size, use relative units of measure like rem or em. The font size in absolute length units (px) does not allow users with limited vision to change the text size in some browsers. You can read more about this problem here.

  • You could use a CSS Reset to remove browser built-in styles and reduce browser inconsistencies.

  Popular reset style sheets:

  • A modern alternative to CSS resets
  • CSS Tools: Reset CSS
  • Custom CSS Reset

  Above all, the project is done well👏. I hope those tips will help you! 👍

  Good job, and happy coding! 😁

  2
• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  Replace <div class="content"> with the main tag and <h2> with <h1> to fix the accessibility issues. for more on semantic html visit https://web.dev/learn/html/semantic-html/

  There is no need to give .content a height value, the padding value will be sufficient.

  To center .content on the page, add min-height:100vh; display: flex; align-items: center: justify-content: center; or min-height:100vh; display: grid place-items: center to the body. instead of giving .content a margin value.

  Give img a max-width of 100% instead giving it a fixed width and height value.

  Hope am helpful. HAPPY CODING

  1