Design comparison
Community feedback
- @MelvinAguilarPosted over 1 year ago
Hello there ๐. Good job on completing the challenge !
I have other suggestions about your code that might interest you.
HTML ๐ท๏ธ:
- 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
CSS ๐จ:
-
Setting the font-size to 62.5% can attract compatibility issues with third-party libraries or plugins. You can read more about this with this lectures:
- 1. Should I change the default HTML font-size to 62.5%?.
- 2. The Surprising Truth About Pixels and Accessibility - The 62.5% trick.
- 3. A comment on the 62.5% trick.
Credit to grace-snow and vanzasetia.
- Use
min-height: 100vh
instead ofheight
. Setting the height to 100vh may result in the component being cut off on smaller screens, such as a mobile phone in landscape orientation.
I hope you find it useful! ๐ Above all, the solution you submitted is great!
Happy coding!
Marked as helpful1 - Since this component involves scanning the QR code, the image is not a decoration, so it must have an
- @AgbortokoPosted over 1 year ago
Excellent Job checkout the notes below to make your work more perfect
- HTML5 elements such as
<main>
,<nav>
,<header>
,<footer>
,<section
>,<aside>
act as landmarks, or special regions on the page to which screen readers and other assistive technologies can jump. By using landmark elements, you can dramatically improve the navigation experience on your site for users of assistive technology (Users with disabilities) .
You can use the
<div>
for sub items within landmarks like<section>
. In other words for containers or sections in your HTML you can use the<section>
tag if you want to nest in sub items<div>
.Landmarks such as the
<section>
may actually require that you specify a heading within. In other words if the section has no heading it may throw an error when checked by an accessibility tool.It is advisable that you place all your main site content in a landmark element
<main>
Here is an Accessibility Evaluation Tool to check your webpage for any errors or warnings related to landmarks.There exist an attribution
<div>
that comes with the frontendmentor starter kit. You will have to wrap this<div>
in a<footer>
tagRead
-
W3schools Accessibility Landmarks Notes for more information.
-
MDN Web docs notes for more information.
I hope you find the above solution useful! ๐ Nevertheless, the solution you submitted is great! Happy coding!
Marked as helpful1 - HTML5 elements such as
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