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

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 [email protected] or call us at IND: 7077568998 After completing the course, write to [email protected] for an internship or freelancing opportunities. For consultation or partnership, related queries drop a mail to [email protected].