qr-code-flexbox-grid

Community feedback

• 

  P

  Jairo Valderrama•420

  @jairovgPosted over 1 year ago

  Hi @andresmdzc, congrats on your solution; here are some comments that might help you to improve it:

  Accessibility and semantics

  • You're thinking on the component body as an <article> element and the entire component as a <section>. I invite you to look at this interesting blog post that may help you improve the elements you're choosing.
  • You're right in using an alt attribute for your image but think about a better image description because this is the input an assistive technology may use to read out loud to a user.
  • You have some a11y issues; you can use tools like axe dev tools if you're not using them yet.

  Styles

  • I don't recommend using element styles unless setting an override style or a known pattern to be used across your site. Otherwise, use naming methodologies like BEM, so your styles get modularized.
  • Take a look at different breakpoints. Having % units is correct to define widths, but if you don't check at other breakpoints, you're components will get odd behaviours if you don't set some component limits, which you'll get in your UI designs.
  • You're missing some other styles like rounded corners, shadows, etc.

  I hope you find it useful. I'm happy to look at your solution if you make other changes.

  0