QR Code Component With Vanilla HTML, CSS

Community feedback

• 

  P

  fringe4life•160

  @fringe4lifePosted 3 months ago

  Congrats, it looks nice. Your solution wrapped this in a main tag and I wondered about whether to do this myself and chose not to as this doesn't seem likely to be the main content on a page.

  It is typically recommended when setting css height: 100dv; to instead set css min-height: 100dvh; as this means any overflowed content is scrollable and that the top or bottom navigation on phones isn't displacing content.

  You used what appears to be BEM to name your CSS classes and did well as far as I know. Though maybe the __ was the modifier part rather then the element.

  You used the text-wrap well and did not apply the css text-wrap: pretty; to paragraphs which is good from what I understand!

  I sort of understand why you chose the media query as at widths smaller then 375px the design will break somewhat.

  Your code is structured well, though for this small example you chose to add what seems to be CSS resets for buttons, inputs and the like that don't seem strictly neccesary. However, it may be good practise.

  Good luck going forward!

  0

  ---

  

  Bintang Bagus Pangestu•10

  @bntngbgsPosted 3 months ago

  @fringe4life Thank you for your suggestion, definitely will consider to apply it in next projects.

  0