Intro section with dropdown nav by mouseover/mouseout event listener

Hi Tobani, well done in working on this, and I think the way you solved the problem was quite a creative one, even though there may be better approaches. What I did in my solution is to use the same nav bar, and I had it inside the header, so that that header would contain the logo and my nav. For the mobile view, I gave the nav bar a position: fixed property so that it could be fixed to a point on the screen, and at the desktop view, I had it at position: relative so that it could be part of the header again. To see what I mean, you can check out this CodePen I wrote as a draft/practice for this challenge: https://codepen.io/elaineleung/pen/poLpzge.

About the tabindex, if your intention for using it is so that the tab key can be used with the elements, then firstly you need to see whether it is necessary to use tabindex for that element at all. If the element is a link (<a>) or an input/button, they already have an inherent control for tabbing and there's no need for tabindex; the only thing you need to do is make sure there's a focus style for that element because often times we would remove the default focus style. If the element is not one of the control elements (let's say it's a div) but you want it to be interactive for some reason, then tabindex='0' is what you can add as an attribute. We typically do not use numbers more than 0 as that would confuse the screen reader. I see that you've got a whole bunch of accessibility issues due to tabindex, mostly because of the links, which don't need any tabindex. I think you can remove those tabindex attributes; instead, just see whether those links have a focus style. Be sure to look into all the other accessibility/HTML issues as well!