How To Create a Responsive Navbar Using HTML & CSS | Step By Step Tutorial

#navbar #responsivenavbar #css
In this tutorial, we will be building a responsive navbar using HTML and CSS(navigation bar in html and css). This navbar will adjust to different screen sizes, making it perfect for any website. We will be using media queries to make the navbar responsive. You will learn how to create a toggle button that opens and closes the menu, as well as how to style the menu items. This is a great project for beginners looking to improve their HTML and CSS skills. So, let's get started!
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
0:00 Intro
0:40 HTML
2:33 CSS
7:15 CSS Responsive Design
8:04 HTML Dropdown Menu
8:28 Styling Dropdown Menu
10:51 JavaScript
12:38 Dropdown Menu CSS Media Queries
13:16 HTML Hero Section
13:30 Styling Hero Section
-----------------------------------------------------------------------------
-----------------------------------------------------------------------------
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
-----------------------------------------------------------------------------
-----------------------------------------------------------------------------
-----------------------------------------------------------------------------

[peaklegacy]

The layout looks great but all of the shortcuts I learned from this astound me! Instant Sub!

[kb]

Great video. Had no voice over but still explained everything flawlessly

[moonomanda]

I've been struggling with creative a functional navbar, thanks alot for this video 😭🙏

[iareplaying]

Hey! Awesome work and thank you very much! I adjusted dropdown menu to suit my project and your tutorial helped a ton. I am having a bit of trouble with toggling an xmark, any other icon for that matter. Xmark apparently isn't included in font awesome 5 free so I tried with other icons but nothing works! Still have the good ol bars so not really an issue.

[desilvas]

the best video I have ever seen for the responsiveness of the website. in fact this the video which gave me the complete understanding of the responsiveness . thank you so much great work do More

[LilandCec]

Best! I use your videos for learning. Perfect, I understand everything without your explanation/speaking. I learn a lot, thanks to you 😊😊😊😊

[BomToxhall]

Such a simple design to follow along with, thanks a bunch!

[iamAbhi]

Fabulous tutorial bro❤️❤️
I love it very much ❣️

[ohoLee]

Thank you so much for this detailed complete video. You explained everything about mobile dropdown responsiveness here. Thanks alot. God bless you.

[goodnessmaikoto]

This is amazing, although I would like to make a suggestion, do you think it’s possible you input speech as you code? Just for more clarity and gives you the time to explain certain things, big love and a nice one. 👏🏽

[TylerIngram]

I appreciate the tutorial (even if it's not voiced over)
I incorporated it into my little React project

[UnKnown-urfq]

ooh, it's so cute to see clean html after working with React and Next.js for a long time.. it's like playing on an old 8bit Dendy🥰😍😍😍 there are no functions, states and props here - i love it!

[mrx]

brilliant videos...Thank you so much❤ Subscribed!

[juanrey]

pocos minutos hiciste eso. eres un crack. nuevo suscriptor

[AlonePhilic]

It was a nice and clean video. Even without a voiceover, you made us understand everything. Thank you for creating this clean and great video.

[jannathanielausan]

If you guys are having trouble with the toggle not showing, try minimizing your window. If you see the three lines after doing that then congrats you followed well! Now to fix this issue, the solution I found was to adjust the max width from the line that has @media from 992 to a higher number, btw mine worked at 2000px.

[lethe_yoon]

Thank you for the excellent video! By the way I have a question. Is there any specific reason of using <div class="navbar">, instead of <nav> tag? I presumed that <nav> would fit semantics better than <div>. I am a beginner, so any informative comments would be highly appreciated! Thank you sir!

[AgrajDubey]

Wow such a beautiful and simple follow along tutorial. Keep on bringing quality content, you have our support 💝
Btw which background music did u use in this video??

[asiimwecalvin]

This is a great saver...Thank you soo much.

[kinglucky]

Thank you for creating this great video. ❣