QR Code Component Solution Using Flex Box

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted about 1 year ago

  Hello 👋. Congratulation on successfully completing your first challenge 🎉 ! !

  I am not an experienced person but I have some recommendations regarding your code that I believe will be of great interest to you.

  • The <div> tag can be useful for styling and positioning, but it doesn't convey any semantic meaning. Instead, consider using more semantic elements like <p> to better describe the type of content. e.g.: <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>.

  • Wrap the page's whole main content in the <main> tag.

  • Since this component involves scanning the QR code, the image is not a decoration, so it must have an alt attribute. The alt attribute should explain its purpose. e.g. QR code to frontendmentor.io

  • If you use dynamic viewport units like min-height: 100dvh, remember to include a fallback like min-height: 100vh for devices that may not support it, ensuring a consistent experience.

  • You could simplify the spacing between the card, image, and text by applying padding to the entire .container element. This approach eliminates the need for fixed widths on individual elements. Also, remember to minimize the use of fixed widths, as they don't adapt well to smaller screens, such as mobile devices.

  I hope you find it useful! 😄 Above all, the solution you submitted is great!

  Happy coding!

  Marked as helpful

  1

  ---

  

  Nathan Ray•230

  @NathanRayMPosted about 1 year ago

  @MelvinAguilar

  This is exactly the type of feedback I was looking for. Thank you!

  1