Card Component With HTML, SCSS, FlexBox

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted over 3 years ago

  Hi Folarin,

  Take another pass at the html for this. You can't have all content as headings. And when you do have headings, they need to make sense on their own. They form the document outline/structure and are the primary way for screen readers and search engines to navigate/understand a page. Think about the stat numbers in particular. There are much more appropriate meaningful elements that will keep the number and word closely linked. For example,

  • paragraphs (both in one p with spans inside to control styling)
  • unordered list > list items (again, spans inside to control styling)
  • description lists (html key-value pairs)

  Hope this helps :)

  p.s. if you are leaving alt blank on an svg image, it needs to have aria-hidden as well (that's an active voiceover bug where it still reads svgs out)

  1

  ---

  

  T

  Grace•31,270

  @grace-snowPosted over 3 years ago

  Other than that, all looks pretty good. The scss nesting and BEM you asked about is spot on

  Some of the text is too small - 12px is about the minimum text can ever go to, and that should be smallprint.

  And don't forget to add details like the card shadow.

  1

  

  Folarin Akinloye•1,240

  @folathecoderPosted over 3 years ago

  @grace-snow Thank you very much, Grace! Your feedbacks are always educative and detailed.

  I have fixed some problems you noted and I just signed up for an accessibility course on edx to sharpen my skills.

  Thank you very much!

  0

  

  T

  Grace•31,270

  @grace-snowPosted over 3 years ago

  @folathecoder that course is excellent

  0