Skip to content
Submitted over 1 year ago

CSS Grid & Flexbox Frontend Mentor QR Code Card

Ozzy-codes•130
@Ozzy-codes
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

Hey y'all,

I would appreciate if you could take a look at my code for feedback! What best practices have you come across that I'm missing?

I'm especially interested in:

  • What tools or resources are you using to ensure your projects are accessible?
  • How would you use the CSS property object-fit in this project, and what are your best use cases of this property?
  • I've seen a lot of mention of the CSS methodology BEM, and not much of other methodologies on this site, is this method an industry best practice?

Care to see how I approached this project? Take a look at my README

Community feedback

  • visualdennis•8,375
    @visualdennissPosted over 1 year ago

    Hey there,

    good work with the card! Looks pretty nice and close to the design.

    An object-fit shouldn't be necessary at all for this challenge. All you need is a max-width for the box or the img. Rest should be good by itself.

    BEM is very common, but there are some more methodologies. There are many approaches actually. You can find an article about that here: https://daverupert.com/2022/08/modern-alternatives-to-bem/

    Finally, as for best practice, try to avoid px, but use rem/em whenever possible for more responsiveness + accessibility.

    Bonus: A major resource for the accessibility: https://www.a11yproject.com/

    Hope you find this feedback helpful!

    Marked as helpful
    1
    Ozzy-codes•130
    @Ozzy-codesPosted over 1 year ago

    @visualdenniss Word! I didn't realize rem/em was interconnected to accessibility. Appreciate your review.

    0
  • Snow•100
    @LuanS0Posted over 1 year ago

    Hey there... What's up?

    My name is Luan Souza and I liked his work. But, I have something to add...

    1. I recommend creating a separate CSS file where it may be possible to establish more readable semantics.
    2. Try using display flex (justify-content and align-items) to center the card in the center of the image.

    I hope I helped... See you later.

    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