QR code component solution using HTML and CSS.

Community feedback

• 

  Daniel 🛸•44,270

  @danielmrz-devPosted 8 months ago

  Hello there! 🙋🏽‍♂️

  Your solution looks excellent!

  I have a suggestion that might interest you:

  📌 If you don't have the Figma design files, I recommend using a browser extension called Perfect Pixel.

  It allows you to compare your finished project with the design images that come along when you download the project and check the (almost exact) dimensions. It's very useful!

  I hope it helps you in future projects! 😊

  Other than that, great job!

  Marked as helpful

  0

  ---

  

  Samim Kabiru•260

  @samimkabiruPosted 8 months ago

  Thanks alot @danielmrz-dev

  1
• 

  T

  Grace•31,230

  @grace-snowPosted 8 months ago

  This appears a bit broken to me. I haven't looked at the code but expect you have limited the body height to 100vh. Never do that. Never limit the height of elements that contain text, including the body. Change to min height instead so the body can grow when it needs to.

  1

  ---

  

  T

  Grace•31,230

  @grace-snowPosted 8 months ago

  The html needs adjustment too.

  • main can't be wrapped in sections. This is a single card component. It would sit within main.
  • this does not have a header. Make sure you understand what landmarks are for. A header is definitely not for wrapping an image.
  • the alt text on the image needs to say what the image is (QR code) and'where it's going (to FrontendMentor.io). Alt shouldn't include words like "picture" or "image" because it's already on an image.
  • similar to above, remember the context of how this component would be used. It would sit within a page. If would not be the title for the page. That means it shouldn't have a h1. Use h2 instead.
  • all content should be contained within landmarks. Put the attribution in a footer.

  Marked as helpful

  0

  

  Samim Kabiru•260

  @samimkabiruPosted 8 months ago

  thank you for the feedback. I would revisit it and make some changes.

  0