Responsive article preview using HTML, CSS, and Javascript

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  Hey, good work on this one. Both desktop and mobile layout is good and no responsive issues. The functionality works as well on the toggler.

  Regarding your questions:

  1. Yep, other way on this could be. Since the article that wraps the element is a flexbox, you can set the flex-basis of the div that holds the image with flex-basis: 285px (convert it to rem okay:>). Then the img will have a width: 100%. But by doing this, the right item of the flexbox will now occupy more spacing, thus violating the 285px flex-basis. Now, to solve this, use a flex-basis: calc(100% - 285px) on the right div of the flexbox. This will make the right div to only have have that size and using flex-basis on flexbox items is really good instead of specifying a explicit width or height.
  2. Suggestions below :>

  • the alt text on the img should have been left empty since that image is pure decorative purpose. Only add a alt text if you think that an img adds to the content.
  • the alt text of the person's image should only have the name of that person, on this case alt="Michelle Appleton". Also, if you are adding a alt text to an img or an aria-label to any graphics, do not include the word "logo image icon" anything that relates to image. The reason is that, screen reader will handle that for you.

  For example. I add an alt text like this: alt="dog image". A screen reader will read this as "dog image graphic", screen reader will add the word "graphic" to any graphic content on a website. So that is why, we don't need to add those words. We should leave it as alt="dog".

  • the name of person as well as the date could have been wrapped inside a single h2 tag.

   <h2>
    {name of the person}
  <span>{date}</span>
  </h2>
  

  • the toggler of the social media links should have used a button element instead of div. If there are interactive elements, especially when an element is supposed to be click, use a button. It adds extra accessibility and semantics to your structure. Along with the aria-expanded attribute. This are for screen readers, you can search it up.
  • the social media links should have been wrapped inside their own a tags since they are supposed to be links.

  <a aria-label="facebook"> # change aria-label according to the social media
    <i></i>
  </a>
  

  Aside from those, good work on this one. Really.

  Marked as helpful

  1

  ---

  

  Joseph•770

  @Jos02378Posted over 3 years ago

  @pikamart Thank you for your feedback, I really appreciated it! I was able to learn a lot from your comment.

  0