Skip to content
Submitted over 2 years ago

QR Code component using Flexbox

P
Abilio de Assis•40
@abilioassis
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I had doubts whether I should use the <article> semantic HTML tag to encapsulate the QR Code component.

After reading this article I was sure I was in the right direction.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article

Does anyone have a different opinion?

Code

Please log in to post a comment

Log in

Community feedback

  • Melvin Aguilar 🧑🏻‍💻•61,020
    @MelvinAguilar

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

    I like this solution for the challenge. I have some suggestions you might consider to improve your code:

    • 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. You can read more about this problem here.
    • 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.
    • As far as I am concerned, you have used the article tag well. However, it is also possible to remove your current main element and place all its styles directly in the body element. This would be better in terms of a component, since the background be applied directly to the body element.
    <body>
   <main class="component">
      <img />
      <h1> . . . </h1>
      <p> . . . </p>
   </main>
<body>

    And:

    body {
    background: var(--bg-color);
    min-height: 100vh; /* Use min-height instead of `height`. This property lets you set a height and let the element grow even more if necessary.*/
    width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

    Please don't worry if your suggestions are long, they are just details. In the end, the project is well done 👏. Hope you find those tips helpful! 👍

    Good job, and happy coding! 😁

    Marked as helpful

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