Design comparison
Solution retrospective
Unsure of how accessible it will be. Is there any standard way and practice to go about this? Thanks
Community feedback
- @MelvinAguilarPosted over 1 year ago
Hello there ๐. Good job on completing the challenge !
I have some suggestions about your code that might interest you.
HTML ๐ท๏ธ:
- Wrap the page's whole main content in the
<main>
tag.
- The <br> tag is often used to create line breaks, but it doesn't convey any semantic meaning. When a screen-reader reads the text, it will break the flow of reading at the line break tag, which can be confusing for users. More information here.
- 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 ๐จ:
-
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.
- Setting the width of the component with a percentage or a viewport unit will behave strangely on mobile devices or large screens. You should use a max-width of
320px
or20rem
to make sure that the component will have a maximum width of320px
on any device, also remove thewidth
property with a percentage value.
I hope you find it useful! ๐ Above all, the solution you submitted is great!
Happy coding!
Marked as helpful1@GodstimeNwabuePosted over 1 year ago@MelvinAguilar Thanks so much, currently working on it
0@GodstimeNwabuePosted over 1 year ago@MelvinAguilar On the break tag "<br>", i read through the resource you gave me and still didn't what I didn't do right on the "<br>". Although I got something valuable -
"Do not use <br> to create margins between paragraphs; wrap them in <p> elements and use the CSS margin property to control their size". Please is it possible to point directly from the code where I didn't get it right. Thanks.
0@GodstimeNwabuePosted over 1 year ago@MelvinAguilar Thanks, seems I have understood what you explained to me. Thanks, I really appreciate it.
0@GodstimeNwabuePosted over 1 year ago@MelvinAguilar Adjusted it, please can you check again if i didn't do it right. Thanks.
0 - Wrap the page's whole main content in the
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