3-column-preview-card with flexbox

Community feedback

• 

  T

  Matt Studdert•13,611

  @mattstuddertPosted over 3 years ago

  Nice work completing another challenge, Ray! Here are some pointers after taking a look at your code:

  • The icons are purely decorative and add no context to the content. Therefore, I'd recommend leaving the alt text blank, so that screen readers skip over them.
  • You've currently got multiple h1 elements. Although this is valid HTML, it's generally still considered a bad practice, as it can cause accessibility issues with the content hierarchy. Instead, I'd recommend sticking to a single h1. This challenge is tricky because it's a component with 3 equal headings. If I were to build it, I'd put the headings as h2 elements and add a single h1 for screen reader users but visually hide it with the .sr-only class you've got in your CSS.
  • You can see from the design comparison slider that your solution has some visual differences from the design. I'd recommend spending some time trying to get it looking close to the design. Attention to detail is a key trait for good front-end developers, so it's well worth practising it as early as possible.

  I hope these tips are helpful. Let me know if you have any questions! 🙂

  Marked as helpful

  0

  ---

  

  Ray-Xavier-2021•80

  @Ray-Xavier-2021Posted over 3 years ago

  @mattstuddert thank you....and yes it has been very helpful. I will revise as soon as i get a chance and repost for more of your feedback......

  0

  

  Ray-Xavier-2021•80

  @Ray-Xavier-2021Posted over 3 years ago

  @mattstuddert hi i tried updating my code to better fit the screenshot but i seem to have hit a wall please view on github and let e know where i went wrong:

  https://github.com/Ray-Xavier-2021/3-column-preview-card-component-main

  0