Frontend Mentor | QR-code-component coding challenge solution

Community feedback

@vintech05

Posted about 1 year ago

As I become familiar with flexbox and grid, I constantly wonder if I'm using too many divs or not enough?

very nice! it was easy to read since the div usage is very efficient and straightforward

This one was pretty straightforward, but am curious if my html organization falls under 'best practice'? Either way, how can I improve?

there is no perfect way to structure your html but one thing for sure:

<body>
<main>


</main>
</body>

do not forget the 'semantics' structuring for HTML. that way, the browser can easily identify or read your web. divs can be tempting because of its versatility but you have to make sure your web can be more readable for users.

semantic HTML

hope this helps.

Marked as helpful

SooperChiller• 60

@SoopChiller

Posted about 1 year ago

Thank you! @vintech05

Aimal Khan• 2,260

@Aimal-125

Posted about 1 year ago

For best practice and accessibility, use:- <main> tag and put your main content in it. For responsifying your card, use:- media query with max-height: 400px; and give body element height of 120 or 150vh for small screens as the top part of your card is not visible on my mobile (360 × 511 pixels)

SooperChiller• 60

@SoopChiller

Posted about 1 year ago

Thank you for your feedback! Couple of follow up questions.

Is giving body element height of 120 or 150vh something I should do for all projects or just smaller ones?
I'm not familiar with media query quite yet. Was curious how it works with max-height?

Thanks! @Aimal-125

Fluffy Kas• 7,735

@FluffyKas

Posted about 1 year ago

@SoopChiller

Hi,

Giving elements a random number like 120-150vh as height is not a good idea. If you need to define any height (like on the body, for centering your card), make it a min-height: 100vh, that's all you need. Most of the time you won't even need to do this one, as you will rarely be centering single elements vertically.

As you yourself said, this challenge is really straightforward, there isn't much else to look out for, in regards of responsiveness.

If you'd like to further improve on it, perhaps look into using relative units for font sizing and paddings/margins.

Other than this, your solution looks great! :)

Marked as helpful

Aimal Khan• 2,260

@Aimal-125

Posted about 1 year ago

If you are using firefox press ctrl+shift+M and in responsive mode see for different screen sizes and orientations and observe, if you feel necessary and if min-height is not working then you can give height 120 or 150vh or any number that can increase view-port height of the container. But give these heights such as 120 or 150vh using media queries for small heighted screens. For desktop versions it's not necessary. @SoopChiller

Marked as helpful

QR-code-component

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community