Build Navbar Menus That Actually Work for Everyone

Get started with Miro: https://miro.pxf.io/xLL1ev How to use Aria Attributes and Responsive CSS to build an Accessible and Responsive Navigation Bar Menu using HTML, CSS and JavaScript. You will learn how accessibility works in HTML using aria-attributes like aria-expanded, aria-controls, aria-hidden, and of course how to make a navbar responsive using Flexbox and media queries. This responsive navigation uses the inert attribute to make a navbar untabbable when it is collapsed. You will also learn the difference between the hidden and inert attribute in html. Become a Member to Support our Channel: 👉 https://www.youtube.com/channel/UCGpoeEhUBQBaaKZ_a8HB67Q/join GET OUR HTML AND CSS COURSE 👌 https://www.udemy.com/course/learn-html-and-css-in-7-days-web-developer-bootcamp/?couponCode=CODING2GO Source Code on our website: 👉 https://www.coding2go.com SOURCES AND CREDITS: Coder Coder: https://youtu.be/pBv7igaxfQE?si=gvT13VTVAUsm81Br Watch her video to learn more about accessibility in hamburger menus DOWNLOADS ICONS HERE: Menu Icon: https://fonts.google.com/icons?selected=Material+Symbols+Rounded:menu:FILL@0;wght@300;GRAD@0;opsz@40&icon.size=40&icon.color=%23c9c9c9&icon.style=Rounded Close Icon: https://fonts.google.com/icons?selected=Material+Symbols+Rounded:close:FILL@0;wght@300;GRAD@0;opsz@40&icon.size=40&icon.color=%23c9c9c9&icon.style=Rounded RELATED CONCEPT YOU SHOULD LEARN: CSS Flexbox: https://youtu.be/bbaKrRU4MVk CONCEPTS YOU WILL LEARN IN THIS VIDEO: ✔ Responsive Navbar with HTML CSS and JavaScript ✔ Accessible Navigation Menu with ARIA-Attributes in HTML ✔ Navbar Accessibility ✔ understand aria-attributes ✔ aria-label, aria-expanded, aria-controls, aria-hidden ✔ responsive hamburger menu ✔ accessible hamburger menu with ARIA ✔ WAI-ARIA ✔ web accessibility ✔ responsive web design ✔ responsive navbar with aria ✔ accessible and responsive website navigation I hope you learned something new ;)