Article Preview Component using SASS and JS

Community feedback

• 

  P

  Gonzalo Tejada•220

  @vgt3j4d4Posted about 1 month ago

  • Does the solution include semantic HTML? Mmmm it could be improved I believe. There is no <main>. <section> has been used but I don't think it fits there, same as <i>. You could find this useful HTML5 Element Flow Chart

  • Is it accessible, and what improvements could be made? Not sure if <picture> is needed (as there is only 1 image under it). Also, alt properties on images could be more descriptive. Moreover, the share button ends up opening a "section", either at the bottom or as a tooltip. For that aria-expanded and aria-controls could be benefitial. Another thing is that, the share links should be accesible using the keyboard, and that's not possible with your approach. Consider changing the span.share-icon to a button and making the share links <a> or <button>. That way the user will be able to navigate through them using the keyboard and something can be done once the user clicks them.

  • Does the layout look good on a range of screen sizes? Kind of. When changing the screen size from landspace to portrait mode, I see the image scales which not sure is expected.

  • Is the code well-structured, readable, and reusable? Yes.

  • Does the solution differ considerably from the design? No.

  • What specific areas of your project would you like help with? I think you are trying to use BEM but I'm not really sure as I see class names like card__content__text__title which is violating BEM. Check this for more information MindBEMding. Also, I see you added the font import inside _reset.scss, maybe put it in a separate file or in style.scss.

  0