QR code scanner page using flex box

Community feedback

• 

  Victor•1,035

  @CodeVeePosted over 2 years ago

  @Chiku100 Hi Abhilash, Great job on this assignment. I have a few suggestions

  • Wrap your card with a main tag. I would suggest swapping the div tag with attribution class for it.
  • for the attribution styling I'd say change it for it to cover the entire screen like

   .attribution {
      display: flex;
      height: 100vh;
      background-color: hsl(212, 45%, 89%);
      justify-content: center;
      align-items: center;
  } 
  

  • Use h1 instead of h2

  Marked as helpful

  0

  ---

  

  Abhilash•920

  @Chiku100Posted over 2 years ago

  @CodeVee Thank you, sir. I will try to improve on those pointers on next project.

  0
• 

  Ahmed Bayoumi•6,740

  @Bayoumi-devPosted over 2 years ago

  Hey Abhilash, Congratulations on completing this challenge... You have some accessibility issues you need to fix.

  • Document should have one main landmark, Contain the component in <main>.
  • I suggest you contain the attribution in <footer>.

  <main>
     <div class="box">
        //...
     </div>
  </main>
  
  <footer>
     <div class="attribution">
        //...
     </div>
  </footer>
  

  • Page should contain a level-one heading, Change h2 to h1 You should always have one h1 per page of the document.

  <h1> Improve your front-end skills by building projects</h1>
  

  • To center the component on the page, Give the parent element <main> the following properties:

  main {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
  }
  

  Some Resources

  • How to Center Anything with CSS - Align a Div, Text, and More
  • 11 Ways to Center Div or Text in Div in CSS%20vertically%20and%20horizontally.)

  I hope this is helpful to you... Keep coding👍

  Marked as helpful

  0

  ---

  

  Abhilash•920

  @Chiku100Posted over 2 years ago

  @Bayoumi-dev Thanks a lot kind sir for the helpful advice and resources.

  0