QR code component

Community feedback

• 

  P

  Darrick Fauvel•490

  @DarrickFauvelPosted over 2 years ago

  Hey Bruno,

  I would also recommend removing all of the complex CSS reset style rules in your stylesheet to simplify your code.

  If you want to use a simpler reset, you can use this.

  :root {
    font-size: 62.5%;  // as I mentioned about previously
  }
  
  * {
  box-sizing: border-box;
  margin: 0;
  }
  

  To explore this more, take a look at Josh Comeau's Custom CSS Reset.

  If this was helpful, let me know. 👍

  0
• 

  P

  Darrick Fauvel•490

  @DarrickFauvelPosted over 2 years ago

  Hi Bruno, 👋

  Congratulations on submitting your first solution! 🥳 It looks really good.

  A good HTML practice with a card component is to wrap your card content in a <div class="card"> element. Also, within the card element, you can have card__image and card__body elements. This is what I did for my solution.

  It looks like you have a mix of px and rem font sizes. I would recommend using `rem' for all font sizing so as to be responsive to grow and shrink with different screen sizes.

  A method I use to help me easily translate px to rem is to set font-size: 62.5% in the :root. This makes, 10px = 1rem. This way if you want to use a font size of 24px, all you have to do is move a decimal point and use 2.4rem instead. This also works great for margins, paddings, height, and width. However, em would be a better choice for those, but it is trickier to use.

  Here is a good youtube video explaining this concept.

  If this was helpful, let me know. 🙂

  0
• 

  Shashree Samuel•9,260

  @shashreesamuelPosted over 2 years ago

  Hey bruno-candia, good job on completing this challenge. Keep up the good work

  Your solution looks great however I think your card needs to be scaled up a bit using transform: scale()

  I hope this helps

  Cheers Happy coding 👍

  0