QR code component using sass

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted about 2 years ago

  Hi Yaman,

  Congratulation on completing this challenge. Your solution looks great. I have some suggestions regarding your solution if you don’t mind:

  • I see you have used role instead . You may use <main> for the card and <footer> for the attribution . HTML5 landmark elements are used to improve navigation experience on your site for users of assistive technology.

  • You can remove the <section class="bg">.

  <main>
  <div class=”card”>
  <img>
  <h1></p>
  <p></p>
  </div>
  </main>
  

  • In my opinion, the alternate text should indicate where the Qr code navigate the user : like QR code to frontend mentor.

  • Add min-height: 100vh instead of height: 100%to the body that let the body grows taller if the content outgrows the visible page instead.

  • width: 325px an explicit width is not a good way to have a responsive layout. Consider using max-width to the card in rem instead.

  • height: 500px It's not recommended to set height to component, let the content of the component define the height.

  • Consider using rem for font size .If your web content font sizes are set in absolute units, such as pixels, the user will not be able to re-size the text or control the font size based on their needs.Relative units “stretch” according to the screen size and/or user’s preferred font size, and work on a large range of devices. Hopefully this feedback helps.

  Hopefully this feedback helps.

  Marked as helpful

  1

  ---

  

  Yaman•90

  @YAMANX8Posted about 2 years ago

  @PhoenixDev22 THANK YOU. I am looking for these feedbacks, this improved my knowledge. THANK YOU again.

  0

  

  PhoenixDev22•16,950

  @PhoenixDev22Posted about 2 years ago

  @YAMANX8 Glad to help. Happy coding!

  1