React JS, CSS Flexbox, Grid and Media Queries

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. Layout in desktop looks really good and the mobile layout looks good as well.

  Some suggestions would be:

  • alt value for the person's img could use their full name alt="Jeremy Robson".
  • The 3 dots svg should have aria-hidden="true" since it is only a decorative image.
  • Avoid using multiple h1 on a webpage. Those values like 32hrs and others like those, those aren't suited to be a heading tag as well, since they don't give any much more data.
  • The selections on the bottom-left should be using input type="radio" since those are selections and radio buttons are intended for it. Using button alone is not accessible enough.

  Aside from those, the site again looks great.

  Marked as helpful

  1

  ---

  

  Jayanth•190

  @gjaynir0508Posted about 3 years ago

  @pikamart Thank you very much for the feedback. I will implement it.

  EDIT: I have implemented all of those suggestions. Any further suggestions?

  0

  

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  @gjaynir0508 Neat! I forgot to add in the set of radio buttons, sorry :>

  Nesting those radio buttons inside a fieldset along with the legend to describe what the set of radio button dones:

  <fieldset>
    <legend>  #have a meaningful text in here, describing what the
  set of radio buttons are for  </legend>
  ... inputs
  ...labels
  </fieldset>
  

  The legend will be using sr-only class, so that it will only be visible to screen-readers. Also maybe create a visual-indicator as well for the selections, you could use :focus-within on the fieldset element, then having it an outline, so that users will know that they are on the fieldset element and are controlling the radio buttons.

  • The text for the h1, the name of the person became small now, check that one out.
  • The text for the numbers, as I suggested, is not suited to be heading tags, the hours of for each sections shouldn't be using those. Just use p tag for them.

  Just those, I fogot to add them in the previous feedback:>

  Marked as helpful

  1

  

  Jayanth•190

  @gjaynir0508Posted about 3 years ago

  @pikamart Thank you very much for the detailed feedback. I appreciate your efforts in suggesting changes to the code. I have changed the code to match all the suggestions. Any further suggestions are welcome.

  1