Video instructions and help with filling out and completing When Form 2220 Navigation

Instructions and Help about When Form 2220 Navigation

What is going down guys in this tutorial I'm going to be showing you how to create professional navigation biotypes using HTML and CSS so without further ado let's get straight to it so I've already created a new index.html file own and I've already typed took the bare bones of a HTML document as you can see and we're going to give this this webpage the title of professional navigation bar tabs and because that's what this tutorial were it's going to be demonstrating today ok so then within the body we're going to create a new div class svehla gram div class equal to nothing to scale bar and which obviously stands for navigation bar and closed off the div and then within here now we're going to do this slightly different to a conventional navigation bar and conventional links we're going to use an unordered list berm for our navigation bar which is just UL and then within here we're going to create a type of Li tags and close off the Li tag as well which is extra stands for obviously a list item and basically we're going to create six of these six sets of these because in this tutorial I'm going to be creating six links my navigation bar obviously you can create however many links you want so then within the first list item we're going to type a hair trife equals index.html close off the air tag and then we're going to call it home it's going to be the name of the link I'm going to copy and press this do another five times within all the other list items and just to make it a bit quicker to speed up the process basically and then we're going to change obviously the names and the links some one of about a member North gallery shop feedback and contact I think and I've got to change the links as well obviously you can name these navigation bar links whatever you want and I just obviously called them home about gallery shop feedback and contact with the purpose of this tutorial but you can change them to suit you okay so that's that's all we need to do for the HTML side things from now so we can go up to file and save and then I've already created a folder what I've saved this file on my desktop which I've now name the folder a navigation professional navigation bar so open up the file in your preferred browser and this is what it will look like at the moment so you've got a bullet point list of your six links okay and so now it's time to add some style and using CSS so we'll be to do that we're going to create a new file and we're going to save this and we're going to create a new folder in your website folder called CSS and within the CSS folder sorry we're going to save the file as style dot CSS and yeah now we just need to make sure in the index dot HTML document and that we link the stylesheet to this document so to do that we just type link rel equals stylesheet here to F equals CSS / style dot CSS because obviously we placed it within a folder called CSS in the website folder and file save so now that these two so now these two M files will delete successfully m and now it's time to start typing up the styling so we're going to target the body first the body tag and we're going to add a margin of zero or well and just auto margin Auto I'm just to get just to remove any of the default margins around the webpage we're going to add a background color of a really light gray ef ef ef I'm going to add a font family of Arial so that the font throughout the entire web page will be Arial so file save refresh in the browser and you can see that's amid some changes and you can see that the stylesheet has successfully linked because the styling has been implemented on the web page so now we're going to create a new we're going to target the navbar class and in here we're going to add a margin of alter to essentially align them out by in the center of the page and we're going to add a border bottom of one pixel solid and black you'll see why in a minute we're going to add a width of eight hundred and sixty pixels because we're going to add a party now of zero pixels by 20 pixels by zero pixels by 20 pixels so the left and right padding will be 20 pixels and I want the whole width of the navigation bar to be nine hundred and tall so that's why the width I've set to a hundred and sixty because 80 60 plus 20 plus 20 is nine hundred picture so you can see when we save and refresh in the browser so it's now added a border and things like that and it's now centrally aligned in the middle of the webpage and things like that so yeah so now we're going to target the navbar ul okay so this is the unordered list tag with inside the navbar class okay so we're going to add a padding of zero to remove the padding which is there by default I have another list style of Nan so this will remove the bullet points that we don't want oh no another Gatien bar so file save refreshing the browser you'll see now the bullet points are disappear it and also the default puting have disappeared and but it's still in a list at the moment and so now we need to change that to make a look more like a navigation