Skip to content
Submitted almost 3 years ago

QR code component

Mikołaj Kasperkiewicz•70
@PanMikolaj
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

If u want to, You can point out some stupid mistakes and overworking. I did it with flexboxes because I thought it would be easy, but i know for sure that someone probably done it even easier.

Community feedback

  • Travolgi 🍕•31,400
    @denieldenPosted almost 3 years ago

    Hi RudyNieRadosny, I took some time to look at your solution and you did a great job!

    Also I have some tips for improving your code:

    • add main tag and wrap the card for Accessibility
    • add descriptive text in the alt attribute of the image
    • remove all unnecessary code, the less you write the better as well as being clearer: div with image class is superfluous
    • add padding: 2rem to container class

    Overall you did well :)

    Hope this help and happy coding!

    Marked as helpful
    1
    Mikołaj Kasperkiewicz•70
    @PanMikolajPosted over 2 years ago

    @denielden Thanks for advice. I've changed some code.

    1
  • Naveen Gumaste•10,480
    @NaveenGumastePosted almost 3 years ago

    Hello RudyNieRadosny ! Congo 👏 on completing this challenge

    Let's look at some of your issues, shall we:

    • Add Main tag after body
    <body>
<main class="container">
*all you content here*
</main>
</body>
    • You have to use heading tag in Order for ex: use h1 first and then h2, h3 and so on

    Using height and max-height did not make sense to me can you explain why you used

        height: 90vh;
    max-width: 50vh;
    max-height: 90vh;

    happy Coding😀

    Marked as helpful
    1
    Mikołaj Kasperkiewicz•70
    @PanMikolajPosted over 2 years ago

    @Crazimonk Thanks for advice. I've deleted unnecessary css.

    1
  • Hexer•3,660
    @EmmanuelHexerPosted almost 3 years ago

    Congratulations on completing this challenge Rudynieradosny.

    I have some tips to fix accessiblity issues:

    • wrap your card in a main element to fix accessibility issues. Just place the main element after the body element and them move the content in.

    i hope this is helpful and goodluck!

    Marked as helpful
    1
    Mikołaj Kasperkiewicz•70
    @PanMikolajPosted over 2 years ago

    @Phalcin Thanks for advice. I've changed some code.

    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