Responsive QR code component using HTML and CSS

Community feedback

• 

  Kanishka Priyashantha•690

  @kanishkasubashPosted over 1 year ago

  Hello there 👋. Congratulations on completing the challenge!

  Your solution looks great, and you've done a fantastic job overall! However, here are some small suggestions after taking a look at your code to make it even better:

  HTML :

  • The <main> element should wrap around the entire component. Use semantic elements such as <main> and <footer> to improve accessibility and organization of your page.
  • Always avoid skipping heading levels; Starting with <h1> and working your way down the heading levels <h2>, <h3> etc. helps ensure that your document has a clear and consistent hierarchy. Source

  CSS

  • For proper centering, you use Flexbox on the div element with class .flex. However, to ensure it's always centered vertically, it's essential to add min-height: 100vh and justify-content: center. This makes sure that your content is always centered, regardless of the screen size.

  .flex {
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  

  I hope you find this helpful! 😄 Keep up the great work! 👍

  🖥️Happy coding!

  Marked as helpful

  0

  ---

  

  Kateryna•30

  @Kateryna4715Posted over 1 year ago

  @kanishkasubash Thanks a lot for the feedback! I will try not to make the same mistakes next time :)

  0