Simple QR code page

Community feedback

• 

  YounusUID•0

  @YounusUIDPosted about 1 year ago

  I suggest following improvement in your CSS code. I just write CSS that should be remove or edit.

  .card {   
      width: 300px // set width 300px, after adding 15px left/right padding, the actual size will 
                                  300 + 15 + 15 = 330  
      height: 500px; // remove this line
      border: none;  // remove this line
      padding: 15px; add this line for add padding to entire box
  }
  .qr-code {
      width: 100%; // set width to 100%
      margin: 16px auto 0 auto; // remove this line
  }
  .title {
      width: 250px; // remove this line
      margin: 0 0 20px 0; // add margin bottom
      text-align: center;  // remove alignment from here and add to the parent div
  }
  .description {
      width: 250px;  // remove this line
      height: 100px;  // remove this line
      margin: 0; // set margin 0
      text-align: center;   // remove alignment from here and add to the parent div
  }
  

  Wrap title and description into a div and add padding to set spacing around the div. i.e.

  .xyz {
      text-align: center;
      padding: 20px;
  }
  

  0
• 

  Alexandra•580

  @Alexandra2888Posted about 1 year ago

  Hi! Congrats for finishing challenge. Your solution is very close to the design! Here are some things I think you can improve:

  • reset default CSS with *, *::after, *::before {margin:0; padding:0; box-sizing:border-box};
  • convert px to relative units (em/rem). Coding in px is usually for magazines/newspapers when you need fix units,
  • make variables in :root{} ex for colors here,
  • implement BEM naming convention eg .card__qr-code {}. I t will help you in bigger projects and wh you will use SCSS. Happy coding!

  0

  ---

  

  Solo Incrementing•40

  @Solo-IncrementingPosted about 1 year ago

  @Alexandra2888 Can you elaborate on those points? I don't understand what most of those things are, I started to learn html css just a few days ago. Thank you for the feedback though!

  0

  

  Alexandra•580

  @Alexandra2888Posted about 1 year ago

  @Kriyes-M hi, Here are some useful links: https://dev.to/janvierjr/css-best-practices-g41

  https://www.freecodecamp.org/news/learn-css-units-em-rem-vh-vw-with-code-examples/

  https://www.freecodecamp.org/news/what-are-css-variables-and-how-to-use-them/

  https://chettriyuvraj.hashnode.dev/bem-naming-convention-in-css

  0