Submitted

Project tracking intro component using Flexbox

P

@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

Report

0

Accessibility Issues

0

HTML Issues

View Report

Nakoya Wilson’s questions for the community

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

Community Feedback

P
Chamu 9,210

@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


P

@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 9,210

@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

Give some feedback to @nakoyawilson about their solution...

Slack logo

Join our Slack community

Join over 100,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!