QR Code Component with HTML and CSS

Community feedback

• 

  P

  Koda👹•3,830

  @kodan96Posted 6 months ago

  hi there! 👋👋

  You should avoid hard-coded values (pixels) most of the time. When you use these values you give up responsiveness(or you make it harder for yourself at least)..

  Typically you will increase the font-size property with @media queries. If you have hard-coded values all over your CSS, you need to modify every element's font-size . On the other hand, if you use rem -s all you need to do is changing the font-size in your CSS :root selector and all your elements will have a new size based on that value.

  I usually use em for padding and margin for text-based elements, since their margin usually based on their font-size , and again, when you change the font-size in :root these values will scale up as well without you touching them, making your job easier and your page maintainable.

  If you are not familiar with the :root selector it's usually used to set custom properties that you can apply later.

  Hope this helped 🙏

  Good luck and happy coding! 💪

  Marked as helpful

  1

  ---

  

  JNeo77•20

  @JNeo77Posted 6 months ago

  @kodan96

  Thank you for taking the time to provide that feedback! I will definitely look into the :root selector and familiarize myself with it's use.

  The tip on responsiveness and avoiding hard-coded values is very helpful as well.

  Much appreciated!

  1
• 

  Daniel 🛸•44,250

  @danielmrz-devPosted 6 months ago

  Hello there!

  Congrats on completing the challenge! ✅

  Your project is looking fantastic!

  I'd like to suggest a way to make it even better:

  • Using margin isn't always the most effective method for centering an element.

  Here's a highly efficient approach to position an element at the center of the page both vertically and horizontally:

  📌 Apply this CSS to the body (avoid using position or margins in order to work correctly):

  body {
      min-height: 100vh;
      display: flex; 
      justify-content: center;
      align-items: center;
  }
  

  I hope you find this helpful!

  Keep up the excellent work!

  Marked as helpful

  0

  ---

  

  JNeo77•20

  @JNeo77Posted 6 months ago

  @danielmrz-dev

  Thanks, Daniel! This is definitely a lot more concise and Flexbox is a great suggestion. I'm not as familiar but will definitely explore how to use it to become more fluent. I will definitely apply this and check out the result. To me it seems a little more intuitive then the way I approached it.

  I really appreciate you taking the time to give me feedback!

  1