QR code solution using flexbox and basic css.

Community feedback

• 

  T

  Grace•31,230

  @grace-snowPosted 12 months ago

  Overall this is really good. There's just a few suggestions for improvement and one critical issue you need to fix

  1. The image should ideally have slightly more meaningful alt text like "QR code to FrontendMentor.io"
  2. It's less performant to load the css reset as a separate file
  3. The order of the css is very strange in this. On larger projects you definitely won't want repeating selectors in different places. Usually it's reset, base styles, fonts, then component by component
  4. Avoid complex css selectors or wildcard selectors unless they are absolutely necessary. Eg instead of .qr-container > * you can place text center higher in the DOM and it would be inherited anyway. Complex css selectors increase specificity making the styles harder to manage, especially on large projects. And wildcard selectors are poor for browser performance so should be used sparingly
  5. This is the big critical bug that is essential to change. NEVER change the font size on :root or html, and never set font size in pixels anywhere. That one line of CSS means this fails minimum accessibility standards. Read more here

  Marked as helpful

  2

  ---

  

  P

  jumiranda5•280

  @jumiranda5Posted 12 months ago

  Thanks a lot, Grace! I thought I had to set the root font size... but now I see I was completly wrong. I'll do my best to apply all of this on the next challenge. (Actually, I'll fix this before moving to the next) @grace-snow

  0

  

  P

  jumiranda5•280

  @jumiranda5Posted 12 months ago

  I've just finished refactoring the css and improving the qr code alt text as you suggested. Thanks again! @grace-snow

  0
• 

  ARMoretech•90

  @ARMoretechPosted 12 months ago

  A very good solution looks exactly like the sample. Good job

  0

  ---

  

  P

  jumiranda5•280

  @jumiranda5Posted 12 months ago

  Thanks! :) @ARMoretech

  0