iterm centering using flexbox

Community feedback

• 

  Gabriel Morandi de Mello•450

  @gabrielmorandiPosted over 1 year ago

  Hello @errondo! 👋, welcome to the Frontend Mentor Community!

  Congratulations on your QR Code component project! 🎉 It looks clean and well-organized. However, I would like to suggest some improvements that can further enhance your code:

  • HTML Semantics: Using semantic elements in your code can help browsers and assistive technologies better understand the structure of your document. In your case, you can use the <header>, <main>, and <footer> tags to clearly separate the different sections of your component.

  <header>
  </header>
  <main>
  </main>
  <footer>
  </footer>
  

  • Image size: Currently, you have set the image width to 300px, which might cause responsiveness issues on smaller devices. I suggest using max-width and width: 100% to allow the image to resize according to the device's size:

  .item img {
    max-width: 300px;
    width: 100%;
    border-radius: 20px;
  }
  

  • Alternative text: It's a good practice to include a more descriptive alternative text for your images. In the case of the QR Code, you can improve the alt attribute as follows:

  <img src="./images/image-qr-code.png" alt="QR Code for Frontend Mentor website">
  

  I hope these suggestions are helpful! Feel free to ask questions if you need more information. Good luck and keep up the great work! 😄

  0