Article preview component challenge hub using FlexBox

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted almost 3 years ago

  👋 Hi Al71one007!

  🎉 Congratulations on finishing this challenge! I would recommend putting each project or solution in its own repository. It's much easier for people to see your code.

  Feedback:

  • Accessibility
    • Don't use section for the card content since it is not a full webpage. This is one chunk of content that all belong together and in a real website would sit with other content.
    • For any decorative images, each img tag should have empty alt="" and aria-hidden="true" attributes to make all web assistive technologies such as screen reader ignore those images. In this case, the drawer image is decorative only.
    • For the avatar, you can use the author's name as the alternative text.
    • Use CSS to uppercase the text. The uppercased word in the HTML will be spelled by the screen reader (spelled letter by letter).
    • The share button should be wrapped with button element.
    • The alternative text for the share icon should be share (no button). The alternative text of the share icon works as the text content (label) of the link.
    • Use rem or sometimes em unit instead of px. Using px will not allow the users to control the size of the page based on their needs.
  • Visual
    • On mobile there's a bug where after the user wants to hide the social media icons, the dark gray background still appears.
  • JavaScript
    • Separate the event listener with the function.
    • Don't inline styling in JavaScript. Use CSS classes instead.
  • Sass
    • Don't nest too much. It can produce a high specificity stylesheet. The only time that it is recommended to nest is when using @media query and pseudo-element.
    • Always use classes to reference all the elements that you want to style. Using id is going to make your stylesheet have high specificity (hard to maintain).
    • Compile all the Sass code into one CSS file. Having two stylesheets can impact the site loading speed.
    • I would recommend converting all the px value into rem by creating a rem() function.

  /* In Sass */
  body {
    font-size: rem(16);
  }
  
  /* In CSS */
  body {
    font-size: 1rem;
  }
  

  That's it! Hopefully, this is helpful!

  0

  ---

  

  Krish•660

  @Alone-07Posted almost 3 years ago

  @vanzasetia Thanks for your feedbacks, I will change all you mentioned above. Now, I am requesting you to check my JavaScript file and tell me, that is it ok or not?

  Again Thank you!!!

  0