Skip to content
Submitted almost 3 years ago

QR Code Component

Royā€¢195
@royschrauwen
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

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! šŸ™‹ā€ā™‚ļø

Community feedback

  • Naveen Gumasteā€¢10,480
    @NaveenGumastePosted almost 3 years ago

    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
    1
    Royā€¢195
    @royschrauwenPosted almost 3 years ago

    @Crazimonk Thanks for the advice! I put the most important text, which had a class of header, inside a h1 now.

    1
  • Travolgi šŸ•ā€¢31,400
    @denieldenPosted almost 3 years ago

    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
    1
    Royā€¢195
    @royschrauwenPosted almost 3 years ago

    @denielden Thank you for your feedback! Would you recommend removing the main tag altogether or putting the card-div inside the main tag?

    1
    Travolgi šŸ•ā€¢31,400
    @denieldenPosted almost 3 years ago

    @royschrauwen put the card-div inside the main tag ;)

    Marked as helpful
    1

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