css

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted almost 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! 😁

  Marked as helpful

  1

  ---

  

  Eren•210

  @for-dev9Posted almost 2 years ago

  @MelvinAguilar Thanks for your guide. Warning is gone after add <h1> tag.

  0
• 

  Davide Di Francesco•200

  @davdifrPosted almost 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!

  Marked as helpful

  1

  ---

  

  Eren•210

  @for-dev9Posted almost 2 years ago

  @davdifr thank you for your advice, i forgot to add shadow :)

  0