Skip to content
Submitted over 3 years ago

QR Code Component

Roy•195
@royschrauwen
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hello everyone! 👋

Today I completed another Frontend Mentor Challenge. I am doing the #100DaysOfCode and today I wanted to do some Frontend. I only had to use some HTML and CSS for this solution , so it was a quick and fun excersise. I used a Mobile-First approach and later tried to adapt the styling to a Desktop view. Because the card had the same look on both devices, I only had to change a couple of lines.

❓️ Question I now gave the main (/card) a max-width in rem. Is there a better solution to make the card desktop-friendly?

I would much like to become a better developer, so any advice you can give me is very welcome, also if it does not regard my specific question.

Have a nice day! 🙋‍♂️

Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • Naveen Gumaste•10,420
    @NaveenGumaste

    Hay ! Good Job Roy you are a pro user so your solution is nearly pixel perfect!

    These below mentioned tricks will help you remove any Accessibility Issues

    -> Add Main tag with class after body like it should be your container. For 1st heading or h1 tag, use header tag and then inside the header put your h1 or h2 etc . But use header tag only once in main heading element.

    Keep up the good work!

    Marked as helpful
  • Travolgi 🍕•31,300
    @denielden

    Hi Roy, the approach you used is great!

    Only thing, rather than using the main tag and associating the properties for the body of the card I would create an internal div with a dedicated class.

    Hope this help and 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