QR-code-component

Community feedback

• 

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

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

  • Do not forgot to check your FEM report, to see what is incorrect and update your code with it right after you submit your challenge.

  • 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.

  • NEVER ❌ do this as it creates accessibility issues for users and it is outdated.

  html {
    font-size: 62.5%;
  }
  

  • Change the height to min-height in your body element, to improve your component's responsiveness.

  • Change width to max-width in your component’s container to make it responsive.

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

  Happy Coding!🎄🎁

  Marked as helpful

  1

  ---

  

  P

  dagimchi•170

  @dagimchiPosted almost 2 years ago

  @vcarames Thank you for the feedback. I had no idea that setting the root font size to 62.5% was such a bad practice! A quick google search indicated the same thing. I picked up this "hack" from Jonas' HTML & CSS Udemy course. I deleted the html rule as you suggested. It's correct to assume that we shouldn't set the root font size ourselves right?

  I knew about the max-width property and its applicability to make flexible containers but I guess I went with just the width property due to its small container size. Still, I guess there's no real good reason to choose width over max-width here.

  But I'm confused about how setting the current height to min-height of the body's 100vh will improve the component's responsiveness. Don't we just want to set the body to take up exactly the browser's viewport and no more in this case?

  1

  

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

  @dagimchi

  Glad I could help!☃️

  I love Jonas! That’s how I first learned about web development.

  The only reason a lot of tutorials still teach it (along with Bootstrap, Tailwind, etc…) is because it makes it easier to gain confidence in the early stages of learning. But in reality it a really bad practice.

  In modern web development, there is no longer a need for it. A lot of users have their own font-size preferences when viewing sites, so if we’re to set an explicit font-size of our own, user experience can decrease dramatically.

  Plus, on larger projects, it can massive headache.

  Using the min-height takes into consideration the screen size, while only using height does not.

  Keep it up!

  1