Frontend Mentor | QR code page using flexbox coding challenge solution

Community feedback

Melvin Aguilar 🧑🏻‍💻• 61,460

@MelvinAguilar

Posted over 1 year ago

Hi @ClassyKMR 👋, good job completing this challenge, and welcome to the Frontend Mentor Community! 🎉

I have some suggestions you might consider to improve your code:

Use the <main> tag to wrap all the main content in your solution instead of using <div class="block">.

To make alternative texts more worthwhile, add descriptive text to the alt attribute of the QR image to explain what the QR image does. Upon scanning the QR code, you will be redirected to the frontendmentor.io website, so an example of alternative text would be "QR code to frontendmentor.io". You can read more about alternative text here.

Instead of using pixels in font size, use relative units of measure like rem or em. The font size in absolute length units (px) does not allow users with limited vision to change the text size in some browsers. Reference.

Use an h1 tag for your solution. The <h1> element is the main heading on a webpage, also, there should only be one <h1> tag per page.

<h1 class=". . .">Improve your front-end skills by building projects</h1>

I hope those tips will help you! 👍

Good job, and happy coding! 😁

Marked as helpful

ClassyKMR• 10

@ClassyKMR

Posted over 1 year ago

@MelvinAguilar Thank you for your feedback! It was very useful and I applied all your suggestions to my project. I hope that you will also leave some feedback on my future projects!

PhoenixDev22• 16,990

@PhoenixDev22

Posted over 1 year ago

hello ClassyKMR,

Congratulation on completing your first frontend mentor challenge. I have some suggestions regarding your solution if you don't mind:

You should use <main> landmark to wrap the main body content as HTML5 landmark elements are used to improve navigation experience on your site for users of assistive technology.

In my opinion, the image is an important content. The alternate text is needed on this image. The alternate text should indicate where the Qr code navigate the user : like QR code to frontendmentor.io not describes the image.

Page should contain <h1>. In this challenge to tackle the accessibility issue, you may use<h1> visually hidden with class=”sr-only”. You can find it here. Then you can use <h2> instead of p class="block__text block__text--heading" as you should have used header ( typography ) to emphasize primary information in the card.

In order to center the card on the middle of the page , you can use the flexbox properties and min-height: 100vh for the <body> add a little padding to the body that way it stops the card from hitting the edges of the browser. Remove those CSS from the html.

width: 280px;an explicit width is not a good way to have responsive layout . Consider using max-width to the card in rem.

Consider using rem for font size , it' not recommended to use px for font size as absolute units don’t scale for example 15px will always be 15px on the same device. Using pixels is a particularly bad practice for font sizing because it can create some accessibility problems for users with vision impairments.

Remember a modern css reset on every project that make all browsers display elements the same.

Aside these, great job. Hopefully this feedback helps.

Marked as helpful

ClassyKMR• 10

@ClassyKMR

Posted over 1 year ago

@PhoenixDev22 Thank you for your feedback! It was very useful and I applied all your suggestions to my project. I hope that you will also leave some feedback on my future projects!

PhoenixDev22• 16,990

@PhoenixDev22

Posted over 1 year ago

@ClassyKMR Glad to hear that it was helpful. Happy coding!

QR code page using flexbox

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community