Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

QR code using HTML and CSS

Vinny_A 50

@Eye0001

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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

P
Rupali 780

@rupali317

Posted

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

@Eye0001

Posted

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
Discord logo

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