Design comparison
Solution retrospective
My first challenge, all feedbacks are welcome
Community feedback
- @PhoenixDev22Posted about 2 years ago
Hi Trvan Quan,
Congratulation on completing this challenge. Your solution looks great. I have some suggestions regarding your solution if you don’t mind:
- You should use
<main>
for the card and<footer>
. HTML5 landmark elements are used to improve navigation experience on your site for users of assistive technology. Page should contain one level heading. In this challenge, you may use<h1>
forclass=”bold”
- In my opinion, the alternate text should indicate where the Qr code navigate the user : like
QR code to frontend mentor
- Adding
rel="noopener"
orrel="noreferrer"
totarget="_blank"
links. When you link to a page on another site usingtarget=”_blank”
attribute , you can expose your site to performance and security issues.
- Add
min-height: 100vh
instead ofheight: 100vh
to the body that let the body grows taller if the content outgrows the visible page instead.
width: 280px
an explicit width is not a good way to have a responsive layout. 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.
Hopefully this feedback helps.
Marked as helpful1@69kwan69Posted about 2 years ago@PhoenixDev22 Thank you! After seeing your suggestions I know I have much more to learn.
0 - You should use
- @correlucasPosted about 2 years ago
Hello Sonic 😁 congratulations for your solution!
Here's some tips I have for you after seeing your code, first of all I've to say that you did a nice work wrapping with a clean code, regarding the improvements. You can improve the html markup replacing the div with
main
to improve the accessibility and semantics and replace theheight
in body withmin-height: 100vh
to make sure the body will é displaying always at least minimum 100% of the viewport height.body { font-family: 'Outfit', sans-serif; font-size: 15px; background-color: hsl(212, 45%, 89%); display: flex; align-items: center; justify-content: center; Min-height: 100vh; }
Hope this helps, happy coding
1@69kwan69Posted about 2 years ago@correlucas Thank you! This fixed my problem when minimized tab didn't fully display the QR code card.
0 - @DavidMorgadePosted about 2 years ago
Hello Trvan congrats on getting the solution for the challenge! and welcome to the frontendmentor community!
You component styles looks great, you managed to center it using flex-box, maybe yours is a bit little than the challenge one but that doesn't matter at all.
For you html tho, you should use at least a
main
on your component since every webpage should use amain
tag on the principal content, since this one is just the component, you can use amain
to wrap it all instead of adiv
.Also would recommend you to use an
h1
tag, like the main tag, every webpage should have anh1
tag, it will improve the accesibility and will rank higher con search engines (wich means that your page will be more visited!)This are just things that doesn't matter that much in such a little project, but take them as a reference for your future challenges!
Hope my feedback helps you, if you have any questions, don't hesitate to ask!
1@69kwan69Posted about 2 years ago@DavidMorgade Thank you! I didn't really pay attention to semantic HTML until now!
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