Responsive Navigation Bar - Tutorial, 2021 - HTML, CSS, JavaScript
Вставка
- Опубліковано 28 чер 2024
- In this video we are going to create an amazing and responsive navigation bar, only using some basic HTML, CSS and JavaScript. For that Tutorial we are going to use this editor:
Visual Studio Code | Download-Link: code.visualstudio.com/download
=== [ FEATURED TOPICS ] ===
Flexbox, Media Queries, Mobile Navigation, Animations, Keyframes, Google Fonts, Event Listener, Conditional Statements and other helpful tools and methods, that will help you to create an awesome and responsive navigation.
=== [ SUPPORT ME ] ===
Don't forget to click the thumbs up button below the video if you found this tutorial useful and subscribe ► bit.ly/2NqN0pY ► if you want to see more videos like this one. If you don’t want to see more, make sure to also click on the bell icon to turn on notifications.
=== [ FOLLOW ME ] ===
Instagram | / lukiinfarbe
Facebook | / lukasprehl
=== [ VIDEO CHAPTERS ] ===
00:00 - Intro + HTML Basics
08:07 - CSS Basics
18:03 - Responsive Media Queries
22:49 - Mobile Navigation (HTML + CSS Part)
34:44 - JavaScript
57:49 - The Final Check
Thank you sir for that clear tutorial I learned a lot :)
Spent 4 hours figuring out why my navbar wasn't working... I spelt nav, "nar" in 1 line. 😭 Anyways, great video. Big help for a beginner like me.
Oh, I'm sorry to hear that. I had pretty similar experiences in my beginnings, so I know the struggle ...
Thank you, I'm glad it helped you! ;-)
Thank you very much! I found one of your videos today. I really like your kind of helpful explanations. I only prefer to use : .closeNav . line2 {transform: scale(0);} (Min. 53:15) to make the burgerline disappear. 👏 Please go on. I look forward to more of these instructive tutorials. 👍
My pleasure, buddy! That's also a great idea, thank you for your feedback and input. 😉
Amazing design, waiting for further videos on more topics.
Thanks! I've posted a new video a few days ago and from now on I'll try to post every week, so if you are still interested... 😉
Do we still need to use ul lists? Can you not just and just post a couple of links?
Sorry that it took me so long to find an answer for your question. 😜
Yes, you could but I would strongly advise you not to do that. Semantic HTML is a powerful tool that can significantly enhance web accessibility (e.g. screen readers will communicate your content more accurately) and search engine optimization... use semantic HTML whenever possible and use div only as a last resort 😉
Hey man, I found your channel from a comment section. You're doing a great job. I watched this fully and really liked how it turned out. New subscriber!
Thank you very much, this really means the world to me! 😉
@@lukas.webdev Looking forward to see more tutorials!
@@iamtharunraj Awesome! I'm on it 😉
Excellent video tutorial on creating a fully responsice and animated Navigation Bar. Thanks, Lucas!
{2024-05-16}
nice...thank you! please do full website using html css js =)
You're welcome. I will, thanks for your input!
Make tutorials for ..CSS components ( position , typography, media query)
Thanks for your input! I am currently working on a few new videos, also about some CSS stuff… So make sure to subscribe, to keep updated.
i dont know why but EventListener give me this error
.
.
Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
Error : navLink.forEach is not function