QR Code component Challenge using HTML + CSS

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello @fsuropaty, congratulations for your new solution!

  You've done a really good work here using semantic tags and putting everything together, I've only one suggestion about the responsiveness and the use of the id.I looked your live site and the component is not RESPONSIVE yet, this is due the fixed width you've applied to the container. Look both width and max-width the main difference between these properties is that the first(width) is fixed and the second(max-width) is flexible, for example, a component with width: 320px will not grow or shrink because the size will be ever the same, but a container with max-width: 320px or min-width: 320px can grow or contract depending of the property you've set for the container. So if you want a responsive block element, never use width choose or min-width or max-width.

  It is not advisable to use IDs as CSS selectors because if another element in the page uses the same/similar style, you would have to write the same CSS again. Even if you don't have more than one element with that style right now, it might come later.

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  1

  ---

  

  fsuropaty•160

  @fsuropatyPosted about 2 years ago

  @correlucas Thank You very much for your feedback

  0
• 

  Adriano•38,290

  @AdrianoEscarabotePosted about 2 years ago

  Hi @fsuropaty, how are you?

  I really liked your project, the responsiveness of the layout was very good, but I have some tips that I think you will like:

  1- Avoid using classes or ids when there is only one element of the same type in the document.

  2- You could have put min-height: 100vh; inside the body. Instead of putting a 95vh in the container

  The rest is really good! Hope it helps...👍

  Marked as helpful

  1

  ---

  

  fsuropaty•160

  @fsuropatyPosted about 2 years ago

  @AdrianoEscarabote Thank you very much for your feedback

  1
• 

  Vanza Setia•27,775

  @vanzasetiaPosted about 2 years ago

  Hi there! 👋

  Congratulations on finishing this challenge! 🎉

  Here are some recommendations for improvements.

  • Put the footer outside the main landmark. Otherwise, the footer will act like a div instead of a landmark element.
  • Never limit the height of the body element. It will not allow the users to scroll the page if the page content needs more height. You can see the issue by looking at the site on a mobile landscape view. So, my recommendation is to use min-height instead.
  • Alternative text should not be hyphenated. It will be read by screenreader so it should be read like normal text or human-readable text. Also, I suggest improving the alternative text by providing more information about the QR code.

  Hope this helps! 🙂

  Marked as helpful

  0

  ---

  

  Vanza Setia•27,775

  @vanzasetiaPosted about 2 years ago

  @fsuropaty

  One more important suggestion is to use single class selectors for styling whenever possible instead of id. id has high specificity which can lead to a lot of issues on the larger project. It's best to keep the CSS specificity as low and flat as possible. 🙂

  1

  

  fsuropaty•160

  @fsuropatyPosted about 2 years ago

  @vanzasetia Thank you so much for the feedback

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted about 2 years ago

  @fsuropaty You are welcome! 👍

  0