Time tracking dashboard.

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

Some suggestions would be:

• The alt for the person's img should have used the person's name as the value like alt="Jeremy Robson", if there are components like this when a person's name is present along with their image, use their name as the value. Also, avoid using words that relates to "graphic" like "profile, picture, image...", you don't need to add those since it is already an image.
• I wouldn't really make the person's name a h1 rather make it h2, the h1 would be a screen-reader only text placed first as a direct child element of the main like this:

<main>
  <h1> Time tracking dashboard example </h1>
  { ...rest is in here }
</main>

• Those 3 dots, in a really application, those would be control for some modal of some sort, so using a tag on them is not really suited, instead use button but, since the challenge doesn't involve any other interactions, it could just be a div or maybe just go for button.
• The alt as well for the dots img should be using alt="" since it is just a decorative image, also add aria-hidden="true" on it as well.
• The 5hrs 1hrs those are not suited to be heading tags, the name before them like the work play, those are the heading tags, because it gives an overview to what the content is all about, unlike those numbers, they don't really give much information right.
• On the selection at the bottom left, it would be great if they were input type="radio" since those are selections and radio buttons are intended for those. Making it radio buttons gives more accessibility feature for users. Those radio buttons should be wrapped inside a fieldset along with legend that describes what the radio buttons are for.

Aside from those, really great job on this. This is really responsive:>

Hi Hao, I don't have any suggestion for your solution. Awesome work man, congratulations!