QR code component made with HTML and CSS

Community feedback

• 

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  👾Hi Givi J., 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.I saw that for some properties you’ve used rem and for others px. In this case, it is better to use only one kind of unit to have a better organization for your code. relative units as rem or em have a better fit if you want your site more accessible between different screen sizes and devices. REM and EM does not just apply to font size, but to all sizes as well.

  2.To reduce the CSS you can use the direct selector for each element instead of using class this way you have a code even cleaner, for example, you can select everything using the direct selector for (img, h1, and p, main).

  3.Use a CSS reset to avoid all the problems you can have with the default CSS setup, removing all margins, and 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

  ---

  

  Givi J.•130

  @WhiteFatalPosted about 2 years ago

  @correlucas Thanks for the CSS cheatsheet :), it was interesting read.

  0
• 

  Hyron•5,870

  @hyrongennikePosted about 2 years ago

  Hi @WhiteFatal,

  Nice job on the challenge

  Just a tip, instead of using margin to center the div you can use flexbox. Replace your body rule with the one below.

  body {
      background-color: hsl(212, 46%, 89%);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
  }
  

  I like that you kept the HTML structure very simple and didn't complicate it by adding extra divs.

  Hope this is helpful

  Marked as helpful

  0