Design comparison
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.
- Always avoid skipping heading levels; Starting with <h1> and working your way down the heading levels (<h2>, <h3>, etc.) helps ensure that your document has a clear and consistent hierarchy. Source 📘
- Since this component involves scanning the QR code, the image is not a decoration, so it must have an
altattribute. Thealtattribute should explain its purpose. e.g.QR code to frontendmentor.io
CSS 🎨:
- Instead of using pixels in font-size, use relative units like
emorrem. The font-size in absolute units like pixels does not scale with the user's browser settings. Resource 📘.
-
Use
min-height: 100vhinstead 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!
1 - Wrap the page's whole main content in the
- @jguleserianPosted over 1 year ago
Hey, Fernando
Congratulations on completing your first challenge. Looks like you really did an awesome job! I like the look and proportions, the organization of your CSS and HTML, and the succinctness of your solution. Since you did so well, I thought I would try and help you out with just one observation and then discuss some of the error messages you received from the FM report.
- I did notice that the comparison images seem to be a bit off, but sometimes it is difficult to tell if it is the screenshot resolution or a genuine difference. I do notice a spacing/font issue with your
<h3>since the words on each line differ a bit. There may also be a tiny descrepancy with your margins (maybe like 15px instead of 10px) - but this is nitpicking, for sure. - Images must have alternative text - keep in mind that all the
<img>tags need to have the alt text included, i.e., an explanation of what the image is about in case it doesn't render properly - One main landmark - here the report is looking mostly for a
<main>section. Make sure you use as much of the semantic HTML as possible, especially a<main>section (as oppsed to the<div class="container">. Generally, I let the<body>be the "background" and the<main>be the actual page or component.<header>,<footer>,<nav>, etc. can either come before/after or within that<main>section. - For the sake of screen readers and accessibility, it is important to include an
<h1>element with a main "title". You may be wondering why that is important in this case or what that title would even be. It is important because if anyone is using a screen reader, the reader looks for an<h1>to alert the user as to the subject. In this case there is not<h1>needed on the card, but you can list one anyway. You could use something like "Frontend Mentor QR Code," or something like that. But what about it messing with your layout and formatting, not to mention the fact that it doesn't even exist as part of the design. Well... you have to hide the<h1>, that is, make it invisible and take it out of the flow. There are several ways to do this, but here are a couple:- Set the display property to
display: none;. This will take it out of the flow and make it invisible to the eye, but not to a screen reader. - Some people set
position: absolute;and then put the height and width to a single pixel, and then position it way off the page (like `left: -3000px).
- Set the display property to
Again, I want to reiterate how proud you should be of your first solution. No doubt these small issues will clean up very quickly on future challenges. I can't wait to see how well you do on the next one. I wish you the best of luck!
Happy coding!
Jeff
0 - I did notice that the comparison images seem to be a bit off, but sometimes it is difficult to tell if it is the screenshot resolution or a genuine difference. I do notice a spacing/font issue with your
Please log in to post a comment
Log in with GitHub
Join 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