Skip to content
Submitted 5 months ago

QR code using HTML and CSS

Vinny_A•50
@Eye0001
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 of using Flexbox to complete this challenge. I will make sure to use Flexbox in the future for different challenges.

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

The biggest challenge I faced was figuring out what Flexbox properties to use, I overcame this by trial and error and using alternative sites to aid me.

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

My biggest issue was with Flexbox, so I would greatly appreciate it if anyone had any useful sites to help me practice. :)

Community feedback

  • Rupali•780
    @rupali317Posted 5 months ago

    Hello @Eye0001

    Congratulations on completing your first challenge. You have made a commendable effort in documenting your README, which is an excellent practice for reinforcing your learning. Great attempt at using Flexbox!

    For your question on flexbox topic, I suggest you go through the following links:

    I also have some feedback on your code:

    1. You should not use px especially for font-size as it is not good for accessibility. Users who rely on bigger font will change their font settings to a larger one via their browser. Since you have used px, the font size will not scale to a larger one. Rem will allow you to scale the font size. Rule of thumb: Use rem instead of px for font size

    2. Use CSS reset in your project. Different browsers can have their own default stylings. CSS reset removes all those default stylings and provides a consistent starting point for your stylings. You can take inspiration from CSS reset example

    3. It's good that you used <link href="https://fonts.googleapis.com/css?family=Outfit:400,700" rel="stylesheet"> for loading fonts. While this method offers an easier setup, consider downloading the fonts in your project and using @font-face if you want more control over performance.

    Marked as helpful
    1
    Vinny_A•50
    @Eye0001Posted 5 months ago

    Thanks for the detailed response @rupali317. I appreciate your feedback and will use these suggestions in my future projects.

    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