HTML/ CSS / Flexbox

Community feedback

• 

  Adriano•38,270

  @AdrianoEscarabotePosted about 2 years ago

  Hi @Durga-Jaiswal, how are you? Welcome to the front-end mentor community. I really liked the result of your project, but I have some tips that I think you will like.

  1- Document should have one main landmark, you could have put all the content inside the main tag click here

  2- Page should contain a level-one heading, you could have changed h3 to h1 [click here to read about it](https://dequeuniversity.com/rules/axe/4.3/page-has- heading-one?application=axeAPI)

  The rest is really good!

  Hope it helps... 👍

  Marked as helpful

  1
• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello @Durga-Jaiswal,, congratulations for your new solution!

  Here's some tips to improve your solution:

  1.Think about using relative units as rem or em instead of px to improve your performance by resizing fonts between different screens and devices.Anyhow, if we want a more accessible website, then we should use rem instead of px. REM does not just apply to font size, but to all sizes as well.

  2.Replace the div with <main> (every page should have a main landmark and also a main h1 heading) so replace the h3 to with <h1> and follow the sequence if you add another heading as h1, h2, h3...

  3.Reduce your html structure by deleting unnecessary divs and keep everything inside a single div. See your code reduced below:

  <div class="container">
      <img src="./images/image-qr-code.png" alt="QR code to scan">
      <h3>Improve your front-end skills by building projects</h3>
      <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
    </div>
  

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  0