Skip to content
Submitted over 2 years ago

QR code component using flexbox

Felix Pherry•40
@felix123136
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

What's the best practices for this challenge?

Community feedback

  • James•340
    @james-work-accountPosted over 2 years ago

    A great start! Some things which would be good to change:

    • Remove the margin on your <body> element to avoid unnecessary vertical scroll. Related: it would be worth looking up a good CSS reset as general "good thing to do when starting a new project", e.g. https://piccalil.li/blog/a-modern-css-reset/ .
    • Change height: 100vh to min-height: 100vh. You don't want to set explicit heights on things since height of an element should be decided by its contents. However if you want something to be "at least X height", use min-height. In this challenge it doesn't matter too much since the component is small, but it's a good habit to get into early.
    • It's great that you've used a <main> element! Something to consider would be to change <div class="attribution"> to <footer class="attribution">`, since a footer is a landmark and your footer is outside your main element. It's all about using the correct semantic element, and this will fix your remaining Accessibility Issue.
    • Consider moving away from px for widths/heights/font-sizes/etc and switching to using rem for this. There are a few articles explaining why you'd want to do this (e.g. this one) - there are online px-to-rem converters if you want to make your life easier.
    • Style on classes not ids (e.g. add a .card class to your #card element and style with the class not the id). A general rule of thumb is that classes should be reserved for styling and ids should be used for things like linking up inputs with labels, making something selectable with javascript, making hyperlinks on a page, etc.

    Some stylistic things to consider:

    • Instead of having a percentage width on your image, leave it at 100% and rely on padding (using rem) to shrink it. Not a major thing, just something to think about (leaving widths alone and using padding/margins/flex/whatever to influence size).
    • I guess you could link to your GitHub or Frontend Mentor profile in your attribution (it currently just links to #).

    Overall though, this is a really solid submission. Keep it up!

    0
  • Mukul Vashishth•10
    @MukulVashishthPosted over 2 years ago

    Hey Felix , really liked your solution man. I recently completed this challenge and I don't think there are any best practices specifically as long as we are keeping our structure and design code separated. Cheers man!

    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