Skip to content
Submitted about 3 years ago

QR code component solution

Dan Bennett•60
@inkfromblood
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What I found difficult: Figuring out how to fit the QR code into the container .div effectively. Turned out to be as simple as setting the width to 100%.

What I'm unsure of: That this approach was the most efficient way of achieving this. When to use px or when the rem.

I edited the footer links to have a hover state of white, but wanted to change the visited color from purple to blue, however when I changed the visited state it removed the hover state. I'm unsure of how to make this happen.

Code

Please log in to post a comment

Log in

Community feedback

  • Zsofia Dalnoki-Papp•210
    @dalnoki

    Hey @inkfromblood,

    Congrats on your first solution!

    About the px/rem debate: this article sums it up in great detail, and it helped me understand the best practices: https://engageinteractive.co.uk/blog/em-vs-rem-vs-px

    I usually convert all of my px values to rems, except for the 1px values :)

    I hope it helps!

    Marked as helpful
  • Mo•840
    @MohamedAridah

    Hello @inkfromblood, congratulation on submitting your first solution🎉👏.

    Yes giving the QR code image max-width: 100% is totally right since this will make the image to take the full width and never overflow it.

    I have also some notes for you:

    • use font-family: 'Outfit', sans-serif globally instead of redeclare every time:
    body {
    font-family: 'Outfit', sans-serif;
}

    • instead of using <h2> heading level for the text you can just use <p> element since this text is not a heading. This will fix your Accessibility Issues

    • use <footer> instead of .attribution div it's more HTML Semantic. Also This will fix your Accessibility Issues

    • This challenge Doesn't has nay links so you can Remove styles of the <a> tag since it's useless.

    • you can see My solution for this challenge it may be helpful for you..!

    I hope this wasn't too long for you, hoping also it was useful😍.

    Goodbye and have a nice day.

    Keep 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