QR Code Component using Flexbox

Community feedback

• 

  Chermann KING•430

  @Chermann-KINGPosted over 1 year ago

  Hey @CalebeRL, Congratulations on completing this challenge!

  Your solution its almost done and I’ve some tips to help you to improve it:

  In the body{ } you can put your general font-family rather than on the *{ } (which implies an absolute field of action).

  If you want to reset some elements you can do it with *{ } and choose the elements to reset. Here, your CSS reset is not effective for this project, to optimize it you will have to add elements. Here are some links that address the issue: Link 1 , Link 2 , Link 3

  Why give a class to your image knowing that in the project, it's the only one that exists and that to select it in CSS you'll just have to to call its img tag. Again a question of accessibility but also of specificity.

  As for your h1. For a reason of accessibility the search engine that indexes this page knows that the h1 is the highest heading so it is identified by default. So by default it is identified as a high level heading as a title. If you had put your title in a span or a div, then you would have to add an attribute role="title".

  The size of your image will never take 90% (90vw) of the width of the screen because you have set a max-width: 310px for your card. In this case you have to set it to 100% of the width of the card.

  Use relative units like rem or em which is much better than px to improve performance when resizing fonts between different screens and devices. In your case, you use both rem and px, which is not recommended in terms of accessibility.

  Instead of a simple div to display the copyright notices you can either put as an attribute to that <div role="footer"></div> or use the semantic tag dedicated for that which is <footer></footer>

  Psss: Include only elements that your project will need in the reset to avoid loading your code.

  Make it Work, Make it Clean.

  Here's my solution for this challenge if you wants to see how I build it.

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  0

  ---

  

  Calebe•150

  @CalebeRLPosted over 1 year ago

  @Chermann-KING Thank you for the tips!

  0

  

  Chermann KING•430

  @Chermann-KINGPosted over 1 year ago

  @CalebeRL my pleasure😉

  0