This is my first challenge QR code component.

Community feedback

• 

  T

  Grace•31,090

  @grace-snowPosted 5 months ago

  As well as the feedback above to enclose all this in a main landmark (which you still need to apply) there are other important changes needed in this. These are foundational learnings/principles/thinking that you'll need to apply in every challenge.

  • all content should be contained within landmarks. This should live inside a main, and every page you ever make needs one main.
  • the image is the most important content on the page but you've treated it as a decorative image. This needs an alt description to say what it is (QR code) and where it goes (to FrontendMentor.io).
  • get into the habit straight away of including a full modern css reset at the start of the styles in every project. Andy Bell or Josh Comeau both have good ones you can look up and use.
  • to center the component on the screen use flex properties and min-height 100svh on the body.
  • this card must not have a width, and definitely not in px. Instead, give it a max width in rem. This allows it to shrink narrower when needed (like on small screens) but doesn't let it grow too wide. It's important to use rem for that max width so the layout scales correctly for all users, including those with a different text size setting.
  • the image doesn't need a width either. Besides the border radius all the img needs is the styles usually included in a css reset: display: block; max-width: 100%;
  • Font size must never be in px. Use rem.

  Make sure you apply these learnings in this challenge and the other one you've done. Then that next one will need further changes/feedback after all this.

  This is why it's important to get or read feedback on the current challenge and refactor your solution to apply what you learn before moving on.

  Marked as helpful

  0
• 

  Akib Raza•900

  @akibraza91Posted 5 months ago

  Hello there!

  Congrats on completing the challenge! ✅

  Your solution is really impressive!

  I've got a couple of ideas (about how to use HTML better) that could make it even stronger:

  Think about using <main> to wrap your main content instead of <div>.

  Imagine <div> and <span> in HTML as basic containers. They're good for holding stuff, but they don't tell us much about what's inside or its purpose on the webpage.

  These tweaks might not change how your page looks, but they'll make your HTML code clearer and help with SEO and accessibility.

  Hope that's helpful!

  Keep up the great work!

  Marked as helpful

  0

  ---

  

  Manish Kumar Rana•50

  @ManishKrRanaPosted 5 months ago

  @akibraza91 Thank you for the feedback and the insightful suggestions and compliment..

  0