Design comparison
Solution retrospective
Any feedbacks are welcome. Please share your opinions with me.
Community feedback
- @HassiaiPosted over 1 year ago
Replace <section class="section-center"> with the main tag, <div class="title"> with <h1> and <div class="desc"> with <p> to fix the accessibility issues. click here for more on web-accessibility and semantic html
There is no need to give .section-center a max-width value. There is no need to style .qr-card rather give the img a max-width of 100% instead of a width and height values.
Give .qr-content a margin value for all the sides, text-align: center and a font-size of 15px which is 0.9375rem, this will be the font-size of both p and h1.
Hope am helpful.
Well done for completing this challenge. HAPPY CODING
Marked as helpful0@DaisyPwintPosted over 1 year ago@Hassiai thank you for your details feedback. I'm going to try again as you suggest.
0 - @MelvinAguilarPosted over 1 year ago
Hello ๐. Congratulation on successfully completing your first challenge ๐ ! !
I have some recommendations regarding your code that I believe will be of great interest to you.
HTML ๐ท๏ธ:
- Use semantic elements such as
<main>
and<footer>
to improve accessibility and organization of your page.
- The <div> tag can be useful for styling and positioning, but it doesn't convey any semantic meaning. Instead, consider using more semantic elements like <p> to better describe the type of content. e.g.:
<p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
.
- The text
Improve Your Front-End Skills by Building Projects
is considered a heading element (h1).
- 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 ๐จ:
- Remove the
max-width
from the.section-center
element and allow it to occupy 100% of the screen width regardless of device; otherwise, your solution will not be centered on 4k screens.
I hope you find it useful! ๐ Above all, the solution you submitted is great!
Happy coding!
Marked as helpful0@DaisyPwintPosted over 1 year ago@MelvinAguilar firstly, thank you for your suggestion. I am going to try again following your advice.
0 - Use semantic 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