QR Code Component using HTML and Tailwind CSS (Play CDN)
Design comparison
Solution retrospective
First time here on Frontend Mentor π I am trying out Tailwind CSS for the first time as well for this first challenge.
One doubt (not specific to Tailwind): Here, the provided QR code image has the right width 288 px β but in the case of dynamic image, what would be the best practice to set the image size and optimize page load time?
Community feedback
- @MelvinAguilarPosted almost 2 years ago
Hello there π. Good job on completing the challenge !
I have some suggestions about your code that might interest you.
CSS π¨:
-
Using
h-screen
(height: 100vh
) to center the element can cause problems with the layout of the page on smaller screens, such as in landscape view on a mobile device.On smaller screens, such as in landscape view on a mobile device, the height of the viewport may be less than the height of the content of the page. In this case, using
h-screen
will cause the content of the page to be hidden behind the body element.Here is an image of how it would look on a mobile device (taking into account the scroll): screencapture-enreina-frontend-mentor-qr-code-component
To avoid this problem, it is generally recommended to use
min-h-screen
(min-height: 100vh
) instead ofh-screen
. This will ensure that the content of the page is always visible.
HTML π:
-
Use the
<main>
tag to wrap all the main content of the page instead of the<div>
tag. With this semantic element you can improve the accessibility of your page. -
Always avoid skipping heading levels; Always start from
<h1>
, followed by<h2>
, and so on up to <h6> (<h1>,<h2>,...,<h6>).
- Since this component involves scanning the QR code, the image is not a decoration, so it must have an
alt
attribute. Thealt
attribute should explain its purpose. e.g.QR code to frontendmentor.io
I hope you find it useful! π Above all, the solution you submitted is great!
Happy coding!
Marked as helpful2@enreinaPosted almost 2 years ago@MelvinAguilar thank you so much for the really comprehensive & valuable feedback! Learned so much from your comment β will definitely update my solution!
1 -
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord