Skip to content
Submitted over 2 years ago

QR Card with HTML5, SASS, and BEM

Alessandra•10
@ASemeraro
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

Please, check my 'main' branch for the code.

  • I'm pretty sure I failed in making the site accessible. I would love any feedback on accessibility, since it's something I haven't explored yet.
  • If you go to my index.html, do you think I managed to follow the BEM naming convention? I would really like to incorporate it in my practice.
  • As for the rest, I would appreciate any kind of feedback 😀.

PS: I'm aware this is a small project and setting up SASS took more time. But I feel like I can experiment more with smaller projects 😅.

Community feedback

  • Grace•31,270
    @grace-snowPosted over 2 years ago

    Hi

    You don't need a section in this, just make that the main tag. Sections when unlabelled just act like divs, they are not navigable landmarks.

    I also recommend changing the alt text on that img. It is a QR code yes but say where it's going "QR code to [Web address]". This is much more valuable content.

    I hope this is helpful

    Marked as helpful
    1
    Grace•31,270
    @grace-snowPosted over 2 years ago

    I've just had a look at your solution and there are some small bugs viewed on mobile. I've checked the code and there are some important learning points that will fix these

    1. Attribution is overlapping the card content on mobile. I recommend against having this position absolute - that will always cause this problem.

    2. The card is touching screen edges - it should not have an exact width, only max width (and width 100% of you like). Then, as long as it has a little margin or its wrapping element (eg body) has some padding, the component won't hit screen edges. It will grow up until the point of the design but will also become narrower if/when needed.

    3. Related, the card should not have a max height. There is no need at all for this. Let the height be determined by the content within + any internal spacing. If I change text size as you have it now, content will overflow out of the card.

    Marked as helpful
    1
    Alessandra•10
    @ASemeraroPosted over 2 years ago

    @grace-snow Thank you so much! This is an extremely detailed feedback! Today I will iterate on it and fix it.

    0
  • Kylee Bustamante•90
    @kyleebustamantePosted over 2 years ago

    I'm inspired by the fact that you used this simple project to learn beyond what it asked for! I think your solution looks nearly perfect. Great job! Fixing your accessibility issues is pretty simple. It can be resolved by wrapping your main content in <main></main> tags. In your case it would just be the card section above the footer.

    <main>
<section class="card">
</section>
</main>
<footer> 
and so on...
    Marked as helpful
    1
    Alessandra•10
    @ASemeraroPosted over 2 years ago

    @kyleebustamante Thank you so much! In the end I might have tried too many new things at once and ended up making several mistakes haha 😅 I'll work on it more today to fix the problems.

    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