QR Code component solution using flexbox

Community feedback

• 

  T

  Gwenaël Magnenat•1,290

  @gmagnenatPosted 5 months ago

  Hello, congrats on completing the challenge ! This challange may appear easy like you mention in your retrospective but actually it is a perfect project to identify gaps in basic essential skills.

  Here are a few things I encourage you to study to refactor and update your solution. This challenge is completed often and you can also go check the comments on other solutions.

  Problems here

  • alt tag is not to display an error message in case the image is not loading. It is ment to describe the image for when it cannot be seen or displayed.
  • use a modern css reset in all your projects. here is a good one modern css reset
  • You don't need to add 100vw for a full width. The page is naturally taking the full width of the window. Adding 100vw can cause issue as it doesn't count the scrollbar width.
  • Use min-height of 100vh instead of a fixed height.
  • using % for the width of your card and your img makes everything not scale correctly when you resize your window. This project can be naturally responsive, but here you force the size to be relative to the window size. this also fails a reflow test if the default font size setting of the browser is modified by a user as all your size are not relative to this settings but are linked to the window size.
  • the width on the image is not necessary as it is contained in the card. It should naturally scale with the card and you can just add a padding to the card.

  I hope you find these comments usefull and it helps you refactor your code, understand concepts and improve your skills. Reach out if you have any questions.

  Happy coding !

  Marked as helpful

  0
• 

  Anya B•30

  @AnYa-gitPosted 5 months ago

  Votre message montre bien votre fierté d'avoir réalisé le projet de manière autonome, ce qui témoigne de votre indépendance et de vos compétences en résolution de problèmes. Vous identifiez aussi l'importance de créer une solution réactive pour améliorer l'expérience utilisateur, ce qui est une réflexion pertinente pour l'avenir.

  0