css

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,020

  @MelvinAguilar

  Posted over 2 years ago

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

  Regarding your question:

  • Even though this challenge is not a full page, you should use semantic tags and a title tag <h1> (level-one heading) 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>
  

  The <h1> element is the main heading on a webpage, also, there should only be one <h1> tag per page.

  • The <p> with text "Improve your front-end skills by building projects" , is considered a heading element, change it to an <h2>.

  Good job, and happy coding! 😁

  11

  Marked as helpful
• 

  Davide Di Francesco•200

  @davdifr

  Posted over 2 years ago

  Hey, first of all, great job! Your work is very similar to the original!

  I have two tips for you:

  1. For the border-radius of the card, use a pixel size, in this case 10 should be enough. As you can see from your result, the edges have a "strange" shape because you used a % size that is usually used to obtain a circle if you have a div with equal height and width.
  2. As you can see from the preview image, there is a slight shadow behind the card, it should not be difficult with your skills to add it without problems!

  That said, once again great job and good coding!

  11

  Marked as helpful