QR-Code solution using CSS Grid and Flexbox

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hi there! 👋

  The link to the GitHub repository is giving me 404. It might be because it is a private repository. So if that's the case, I recommend changing it to public.

  Anyway, some feedback from me.

  • I suggest using flexbox to position the card in the middle of the page. It is much more simple and less buggy code.
  • After that, remove the width and the height properties. The card only needs a max-width to prevent it from becoming too large on a wide screen. For the height, let the content inside it controls the height of it.
  • The alternative text for the image should not be a file path (/). It is used to describe what the image is.
  • I suggest making the img as a block element and setting max-width: 100% to make it easier to work with img element.

  That's it! Happy coding! 😄

  Marked as helpful

  0

  ---

  

  P

  Dante Castaneda•80

  @PedroCastaneda2000Posted over 2 years ago

  @vanzasetia

  Hi Mr. Setia,

  Thank you for the feedback, the QR Code GitHub repository was set to public and should be be visible now.

  Regarding Feedback:

  • Centered the card using flexbox.
  • Used max-width and height set to auto to let the contents manipulate the cards size.
  • Gave the image a new alternative text.
  • Did not implement max-width:100% but will in the future.

  The QR Code website turned out really close to the original and used a lot less code after the redesign.

  Thank you once again Mr. Setia for the feedback! 😄

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @pgc0004 No problem! 👍

  Now, everyone can access the GitHub repo.

  Good job with the update! However, there are some crucial things that you need to fix on the HTML.

  • Alternative text should not be hyphenated (like code).
  • Alternative text should not contain any words that are related to "image". The semantic of the img element would make the screenreader pronounce it as an image.
  • <b> tag is already deprecated so don't use it. Also, you don't need to wrap the text with b tag because it's already inside the h3 which gives the text bold styling.

  0