Get the best web hosting to deploy your websites: https://www.hostinger.com/coding2go
✌ Use our discount code CODING2GO to get 10% off on all web hosting packages with a duration of 12 months or more

Check out our HTML & SEO course on udemy: https://www.udemy.com/course/coding2g...

Source code on our website https://www.coding2go.com

In this video we are going to create a responsive navbar together. I am going to explain everything you need to create a responsive navigation bar with a hamburger menu and a sidebar with a close button using HTML, CSS (Flexbox) and JavaScript. You will learn basic DOMManipulation with JavaScript and how to use CSS Flexbox to align your navbar horizontally and vertically (as a sidebar).

#responsive #navbar #javascript #webdevelopment

background image: https://unsplash.com/photos/m_HRfLhgABo
google icons: https://fonts.google.com/icons

CONCEPTS YOU WILL LEARN:
✔ HTML, CSS, JavaScript
✔ Responsive Webdesign
✔ Flexbox Layouts
✔ Media Queries
✔ Google Icons (Hamburger Menu, Close Button)

ABOUT THE NAVBAR:

The basic Navbar is created in HTML and CSS
To make it behave differently depending on the size of the device that the website is being displayed on, we have to make it responsive. In the mobile view most of the links are hidden and accessable by clicking on a menu button (hamburger menu icon). It will expand a sidebar that uses CSS Flexbox to align the navigation links vertically. The sidebar has also a glassmorphism design to make it look like glass using the backdropfilter property and the blur() method. To open and close the sidebar, we use google icons menu and close X. Using simple JavaScript DOMManipulation and the onclick Attribute of the Icons we can open and close the sidebar.

RESOURCES for better understanding:

HTML Tutorial:    • Learn HTML in 15 Minutes  
CSS Tutorial:    • Learn CSS Basics in 10 Minutes (for b...  
FLEXBOX Tutorial:    • CSS Flexbox Tutorial for beginners  
GLASS Effect:    • Create a glass effect in CSS (Glassmo...  

like and subscribe if you read this