Submitted almost 2 years ago

Responsive QR code card component using flexbox

Muhammad tehseen• 340

@tehseen01

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

QR code component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

feedback welcome in advance

Community feedback

Melvin Aguilar 🧑🏻‍💻• 61,220

@MelvinAguilar

Posted almost 2 years ago

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

Here are some suggestions you might consider:

It's recommended to use the semantic tag main. Click here for more information.:

With semantic tags:

<body>
   <main>
      <article class="container">
         . . .
      </article>
   </main>
<body>

Centering the element with position would make your element behave strangely on some mobile devices. There are two modern CSS techniques to center elements instead of using the position property:

Using flexbox layout:

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

Using grid layout:

body {
   width: 100%;
   min-height: 100vh;
   display: grid;
   place-content: center;
}

Links with more information:

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.

I hope those tips will help you.

Good job, and happy coding!

Marked as helpful

Vanza Setia• 27,795

@vanzasetia

Posted almost 2 years ago

Hi there! 👋

Congratulations on completing your first Frontend Mentor challenge! 🎉

Here are some suggestions for improvements.

The alternative text of the QR code should not be hyphenated (like code).
Also, it should not contain the word "image". The semantic meaning of the img element is already enough.
I recommend taking a look at "Quick tip: Using alt text properly - The A11Y Project".
Use the body element as the main element or the page for the website. So, there's no need to style the html element.
It's best to not style html element because it can overwrite the user's setting.
Currently, only the body element has box-sizing: border-box. If you want to make all elements have that behavior, use a universal selector instead.
To place the card in the center of the page, I recommend using flexbox or grid. These modern techniques are more robust than absolute positioning and require less code to implement.

I have three recommended videos. The first one tells how hard HTML is (HTML is not easy). The other two talk about modern CSS techniques and approaches.

I hope this helps! Happy coding!

Marked as helpful

Please log in to post a comment

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