How to make Navigation Bar in Html and Css | Portfolio website Html Css | Part 1

Опубликовано: 16 Декабрь 2022
на канале: WebDesign Tutorials
89
3

How to make Navigation Bar in Html and Css | Portfolio website Html Css | Part 1

In this video I will teach you how to make responsive navigation bar in html and css. This video 📸 is a Part 1 of Portfolio website in Html Css and Javascript. Here we will learn about Navigation bar Html codes, Css codes to make this html navigation bar responsive in all media devices and also learn about Javascript class toggle event. We will create separate css file for media queries. I am also sharing this 🥳 Source codes on GitHub for free. 🔥😊

#webdesigntutorials #form #htmlcss #webdevelopment #webdesign #html #css #csseffect #navbar #responsivedesign #portfoliowebsite #googlefonts #icon #sourcecode #github #javascript

💻 Code Editor
https://code.visualstudio.com/

📂 Assets
Fonts: https://fonts.google.com/
Icons : https://fontawesome.com/

🔗 Source code
https://github.com/Arpit994/portfolio...

🔔 Subscribe Now
   / @webdesign-tutorials  

⏱ Timestamps
00:00 Introduction
01:14 Adding Font Awesome Cdn
01:42 Navigation Bar Html Code
02:45 Html Search Bar
03:25 Adding social media links
04:10 Unorder List in Html
05:10 Linking external Css file
05:20 Styling Navigation Bar
07:10 Styling Menu Bar
09:32 Javascript Class toggle event
13:00 Position Absolute Css
14:40 Media Queries Css
17:35 Flex Direction Css

🎵 Music
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Track: Mango - tubebackr
Music provided by Royalty Free Music - No Copyright Music
Watch:    • Mango - tubebackr | Royalty Free Musi...  

Thanks for watching 🙏
Made with 💗 by Webdesign Tutorials