How to create an attractive navigation bar with HTML5 & CSS3 | itbaba

How to create an attractive navigation bar with HTML5 & CSS3 | itbaba

In this video,i will talk about “Create an atteractive navigation bar with HTML5 & CSS3”.
We will start HTML5 and CSS3 tutorials to the built-up structure of a website.We will use internal CSS for built structure, first apply staric * in the style tag and put the value of margin and padding in staric.The value will be taken zero the purpose of staric is that the setting (all tags)of the web page will keep fixed and all the tags will automatically be updated.

Now make Homepage and give the background color to the homepage through styling.Remember, for creating header, logo, footer etc you don’t need to use div along “class” or “id”.You will take only tags for header, logo and footer etc.but for the logo, the tag is taken inside the header tag while you will create footer outside from the header tag.Styling for header and logo and footer will be done inside the style tag. You can format through different attributes such as width,height,margin,background,margin-left,margin-top,color,font size,font family,border,border style etc.These are common attributes which are used in basic formatting.The value for the attribute will be given according to the required setting of the webpage.

Now create navigation bar or Menu Bar.

In the website, the menu is related to web pages.first, type Nav Tag inside the header tag.After that; you will type unorder list tag “ul” and then “li” for the list.You will also type anchor tag “a” with href attribute.Through this, you can create a link to your web page content with menu options.Now you will give styling and make the setting of your menu in style tag.For menu setting; you will give margin-left and margin-top.Then you will use different attributes for styling such as width,height,float,background,border,font size,text-align,border style and radius,position etc.

Now create sublist :

For creating sublist; you will also type unorder list tag “ul”, “li”, anchor tag “a” and href attribute.These tags will type in that menu option in which you want to create sublist.For the setting of sublist, you will use attributes such as margin-top, position, display etc.
For hiding dropdown, type “display: none” in the style tag during styling. You can also create the list in the sublist and give styling by using different attributes.You will also give hover to the Navigation Bar.

Watch This Video:

I hope you will achieve better knowledge about “How to create an attractive navigation bar with HTML5 & CSS3” from this video.

You can Watch our Previous tutorials for Web Developing:
#How to make an image slider in HTML | Urdu & Hindi tutorial | Technical College

How to make image Slideshow for a Web page using HTML & CSS | itbaba

#How to create Container or column boxes in CSS | Urdu & Hindi Tutorial | Technical College

#Create Dropdown Menu in HTML or CSS | Urdu & Hindi tutorial | Technical College

#Fix Header and Footer in CSS | Urdu and Hindi Tutorial | Technical College

#Download link in HTML Urdu and Hindi tutorial | Technical College

#Order List And Unorder List in Urdu and Hindi tutorial | Technical College

Visit and Subscribe To My channel “Technical College”.Channel URL:

Hit the subscribe button to get notification of new video.

Visit our official website:

Like us on Facebook Page:

You can Join our Facebook Group:



Google Plus:

Thanks for watching this Video.Join our other courses, let’s go and visit our site:

About Rashid BABA

Rashid BABA
Rashid BABA is a Web Developer, SEO Expert & Android App Developer From Pakistan.I am working for last 5 years on the internet.You can contact me on FaceBook.

Check Also

Google aim to Reveal the Way it Utilizes your Information

Google aim to Reveal the Way it Utilizes your Information

If you are tired of searching aimlessly for solitude info in your Google aim profile ...