QR code component with Tailwind css

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted almost 2 years ago

  Hi @KaceyXam 👋, good job completing this challenge! 🎉

  I have some suggestions you might consider to improve your code:

  • Even though this challenge is not a full page, you should use semantic tags in your solution. Use the <main> tag to wrap all the main content in your solution instead of using <section class="..."> to improve the accessibility of the website.

  • To make alternative texts more worthwhile, add descriptive text to the alt attribute of the QR image to explain what the QR image does. Upon scanning the QR code, you will be redirected to the frontendmentor.io website, so an example of alternative text would be "QR code to frontendmentor.io". You can read more about alternative text here.

  • Use m-4 (margin: 1rem;) in the card component to add some space for the container card and the screen edge on mobile devices.

  • Use min-h-screen (min-height: 100vh;) to the body element instead of h-screen. This property lets you set a height and let the element grow even more if necessary.

  Please don't worry if your suggestions are long, they are just details. In the end, the project is well done 👏. Hope you find those tips helpful! 👍

  Good job, and happy coding! 😁

  Marked as helpful

  1