QR code component

Community feedback

• 

  Joanna Skrzypczak•510

  @joaskr

  Posted over 2 years ago

  Hi,

  great job with the challenge :) It looks great. If you want to further improve your solution here are some tips:

  Accessibility

  • Wrap your content in a <main> element instead of a <div class="container">. It is best practice to use HTML landmark elements such as <main> <header> <footer> and <nav> because they improve accessibility.
  • It is also best practice to have an <h1> on a page. In your case <h3> can be changed to <h1>. Generally, we should use headers in order - so we should start with <h1> then <h2> and then <h3>.

  Design

  • I noticed a small bug in your solution when you open the website on a mobile device in landscape mode. The content is too big for the screen and looks weird. You can fix it for example by changing:

  .container{ width: 100%; height: 90vh; }

  to

  .container{ width: 100%; min-height: 90vh; }

  Overall, great job.

  Keep coding and good luck with the next challenges!

  01

  Marked as helpful