QR code component using display flex

Community feedback

• 

  Adann Jacinto•790

  @DanCodeCraftPosted 8 months ago

  Good job on completing the challenge, @gthtawfiq.

  I will give you a few tips I learned along the way related to your CSS.

  • First of all, do not use a local CSS, create a different file and link it to your HTML (shortcut is link:css).

  • The same goes for the font: avoid importing, and link it instead.

  • To centralize your component to the screen without trouble, add this to your body:

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

  • I know you're asking for a way to simplify your CSS, and this is the opposite of it, but make a CSS reset before every project. This will make your page run smoothly in every browser. My personal recommendation is the reset from Josh Comeau.

  • Do not use font size in pixels, this is for accessibility issues.

  • Since this project uses only one font, you can declare it once in the body, and don't forget to set a fallback just in case.

  • For the header, you can simply use H1 -> H6. Therefore, you won't need to declare its size, unless you have to.

  Marked as helpful

  1

  ---

  

  gthtawfiq•10

  @gthtawfiqPosted 8 months ago

  Thank you for the detailed feedback and the valuable tips on improving my CSS, @DanCodeCraft. I appreciate your insights and will definitely take them into consideration for future projects. Implementing a separate CSS file and linking it to HTML, along with avoiding local imports for fonts. I'll also look into incorporating a CSS reset, specifically the one recommended by Josh Comeau, to enhance compatibility across different browsers. Your advice on using relative units for font sizes and optimizing font declarations for efficiency makes perfect sense, and I'll make sure to apply these principles going forward. Thanks again for your constructive feedback—it's incredibly helpful for my growth as a developer

  1