Frontend Mentor - QR code component

Community feedback

• 

  Nelson Nzewi•270

  @nzewiPosted about 2 years ago

  Congrats on completing this challenge RoriCrimson You have a great solution there

  1.Using relative units like rem and em instead of px would make your site more responsive. Learn about them and use them in your next project.

  2.Ensure that all content on your page is contained within a landmark region, e.g Wrapping your card <div> inside a <main> tag. This makes your HTML more semantic

  3. Never forget to add the alt attribute to your image tag. All images must have alternate text to convey their purpose and meaning to screen reader users. It makes your site more accessible

  I hope this helps

  0
• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello @roricrimson, Congratulations on completing this challenge!

  Great solution and a great start! From what I saw you’re on the right track. I’ve few suggestions for you that you can consider adding to your code:

  1.Add the alt text to improve accessibility.The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of a slow connection, an error in the src attribute, or if the user uses a screen reader). ---> <img src="./images/image-qr-code.png" alt="QR Code Frontend Mentor">

  2.Add a margin of around margin: 20px to avoid the card touching the screen edges while it scales down.

  3.Replace the <h4> containing the main title with <h1> note that this title is the main heading for this page and every page needs one h1 to show which is the most important heading. Use the sequence h1 h2 h3 h4 h5 to show the hierarchy of your titles in the level of importance, never jump a level.

  4.Use <main> instead of <div> to wrap the card container. This way you show that this is the main block of content and also replace the div with a semantic tag.

  ✌️ I hope this helps you and happy coding!

  0