HI 👋🏻 Nice start!
You've got some HTML/a11y issues:
- The nav isn't keyboard operable. Make sure you follow patterns like this APG example when implementing interactive widgets and things.
- I don't think
<aside>
is the right element to use in this case. Don't let the visual form of a component dictate the HTML elements you choose. Just because a mobile navigation drawer is a sidebar, doesn't mean you should use<aside>
just because it's meant for "sidebar" content. Think about the semantics. You can just use the<nav>
without nesting it in another landmark. All you really have on this page for landmarks are the<header>, <nav>, and <main>
. - Consider if you really need to duplicate the navigation in your HTML. Can you just style it differently without duplicating the markup?
- Focus styles could be better. Right now what you have is hard to see when the black "Learn More" button is focused. Maybe offset the focus ring.
- I'd place those image/logos at the bottom in a list.
Good stuff. Keep it up!