Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

project-tracking-intro-component-master

Dwi susilo 325

@dwi312

Desktop design screenshot for the Project tracking intro component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


thanks for any feedback

Community feedback

@pikapikamart

Posted

Hey, great work on this one. The layout in desktop is really good, responds well and the mobile state is really good as well.

Some addition suggestions to what Teegamtee already said:

  • The alt for the website logo should be more descriptive, right now, the only text that we could use is the name of the project itself from fem, the alt could be alt="project tracking" or if you have a better one. Do not use as well words like "logo, icon, image, picture" as a value for alt attribute.

  • The list of links in the header should have been wrapped inside nav aria-label="primary" element. So that users will know that this is a navigational links.

  • On the schedule a demo link, you should add a href attribute so that it will be properly accessible. Right now, you can't tab on it because the browser doesn't know what it does even if it is a a tag. Add the href.

  • On mobile layout, the hamburger menu toggler needs to be a button element and not a div. Making it a button will make it more accessible.

  • The hamburger button should have also aria-label="hamburger dropdown toggler" so that users will know that this button does. Also, it should have a aria-expanded attribute that will be dynamically changed via javascript. This will allow a user to be informed that a dropdown has appeared.

  • Also, even if you properly made it a button the ordering is not proper in your html. What should happen is that, when I use my keyboard to toggler the dropdown, the dropdown appears right, then when I use the tab on my keyboard again, I should be on the links, but it doesn't , because the ordering is wrong. The button should come before the list of links:

<button />
<dropdown />

Aside from those, really great work.

Marked as helpful

0

Account Deleted

Hi,

Desktop view looks nice and the transition to smaller screen sizes is ok, but it kind of weird how everything is on the left of the screen just after switching to mobile view but not the powerful insights... text.

And you have a little problem, go to mobile view and activate the mobile menu then return back to desktop and see what happens to the navigation bar.

Keep coding👍.

Marked as helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord