QR-code component

Community feedback

• 

  Travolgi 🍕•31,400

  @denieldenPosted almost 3 years ago

  Hi Kanyshai, I took some time to look at your solution and you did a great job!

  Also I have some tips for improving your code:

  • add main tag and wrap the card for Accessibility
  • add descriptive text in the alt attribute of the image
  • To make it look as close to the design as possible set width: 20rem to container class
  • remove all margin from body
  • set min-heigth: 100vh to body because Flexbox aligns child items to the size of the parent container... calc() need white space between operator, like this: calc(100vh - 1px)

  Overall you did well :)

  Hope this help and happy coding!

  Marked as helpful

  1

  ---

  

  Kanyshai Osmonova•80

  @kanyshaiosmonovaPosted almost 3 years ago

  @denielden Thank you for your advice 😊. I will check it out👍

  1
• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted almost 3 years ago

  Greeting @kanyshaiosmonova ,

  Congratulation on completing your Frontend mentor challenge,

  I have few suggestions regarding your solution:

  • There should be two landmark components as children of the body element - a main (which will be the component ) and a footer (which will be the attribution).<Footer> should not be in the <main >. HTML5 landmark elements are used to improve navigation .

  • The alternative text is needed on that image for assistive tech and SEO search engine optimization . So it needs to contain a description like**Qr code for frontend mentor ** .

  • width: 400px; Consider using max-width:20rem instead, Then a little margin on the component or padding on the body to stop it hitting screen edges. That will let it shrink a little when it needs to.

  • using min-height: 100vh instead allows the body to to grow taller if the content outgrows the visible page.

  Overall , your solution is good. Hopefully this feedback helps.

  Marked as helpful

  1

  ---

  

  Kanyshai Osmonova•80

  @kanyshaiosmonovaPosted almost 3 years ago

  @PhoenixDev22 Thank you for your feedback. It definitely helps me to become a better developer. I needed this kind of code review.

  1