Responsive and Accessible Navigation (HTML, CSS, Vanilla JS)

In this video, I am going to show you step by step how to create a responsive and accessible navigation for your website. With this responsive navigation, I wanted to go one step further and create more of a focus on accessibility and user-experience for ALL users. It is my goal to guide you through this project in such a way that whether you are familiar with these concepts or brand new, you will be able to follow along with confidence. As always, if there is something that I missed or something that I could add, please leave a comment and we can work together to improve upon this project! 0:00 Intro 0:37 Project Demonstration 2:58 Install Visual Studio Code 6:05 Starting from Scratch 6:52 File and Folder Structure 9:01 Creating our Reference Links 12:11 Test our Reference Links 14:45 Composing our Markup 24:58 Composing our Stylesheet 38:09 Mobile-First Design Strategy 47:36 pseudo-elements && pseudo-classes 54:54 JavaScript: Toggle aria-expanded TRUE/FALSE 57:32 Style Current Page Link 1:03:37 Make index.html active link on page load 1:06:27 Close Mobile Menu with 'Escape' key 1:08:48 Title, Description, and Favicon 1:13:37 Deploy with Netlify 1:17:10 Deploy with Vercel Link to the Github Repo https://github.com/alstudio93/alstudio-responsive-navigation Link to Project Demo https://alstudio-responsive-navigation.vercel.app/ List of VSCode Extensions -- Copy and past the ExtensionID in the Extension Search Input in VSCode to be taken directly to the extension. (Live Server) ExtensionID: ritwickdey.LiveServer (Rainbow Brackets) ExtensionID: 2gua.rainbow-brackets (Beauty) ExtensionID: yhpnoraa.beauty (Auto Close Tag) ExtensionID: formulahendry.auto-close-tag (HTML CSS Support) ExtensionID: ecmel.vscode-html-css (Beautify css/sass/scss/less) ExtensionID: michelemelluso.code-beautifier Thank you to the following Developers on YouTube that truly make self learning 100x easier -- @NetNinja @CodingAddict @developedbyed @KevinPowell @javascriptmastery @alicodes22 Have a favorite YouTube Developer? Drop them in the comments so everyone can benefit from their instruction :) Learn More about "Anatomy of an HTML element" https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started#anatomy_of_an_html_element Click the following link for Social Media Icon Gradients https://gist.github.com/alstudio93/3628af8e3b66db004d3fb23137a88f79 Click the following link for the project logo https://github.com/alstudio93/alstudio-responsive-navigation/blob/72e875ea62e34341054c775b18e602d2690ace2b/images/logo.svg