Skip to content
Submitted about 2 years ago

QR code using sass, vite, flex and grid

peninoule•80
@peninoule
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

Hello,

I'm kinda new to the css game. I've looked at some best practices to start off as clean as possible.

I tried building this projet using the "BEM" methodology as well as the "7-1" Sass project organization.

Feel free to let me know what I did wrong with my classes, variables, folders and files organizations, stuff like that.

On the technical aspect, I had some trouble sizing my image. I tried a lot of combination with max-content, min-content, fit-content etc... But no luck.

In the end what worked for me was to wrap everything inside another flexbox. The sizing now seems pretty accurate, yet I am not sure as to why ^^'

Thanks a lot for your feedbacks Cheers, peninoule

Community feedback

  • Real uNondaba•90
    @NondabaPosted about 2 years ago

    Hi Peninoule. Congrats on finishing the challenge and great work. You need to have main tag as a container for your HTML that way there will be no accessibility issues. I hope this helps🙂.

    1
    peninoule•80
    @peninoulePosted about 2 years ago

    Hi Nondaba, thanks for the feedback :)

    I indeed saw the accessibility issue on the report, wasn't aware of it but I'm sure gonna take it into account from now on!

    0
    Real uNondaba•90
    @NondabaPosted about 2 years ago

    @peninoule, you are welcome and keep up the good work.

    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