Skip to content
Submitted 6 months ago

QR Code Component

Ermiyas Tilahun•60
@Erma-T
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 are you most proud of, and what would you do differently next time?

I am proud to start since always it is the first step that is the most difficult one. Next time I will continue my exercise and also try challenges from other difficulty levels.

What challenges did you encounter, and how did you overcome them?

Since it is a beginner-level challenge, I didn't face any challenges in the coding part. The main challenge tho was in the organization of the solution. Like organizing it on GitHub and submitting it here. I planned to submit all the challenges from Frontend mentor as a directory in a single repo but as per a comment from Discord, I set up each single challenge in its own respective repos.

What specific areas of your project would you like help with?

For now, none!

Community feedback

  • Grace•31,270
    @grace-snowPosted 5 months ago

    Some important HTML points in this, and CSS.

    • Decorative svgs must be aria-hidden and all inline svgs must be focusable="false".
    • The results list should be a list.
    • The explicit width of the results circle plus large padding is causing a reflow failure. There is some horizontal scroll when there shouldn't be at some screen sizes/zoom levels. If you use max-width: 12rem; width:100%; on the circle that should fix it.
    • Usually side padding will match on left and right e.g. in mobile view but in yours the top section looks narrower.
    Marked as helpful
    0
    Ermiyas Tilahun•60
    @Erma-TPosted 5 months ago

    @grace-snow Thank you for the valuable comments and I will correct the design accordingly!

    0
  • Gwenaël Magnenat•1,290
    @gmagnenatPosted 6 months ago

    Hi, congrats on completing this challenge 🎉

    By reviewing your code I notice that you don't use any css resets. I highly recommend using a modern css reset, it will set strong default styling that will make your life much easier to achieve pixel perfect results.

    You can check these two options

    Josh W Comeau's css reset or Andy Bell's css reset

    As a challenge maybe you can try to get your solution closer to the original design?

    A few points that could be tweaked :

    • padding is to large
    • attributions shouldn't be in the card
    • the box shadow need to be softer and larger
    • the width of the card is to large

    Let me know if you update your code and want me to check it back.

    In the meantime, happy coding ! ✌️

    Marked as helpful
    0
    Ermiyas Tilahun•60
    @Erma-TPosted 6 months ago

    @gmagnenat Thank you very much. All your comments are valid and I will take them and correct my design accordingly.

    1
    Gwenaël Magnenat•1,290
    @gmagnenatPosted 6 months ago

    @Erma-T Awesome, i'm happy you found it useful.

    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