basics of web design: html5 & css3 This is a topic that many people are looking for. accountabilitynowpac.com is a channel providing useful information about learning, life, digital marketing and online courses …. it will help you have an overview and solid multi-faceted knowledge . Today, accountabilitynowpac.com would like to introduce to you YouTube. Following along are instructions in the video below:
“Youtube how s it going. It s clinton here and welcome to tutorial number 29. 29. And in this tutorial.
We are going to start looking at creating a basic layout. So this is something that is probably going to take a few tutorials. We re not going to complete it in just one video. But yeah we actually started working on this in the previous tutorial where i explained some of the new tags for website layout.
So basically if you take a look at my browser right now. This is what we re going to be working on in this video. So i ve just got a logo up here and we ve got a menu going on a navigation menu with a little bit of a header bar. And yeah right now the content on the website is still empty because that s something we ll work on in the next video.
But yeah. Let s take a look at how to tackle this navigation menu and adding the logo in that corner. And so on all right so jump over to your text. Editor and you ll see that i ve got a bunch of the new tags for the website layout over here.
So i ve got my header bar. My nav bar section. Article. Side and footer and i m leaving all of these blank for now in my css folder.
All of this is going to be blank for now so if we save the css file. And if i save this index file and i jump back over to the browser. It s a blank so now we re going to have to go ahead and create all of that stuff again right so let s jump back over to the code and the first thing i want to do is add in my logo. So if i open up finder or just open up your htdocs folder wherever you re storing your files and you ll see that i ve got my index file.
Which we ve been working with for some time now i ve got my css file. Which i ll folder with my css file. And again. We ve been working with that for some time.
And then i ve got a folder called images and inside of that i ve got a logo and then i ve also kept the photoshop file for that logo. So yeah fairly simple to make nothing brag about or nothing brag worthy. But yeah let s take a look at how to add this logo to our website. So i m going to add in an image and i m going to give it a source and the source is going to be equal to images because remember we re working with the we can work with relative file paths so if i add in that backslash that s going to go to the root directory.
We ll be able to find this images folder and then we ll should be able to find a logo dot ping or whatever you called your logo. If it s a jpeg or a gif or something like that make sure that you re using the correct file extension. Most of the time when people complain or leave comments in my videos because they re using the wrong file extension. So yeah just make sure you re using the correct file extension right and then i m going to add an alt.
Attribute here just for logo. And then i m going to add a width. Because i realize i actually made this image a little bit too wide it s 240 pixels by 120 and i think that s just too wide so i m going to set this to 120 which is going to bring the height down to about 60 pixels. I m not going to fill it in a height.
Though so let s go ahead and save this now come back to the browser and hit refresh. And now. We ve got a logo to work with in the top corner over here right so what i d like to do is maybe censor. My website a little bit.
Because this load is pushed all the way to the top corner of our browser. And that s you know not cool generally especially on a wider screen like a 1080 screen. If your browsers for with a logo is not that far in the corner. It s usually centered wherever.
The website is scented. So to center. Something like that i m going to jump over to my css file. And i m going to create a the class called tm container right and what a container does you ll see this across most websites.
If you re using bootstrap if you re using some other kind of front end framework. We usually have containers that set a max width of something like a thousand two hundred pixels and then usually they ll also be margin of zero and auto. Okay so zero margin of zero means that there s no margin on the top no margin on the back bottom. But we ll have an automatic margin to the left and an automatic margin to the right and so if you save this now and jump back over the browser and actually we didn t apply this class.
Anyway so let s take tm container. And i think what i want to do is place that container inside of the header. So let s place that container here and i m just going to give or i m going to create a div and give the divs a flash and then i m going to copy and paste these back inside of that div now if you re confused as to why i m doing this this is just simply because i want my header to be full with like i want a long white bar that goes across the entire screen and then inside of that i actually want the container. So the logo starts here.
But the white bar actually goes all the way to the end of the browser it ll make sense when you see the visual or if you rewind back to the beginning of the video all right so let s hit save. I can t come back up come back and look at the browser now and hit refresh. And now you can see that our logo is a little bit more centered if i inspect elements over here and i hover over this disc called pm. Container.
You can see that from where the logo starts to somewhere over there that s 1200 pixels. Because i did is not going to get any wider than that and what that means is is that any space to this side and any space to this side. That s set because of the automatic margin that we set over here. So if i if i jump back over to my css file.
And i remove that automatic margin. But i put like a border let s just got a border all the way around of one pixel solid red. You ll get to see exactly how wide this is all right so that s 1200 pixels. But it s now it s not centered and if we just add margin zero pixel auto or zero and auto.
It just centers that div for us. So that s how you center. It is that s pretty damn easy all right. But i don t want the border.
So let s get rid of that now something else you ll notice. And it s quite invisible just because the border is here right now is that we ve got a little bit of spacing on the top of our browser. And that would actually follow through to the sides as well it s because by default things like our body tag actually have a padding and we might want to get rid of that there are also other things that have padding s and space. Things that we might want to get rid of so generally something you do whenever you start building.
A website is you get rid of default styling by either throwing in a reset. Stylesheet or you can just reset a few elements yourself. One of the most common reset is just to select all elements on your website by using the star symbols. That select everything and basically what i want to do here is say margin 0.
And padding 0. And that s going to take away all default. Margins and padding s which means this little space above our header should disappear. And also elect space on the side of the browser.
That shouldn t be there from the body that ll also disappear. So let s hit save come back over to the browser and hit refresh. And you see the logo bumped up a little if you add that border back the border should now be touching the top of the screen. Let s just add it back.
I guess border one pixel solid red. So obviously stuff like this is going to be a lot easier to see if you just add a border. Although kind of the border might mess up the look of the website. So yeah remove it if you don t want it there right.
So let s save that malan and take a look so now we ve got our logo basically in the right place. But we probably want to add in some of the other things like the menu and the background colors right so something i want to do is change. The color of my body. And this is something i do with my css.
I usually work like from top with all the resets and stuff to like other elements that you see so basically i work from top to bottom so if we see the header first. I ll have header styling and then i ll have footer styling towards the bottom of my stylesheet. But yeah default elements things like the body or things like font family across the whole site. I will generally style right at the top of my stylesheet.
That s just how i choose to work not everybody has to work the same way. But it s just my standard right so the body. I want to set a background of hash ee ee ee ee. So 6yz and that should turn the body of my website gray.
But now you can see that we have our header while it s gray as well except for where the image is because i didn t use a transparent image. So something i want to do here is turn this header tag white so i m going to give this a cloth of pm. Header right and then i m going to use that class here so not pm. Container but pm header and by the way these classes that i m naming tm header pm.
Container you could name them anything you want i just choose to name it pm. Header or tm container or something half because tm in my head stands for seam and then header container. Obviously you kind of get the picture. I ve explained that right so let s set a background on our header of white.
So just hashtag fff and that should turn the background white again right so we ve got the header pretty much set up now what i want to do is add in a navigation. So usually what we use for navigations are unordered lists so let me open up an unordered list over here and i m going to add a list item and inside of the list item. I m going to add in an a tag right because obviously. A menu item is a link once you click on it you get linked to another page.
So we use an a tag as a link now for the purpose of this tutorial. I m just going to link to hash you guys know how to link to other pages. We ve talked about that in previous videos. But if you ever link to a hash that kind of links nowhere essentially what it means is once you click on this link you get linked back to the same page.
But if i clicks on a link. I d get linked back to this page right. And what i want to do here. Is then add in some text.
So let s go home right and we can add in a few other links just for look. I guess so we can say about for the about page services or whatever. It is you re wanting to put on your site and then contact right so now we should have a menu. If i say is this and i come back over the browser and hit refresh.
You can see we do in fact have a menu showing up it just doesn t exactly show up how we like it to there s a few styling changes that we need to make here as well okay. One of those being we need to make all these list items display in one line. So to do that i m going to add a cloth to my nav. Element i m just going to call this pm.
Nav so basically see now right and i m going to add in the styling of es or tmf right and i actually don t think. There s anything i want to change with my navigation just yet. But what i do want to do is select some of the child elements. So i want to select the nav.
The unordered list and the list items that this is the element. I want to style. I want make them all display inline so tm nav ul li. So it s going to select all those elements within our nav or our pmf and what i d like to do is just display those or inline block right did you hear that we guessed right okay.
So now they re all in line. But they don t exactly look how i like them to so something i want to do now is style the link right so i m going to copy and paste that and then i m just going to add an a tag. So that s going to style. All the links within our list items and i m not worried about displaying them in line block.
But what i do want to do is first of all give them a padding of about 10 pixels on the top and bottom. And then your about 20. Yeah. About 20 or 30 pixels to the left and right.
So. Let me go ahead and save this now and hit refresh. And you can see now they re a little bit better space. Now something that stole kind of looks weird.
Though is the fact that they re all underlined so i want to just take away that text decoration and let s say none right so that s going to get rid of the text decoration. We also want to get rid of that color because right now they re sort of like a visited blue link color or purple. And i want to change that to just a default 30 30. 30.
So more or less the same colors. The logos. They ll be black. But not quite black black right like a sort of dark grey.
And yeah. Now we ve got how the link is pretty much set up. But they re not in the correct place. We want them sort of floated to the left over here all right so something we might need to do is take our image.
So the this image that the logo is in we might want to float that left and then this navigation. We might want to float that right so i m going to give this logo a class of tm logo right and let s go ahead and copy that class paste it in our css file. And i m going to add it somewhere above my nav. There and what i d like to do is float that to the left this tm nav that s our navigation and of course.
I want to float that to the right so let s save this now come back to the browser and hit refresh. And you can see what our logo to the left our menu to the right. But something happened and that is the fact that our header has disappeared so that white background completely gone right so what i d like to do is get that back and the way. I m going to get that back is essentially clear below my menu.
So there are like a thousand and one different ways to do this. But what i m going to do is i m going to grab that tm header and i m going to add an after element. So that s a pseudo element. And then i m just going to say content is equal to or not equal to but content.
And i m going to fit a value of a blank space. So that just adds a blank space. It s not going to be visible. It s not going to be there like nobody can see it.
But it does give us a pseudo element that can essentially clear the logo and the elements of a year. So that they re not floated anymore while they are floated. But they re not the header doesn t disappear. And i m going to then say clear both so now this tm header.
A pseudo element is going to be able to cure both so save. This and come back over the browser and hit refresh. Let s see did i get that right where did i actually put t. Mmm.
Ah. Right so i might need to just add some extra cotija display block and visibility none. Although visibility. None should be okay like you could probably get away without having this set.
Because we just use the blank space over here. But let s say i use the full stop or something the full stop might be visible. But if i use a blank space. It s not a man also just visibility.
None just for just to be sure that it s gone basically okay so now. When i hit refresh our header is back and that s due to this fancy little bit of code. Which clears a floated the floated elements being the logo and the navigation right so yeah. Now that that has been done something i do want to do is get these links or these list items.
The menu items in line with the logo. Because right now they re kind of pushed up against the top of the browser. So the way. I m going to do that is on this link add in some line height.
Again there are like 101 different ways you could go about doing this. But i m going to use line height. I just make sure that we close add a semicolon to the above statements or line height. And i m going to set that equal to sixty pixels right because in actual fact.
If i take a look at this in firebug of the layout of our header. It is actually sixty pixels in height. I just happen to know that because i know that this logo is displaying at sixty pixels right so if i set a line high on my list items to be sixty pixels. My list items should now be as high as our logo.
Therefore they are all displaying more or less in the middle one yeah basically aligned with the logo. So that was one cool trick to go about doing that and now the one thing you ll notice is okay. Our menu items have no hover effect. So basically we can take that same selector and then just add a couple lines down here and then select that link in its harbor status and add in a different color.
So let s take a color here and i think i want to use a blue. So i ve already got a code set up that i want to use alright and so now that means that every time. I hover over one of these links. They should turn blue.
Did. I i use the double colon instead of a single one. Yeah. Okay so now i hover over these links and they re turning blue right.
So that s cool and one other thing you ll notice is that the font is not quite. What i showed you guys at the beginning of this video so what i did to get a font displaying in my browser is i went over to google font and this is a really cool website that s available for us from google. And i searched for open sam so open stance is like a really really popular google font like pretty much everybody uses it there s yeah basically every it s everywhere and yeah. If you if you click on select this font up in the top corner over here that s going to give you this a little black bar down at the bottom.
And you can pull that up. And yeah. This is going to give you some code that you need to apply to your website to get the font working. So i m just going to copy and paste this link and let s paste that over here.
So basically in the head of my document. So let s hit save jump back over to my css file. Now and under this also vector. What i can do is select the font for everything on my site.
And i m going to say font family is equal to open sound in fact. There we have the rule right here on google. Alright. So let s go back to where is it there font family is open science or sans serif.
So basically if open some for some reason fails to load it ll fall onto a backup or the sans serif font. But yeah generally google font system doesn t fail to load. So you ll pretty much always have open font showing up just come back here and hit refresh. And that s how you get your links showing up in a google font and that s how we can go about creating a simple website header.
We will be taking a look at the rest of the website in future. But yeah. This tutorial has gotten crazy long so i might have to cut it into two pieces and that s all i have for you guys in this video. So i ll see you next time.
I just want to send a shout out to my sponsors at their mountains. They run a coding bootcamp with courses on ios development ux design and web development and they ll teach you everything you need to know to get a job within this field and they ll do it within 12 weeks so check out their website. The link is in the description below and if you do contact them make sure to tell them that i thank you special thanks to the guys whose names are on screen now these guys contribute five dollars or more on patreon and i really appreciate that while you re still here there are a few other things that you can do to help out so follow me on social media and check out some more of my content. And i ll see you guys next time ” .
Thank you for watching all the articles on the topic YouTube. All shares of accountabilitynowpac.com are very good. We hope you are satisfied with the article. For any questions, please leave a comment below. Hopefully you guys support our website even more.
I show you how to make a website header with navigation. We move on to the content in the next video.
Sponsored by DevMountain. Get yourself career ready, check out their website: http://goo.gl/enNbQV
Don t forget to tell them I sent you.
Follow me on social media:
Become a Patron:
Patrons can download the code here:
Subscribe to my Vlog channel:
Subscribe to this channel:
I do not offer web development services, private tutoring, or “assistance” on school or university projects. I am not an online support service, and I m not interested in setting up a “start up” business with viewers.
video, sharing, camera phone, video phone, free, upload