Fronted Mentor QR code componet

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted about 2 years ago

  Hello Amdrew,

  Congratulation on finishing your first frontend mentor challenge. Excellent work! I have few suggestions regarding your solution, if you don't mind:

  HTML

  • In my opinion, the image is an important content. The alternate text is needed on this image. The alternate text should indicate where the Qr code navigate the user : like QR code to frontend mentor not describes the image. The alternate text should not be hyphenated, it should be human readable.
  • Adding rel="noopener" or rel="noreferrer" to target="_blank" links. When you link to a page on another site using target=”_blank” attribute , you can expose your site to performance and security issues.
  • width: 300px; an explicit width is not a good way to have responsive layout . Consider using max-width to the card in rem instead .
  • Add min-height: 100vh instead of height: 100vhto the body that let the body grows taller if the content outgrows the visible page instead.
  • Remember a css reset on every project. That will do things like set the images to display block and make all browsers display elements the same.

  • Consider using rem and em units as they are flexible, specially for font size better to use rem. If your web content font sizes are set in absolute units, such as pixels, the user will not be able to re-size the text or control the font size based on their needs. Relative units “stretch” according to the screen size and/or user’s preferred font size, and work on a large range of devices.

  Hopefully this feedback helps.

  Marked as helpful

  2

  ---

  

  Amdrew•40

  @AmdrewMGPosted about 2 years ago

  @PhoenixDev22 Thank you very much for correcting me! Of course I will take that into account for future similar projects and to improve this one, thank you!

  1

  

  PhoenixDev22•16,950

  @PhoenixDev22Posted about 2 years ago

  @amdrew-idfc Glad to help. Happy coding!

  1