QR Code Component Solution

Community feedback

• 

  バレンタイン 😈•64,190

  @VCaramesPosted almost 2 years ago

  Hey there! 👋 Here are some suggestions to help improve your code:

  • the picture element is not needed for this challenge since there is only one image that is use for every breakpoint.

  • The alt tag description for the “QR image” needs to be improved upon. Its needs to tell screen reader users what it is and where it will take them to when they scan it

  • Add the font-family: 'Outfit', sans-serif; to the .container to avoid code repetition.

  • Remove max-width: 23.5rem; from the image, it is not needed.

  If you have any questions or need further clarification, feel free to reach out to me.

  Happy Coding!🎄🎁

  Marked as helpful

  1
• 

  kml•180

  @kmlsonPosted almost 2 years ago

  For simplyfy your calculations you can use

  html {
  font-size:62.5%; 
  }
  

  1 rem =10px

  1

  ---

  

  バレンタイン 😈•64,190

  @VCaramesPosted almost 2 years ago

  @kmlson

  Never do this. This is bad practice. As it will cause more problems than fix.

  0

  

  kml•180

  @kmlsonPosted almost 2 years ago

  @vcarames can you give me some example why this is wrong or give some resources where I can read more about that ?

  0

  

  バレンタイン 😈•64,190

  @VCaramesPosted almost 2 years ago

  @kmlson

  For personal projects, where you are the only person who works on it, it’s ok to do. But if you working for a company where there are multiple people working to maintain a site it can cause a lot confusion if they are not aware of which elements are are not inheriting font-size

  Not only by overriding the font-size you are adding more work to yourself by now needing custom properties to override any font adjustments made.

  This article will explain more:

  https://css-tricks.com/accessible-font-sizing-explained/

  This ‘hack" was created because people did not want to do math when converting px to rem/ em but now there are multiple extension available that do the math for you.

  Here’s the one I use:

  https://marketplace.visualstudio.com/items?itemName=sainoba.px-to-rem

  1