Skip to content
Submitted almost 3 years ago

QR code component - HTML & CSS

Darrick Fauvel•490
@DarrickFauvel
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

What are you most proud of, and what would you do differently next time?

I am most proud that I got the solution to be an identical replication of the original design.

What challenges did you encounter, and how did you overcome them?

I did not want to use px unit font sizing, so I tried implementing relative font sizing using rem units. The results are accurate to the design.

What specific areas of your project would you like help with?

I would like feedback on making it more responsive for larger screens and introducing some animation effects.

Community feedback

  • Kacper Kwinta•1,405
    @kacperkwintaPosted almost 3 years ago

    Hi :)

    Looks nice

    If you want to fix these accessibility issues, create <main> element and wrap all other into this 👍

    Marked as helpful
    1
    Darrick Fauvel•490
    @DarrickFauvelPosted almost 3 years ago

    @kacperkwinta Thanks so much for checking out my solution. I really appreciate it.

    So, I am using the semantic elements <main> and <footer> in my code. I'm sure there is much more to do for accessibility. Is there a tool to check accessibility and make suggestions?

    EDIT: Oops! I just noticed the accessibility report on this page. I guess that may answer my question.

    1
    Darrick Fauvel•490
    @DarrickFauvelPosted almost 3 years ago

    @kacperkwinta No accessibility issues reported now! 🥳 Thank you. 👍

    1
  • Web Wizard•5,690
    @rsrclabPosted almost 3 years ago

    Hi, @DarrickFauvel ~

    Congratulate on your solution to the challenge on FM platform. I have studied your work carefully and learned a lot from it.

    The only thing I like to recommend is to add max-width: 100% on card element, so that it won't goes over screen width on smaller devices.

    Cheers ~

    Marked as helpful
    0
    Darrick Fauvel•490
    @DarrickFauvelPosted almost 3 years ago

    @tymren608 Wow. I thought I was just posting into the void. Thank you so much for looking at it and providing feedback. This is my first posted solution.

    So, when I implement max-width: 100% on the .card element, it expands without the max-width: 32rem constraint. Is there a better way to constrain it to the size of the design?

    0
    Web Wizard•5,690
    @rsrclabPosted almost 3 years ago

    @DarrickFauvel ~

    You can use media query to reclaim max-width of the element.

    Cheers!

    0

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