Skip to content
Submitted over 1 year ago

QR-code-component

SooperChiller•60
@SoopChiller
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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

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

Any feed back is always appreciated. Thanks!

Community feedback

  • vintech05•370
    @vintech05Posted over 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
    1
    SooperChiller•60
    @SoopChillerPosted over 1 year ago

    Thank you! @vintech05

    0
  • Aimal Khan•2,260
    @Aimal-125Posted over 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)

    1
    SooperChiller•60
    @SoopChillerPosted over 1 year ago

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

    1. Is giving body element height of 120 or 150vh something I should do for all projects or just smaller ones?

    2. I'm not familiar with media query quite yet. Was curious how it works with max-height?

    Thanks! @Aimal-125

    0
    Fluffy Kas•7,715
    @FluffyKasPosted over 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
    0
    Aimal Khan•2,260
    @Aimal-125Posted over 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
    0

Please log in to post a comment

Log in with GitHub

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