Design comparison
Solution retrospective
Hi, Frontend Mentor community! Here is my solution for QR code component, any suggestions are very welcome
Community feedback
- @Bayoumi-devPosted over 2 years ago
Hey! Congratulations on completing this challenge... You have
accessibility issues
that need to fix.Document should have one main landmark
, Contain the component with<main>
.
<main> <div class="container"> //... </div> </main>
Page should contain a level-one heading
, Changeh2
toh1
You should always have oneh1
per page of the document... in this challenge, you will useh1
just to avoid theaccessibility issue
that appears in the challenge report... but don't useh1
on small components<h1>
should represent the main heading for the whole page, and for the best practice use only one<h1>
per page.- Use
REM
for font size, It is a must for accessibility because px in some browsers doesn't resize when the browser settings are changed... See this article ---> CSS REM – What is REM in CSS?
Hope this help!... Keep coding👍
Marked as helpful1 - @PhoenixDev22Posted over 2 years ago
Hello End Dev,
Congratulation on completing this challenge. Your solution looks great. I have some suggestions regarding your solution if you don’t mind:
-
Page should contain
<h1>
. In this challenge , as it’s supposed to be a part of a whole page, you may use<h1>
withsr-only
class hidden visually and present for assistive tech users. -
Use the
<main>
landmark to wrap the card. HTML5 landmark elements are used to improve navigation experience on your site for users of assistive technology. -
The alternate text should be present on the image(as it’s an informative image).It should tells the users where it takes : like
Qr code to frontend mentor
CSS:
-
width: 300;
an explicit width is not a good way. consider usingmax-width
to the card inrem
instead. -
Consider using
rem
for font size .If your web content font sizes are set in absolute units, such as pixels, the user will not be able to re-size the text or control the font size based on their needs. -
Relative units “stretch” according to the screen size and/or user’s preferred font size, and work on a large range of devices.
-
Using percentages for widths , using
max-width
and avoiding to set heights for components, with these things is the key to mastering responsive layouts.
Aside these , Good work! Hopefully this feedback helps
0 -
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