QR code component with HTML and CCS using Flexbox and Mobile-first

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hi @ElenaPalomar, congratulations on your first solution!👋 Welcome to the Frontend Mentor Coding Community!

  Great solution and a great start! From what I saw you’re on the right track. I’ve few suggestions for you that you can consider adding to your code:

  1.Clean your code by removing some unnecessary divs, most of the content can stand alone without a div. Use div only for blocks that need a special alignment or the content needs a special positioning.

  2.Use relative units as rem or em instead of px to improve your performance by resizing fonts between different screens and devices. These units are better to make your website more accessible. REM does not just apply to font size, but to all sizes as well.

  3.Something that can be a time saver for you is to use a CSS RESET to remove all default settings for margins, making the images easier to work, see the article below where you can copy and paste this CSS code cheatsheet: https://piccalil.li/blog/a-modern-css-reset/

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  0

  ---

  

  Elena Palomar•30

  @ElenaPalomarPosted about 2 years ago

  @correlucas

  Thank you so much for your advice!

  I would like to ask some questions about them:

  1. I forgot to change the footer label closure and it says div. But I don’t have any more div. You mean the section where I put the card? I’ve always had trouble with semantic tags.
  2. I did a course in which I was taught that the sizes of the images should be px and not rem, do you recomend me to put them also in rem?

  Thank you again for your time and advice.

  0
• 

  バレンタイン 😈•64,170

  @VCaramesPosted about 2 years ago

  Hey @ElenaPalomar, great job on this project!

  For accessibility purposes, it’s best to use rem/em instead of px for your CSS property values.

  If your using VSCode you can download the extension px to rem and it will do the converting for you. You can also use an online converter or just simply divide your value with 16.

  Happy Coding

  Marked as helpful

  0

  ---

  

  Elena Palomar•30

  @ElenaPalomarPosted about 2 years ago

  @vcarames

  Thank you very much for your advice!

  From now on I will change the px to rem in all my future projects. Do you recommend me to do it with all sizes or just for fonts?

  Again, thank you very much for your time and advice.

  0

  

  バレンタイン 😈•64,170

  @VCaramesPosted about 2 years ago

  @ElenaPalomar

  Glad I could help!

  Unfortunately, there really isn't a set rule of on which properties you should set the rem/em to. When I do it, I set to everything. I seen others who only do it to values that are larger than 10px. Anything less than that they leave at is, since the value is so small, it doesn't make a difference.

  0

  

  Elena Palomar•30

  @ElenaPalomarPosted about 2 years ago

  Thank you so much @vcarames !

  I think it is a very good starting point and I will apply it from now on in my projects.

  0