Skip to content
Submitted about 1 year ago

QR Code Component

Ermiyas Tilahun•60
@Erma-T
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

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!

Code

Please log in to post a comment

Log in

Community feedback

  • Grace•32,130
    @grace-snow

    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
  • Gwenaël Magnenat•1,540
    @gmagnenat

    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

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