QR Code Component

Community feedback

• 

  Akhil-Nagpal•180

  @Akhil-NagpalPosted over 1 year ago

  Hi Ruth! 👋 Congratulations on completing your first challenge! 🎉

  I have some suggestions regarding your code

  • In CSS always try to use relative units like em or rem instead of absolute units like px. Using these relative units will improve the responsiveness. Read this to understand better 👉 Should we use Rem, Em, or Pixel?.
  • You used the grid as well as flex for centering the card, I think you should use only one either flex or grid.

  Otherwise! You did a great job! 👏

  I hope these suggestions will help you to improve! 😄

  Happy Coding!

  Marked as helpful

  0

  ---

  

  Ruth Joy Tolentino•10

  @ruthjoy76Posted over 1 year ago

  Thank you♥ @Akhil-Nagpal

  I read the link that you gave and I understand how it works. Thank you for this! Your feedback helps me a lot.

  ❤️Happy Coding❤️

  0

  

  Akhil-Nagpal•180

  @Akhil-NagpalPosted over 1 year ago

  Your Welcome @ruthjoy76

  0
• 

  dimar hanung•560

  @dimar-hanungPosted over 1 year ago

  Hello Ruth 👋, Congratulations on completing the challenge 🎉 I have some interest and feedback with your code

  That I like:

  1. I appreciate the similarity of your results with the design, pretty cool
  2. HTML code was pretty clean with combination of semantic HTML👍
  3. i like how you use css variables 👌

  My Feedback:

  1. you can use combination width:100% and max-width to make it responsive in small device, that's make width dynamic in small device
  2. you can seperate file by folder to be more structured, for example:

  public/
  ├─ images/
  │  ├─ image-qr-code.png
  ├─ styles/
  │  ├─ main.css
  ├─ favicon.png
  index.html
  

  3. the semantic html is good, but css naming can be improve, your css naming has not represented its use, specific to img-container, In front end development, containers are usually used as wrappers, not as single element / tag.

  anyways overall is good, nice solution, hope it useful 🙌

  0

  ---

  

  Ruth Joy Tolentino•10

  @ruthjoy76Posted over 1 year ago

  Hi@dimar-hanung! Can you give me example how to name it properly. Thank you!

  0

  

  dimar hanung•560

  @dimar-hanungPosted over 1 year ago

  @ruthjoy76 may be like

  • qr-code-image
  • qr-code
  • image-qr-code

  and combine with css bem naming convention, BEM stands for Block, Element, and Modifier. It’s a CSS naming convention for writing cleaner and more readable CSS classes.

  for read more about that: here

  0

  

  Ruth Joy Tolentino•10

  @ruthjoy76Posted over 1 year ago

  Thank you!@dimar-hanung

  0

  

  dimar hanung•560

  @dimar-hanungPosted over 1 year ago

  @ruthjoy76 you're welcome! 🙌

  0