Responsive QR code component

Community feedback

• 

  Elijah-05•30

  @Elijah-05Posted over 1 year ago

  Hey! Congra for finishing this challenge.

  • I think it is better if you use the QR Image nest inside the div element, like this <div> <img src=" " alt="" /> </div> . Because it is Image, not just for decoration purpose. screen readers should read the image by the alt="" attribute. and also you don't need more styling for this case.
  • The other is recommended to always start by semantic elements, that means <main> </main> <header> </header> and others. nest all ur codes inside <main> semantic element. that is why Accessibility report is issued.

  0
• 

  Francisco Carrillo•5,540

  @frank-itachiPosted over 1 year ago

  Hello there 👋. Congratulation for completing the challenge👍!

  I have some suggestions about your code that might interest you.

  HTML 📄:

  • Wrap the page's whole main content in the <main> tag.
  • The heading order is important in the html structure so try to always start your headings and/or titles with an <h1> tag and then you can increase by one if you need to use more heading in your html code. So replace the <p>Improve your front-end skills by building projects</p> by <h1>Improve your front-end skills by building projects</h1>

  CSS 🎨:

  • You can use grid or flexbox to center the content no matter the viewport size. Using Grid:

  body {
  	min-height: 100vh;
          display: grid;
  	place-content : center;
  }
  

  FlexBox

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

  • Avoid using absolute length units px, especially for the font-size property, because they are not relative to anything else so that means they will always be the same size. Instead, you can use relative lengths like em or rem. The benefit of that last one is element which has that unit will scale relatively to everything else within the page, e.g., the parent container. You can dig up about it here.

  I hope you find it useful! 😄 Above all, you did a good job!

  Happy <coding /> 😎!

  0