first challenge

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted almost 2 years ago

  Hi @khalid-sabbah 👋, 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 in your solution .

  • Since the entire component refers to scanning the QR code, the QR code image is considered important content. It is therefore necessary to add an alt attribute to the image to provide additional context. The alt attribute of the QR image should include descriptive text to explain the purpose of the QR image. Upon scanning the QR code, you will be redirected to the frontendmentor.io website, so an example of alternative text would be "QR code to frontendmentor.io". You can read more about alternative text here.

  • Even though this challenge is not a full page, you should use semantic tags and a title tag <h1> in your solution. Inside your 'main' element, you can create an '<h1>' that will not be visible visually but is visible to screen-readers. To hide content visually, you can use the sr-only class. You can copy the styles of this class here.

  <h1 class="sr-only">QR Card Component</h1>
  

  • Always avoid skipping heading levels; Always start from <h1>, followed by <h2>, and so on up to <h6> (<h1>,<h2>,...,<h6>). Swap the <h3> tag with <h2>.

  • The container isn't centered correctly. You can use flexbox or grid layout to center elements. You can read more about centering in CSS here.

  • You can use either the CSS @import rule to import the font-family Reference

  In your CSS file add this line of code:

  @import url("https://fonts.googleapis.com/css2?family=Outfit:wght@500;700;900&display=swap");
  

  And use it as follows:

  .class-selector {
     font-family: "Outfit", sans-serif;
  }
  

  Please don't worry if your suggestions are long, they are just details. In the end, the project is well done 👏. Hope you find those tips helpful! 👍

  Good job, and happy coding! 😁

  Marked as helpful

  2

  ---

  

  khalid sabbah•110

  @khalid-sabbahPosted almost 2 years ago

  @MelvinAguilar this is so sweet , thank u very much , your comment was very helpful and I benefited greatly from it . I will take your words into consideration , and improve my coding. it's just a beginning. 😁

  1