Frontend Mentor | QR code component using HTML and CSS coding challenge solution

Community feedback

@husamasaad

Posted almost 2 years ago

Well done.. congrats on completing your first challenge, I love that you use rem in most of your code and that is great.

just a little tip : try making the h1 font size a little smaller (maybe 1.4 rem would be great) and increase the top margin a little bit more in the paragraph.

then work a little bit more on making it more responsive

good luck on your journey

Marked as helpful

Richmond• 10

@Richie-Alpha

Posted almost 2 years ago

@husamasaad Thanks for the tip. I will improve the next time

Melvin Aguilar 🧑🏻‍💻• 61,220

@MelvinAguilar

Posted almost 2 years ago

Hi @Richie-Alpha 👋, good job for completing this challenge and welcome to the Frontend Mentor Community! 🎉

Here are some suggestions to improve your code:

The color of the paragraph element is unreadable because it is too light compared to its background, change the color to hsl(220deg, 15%, 55%) for example.
Try to use semantic tags in your code. More information here:

With semantic tags:

<body>
   <main class="component">
      . . .
   </main>
<body>

The container is not center. You can use flexbox to center things

body {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

And remove margin: 6rem auto; from the .component selector

More information: A Complete Guide to Flexbox (CSS-Tricks) | How TO - Center Elements Vertically (W3Schools) |

Add descriptive text in the alt attribute of the images, the text should describe the image, The alt attribute enable screen readers to read the information about on-page images and will be displayed instead if an image file cannot load

I hope those tips will help you.

Good Job and happy coding !

Marked as helpful

Richmond• 10

@Richie-Alpha

Posted almost 2 years ago

@MelvinAguilar Thanks for the tips. I will be sure to improve the next time and i hope you will continue to correct me if get anything goes wrong

QR code component using HTML and CSS

Design comparison

Community feedback

Please log in to post a comment

Join our Discord community