- 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
@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.