QR Code - HTML and CSS

Community feedback

• 

  CyrusKabir•1,885

  @CyrusKabirPosted over 2 years ago

  Hi Matt, you did a good job on this challenge as a first real code without any tutorial. but there are some issues about your end result and code structure :

  • you used percentage value on border-radius property
  • using width instead of max-width on img
  • some some styles issues like color, padding, ... and now I gonna explain each issue in depth.

  1. what value it's good for border radius: at first step you should understand about differences between units in border radius I recommend read this stackoverflow post but in this simple challenge em and px are both fine units but in percentage value for having more closer result you need some calculations !

  2. more responsive images: using max-width property on images it's better because images won't take more width than maximum value in max-width property and using them with 100% value can make them more responsive. you can read more about responsive images on this article

  3. some little styling issue: your card heading doesn't have proper color like main design and having more space like padding between image and card inner would be great. you can use some comparison tools for matching your end result to main ui design like Perfect Pixel extension you can download it on their main site.

  I hope my little tips could help you

  Marked as helpful

  1

  ---

  

  Matt Wagner•10

  @MattLearnstoCodePosted over 2 years ago

  @CyrusKabir Thank you so much - this is really helpful, and I'll have a look at each of your links.

  GREATLY APPRECIATED!

  1