Skip to content
Submitted 6 months ago

QR-code challenge html css animista

animation
DrMetr•300
@DrMetr
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

Solving this challenge was supposed to be a training of flexbox property usage. I added a gradient transition and a little animation using Animista CSS library, to my taste.

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

I didn't manage to make the design responsive the way it should have been.

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

Sizes of blocks and making them properly responsive - that's a puzzle for me.

Code

Please log in to post a comment

Log in

Community feedback

  • Bhuvnesh Upadhayay•2,120
    @bhuvi819381

    Code Review Feedback

    Hello,

    I just checked your solution, and it looks good but seems a bit oversized. Here are a few suggestions to improve it:

    1. Use the Pixel Perfect Chrome extension
      Install the Pixel Perfect extension by Well Done to help refine and align your design accurately.

    2. Avoid using 15vh in the <body>
      This is unnecessary and can create inconsistencies. Consider removing it for better results.

    3. Incorporate semantic tags
      Use tags like <header>, <main>, <section>, and <footer> to improve structure, accessibility, and maintainability of your code.

    These changes will make your solution more polished and efficient. Keep up the good work!

    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