React JS, Flexbox, CSS Grid

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, great work on this one. Though I need to zoom out to see the desktop layout because you are using 1440px as breakpoint which is too large for traditional monitors of 1366x768 like I use, toning it down would be really great, the 1440px on the design doesn't mean it is the breakpoint okay.

  Some suggestions would be:

  • Always have a main element to wrap the main content of your page. On this one, the .container should be using the main instead of div.
  • Person's img should be using the person's name as the alt like alt="Emily R". A component like this when a person's name and image are both present, use the person's name as the value as it is a meaningful image.
  • Also when using alt attribute, avoid using words that relates to "graphic" such as "profile" and others. An img is already an image/graphic so no need to describe it as one.
  • On the selections, you could use ul on those since those are "list" of selections.
  • Using button alone for the selections is not enough, what you could added is add, make use of aria-live element that announces a certain selection has been selected or a changes have been made, this way users will be informed properly unlike toggling a button but doesn't give any extra information on what happened after toggling it.
  • button needs to have visual indicator, right now there are none, add a visual indicator on the button's :focus-visible state.
  • Avoid using multiple h1 on a page, use only at least 1 per page so change those into other heading tags. The 3 dots are only decorative svg's so add aria-hidden="true" attribute to it to hide them.
  • Each card information, referring to the likes 32hrs 10hrs those are not heading tags, using a heading tag on them does not give any content at all on what the section would contain, use p tag on them. On a design, a bold or highlighted text doesn't always mean they are heading tags.
  • Lastly, just the breakpoint, responsiveness.

  Aside from those, great work again on this one.

  Marked as helpful

  1