Skip to content

PRO TIP Block youtube.com at the DNS level — Pi-hole, NextDNS or your hosts file — but allow youtube-nocookie.com and i.ytimg.com. These tutorials keep playing; the rabbit hole does not.

Learning without distractions

23. Building the Navbar – Full stack web development Tutorial Course

49.9K views on YouTube

by WB Web Development Solutions 132 tutorials here
Programming

In this FullStackWebDevelopment tutorial video, We are going to learn about creating #navbar using #css for your first #website.

Having easy-to-use navigation is important for any web site. We will build a horizontal navbar. A navigation bar needs standard HTML as a base. A navigation bar is basically a list of links, so we will build the navigation bar from a standard HTML list using the ul tag and li tag elements. To style our navbar we will use CSS.

We will learn to use various styling properties and techniques to make a responsive well-designed navbar. For eg. we will be using list-style-type: none; to remove the bullets as a navigation bar does not need list markers and Set margin: 0; and padding: 0; to remove browser default settings.

The other tags used to style the navbar include:
– float: left; – use float to get block elements to slide next to each other.
– display: block; – Displaying the links as block elements makes the whole link area clickable (not just the text), and it allows us to specify padding (and height, width, margins, etc. if you want)
– padding: 8px; – Since block elements take up the full width available, they cannot float next to each other. Therefore, specify some padding to make them look good.
– background-color: #dddddd; – Add a gray background-color to each a element.

—————————-

Week 1: Day 4
Section 4: Advanced CSS: Building and styling website
Tutorial 23: Building the Navbar

—————————-
Do subscribe and hit Bell Icon
—————————-

Follow us in social media handles for opportunities and code related support.

Instagram: https://www.instagram.com/wb.web/
Facebook: https://www.facebook.com/wbweb/
Twitter: https://twitter.com/wbweb_in/
LinkedIn: https://www.linkedin.com/company/wbweb/

—————————-

Got a question on the topic? Please share it in the comment section below and our experts will answer it for you.

For more information, please write back to us at hi@wbweb.co.in or call us at IND: 7077568998

After completing the course, write to biswabijaya@wbweb.co.in for an internship or freelancing opportunities.

For consultation or partnership, related queries drop a mail to hi@wbweb.co.in.