Flex-box, Grid, Fetch API and BEM

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, great work on this one. Layout in desktop is really great, it is responsive and the mobile state looks great as well.

  Some suggestions would be:

  • Using these on the main:

      top: 50vh;
      transform: translateY(-50%);
  

  Is not reliable, try to inspect the layout in dev tools at the bottom, the layout is pushed on to the top and some part are being hidden by the screen. On this, you could make the body flexbox to center the content with :

  align-items: center;
  display: flex;
  justify-content: center;
  

  and adding width: 100% both on the main and the .tracking-dashboard selectors. or you could just add a padding to the top of the main.

  • Person's img should be using the person's name as the alt like alt="Jeremy Robson". 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.
  • When wrapping a text-content do not just use span to wrap it, use meaningful element like a p tag if it just a regular text or heading tag if it is an heading.
  • Since you are only using button for the selections, you should add an aria-live element that announces a certain button is selected from the choices. Because button alone does not give extra information even if it has been toggled, unless it is customized via role attribute in some html structure.
  • Adding cursor: pointer to the button for desktop view would be nice, just to make it more natural.
  • Those 3 dots images could use aria-hidden="true" to hide it completely.
  • Avoid using multiple h1 on a page, use only at least 1 per page. Those highlighted text like 32hrs are not suited to be a heading tag, because using one does not add any information on what the section would/could contain. Use p tag on it.

  Aside from those, great work again on this one.

  Marked as helpful

  0

  ---

  

  Hernan Alex Choque Condori•235

  @HernanAlex61ChoqueCondori8Posted about 3 years ago

  @pikamart Thank you very much for your recommendations, they are of great help to me to improve the code and learn a little more (👍≖‿‿≖) 👍

  1