QR code component

Community feedback

• 

  P

  Lorentz Bloom•90

  @Lauro235Posted almost 3 years ago

  Well done for your hard work!

  I'm particularly impressed by your use of variables to store the relevant colors in the :root and your clear use of names (.card .qrImg etc). However I have some suggestions for improvement.

  1. Height is not as dynamic as width, because of this you will come to find that height isn't actually as ubiquitous a requirement as width.

  2. Explore naming conventions. You can use something like BEM which allows for orthogonality in your design. For more information read https://en.bem.info/methodology/quick-start/ In your project however you could use BEM like this.

  div.card (a block class) img.card__image (a block and element class) h1.card__heading (a block and element class) p.card__text (a block and element class)

  Combine this with your very organised alphabetical structure and you'll be in business.

  Lastly I'd suggest you research some different ways to use containers. Currently your .container element only seems to be centering the .card element. This is absolutely fine, but you could actually (probably) just center within the body. I recommend you check out a free course by Kevin Powell on flex and responsive web design if you haven't already (https://courses.kevinpowell.co/conquering-responsive-layouts). I learnt a lot about containers and lots of other things, as well as the flex stuff, which you already seem comfortable with.

  Hope this helped

  Marked as helpful

  0