QR Code Component (html, css)

Community feedback

• 

  Daniel 🛸•44,270

  @danielmrz-devPosted 11 months ago

  Hello @MarcosExing!

  Your project looks great!

  About your questions:

  Div inside another one was the best option to create a different padding?

  • I don't know exactly what you mean by different padding but I can tell you that: It's not necessary. There are plenty of techniques we can use to space elements, no matter what is the case.

  The css classes are good in terms of best practices?

  • They're good. Using very simple and intuitive names helps a lot. If you want to learn more about naming classes best practices, I recommend you check BEM (Block, Element, Modifier) methodology.

  Is this the right way to work with Varible Fonts?

  • The easiest way to use fonts with variables is to import the font-family from Google Fonts and create a variable for it. I think using @font-face like you did is a bit harder.

  Extra tip:

  • I noticed that you used margins to place your card closer to the middle of the page. There 2 better options to do that: You can apply this to the body (in order to work properly, you can't use position or margins):

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

  Or you can apply this to the element you wanna center:

  .element {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
  }
  

  I hope it helps!

  Other than that, you did an excelent job!

  Marked as helpful

  1

  ---

  

  MarcosExing•10

  @MarcosExingPosted 11 months ago

  Thanks @danielmrz-dev

  Very helpful tips, for sure I'm going to use :)

  1
• 

  Dusan Simic•470

  @superstar119Posted 11 months ago

  Simply the best!

  0