Frontend Mentor | First Challenge, QR page coding challenge solution

Melvin Aguilar 🧑🏻‍💻• 61,220

@MelvinAguilar

Posted 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 alt attribute. The alt attribute should explain its purpose. e.g. QR code to frontendmentor.io

CSS 🎨:

Instead of using pixels in font-size, use relative units like em or rem. The font-size in absolute units like pixels does not scale with the user's browser settings. Resource 📘.

Use min-height: 100vh instead of height. Setting the height to 100vh may result in the component being cut off on smaller screens, such as a mobile phone in landscape orientation.

screenshot-imgur (landscape mode)📸

I hope you find it useful! 😄 Above all, the solution you submitted is great!

Happy coding!

Jeff Guleserian• 480

@jguleserian

Posted 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).

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

First Challenge, QR page

Design comparison

Community feedback

Please log in to post a comment

Join our Discord community