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 using Flexbox

Nakoya Wilson 1,530

@nakoyawilson

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


Any suggestions on how I can improve and suggestions on approaches to make the background shape are welcome!

Community feedback

P
Chamu 12,970

@ChamuMutezva

Posted

Greetings Nakoya

  • the li elements for the navigation must have anchor element as a child. Product, feature , pricing are links to other pages or sections.
  • positioning of the nav between mobile, tablet and desktop can be done with css, creating different nav for mobile and desktop is not best practice for responsive design.
  • use semantic elements. A div should not be used in place of a button as in the case below and that of the close-icon. A button is an interactive element, for a div to be accessed as a button by assistive technology users requires a lot more coding.
<div class="hamburger-menu">
            <div class="menu-icon">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="16">
                <g fill="#242942" fill-rule="evenodd">
                  <path d="M0 0h24v2H0zM0 7h24v2H0zM0 14h24v2H0z" />
                </g>
              </svg>
            </div>
  • as explained above , the element below has to be an interactive element, most likely an anchor element
<p class="call-to-action">
            <span class="button-link">Schedule a demo</span> to see a preview
          </p>

Marked as helpful

0

Nakoya Wilson 1,530

@nakoyawilson

Posted

@ChamuMutezva Thank you for the feedback, Chamu. I changed my code to have only one navigation and used the button tag instead of the div tag for the menu icons. With respect to the li elements and call to action, I chose not to use anchor tags because there are no actual links and I thought it would be bad to have links that don't go anywhere. Would it be better practice to include the anchor tags and use JavaScript to disable the links?

1
P
Chamu 12,970

@ChamuMutezva

Posted

@nakoyawilson, I would use correct elements where possible. If you are using the projects to showcase what you can do, then it would be assumed you are not using the proper elements. Although the links are not going anywhere, it really doesn't matter.

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