Time Tracking Dashboard: HTML, CSS, Flexbox, CSS Grid, JavaScript

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

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

  Some suggestions would be:

  • Always have a main element that will wrap the main content of your webpage. For this one, the .container could use main instead of div.
  • alt value for the person's image could use the full name of the person.
  • Always have a h1 element on the webpage. For this one, the h1 would suit more if it was a screen-reader only text, describing what the whole main content is all about.
  • When using heading tags, make sure that the previous heading tag level besides the current one you are using are present before it. If you use h3 then make sure h1, h2 appears before it.
  • The svg for the 3 dots should have an aria-hidden="true" attribute, since that icon is just decoration, no need to make it visible for users.
  • The 32hours and others like this shouldn't be a heading tag, since it doesn't convey any extra information, the text above it like the work play, those are your heading tags on this one.
  • On the timelines section, since those are selections , you could had used input type="radio" for each of those selection, also, never use un-interactive element for an interactive component. If you do this, then you won't provide any accessibility for others users and they can't interact with your site properly. Use interactive element for interactive component.

  Aside from those, really great job again on this one.

  Marked as helpful

  0
• 

  Musa•170

  @its-me-musaPosted about 3 years ago

  Thank you for these tips/suggestions. It's vey helpful. Kind regards

  0