HTML5 & CSS3 Mastery for Beginners

1. Promo: are you looking for a course that will take you from a complete beginner to building your very own HTML ancestors website? Or maybe you already know some XML and CSS. What? You struggle with building a real world website. If he answered yes to any one of those questions, you've come to the white course. Hi, My name is Alex. Like walking me to my html five and CSS three master course. Now, this is the cost of designed specifically to show you how you can apply. HTML NCs says to build real war responsive websites, the course is divided into several sections in the 1st 2 sections. I'll introduce you to the basics of HTML and CSS, and then in section three will apply what you've learned in the 1st 2 sections to build this beautiful riel ward Responsive website. Now, this course isn't just about coding. In addition, to learn about external five incest history, I will show you how you can optimize your upside for speed and for such engines S C o. I'll introduce you to domain names were Holston and finally I'll show you how you can launch your web site life on the Internet. There are also special sections dedicated to teaching you about the basics of PHP, where you learn how to make you're upset, more interactive. And there is also a section dedicated to teaching you about the basics off Web design so that you will learn how you can design beautiful modern websites for yourself or for your clients, because also comes in over 11 hours of content, quizzes, assignments, relatively resources, and you ever get stock anywhere in the course Alberta to provide you with support as quickly as I can. Now, if you've ever wanted to learn about HTML five incessant story. This is the perfect course for you and I'm hoping will in the course, and I hope you see on the inside she is. 2. Introduction to HTML: All right. So let's talk about H t m l. What exactly is HTML? Well, this stands for the hypertext markup language. That's exactly what H t m l stands for. So the big question right now is OK, fine. What exactly does HTML do? Well, I like to use this analogy when everyone explainable. HTML is imagine that a website is the human body. Okay, just think about that for a minute. That website is a human body. HTML would be the skeleton off that human bodies. It's basically kind of like the core structural off a website. You cannot have a website. We've out html. It's practically impossible. So basically eight similar forms the backbone or the skeletal from a cough, every single Web page on the Internet, you cannot have a webpage without HTML. It's got, like having a human body without a skillet, and it's not just it's not gonna happen. So that's basically what h t m. L is. So what I have here is a very simple a tm helpage on the Internet, and what you can see here is mostly just text. But he can also see an image right here. So if I wanted to take a look at the code behind this page. I am using the brave browser. So if I used control you, this will take me to the page source. The source code for the page. I believe control you is also applicable for Google Coombe. If you're using Firefox or maybe even the safari browser, it might be different. But if you right click, you should say something that Cesar view page. So it's just click on it and you should be able to see the code for the page. So what? Here you can see the jargon, Zaid the code they very on sexy code behind this on sexy page. So a lot of the stuff you're seeing in here is HTML. But it's not just a similiar. Also, have some javascript like that. But don't worry. Let's just focus on the html parts. So in here here, you can see h one example of a simple external page. You can see the P tag hypertext markup language. Ah, P class. All the stuff you're looking at right here is age T m l. But don't worry. We're gonna deal much, much deeper into html. I'm going to explain to you exactly the core structure. And ah, you will have a much better understanding of how XML works. Behind the sense in this video are just wouldn't introduce you to HTML and also give you an example of what the source code of HTML looks like. So that's, I think, is much fortune. I will see you in the very next class. 3. Writing our First HTML Code: Let's do something fun right off the bat. Okay? We're going to create our very first HTML page Now. I know you don't know HTML, but don't worry. Just trust me. This is gonna be fun, okay? I want you to create a folder anywhere in a computer, for example. I'm in my documents folder, and I'm going to create a new folder, and I'm gonna call this folder HTML all right. And then inside off that folder, I am going to create a new file and you takes documented by the text document, and we'll just name that the new text document. I'm gonna open it now. Inside the document. Amusing note. Pad. Check this out. Okay, I am going to do this. I'm going to open up some brackets, we're gonna type in H one, and then I'm going to say welcome. And then I am going to type in H one again. But now, in front off this H one, the 2nd 1 I'm gonna add a ford slash, okay, and then a new line. I'm going to do something similar, but this time it's going to be a P. And then I'm going to say my name is Billie Jean. All right. And then I'm gonna close it just like with a chew on a phone slash and then ap Do you get that? OK, now I'm going to go ahead and hit file, and I'm going to save ass. All files. But now the name. I am going to change the name to billy dot h t m l All right. I'm gonna go ahead now and save. And now inside of that folder, you should see Billy that HTML simply double click on it. And you go. I am using the PC. So by default, Internet Internet Explorer is my default powers are so it's open it up and Internet Explorer, and as you consider it now, it saves. Welcome. My name is Billy Jean. Hopefully you got similar results. And if you did congratulations. Give, actually, just within your very first piece offic similar code 4. Installing Brackets: for the rest of this course, we're going to be walking with a text and it or to light and edit our code. And now there's a whole bunch of Texas those out there. But the one old recommend would be brackets for too many reasons. One is the fact that it is free, and second is the fact that it was built specifically full HTML and CSS code. And oh, it's also compatible with Boat Ah, PC's and Macs. So it's a great choice. It's already comfortable walking with another type of text that I took them. By all means, you can stick with a text editor. You'll be fine, but I'm gonna go with brackets. Simply go to Pakistan I o. And and simply click on the blue Bolton that say's download brackets. Now the actual installation of records is pretty straightforward. On the very first page, you might see something like this you can simply on check this two boxes that will add brackets to the path for come online and then also to explore. You can check this, too. You don't need that that's typically call next and click on install, and that's pretty much it So you want to this message? Hey, you know you want allow this up to make changes? Yes, to simply go ahead and click. Yes. And, um that's ah, basically it very, very straightforward. Nothing complicated. Shouldn't take too long to install brackets. And ah, just gonna wait for a few, okay? I'm gonna pause the video and all resume once the solution has completed. All right? So once you're finished in stolen brackets and you learn it, this is going to be the very first page you would see. You will see on the screen shots you might see index dot html with some sample html code. And you will also see another file our main dot CSS. So that's been much it for installing brackets. German Avonex video bear will not begin to explore html in much deeper detail. 5. HTML Tags and Elements: All right, So let's get started with the core structure off an html page immigrant. Make use off the index dot html page that comes with the brackets installation. Now in here, you can see this is a very long document, but let's take a closer look at what exactly we have here. Let's take a look at this particular section that say's what these brackets in here, you can see that we have P right. And then we have a closing P as well. The P here is what we refer to as a tag. Basically, anything you see on this page that has an opening and closing bracket is a tag. So examples would be like the head tag, the meta tag body tag, H one tag P e M H three Samp and so on. These are tags. Tags are used to identify a particular kind of content in most cases. So, for example, the P here stands for paragraph, so it stays, right. All this text they use having here welcome to brackets are modern open source called called a little. All this stuff is a paragraph. That's what the P tag is used ful all the one here where you have, like an H one the H tense for a heading. So H one is a heading one basically, and it stays getting studded with brackets. So these tag this h one identifies this text as a heading, just like with H two identifying Ah, this is your guide as another type of heading and so on those tags. Now, when you have on opening, tag it closing tag. And of course, the content in between those tags, that's where we fit you as an element. So basically oldest of your senior I th one getting studded with black heads and then the closing h one all that is where we fit you as an element. One thing I should mention before we move on is that every order, most tags have an opening and a closing. Not all but the overwhelming majority. Okay, that's why you see h one in here. And then you see the clothes and a trim with the forward slash GHT with the Ford slash H two to close it the same thing with the P as well, the e m and someone. So that's just one very important thing you should know about tags. Most of them have the opening and then the closing. And then the contents that you have in between those tags and attacks themselves combined is what we fit you as an element. Now you can also have elements inside, often element. The best example here would be the body tag. The body look at this way takes you. You can see we have got this body tag, right? Never click on it. You can say it's highlighted in green Neighbors cool down. Take a look at where it closes. Remember, every opening tag must have a closing, and you can see it right down here. This is where the body tag closes, and you can see just how much information how many tags and elements are inside off this body tag. That is all lot. So just to let you know again, an element can contain elements inside of it. Tags are used to identify bits of data, whether it's an image, a text or hidden and so on, and then your tags, most of them will always have their closing, so you can have an H one tag and then the closing a Tron tag and so on. So that's basically eat for the court structure off an HTML page. Thank you for watching. I will see you in the next class. 6. HTML Attributes: Let's move on now to talk about HTML attributes. Now attributes are used to provide extra information about a particular tag. So as an example, let's go all the way down here and then where you have these a tag with the H ref attributes. Basically, the A tag is used to identify a link ailing that you can click on the A Treff. Here is the attributes off the A tag telling us the source off the link. So basically, when you click on that link, where do you go to the H where provides that information Now, on the new the A tag, you have the i m g tack. The I m g is used to represent an image. Right? And now in here you've got the our tribute the A lt attribute, which is the alternative text. So basically, the lt attributes a still in those a stone The browser that hey, the alternative text for this image is a screen short showing CSS quick edit May have you ever taken a basic course on S e O? They will always tell you that Hey, to optimize your images, you want to make sure they have alternative texts. This is how you would add the old tent of sex for an image using HTML and then in here you've also you also have the s. I'll see. Attribute SRC stents for the source, basically telling those. Okay, this is the source of the image. This is where you can find this particular image. So that's it for attributes. They basically provide extra information about a tag. You have a whole bunch of them out there. You have attributes that comptel tell us the style that call or the hide with and so on and so forth of different types of tech. So that's it. Full attributes. I will see you in next class. 7. HTML Headings and Paragraphs: Now that we've learned about HTML tags and attributes, it is time to get our hands dirty by writing our first official piece of code. And to do this, I'm gonna go over two brackets and then go to file and then click on new to open up in new file. So first things first is before we can begin way tonight. It's similar code. We need to identify our document as being an each team will file. And to do this we have the opening tag and then we have the post trough and then in capsule , we have DOC type and then space, and then html. This basically just identifies this file as an HTML document. It's good for browsers, basically, right. And then next one is going to be the HTML tag itself. Officially now identify and saying, Hey, this is in each single file, and now inside of this system will file. I'm gonna press tab on the keyboard to indicate that. Okay, now we're gonna have an element inside off the HTML tag. Okay, This element is going to be the body tag. The boat attack is typically used to identify content that will be displayed on the browser . So images or the files video stuff like that all that should fall on their your body tag. Basically, anything inside of your body tag would be displayed on the browser. So because the body tag and now again another tab. And let's add ovary first H one tag each one, and I'm going to say this is very, very big. I am going to close the H one tag. Let's do something very similar again. We have hte, too. This is very big. What do we do? We closed the edge to tag. Let's come down here. Its three tag now and see this is big. Let's close the HDB tag, and then we can go to H for H five. But just come straight down to age six and I can say this is small. These are what we fret you as headers. All right, so we have 81 h two h three and then h six. I'm going to go ahead now and close the body tag. All right? And then finally closed the html tag. This is how you structure called with HTML. Make sure you in dent elements that fall under one particular element. All right, I'm gonna go ahead now and hit file, save ass and let's called his head in dot html Click on save and there you go. I'm gonna go ahead now and open up the folder that has to file heading the XML DoubleClick . And there you go. Now you can see the output. This is very, very big. That's H one h two h three and then age six. So the headings are important because they tell the Broza how to display a particular piece of content now because we said this is very, very big falls under an H one tag. The brother knows that. Okay. And most display this particular text using very large sizes because it's an h one tag. And it's also important because for your S e O, whenever you're trying to optimize our pages or posts for such engines, you wanna have a head instructors. You have h one at the very top and then underneath a 20 Canavan H two and then NH three and so on. So this is also important for S e O. But in addition to the head as six of them, H one to H six. We also have the P tag, which is used to identify paragraph. So in between H three and H six, I'm going to open up a P tag and I'm going to say this is normal all right in a closed API tag. And now let's go ahead and save the file. Go back to my bells. Ah, let's refresh the page And there you go. Now you can see the P tag in action. This is normal. So usually the P tag in terms of size tends to fall. It's usually slightly smaller than an H three tag, but bigger than an H four h five or H six tag. So that's it full. The heading tags, as well as the paragraph tags Veber useful ful are displaying headings as well as, ah, normal text. Normal text will be the P tags. And of course, your headings would be your H warns. Age do is and so on and so forth. So that's a German Avonex video. Bell will continue lighting HTML code 8. Hyper Links: already, we've talked about headings and P tags. Now let's take a look at the A tag used to identifying links. All right, so let's do this. I'm going to open up a new line after the age six tag, and I'm going to say a which is the link tag and then the attributes of a treff equals and then in coats and going to add the U. R L for the website. So that's colon four slash four slash w W that the Web monkey online dot com and now the actual text that people will click on. I will say Visit my blawg and then we can close a tag and there you go. So now you can see what we did here. We have a tag representing the link and then the a treff, which is the source in coats. And then we close that. And then we said, Visit my blood, which will be the actual text, and then we close the A tag. Let's go ahead now and save this. Let's go over to my browser. Let's go ahead and refresh the page, and now you can see it right there visiting my blawg If I go ahead now and click on the link, you can see it takes are straight to my blawg. And that's exactly how links work with HTML. But now that we're talking about links, let me show you something. Have a cool. Okay. You see, when we clicked on this link quick here, it took us to the website. But then it didn't open up the new link in a new tab. When you're doing that, we want that to be the case. OK? We don't want this new upset to take over. Ah, the people we have in here. So how do we get links to open up in new windows or new tabs? Let's go back to our code. And then where we have the h ref. All right, I'm going to create a space, okay? Gonna add another attributes. And that's going to be target equals. And now you can see the option of rights here off blank on the school and then blank. This is the attribute telling us that Hey, when you click on this link that blows, it is going to open up in a new tab. Let's check it out. Let's go ahead now and he save. Let's go back to the browser. We're fresh. And now that's what happens when I click on the link. There you go. It opened up in a new tab, and that's exactly how hyperlinks work in HTML. Now. We could also have internal links as well. That will simply link ah, one page to another page, or even instances where we have what we call the ankle wings, where, when you click on the link, it doesn't take you to another page, another Web stable that it could take you to. Another section within that exact same page will take a look at that a bit later in the course. But that's it for hyperlinks. Thank you for watching. I will see you in the next class. 9. Images and File Paths: let me show you how you can add images to your HTML file. But before we do this, I want you to do me a favor, go to your current HTML folder and then add one image. So this gives right now. For example, I do have the xml dot PNG file and then inside of you estimate folder, create another folder called Images. And then instead of the images folder, add one image. So in my case right now, I do have thes kind. It'll PNG file and then in the HTML folder, I do have the HCM holder PNG file. By the way, your images don't have to be PNG files. It could also be J. Peg. It doesn't matter. All right, So how do we display this guy's? Well, I'm going to go over to my brackets textbook text, ed, it'll. And now let's add the image tag just on the nifty A tag. And then I'm going to say S r C equals and then I'm going to add the html dark PNG file, okay, and then space and then four slash This is how you would close the image tag so you don't have anything like open bracket four slash and then I am GNN closing bracket. No, this is how you would close the image tag. We've also used the source attribute to indicate the source of the fellas. You can see it right now, so let's go ahead now and save this. I'm going to go over to Internet Explorer refers the page, and there you go. Now we do have our image displaying. But then how do we display the second image, which is going to be the skynet dot PNG file? Well, if we go back to the pockets text Eddie Tool, we open up another line and then we say AMG SRC equals and then coats, Let's say, in Capital Lettuce kind it dot p and G and then space. And then we close that, and then I come in here and say, Save, let's see what's gonna happen. I'm going to go back to inside Explora. Let's refers to page and well, as you can see right now, nothing is displayed. In fact, we do have an indication in here that hey, something that's trained to display, but something isn't quite light. So what exactly is going on here? will. He was the problem. Okay, if we compare. Ah, the two images. Skynet of PNG is inside a folder called Images, while HTML the PNG is inside the root folder. All right? And also, keep in mind the document is cold. Heading thought HTM. Oh, this is the actual file. Were walking the way he heading the HTML now, because the image external, the PNG and the head in the hmm file are inside the same full dog watches extend Mel. We can easily just directly add the sauce off the image. But since the second image is in a different folder compared to the head in the HTML file, we will need to specify that folder the path that folder is in. So basically, we're gonna have to come in here now and say images. Oh, sorry about that. Let's go back in here. We're gonna say images and then four slash skynet. Phil, PNG. Now, this is the path to display this Canada PNG file. First, we're gonna go to it to a folder called Images. And then instead of the images folder will find a file called Skynet Got PNG's. Whenever I can go ahead, save the file. Let's go back to Explorer. Refresh the page. And there you go. Now we have the image being this plate. So this exactly how you can display images, but also a small listen and file paths whenever you are trying to add an image or anything else. As long as that file is inside the exact same folder as the main documents in this case are heading the XML, or we can just type in the name off that file. But if the if the file is in a different folder will have to specify that for the first and then four slash and then the name off that file So that's how you can display images. But before I go, we can also add the old tentative text. Don't forget about that. So I m g s r c that we can then also come in here and say l t equals. And then in coats let's say html file logo and then in here as well we can do the exact same thing and then say Lt equalled and then coats sky net logo, stuff like that so we can just save that and ah, that's pretty much it. So there you go. That's how to add images to your HTML document 10. Assignment 1: already. It's time for your very first assignment, and what I want you to do is pretty easy. So far, you've learned how to add hyperlinks using the A tag. You've also learned how to add images using the I M G tag like. But what I wanted to do in this assignment used to figure out the way how you can make one of your images clickable so that when anyone clicks on that image, it will take them to a new upsets as an example. In here, my html five logo. If I click on the image, it takes me straight to the Web Monkey Online, Doc home. So, in other words, I do have a clickable image that has a link to the monkey Lendl Calm. Plus, the link also opens up in a new tab. So I want you to try and think about is trying to figure out a way how you can make an image clickable using HTML and also ensure that when clicked on it opens up in a new browser. Good luck 11. Assignment 1 Solution: Hopefully, you were able to solve the quays. And if you did, congratulations. But if you didn't don't worry. I'm gonna show you how you can create a clickable image using HTML. All right, let me go ahead. First of all, and we first this page. And as you can see right now, the logo is not clickable. So how do we solve this? Well, we're gonna go back to all brackets. This is the file. The image we want to make clickable the html dopey n G final. So I'm going to create a new line. And what I'm gonna do is this. We know that the A tag is used for create 18 links, right? So let's go ahead and add the A tag. Let's add the link that it will take us to. And that's of course. Ah, https, colon ford slash w w dot uh, the web monkey on line dot com Remember, it's supposed to open up in a new tab, so we'll add the target attributes as well. Let's add, that one was called blank. OK, now we don't need any text. We just need the image to be clickable. So what, we're gonna do is very simple. Gonna quit some space in here. The A tag has been open, As you can see, right, We're going to include the image inside off the A tax. So we're gonna add an end and here to indicate that this image is under the A tag. And very simply, we're just gonna go ahead now and close the a tag. Let me do that properly. And there you go with just quit ated are clickable image. Let's go ahead now and save this. Gonna go back to Explorer. But first a page. And now when I click on the logo, it opens up the bed monkey online dot com. So that's exactly how you can create a clickable image using HTML. 12. HTML Lists: Let's talk about how you can create lists years in HTML and lists are pretty much a big companies over lots of websites. And as an example, over here on these dummy XML page down here, you can see we do. You have a list off a lynx buckets that I owe buckets. Team Blawg buckets on. Good hub. This is a list. Wait here. And it's basically an on ordered list and ordered lists. On the other hand, you would have 123456 maybe A B C D. You know, stuff like that. So how can we could eight lists using HTML? Well, it's very easy. Let's go over to our brackets, text any tool and then what I'm gonna do is let me just go ahead and remove the second image. We don't need that. So just underneath the a tag in here, I am going to open up in new tag and I'm gonna call these u L. This represents an on ordered list. If there's going to be an ordered list, would use o l. But check this out. Okay? I'm gonna open up a new line and then undone if it I am not going to list The actual are elements under the on of the list. So the 1st 1 is gonna be l I. That represents the first member off this list. Let's call this apple so we can call. It may be a list of our foods. Maybe so we can close that l one. Let's open up another line and let's add another fruit. L i and this is gonna be orange alike. There you go. And then let's add one more and, ah, what foot? Surely adhere Guava. I'm sure you never thought about that, okay? And finally, we're going to close on order list. And there you go. This is how you would create an on ordered list. First of all, you're opening up with the U L. And then the actual list items themselves. You'll have the l one tag and then closing. Ellen tags in between. Each list item now, an ordered list, like I said, is pretty much almost the exact same thing. I'm just gonna copy this block like click copy, and I'm gonna pay. Sit down here. The difference Dill is that instead of you l it's going to be o L. This is going to represent an ordered list, and you're good to see the difference right now. I'm just create some space in here. Okay, let's go ahead and save this and I'm going to go back to HTML Document were first a page and now you can see on other list Apple, orange Glover and then the ordered list off Apple, Orange and Glover. So this is how you can create on ordered and ordered lists. Using HTML one other than weaken do with lists is to change the default icons representing the list items. Now, by default in here, you can see that the on ordered lease has, like the circle the black circle representing H list item and then the order lists has Bigelow 123 You can actually change this. And we can change this by adding something known as a style property will talk about properties very, very soon. But check this advocate where you have you. Well, I'm gonna add some space, and I'm going to say style equals. And then in coats, I'm going to say list and then you can see the property rated the least style type. What kind off type off the list. I cannot go into our ad in here now you can see several values provided to you. However, let's try going with Square as an example, right? And then, at the end of square, I'm going to add a semi colon. All right, let's go ahead and save this. And now let's go back to explore over first the page. And now you can see that the ICANN has changed from the dark circles two squares. So this is how you can change default. I could represent in the least items for our own or that lists. And as you can see right here, we do have access to all the Vela's. Besides the square, Let's say, for example, what else do we have in here? We also have the disc by thing. Disk is the default. Let's try disk. Ah, let's save this. Let's go with disc. Let's see how this would show up with fresh. Okay, so you can see this is in fact, the default because sometimes some browsers, but interpret, discuss a little differently. So for explore the disk is the default. But we do have another one. We can go with, which is our circle, says Go. It's circle and let's see how this would look like safe. It's come down here first a page and OK, so basically circle and disco exactly of the same thing with explore. If you're using a different browser, say chrome or safari, you might have slightly different results now going back. We also have a way of changing the default icons for or that list has been much is going to be. The exact same method will say our style and then equals. And then in coats, weaken See ah list style type right there. And he considered different. Vela's Armenian decimal disc Georgian. Ah, let's see, we don't have lower Greek. Let's go with lower Greek and see how this looks like. Let's are are semi colon at the end and then we can save Let's go over to explorer refresh And now you can see we now have the lower Greek are numerals representing our order list. So this is how you can change the default icons representing the on ordered and ordered least items won't last into mentioned before we round this up is that you can also create lists inside of a list. So basically nested list That's over Fred, too. As so That's it. For example, where you have orange in the on ordered list. Let's they want wanted to create another list inside of orange we're going to do here. Is this. Simply add, and in dense represents the new list and then is going to be you. L again and then inside of the U well, but not going to add the nested list. So let's say, for example, got the red oh oranges just as an example, Wait oranges. And then we can also have a lot of other times of oranges are there? We do have yellow. Orange is right. Yellow oranges. Let's close that one. And then finally, we're going to close the on ordered nested list and that you have it. Let's go ahead now and save this. Let's go over to Explorer. Refresh the page and there you go. Now you can see we do have and on ordered list inside off the original another list. And that's how you can create nested lists using extreme El 13. HTML Style Attribute: let me now introduce you to the HTML style attributes. And this is an attribute that you can use to add different kinds of styles two different kinds off elements. That there is a general formula for this, and that would be the tag name in brackets. And then style, of course, equals in coats, the property off the style and then the value off that property. Now a very classic example could be us at in a background color to our body element. So as you can see right now, we do have body style equals background color bag on call here being the property and then blue being the value off that property. This is how you can use the style ach put, Let's put it into action. Let's at the background color to our body element in our brackets. Texted it'll. So over here I'm going to say, just after the body element, I'm going to say buddy style equals and then in coats will have to add the property festival, which is going to be the back ground color and then colon, and you can see the different kinds of those that we have. In fact, Let's go with Ah, let's go with Burly would as an example, right, And then, at the end of develop the property will add a semi colon. And there you go. Let's go ahead now and save file. Going to go over to Internet Explorer refers the page, and voila, just like that had had the background color to, ah, body tag. Now, in addition to change in the back and colors, off page or website, there are other things we can also do as well. We could also add, for example, like the change, the font color for our text, and this goes right now. Let's try to change the font color for the H one tag. So what I'm gonna do is I'll ch one style equals. And then in coats, we're going to add the Kahlo property. Keep in mind that setting properties are only available to sitting kinds off elements. For example, you can't add the ah background I'm so you can add the call all you can use the color property with, say, the body tag. It's not going to work. You will need to use background color instead. All right, you can't use a Bagram culo on an image tag. It's just not going to make any sense. So in this case, for the H one h two years, if you want to change the color, the text will have to use the property call off. All right, so in this case, let's give the value of Let's see your red as an example. All right, so we've changed the color to read. Let's go ahead now and save this. Let's go back, Teoh Broza Preference the page. And there you go so you can see the H one right now is now in red, So the same applies to the other text tags your H one Z H to use H 30 p tag. You can change the color that fun color by simply using the property off color. But you could also do something else. We can add another kind of style, which will be the text align in this case, Let's come in here for the age two and let's say style and then we'll say, equals and then in coats. Let's go with the text, our line property, and then we can say center as the value other voters of course, would be left to right, justifying things like that. Let's go ahead and put it into actually to save this. Let's go back to you out. Perot's, uh, refers the page and there you go. We have now aligned our H two text to the center off our page. So the different kinds of our properties and their values there quite a lot and a lot depends on the element or the tag that you actually applying them to. Now, before I go, let me give you one more example. Let's target the A link right here that say's visit my blawg. What I'm gonna do is I'm actually going to add three different types of properties. So first of all, we're going to remove the default on the line. We're going to change the color of the text, and we're also going to transform the text to upper case. So let's do this. All right, I'm gonna go over two brackets and I do have the A tag right here. So after the target, I'm going to open up this style attributes and then equals and then in coats, listed the 1st 1 to remove the underline does going to be text decoration property, and then the value here would be none said no decorations. Let's at the semi colon. The next property would be that text transform, and we're going to transform its to upper case light. And then the last one here would not be the color. And let's go with all its a green as an example. Summit Colon. So there you go with edit three different properties with three different values. Let's go ahead, Save and others go back to Explorer were first a page. And there you go no more on the line capital Etta's and the text is now green so you can add multiple properties on and multiple values for those properties to one. Ah, single element. Now the number of attributes and tags that we've covered so far are just a very, very tiny fraction of the total number of tags, and actually it's available with HTML. Now we're gonna begin to cover a few more off them later in this course. But if you're interested in get in Eastern access to all the tags, all the attributes well, you can go to HTML to calm four slash attributes and then in here you can see all the possible types off attributes that you can apply to different types of tags with the explanations next to them. It is a lot, and then you can also go to ford slash tags. And in here you will see all the tags available for you to use with HTML. Now, I would not recommend you spend your entire time going through all of these. You don't need to know every single action, but you don't need to know every single tag. It's kind of like you trying to know every single word in a particular at language in, let's say, English language and Japanese. You know you don't need to know every single word as long as you know the most commonly used tags and was, come on, the used attributes and then the properties and the fellas of those properties that you can apply to them. You'll be good to go. Plus, when you begin to learn about CSS, you will find, say, it is much easier to walk with and make styling changes to your elements and over when it comes to style, instead is you're much better off investing more time Live in CIA says than, ah html styling. So that's it. Think is much fortune a German, even extra Israel will now take a look at text Full matin. I'll see you then. 14. Text Formatting: welcome back. And I really do hope that you are enjoying the course those far we've covered quite a lot on HTML and Ah, let's keep going. So right now I'm gonna show you how you can make some formatting changes to your actual text. But before we can do that, let's add an actual paragraph with some lines. So to do this, I'm gonna go over to learn if some dude I owe limits on basically is used for generating dummy text that developers useful testing purposes. So I'm simply going to go ahead now. And that's copy some of these lines right here and just go ahead and copy this and I'm gonna go over two brackets. Let's open up a new paragraph tag at the bottom. Right here, Pete. Tag. Add that, and then let's close the p tag. Okay, so how can we make formatting changes to our actual text? We can't use this talent, actually, because attributes only applicable to tags, right? But what if, for example, we wanted to make a concept turtle right here, this particular would wanted to make it bold. How would we do that? What we can make use of sitting kinds of tags and specifically to make it bold. We're gonna make use off a tag called the B tag, which is, of course, I represents the bold. Oh, tag. So I'm gonna come over here right now and close that be tax right now. Constructed Tower is going to be bold. Let's add another tag to use mode white. Here. Let's make this italic. Okay, let's make that day italic style. I'm gonna come in here. Let's close that one. In fact, let's make use Mount Temple. So two words. Let's make those two in italics. Let's close that we do have another tag, which is the emphasize tag, which is going to be, of course, e m. But just gonna addle the tags and then we'll see how they look like once we how we first a page was coming here close that we can also make some other additional changes, like add or makes it in kinds of text, are subscript 11 superscript. So let's make this SAPIEN here. Let's make this a super script. There's going to be S u P don't worry, you will see what these actually do you in just a moment and after the S I'm going to go ahead and close that. So we've made the s in SAPIEN a superscript Ah, let's see, Send necked us. We're going to make the last s here. A subscript so that's used the S U B tag. And then that's at s right there. Close this. Oh, right. And, uh Okay, let's go ahead now and save this. So we've added 12345 different kinds of tags. Let's go over here to you My brief bells are refreshed The page Let's come down here. And well, there you go. Now you can see constrictor. Teacher is now bold. I use my own temper is an italic magnate's emphasize which is also very similar to metallic style. But and down here, you can see say p and the s is superscript, which means it goes on top and then in selectors the S is a substrate. Richman's it goes down. So this is how you can make our formatting changes to specific wars, even specific letters using tags with HTML. Now, before I go, there is one of the tag that is very similar to the bold tag, and that's going to be the strong tax As an example, let's add the strong tag to ipsum. All right, Taping up some, uh, I'm just come over here and remove the 1st 1 Okay. I'm gonna go ahead and save this. I come back here to brave fresh. Now you can see Epsom is also now bold. But a question is, what is the difference between the bowl tag and the strong tag? If all they do is actually just make the text bold? Well, from a display point of view, there isn't any difference because both are bold. However, behind the scenes bows as well, putting more importance to text that has the strong tag. The strong tax should be used for text that is very, very vital, very, very important and have a sense of urgency. The ball taggants that is used just simply makes it kind of takes bold. Maybe ah, name of a person name of a place, stuff like that. And then it also becomes important when you start working with CSS because with CSS, you can say OK, all elements, all tags, all text, whatever that have the strong tag, make them red, and then all text awards that have the bull tag just make their Michelob black. You could do something like that. So at the end of the day, it's not super important. Esther, whether used a strong tag or the ball tag but for the purposes of doing it the right way used a bowl tag when you just want to make a text a bold and then if you have certain text that is off very, very huge importance. Maybe like a coat or something like that, you could use the strong tag for them Off course. We'll talk a bit more about these as we progress into CSS. But that's it for text for Martin with its damn l think fortune, I will see you in the next class. 15. Block vs Inline Elements: let's continue with the course, and now let's talk about something very, very important, and that's going to be the concept off in line and block elements easy in HTML. You generally have two types of different kinds of elements. You have the block elements, and then you have what we call the in line elements now. The difference between this, too, is that the block elements are elements that, by default, would occupy their own separate lines. As an example. In here, you can see that when when we output of the H one tags, the H two and H threes and even the P tag, you can see they all stand on separate lines. That is because they are block elements by default. So you block element you displayed. It occupies one line it so it's on its own on a single line. Every other element that comes after it it will push to the next line. That's what we call block elements. Now, Ellen elements at the exact opposite. You can add as many inland elements as you want on the same line. Now, if we go back to our text a little over here, we've identified that the H warns the P tags and all that. Those are block elements. However, your England elements would be the A tag and the image tags. So let's it, for example, in here. Why way I have the first link. I'm going to go ahead, and I will simply copy the exact same text. And then let's create in Ulan and then paste the same link all over again. Let's go now and safe. That's refresh the page. And now down here, you can see that we now have the tool ings side by side. And that's because a tags are naturally in line elements. If you copied in h one tag on a John Element and you pace of these right next to another H one element, I guarantee you that the 2nd 1 will go to the next line. That's how block elements walk by default. Now you could actually change the way these elements are walk by default. For example, if I wanted to force, let's say the first a tag down here to act like a block element, I can actually do that, and of course, there is going to be a property for that Let's do this. Okay? I'm gonna go over to style, and then after the green Vela for the color attribute, I'm going to add a new property and that what is going to be called the display property, and then the value is going to be block. All right, So now I am telling the first link the first attack to act as a block element. Let's go ahead now and save this unless it was gonna happen. I'm going to refresh the page now, and there you go. Now you can see that the first a tag is on top down, up, up here while the 2nd 1 is down there so you can force in line elements to act as block elements. And coincidentally, you can force block elements to act like England elements. So instead of using the value off our block for the display property, you would use in line in that case. So this was just introduced you to the concept, off block elements and in line element. This will become very important once we begin to delve into CIA sets. But for now, what did you do? You know the difference between these two. I will see you in the next class 16. The Break Tag: I want to draw your attention to a particular tag, which I feel you would find very useful as you begin to build upsets with HTML now. Previously, I showed you how you can force aylan elements like you're a tag to act like a block element by simply using the display property and then develop off block right. However, there is a much better way of actually achieving the exact same results without using the display property. While you can do in this case right now is, let me just show you I'm gonna go ahead and remove the display property. All right? So if I want to force the 1st 8 I care to act like a block element. What I can do is to create a new line, and then I'm going to add the tag, be are and in space and then four slash This is basically a break tag. It tells HTML that hey, creating new line for the content that's to follow. That's basically what this tag does. Let's go ahead now and save. Let's go back, Teoh my brief profiles that refresh the page and there you go the exact same missiles achieved but any much easier. Wait. Now the more tags you add, the more braked at the most space. So, as an example, let me just copy this, okay? And let's do this. I'm simply going to go ahead now and paste several a few more. Let's go ahead now save. Let's refresh the page and ah, Opps. Excuse me, Let's refresh this page and now you can see the results. Now you can see there's a lot of space in between the very first stag right here and the second tag. Now you might be wondering Hey, Alex, wait a minute. What about the this image? Why is this image kind of appearing in between the first AG and the A tag even dough? If we go to our page here, you can see that the image comes after the second. A tag. Actually, what you're seeing here is exactly correct. It's because this image is so big. You think it's above the second attack, but they're actually on the same line. If he notices theeighties right here and then the image is right next to it. Is that because the image is really, really big? That's why it looks like, Oh, the image is actually above the second attack. It's not the case that actually on the exact same line. So that's it for the break tag. Thank you for watching. I will see you in the next class. 17. Divs and Span Tags: ballistic about two very important tags. And that's going to be the deaf tag and the span tags. Now, let me ask you a question, right? If you wanted to change the color, let's say the color off a certain word. Let's say, for example, fame's the world fame's down here. Like if you wanted to change the color from the default black toe, let's say red, how would you do that? Now we know that there is a property called Color with which we could use to change the color from black to red. And we know there is an attribute known as style that we can actually use to implement this change, right. But the problem is that attributes only walk with tags. Now the fames is just a word. It's not. It's not an actual boots. So how can we change the color off this particular word? Well, this is where the span tag comes into play. See, with the span tag, we can target words. We can take it letters, numbers. We can take it anything and use the span tag to change the property off that particular element. So let's they wanted to change the color from black to red right now for fame's. I'm gonna do this. I'm going to open up a new tag and say span, and then I'm going to say style. Now we can attach the style attributes to this span tag, and then we can now say, Okay equals and then in coats. But of course, now going to say caller and then will now, of course, at the value off Red semi Colon and let's go ahead and close the opening. But remember, of course it's attack. So we also have to close the tag. So after the word, I'm gonna come in here right now and add and closed the east pan tag. Right, So there you go. Let's go ahead now and save this. Let's refresh the page. Let's go down here And there you go. So you can Also, the fams is now in red, thanks to this pan tag so you can use a span tacked to target words, letters, figures, anything you could also coincidentally change the property we're dealing with. We could change maybe the textile line property, but could change the text decoration to display property and so on. And so forth so that it for the SPAN tag. What about the Dev tag? Now the diff tug is used to target sections on all Web page. There's an example. Right now we do have, Let's say, for example, you wanted to specifically target a section containing the H one all the way down here to the first Ah, a tag light. Let's I wanted to give this particular section a different background color. We would use the Dave Element in such a case. So as an example, because coming here and what I'm gonna do is I'm going to add a tab to push everything to the light. Let's come down after the body tag and damage going to open up the new tag, which is of course, going to be the Dev Tacked E i V. And then down here, I cannot go ahead and close the deaf tag. So basically, we have now given this all new section, we've divided this section from the rest off the web page. So from here, right now, I can come in here and say OK, def style equals and then encodes, Um, I'm not going. Come in and say background, Uh, color and let's say Ah green as an example. Let's go ahead and save this. Refresh the page, and if I school back up now, you can see that the section contained the head and element all the way to where we have the age at which you can see because it's the exact same color as the background color we've targeted. We basically changed the back and colored this entire section, using the Dev tag that they've element. So that's what you normally use dibs full now. Technically, you could kind of get away with using multiple body taxes. So, for example, you could close the first bullet tag, you know, over here and then open up another body tag. But that is just terrible cold. And that's like the worst XML according of all time. So please don't do that. Your webpage should only ever have one single body tag. If you need to divine sections off your page well used the Dev attack. That's what it's their full. So that's it for the Daves and this pan tags. Pantex once again are used to target words. Let as you can use detect to change the properties off these kinds of elements, while the Daves are used to target sections on your pigeon. Of course, Dev tags or elements are block elements, while your SPAN tags are usually are in line elements. So that's it for Dave's and span. Think of a watchin I will see you in the next class. 18. Combining Inline and Block Elements: Now that you're familiar with what block and in line elements are, let's do some plane around. Okay, let's see how we can actually combine both England and block elements together to this play content. So first I'm going to do is I'm gonna change the background color for the Dev that we created previously. Let's go with our orange this time around and not green so we can see our A tags. Let's save that. Okay, let's try something funny. Like now we do have the H one tag right here. This is very, very big. What if we actually added AP tag inside off the H one tax? So basically, we're now adding a block element inside off another block element. How is this going to you affect the display? That seat? Ah, let's just go ahead and remove this extra words. Okay, so we've got to pee tag inside off the H on tax. Let's come in here. Let's save and let's see there's going to be any difference was coming here first page and well, as against the right now, there is no difference. It's still acting as an H one tag, so it really adding block elements inside of other block elements doesn't really change anything. It's gonna be you. You pretty much will get the exact same result most of the time. However, What if we came down? Hit where we have our a tag? All right, let's go with the second. A tag. Now, what if I came in here and I said, You know what? I'm going to make this in each one tag. All right, so now we're adding the a tag inside of the H one tag. Let's see what's going to happen. That's close the H one tag. Let's go back in here safe. Go back, Teoh Broza refers the page. Now you can see that the second tag, the second attack is now as big as the H one text over here. The only reason why it looks because because, um, all the letters are capital it as well. The ones here are all small towns, with exception of the first tee. So that's basically what happens when you combine block elements. If he had block elements instead of other block elements, you're not really gonna get any change. But if you add an Ellen element in sign of a block. Elemental Guess what? The block element will affect the way the main line element is being displayed. Note, however, that this isn't always the case. There are instances where even if you add an alien element inside of a block element, you might not see any difference. Don't worry. As you begin to get more comfortable working with HTML and you start taking different kinds of tasks, working with different attributes and tags and things like that, you would get used to hell. These things actually work. But for now, I just wanted you to know that you can add a line elements inside off block elements and those affect the way those inland elements are actually displayed. So that's it. Thank you so much fortune. I will see you in the next class. 19. The Head Tag: let me introduce you to one of the most important tags for HTML. And that's going to be the Hedda Tag. This is a tag with which you can use to display very important information about your site , including it's title description. You could even target keywords for S E O using the head attack. And you could even include some CSS styling as well. So let's do this. I'm gonna show you how you can make use off the stack first. And though is we're going to create a new in Dent and in opium on the HTML directly on the rate we're going to add the head tag. It's not Hedda Butthead, All right? Now it typically falls on the the HTML tag. So first I'm gonna do here is we're going to change the title off our website right now. As it is, take a look of like him. All it say's is heading dot html and this makes absolutely no sense. If we uploaded this page right now to the Internet, all it would say is heading the external. But does that mean so to give all upset a descriptive title? We're gonna go back to our head a tag em ago to make use off a new tag called the title tag . And then we can now say HTML tutorials for beginners. But let's go ahead and close that. Let's not come over here right now and save the document. Go over to Broza. Now pay attention to the tab. Lets go ahead, never fresh. And there you go. Now it stays. Html tutorials for beginners Much more descriptive. Now, in addition, to walk in with the title tag, we could add another kind of tag and let me just do this. I'm going to paste the tags already copied previously. And this is going to be the meta tag. Very, very, very important and very useful tag. Basically, the Met attack can be used to display setting kinds off Very important information such as the character set our description off the site. The keywords were targeting for a CEO and so on. Now, the 1st 1 him here is the meta character set and you consider validate off utf our dash eight. What exactly is this? Well, if you begin to include symbols on your site such as the at symbol, the percent symbol things like that. There are ways it has actually HTML code. The units used to display these kinds of characters. Now in other, for your browser, to be able to interpret those HTML symbols you would need to include the character set you're walking with. UTF eight is generally the preferred option because it's universal and it contains the overwhelming majority off symbols and characters. The only other instance where you may not use utf eight and use a different value would be if you were creating the website using a different kind of language, maybe Spanish or Greek or something like that. But usually it's going to be ut f ate. That's what this is for. Now you've got description. Meta name equals description and then the content basically are free web tutorials. In this case, right now, we're just describing the over all content about the website. Now here the meta name equals keywords and in content html CSS. These are the key words were targeting for S e O. So if you want to optimize your pages for S e. O, this is exactly how you would do so. And finally you've also got the meta name equals author. This is if you want to include the name of the author off the Web site or the post of the page. And then, you know, that is exactly how you could do that. One more thing to mention it would be style. And you can actually include some CSS styling inside off your head attack. How do we do this? Okay, let's say, for example, we wanted to change the background color off our entire website. No, over here. We already have the body style are equal in back, and Qallab really would. The thing is, this body tag is only going to affect the home page or whatever page this particular court is on. It's not going to affect all the pages on a website. However, if we wanted to target all the pages on us at all the body tags on our side at once, we could use CSS, so let me just see what I'm talking about. I'm gonna remove all developed that we have in here and just leave the boat attack as it is . Check this out. Okay. I'm going to include the new tag off style and then inside of the style tag we're now going to add. The element we want to target in this case is going to be the body element, right? So it's going to be body and then curly braces. All right, open up a new line. And now let's add the property. And this is what I was going to be. Background color and, let's say, Aqua actually going back. Well, let's go with Let's go with Blue as an example and in semi Colon Now basically, we're saying, OK, everybody element on a website change its back on color to blue. All right, let's add one more. Let's take a look at D L I. Ellen's that we have in here like Apple Challenge, Let's say, wanted to give all of them a single color off. Let's say green like so to do that. Very simple Herbal. Just say L I that's the element targets and White Kali braces up. Sorry about that. Cola braces, and then in a new line, we're going to say color and then we'll say green semi colon. Now, basically, we're saying every single ally element on a website change its color to green. Let's go ahead now and close the head a tag. Don't forget to close your head tag. Very, very important. Let's go ahead now and save this. Let's go. Over What? You Broza? Well, first the page and there you go. So first things first. Our pages now now has the backing culo off blue. But then down in here, you can see that the Ally elements are in green and her okay, green and blue is not a great combination. So let's just do this real quick. Let's change the background color from blue to our let's say gray instead. All right, let's go back in here. Save Go back. Teoh Browser refers the page and there you go. So now you can see every ally element has been set to green. And then, of course, our background color is set to great off course. We did set a specific Bergen color for the Dave in here. That's why it still has its orange color. So the bag uncle of a page will not overwrites the background color off a day of inside of it. So that's exactly how to make use off the head. I I meant and believe it or not. What you're seeing right here This style, this is your first introduction to see Assess. This is what we're fit to as internal CSS. Because it's contained inside. Often each general document regular seasons would be a separate file on its own. And then you will have to link your HTML document to that ceases document. We'll talk about that a bit later off course. But for now, this has been your introduction to the head attack. Very, very important. Very vital tag for extreme ill. Thank you for watching. I will see you in the next class. 20. HTML 5 Semantic Elements: as you begin to end up this section on HTML Elect to take a look at the H similar five semantic elements. So what exactly are these semantic elements? Well, they're used mostly for providing structural to your content. And there is a wider important is because by giving your content, structural search engines would better be able to understand what your content is about. And as a result, you be able to optimize your content much better for search engines. And in addition to this, it just makes your content look so much easier and so much cleaner to read and understand. Let's take a look at some off. Then you've got, like the article aside, You've got the footer you could head up. You've got the knave. Now, before I continue these head, a tag right here is different from the head tag we talked about previously. What is the difference? See, the head tag is used for containing information that you typically would not see on the front end. Information about the key was your target in the title off your website is description, the character said, and so on the scripts those are the kinds of information contained inside off your head tag . Your head attack, on the other hand, would typically contain information like the logo off your website, the main menu and so on. As an example, Let's take a look at my block over here. If I was going to break this down, see what? Where have the logo and then the main menu. This would be inside off my head. A tag. And also because if I go to any post or any page on my site, the information contained within the head attack is usually consistent. The same applies to the Fouda tag, which contains information in the footer section off my site. And this goes right now, you can see we've got an about section, some sat lings and some social media. This would be contained inside off the food tat tag, which is the one you see right here. So these semantic elements contain information about the structural and also content off our website. Now you've got the now element right here. This would be used to contain your main navigational menu. And then you've got other ones like your main section article it could typically into change. Ah, these ones because they basically are used to contain Ah, the actual content off your website and in here right now, you can see kind of like a breakdown. A straight The breakdown off how these thematic elements are used. So that up you've got, like, the Hedda tag at the bottom. You've got the food up, and then you've got the knave containing the main navigational menu and then the actual content, you could use your elements like section. You could use article. You could even use dibs. We've talked about gives already. You don't necessarily have to. Your sectional article and then assigned is typically used to to contain information that would be to decide off your page in this case right now. Maybe like a sidebar. I just as an example. So we'll be walking much close out with these elements as we begin to build our actual website. But for now, I just wanted to introduce you to them because it's important that you know that they exist and what it is that they actually do. So feel free to go to this website, are freed court camera ogg, and then you can search for HTML five semantic elements. This is a very, very descriptive article. They will describe to you what these elements are and how they are used. But like I said, Alia will be taken a closer look at them when we begin to build our website. Thank you for watching. I will see you in the next class. 21. HTML 5 Conclusion: Well, there you have it. We've come to the end off this section covering HTML five, and you've learned quite a lot. Now you've learned about the XML tags, the attributes, the stallion property is their values, elements and so much more. Now we haven't, of course, covered everything over a garden victim of five. We haven't talked about eight similar forms. We haven't talked about tables, either. We'll take a look at these once you begin to build our sites. That don't worry. In the meantime, if you want to learn a bit more about HTML on their own free time out, however commended, go to W three schools that come and then check out the tab for HTML. In here, you can see all the necessary our information and continued all kinds of information about the different kinds off elements and tags and attributes and all that stuff. So if you're interested, I would recommend you check out W three schools Don't come, but that's it for now. For Sistema five, you've learned the basics. Let's now move on Children about the basics off CSS 22. CSS Section Preview: All right. So welcome officially to the CSS section and we're done with HTML for now. Moving forward. It's all about sisters. From now on, until we get to section three, where will now combine XML and CSS to build this particular website that you're looking at ? So in this section, I'm going to introduce you to the basics of CSS and also talk about the most common types of designs that you can apply with CSS. Now, CSS is a very, very, very broad topic. I could make a 10 hour course just talking about CSS, but we don't have 10 hours. So what I'm gonna do in this section is I'm going to introduce you to the most popular to the most common types of designs that you cannot play with, CS says. And then in Section three, when we build this particular site, I'll introduce you to even more. Arcia says skills. So sit back, relax and I hope you enjoy this section. Let's get started 23. What is CSS: all that is a welcome to this brand new section where we're going to be talking about C. S s. And the obvious first question here is going to be what exactly is C S s well, CSS stents for cascading style sheets. Now I know this doesn't make any sense, but in time it will now remember also when we talk about HTML and we used analogy off a website being a human body and html bean the skeleton Well, CSS would basically be any code that makes HTML look better. That's basically what CSS would be. So if we were to use the analogy of the human body, seizes would be like the skin muscles, the hair, anything that makes the human body look better. So CSS forms the core style and framework off every Web beach on the Internet. That is not to see that you can have style without C says you can. I mean, we I showed you how to make some style changes to your it's Tim L. Our document abusing just pure HTML. But CSS, ideally, should be the German factor because it makes tailing are so much easier and a lot better so Carlos backgrounds, hover effects, animations from styling, anything that can make a webpage website look more attractive. It's usually done with C. S s. So that's a brief introduction to CSS German even eggs video, where we will now begin toe walk with CSS. 24. Download the Files: all right. Before we move on with the rest of the CSS course, I want you to do something for me attached to this video. You will find a zip file, and when you download and on zip that file, you should have these three files. Basically, you will have a, ah, an index of html file a style that set us file. And also you would have a folder containing, ah, three different images. So, depending on the platform where you're watching this or you're taking this course, you will either find it attached to this video or you may even find it in your projects. Sectional, please go ahead. Download the ZIP file on zip it and confirm that you have access to these documents before you move on with the West off the course. 25. Basic CSS Syntax: Well, hopefully you didn't have any issues down. Build in n getting access to the files. And if you didn't, please go ahead now and open up the style dot CSS file using the brackets, TexUtil or any other text a little that you're using. So let me show you exactly how the syntax off CS says is. Basically, you're gonna pick an element that you want to apply your style into. So if we go to our index dot html, we do have the h one tag right here. So let's try to apply some style to our H one. We're gonna come in here right now and then say H one That's the elementary airplanes tell to and then Kohli brackets and then in side of the calibrated. We're going to peek a property off that element. It will want to play this style, too. In this case, let's say, wanted to change the font size and it would have to make it a bit bigger. So let's go with 50 pixels and then semicolon. This right here is the basic syntax off any CSS code. First, you have the element that you're applying this telling too you will have your colleague braces and then inside of the calibration would have the property. In this case, it's fun size colon and then the value off the property and then a semi colon. Let's add one more. Let's go with the text. Ah, line and let's go with center. So my colon and there you go. Let's go ahead now and save this. Now, if we try to go over to a browser and refers to Page, you re notice that there has been no change The H one target getting selected CSS. It's still are lying to the left and the font size hasn't changed yet. That is because even though we have this style that situs file, it is not linked to our index dot html file. So we need to link both of them together. How do you do that? I'm gonna share in the very next video. I'll see you then 26. Linking HTML and CSS: Welcome back now. Previously we successfully added some code to our style DOT says his file, But unfortunately, because we've not linked the style that cities fell to our index dot html file the changes , one not applied. So the big question right now is how do we link our style file with our HTML file? Well, to do this, milling over to index dot html and then inside off the head tag, check out this new action. But it's called Link. All right, so basically, this say is Hey, we're adding a link and the first Valley has going to be rail equals and that in coats style sheet. So basically, the whale is a way of saying Okay, what kind off link is there's going to be in this case right now. It's a style sheet file, and then the next Valley is going to be for the H ref. The actual source. The link to that file, the link to this talented file and just like with images, because the style that sets file and index dot html file in exactly the same folder, it's just gonna be very straightforward. Style dot CSS. If, of course, this if the cell that sisters fell was inside another fuller cold styles, for example, then the Atria Fear would be styles Ford slash and then styled sisters, just like with images. Right, So there you go. We've successfully don't the Lincoln. Let's go ahead and close this. I'm gonna come in here right now. Save my file. And now let's go over. Teoh Boza, refresh the page. And there you go. Now you can see that the H one is now aligned to the centre. Plus, the font size has also been set to 30 pixels. So congratulations. We have now successfully linked our style dot CSS file with our index dot html file. 27. The Power of CSS: well, comebacks in a previous video is successfully linked our HTML document with our CSS style sheet. But the big question right now is what exactly is so special about CSS? I mean, fine. We were able to add it. Fun size and also a line are 81 tacked to the center. But we could We could have done this with HTML Isabel, right? So why CSS? Why even bother styling with CSS? Well, you see, the true power of CS says lies in its ability to make styling changes to multiple elements from one single line of code. Now is an example. If I went back to my index dot html in here, you can see that we have several age three tags. Wait, for example, we've got the politics in brackets is an H three. Ted. We haven't each tag here as well. We have another H three tag here, another one down here. If we wanted to give our H three tags a particular color with HTML, we would have to go to each one individually and then say OK, it's three here, equals the text follicles blue, and then go to the next one text color blue and so on and so forth With CSS, we can change the cool off every single h three tag from just writing. Ah, very small piece of code. Like what we have in here. So as an example, if I came in here right now and I said it three and then let's give it a color and we're going to say color here is blue. Let's see what's going to happen. I'm gonna come in here right now. File. Let's Ah, safe. And now let's go over. What you Rosa coming here refers the page and now you can see that every single age three tag is now in blue just like that. So this right here is the true power off CSS. You can make changes to all kinds of elements from one single line off code. It's a simple as that. But if then here is this Okay, you can impact multiple types of elements at the same time. What? I mean, here is this. Okay, so we've got a Chuan we've got h two b if we wanted to. For some reason, if you wanted to add it the exact same style in to both of these types of elements, we can do them as well. So all I will do in this case would be to come over here after 81 I will add a coma and then h three. Now basically, I'm saying for all H one and H three tugs, give them a phone, says of 30 pixels and aligned them to the center. Let's check it out. Coming here again, Save. Go back to my Boza. Well, first the page and just like that, you can see right now that the H one and the A three talks are all aligned to the center and they all have a science off 30 pixels just like that. So here is the true power off CSS having the ability to make multiple styling changes to multiple elements all at the exact same time. And the best thing is, if in the future I wanted to change my mind and say, You know what? Rather than giving these guys a fun size of 50 pixels, I want to change it to 24 pixels. All our needs to do is just to come in here. Share developed 50 to 24 and that's it. I save my changes and all the H ones and the HB tags are affected at the exact with exact same value. I don't have to go to each individual h one Taegu, each individual each to attack and make the change there. So there in lies, the true power off CS is the ability to make multiple changes to multiple elements, all from one single line off code. 28. The Font Family Property: Let's talk about one of the most important properties that you can ever set on your website , and that's going to be the font family property extremely important. And it's not enough for you to just set a value and say, Okay, Yep, that's the development fund family. I'm gonna move on. No, you have to be very careful. And there are certain rules that apply Whenever you tried to set a fond family. The front family essentially, is the property. They'll dictates the kind of front that your works that would use now, ideally, a new HTML document. There are three main types of tags that you can talk that you can target your head in. Zero each wants to 86 You can take it to a P tags, which would be the normal text, and you can also take it your eight tags as well. Off course. There were certain instances where you can also get like your least elements and so on. But the Big Three are usually your headings, your normal text and your Heiple links. Now here's the thing right. There are different types of fun families, thousands and thousands off them, but there are also different types of browsers. You've got chrome Firefox safari in someone. Not all browsers are able to interpret all types or fund families. In fact, there isn't a single browser that can interpret every type of front family. What this means is you might choose a particular fund family that would look very look good on the most left affects. Pearls are, but on Coombe, it might look different. That's because crew might have difficulty in reading or this plane, that type of fun family. Remember that your brothers are like interpreters. They interpret you, XML and Sisters code, and then they display what it is that they've interpreted. But that being said, there are set in front families of the constant to be Web safe. What this means is that these are fun families that all browsers can interpret. Now, if you go over to W three schools dot com and you look for the sets of Web safe forms document. In here, you can see the phone families that are safe. You've got the seven funds, you've got the sensory funds. You can see the examples right there. You've got your model space phones as well So these are the phone families that every type off browser would be able to interpret. This is important because you typically want to set a fallback fund family whenever you've chosen your primary fund family. What I mean is, if you choose a custom front family, you want it back up so that in case a particular browse, I can not interpret your false choice for front family. It will interpret the second trades, which will be your fault back. And you always want to set one of these fun families right here as your fallback option. One thing to mention also is that for your regular text, you've got seven funds and you've got some. So if you typically want to go with these songs, sir, we've These are the phones that don't have, like styling, for example, like in here where you have your sorry funds. Take a look at the tees, for example, and the G. You can see the way it's styled when you have text and you have a lot of text. This might become a bit more difficult to lead, but with Sunseri, if you can see the tea is the split normally the Jesus played normally. Sophia text. You typically want to go with one of the songs Serif fonts. That's how you want to go for your headings. You could use one of the Seri phones. I think that will be It will be fine. You won't have too much of an issue there. So one other thing to also mention is that whenever you're setting your fund families, you don't want to go. You don't use more than a maximum of three a different types of phone families on your website. Typically, you would set one for family for your headings for your titles, another fun family for your regular text, and then maybe another friend family for your hyper links your A tags. But old after recommend you go with to fund families one for your headings and then one for your regular text annual hyperlinks. That's usually the way you want to go, so no more than two or three fund families on your website. Okay, let's go back to our HTML document. All right. When I want to do here is this. I'm gonna show you how you can set the front family for your P tags your regular text was going to start. See, assess. What I'm gonna do is I'm gonna say P And then let's open up our style. An option. Now check this out. I'm gonna say, Fund family, all right, and I'm going to say songs. Sarif will be the fund family. That's that. Somebody call on what's coming here. Let's save. Let's go over to your browser Now note that the default phone family is typically times New Woman. That's usually the default fun family for pros. As so let's refers to pitch now and how you can see that it's changed to the songs. Sirleaf. Okay, perfect. Sun Surf is one of the Web safe. Fonsi concede right here, son Sarif. But let's use a different form Family now as our primary fund family for the P tags. Now Google has almost 1000 different Google funds, and one of my favorite phones is the Mont Several front. I like using that front for my regular text. It's the one let me show you. It's right here. This is it. More of Sarah, right? Let's go ahead and try this. I'm gonna go back to my HTML document and whether than saying some Sarif. Let's now come in here and say Mont Serve At the good news about Mont Seventh is the fact that just about every browse I can interpret it as well. Even though it's a custom, Google phoned. It's still quite safe. So I'm going to say Monserrat, Let's save that. Let's go back to a brave browser into refers the page, and now you can see the phone has changed to month. Sarah. Awesome. However, even though Monster, what is a Google fonts? And you have all the Google phones in here, not all of them are able to be interpreted easily by browsers. As an example, Let's come down here. See, there's another front in here called Sophia. All right, Justice an example. Now let's come down here. So here is Here it is. Sophia. This is a terrible fun family for your regular text, but I'm gonna use it just to demonstrate what I want to talk about. Right? Let's change the value off phone family from one set to sow fear. Instead, Sophia, come back in here safe. Let's go over to our brave browser. Refers to Page. Do you notice a difference It's change. It's no longer monster. But this isn't Sophia. Look at how Sophia looks like you can see It's very, very stale leash. But what you have right here is times new woman because the brave brother cannot interpret the Sofia fun family. If I go over to five Fox and I refresh, you can see that is the exact same thing. No difference is still the same times. New woman. That's because Bell's us typically have a difficult time being able to interpret E Sophia fund family. So in this kind of instance, you want to set a default fallback option. So in this case, right now, I'm going to add my coma and then say sons Sarif as the full back option. Let's go back in here. Save Coach. You are Broza. Well, first the page and now you can see San Serif is now in action because the brave browser cannot interpret Sofia. So this is exactly why you'd want to set a fallback option. But what if you actually wanted to use this Sophia often family? Well, there is a way how we can do this. What you want to do is you want to go over to your HTML document and then where you have your head tag, I'm gonna paste some code in here and here it is. Basically, I am providing the link to the phone family off Sophia and this is right here. It's a P s and then phones that Google ap istock Com Force last year says, And then family calls. Sophia, let's no go ahead and save this and see what happens. We're gonna go back to my brave Broza refers the page, and now you can see this Is the Sofia family off on family in action? That's because we've said in the HTML document where our balls I can find the phone family . So in instances where you set a regular Google fund for your text and it doesn't seem to be working, you want to go to your head tag and then attach this kind of link. So you just substitute Sophia for the name off the other from family that you actually want to use. But that been said, Let me just say that later on in this course, I'm gonna show you a better way off. Lincoln Ah, custom. Google forms to your html document. This works perfectly well. It's just that it could impact the speed off your website when it loads. Because now your website, it will have to first of all linked to Google and then find the fun family that you've specified inherits usually much better to have that fun family start locally on your Web server. I'll show you how you can do that later. So don't you worry. I'm gonna go back in here and just change Sofia back. Teoh Monserrat won't serve that. Let's go back in here. Let's save. Go back to a Broza were first a page and there you go. OK, so that's typically it for the fun families again. Just a quick recap. You've got your Web safe funds and you want to set one of them for your fallback option for your text. You typically want to go with the sensory funds for your head as you could go with a Serie fund and also for Google phones. Many of them would walk normally with your browsers. However, in certain instances where it doesn't seem to be walking, then you'd want to go to your HTML head tag and then add this link right here. And then add the name off the phone family that you want to link to your Web site. So that's it for fun. Family. Thank you for watching. I will see you in the next class. 29. Other Font Properties: already. So we successfully dealt with the fund family in the previous video. But now let's take a look at some additional text properties with CSS. And as you can see, I have already added for extra properties. We have the font size, which of course, indicates the size of a text. This can go anywhere from one pixel to 10,000 pixels, and it really depends on how big or how small you want your letters to appear. And then front weight basically refreshed you. How bold or how light the text would be. Now the value here you see is 600. But you do have other values, like bold, lighter. So I'm just remove this 600 let's see develop that we have. So we've got lighter, bold boulder and then normal. Normal is, of course, the default value, But like I said, better than going with lighter boulder, you can specify it in numbers you can go with, like 300 for example, 405 100. So, as an example, let's just go ahead now and save Thistle. It's the difference. So it's 300 which is very, very light. Let's go back to are going to keep it fresh. So now you can see this is the value off 300. But if we go back and I said, you know what? I'm going to make this 700. Now, this is gonna be a lot bolder. Let's go back in here. Refresh. Now you consider Texas now. Ah, lot balled up. Keep in mind, though, that the values here will depend on the fund family. Not all fun families will have values for 607 100 or even 800. It all depends on the front family. Many times you'll discover that most fun families at least would have a light variation, which is usually 304 100. They will have the normal version, which is usually 500 then a bold variation, which is usually 700 or 800. So you can just play along with developers and see at what for $5 are available with the specified fun for me that you've chosen now line height. Of course, this indicates the ah, the distance between our woods on a different ah line. So right now this is 16 pixels, but demonstrate, let's go ahead now and changes value all the way to, let's say, 24 pixels. So you can actually understand what I'm trying to say here. Well, let's go ahead and save this. Let's get back to you about refers to page So now you can see this is 24 picks. Also, there's no more distance between the lines of text that we have. You can see that's what the line heights are essentially does. And then we also have a letter space and the space in between the letters two pixels is what we have Currently. Let's make this eight pixels so you can see the very obvious difference. Let's go back in here. So this is two pixels, and now this is eight pixels, which is, of course, just which is just terrible. Ideally, you don't want to use lettuce patient. In most cases, you do have other properties what we'll talk about in just a moment. But there is one more we really need to talk about, and that's going to be the color property now. So far, we've been used to give in values like blue, red green, but with CSS and even with extreme el you actually have access to thousands and thousands of different kinds of colors. Now, if you go to html kalakota dot com in here, you will see this bar, and right here you can choose the kind of cola you want to go with. Literally. The millions, of course available are in here. So what you want to do is once you've chosen once, you like a particular variant of the color. In here, you've got what is known as the hex values. Simply copy developed in here. And then you can simply apply that for your text value in Coal Valley by that. So let's do this. I'm gonna go ahead now and save this. So this is gonna look like all injured. Let's go back to a texture command refresh. And now you can see everything now is like a an orange. So again, you can use this to pick out very specific collars that you want to apply on your text. So that's pretty much 81 more thing to mention if you go to the w three schools dot com CSS and then look for the CSS text happen here all the way down here, you will see some additional properties, such as the direction text decoration. This is where you can specify if you want you on the line. Your text. Maybe add a dash. Things like that you've got text overflow, which we'll talk about a bit later. You've got ward space in which is like Let us basin. But now this deals with the distance between words in your text and then, of course, vertical aligned, which we'll talk about it later today. A few more properties, which we'll discuss as we continue in the course. But for now, these are usually the most popular properties that you would apply to your text. One month intervention before I round up is that police? Keep in mind that all these are also applicable to your headings, your H ones. It's student someone and also, for the most part, your eight tags as well. Basically, any kind off text out also includes our lists. So that's I think of watching. I will see you at the next class 30. CSS Classes and IDs: Let's continue with our journey into the world off CSS. And let's look about something very important, which you cannot do without. When it comes to CSS code in. I want to ask you a question. All right, let's go back to you. Ah, Editor Right here index dot html file. Now you would notice that we do have several dibs, right? We do have one right here, which is the first day that contains this text. We've got an empty Dave right here. We have another Dave here as well. This is another Dave. There's another one down here as well. That contains the images and some paragraphs. Okay, Now, we could easily come in here and say, You know what? We want to give our dibs a background color. Ah, far. Let's say red just as an example, right? I'm gonna go ahead and remove the color of our text. States goes back to black. So let's do this back on coal of red. Now, if I go over to my Broza and a refresh now you can see all our Dave's have the red bag on color. Awesome. But what if you wanted to give specific Dave's the bag on Culo off Red and others leave them as they are. How would you do that? What if you wanted to give a bag? Uncle of Blue to Onley One particular Dev, How would you do that? This is really concept of classes and I ds comes into play, Say, with classes you can assign a class to a group of elements and then apply the exact same style into all of them at the same time. But then, with an I d, you can target one specific element and apply its own unique styling to the particular element. So let's go back to our index dot html file right here. So that's it. For example. I wanted to give the very first living here. We're going to give it the background color off Red Cape. I'm gonna say, Dave, Dave, class equals. And now in here red, I have given this day of the class of red Let's calm old way down to the very last day, which is the one we have over here. Let's also give it the same class off red. Okay, But then I'm gonna do something else. I'm gonna go over to the death in the middle. Actually, the one that contains the images down here. Let's go ahead and give this one and I d We're gonna give it an ID. Another class, but on I d off blue. So what I'm gonna do essentially is I'm going to give this particular Dave the background color of blue and the other two they have the class of Read it back and cool off, red. So to do that, I'm gonna go over. Just save my are in exact estimate file. First, let's go to our style that CSS So what I'm gonna do here? Is this okay? I am going to first of all, say dots don't read the doctor what he represents class. So basically, I'm saying any element that has a class of red give the bag and culo off red. And then any class that has a an i d off blue ideas, you used the hashtag to represent an I d. All right, so any element that has the i d off blue Well, give it a bag. Brown color, background color off blue. All right, so let's put it into practice. I'm gonna go ahead now. and save. Let's go over to Broza refers the page and look at the hat. So the very first live here is in bed. The last one is invade while this one is in blue. So this is exactly how you can make use off ID's and classes. But it gets even more interesting. You can actually apply multiple classes to a single element. Let's go back to our index with each Samuel, right? Let's say, for example, So if this day, if you wanted to ally in the text to the center what I will do here is the very first day of the one that has a close of red. I will add another class of the space and then say center Okay, and now let's take a look at another Dave right here. Ah, the one Let's see which other def can we apply this to? Okay, we do have Actually, I guess what? I'm going to apply this class off center to not only a Dave, but but another element. And this goes right now I'm going to give it tiu the P tag on the the age to be headline that Cesar predicts in practice OK, so this I'm gonna say P class equals And then, of course, read. So know what I've done like here. I've given the I'm sorry, not read. Put center. I apologise. Center. Okay, So we're going the first day of the class of center and also given these p element right in the class of center as well. Let's go ahead now and save. That's good. Move a tow. A style that CSS. I'm gonna add another class right now. That's going to be center. Okay. And now what you want to do here is we want to align our texts to the sentence. I'm going to see a text. The line center. All right, let's go ahead now and save. Go back to a browser. Refers to page and let's see what we have. Okay, well, check this out. So the very first day of right here has the text in the center, and then the P tag here has its own text in the center. You can see it's the one just underneath projects in brackets. If we go back to our next email document so you can see predicts and packets right here and then the p class of center. Which is exactly why the text here is sent hot so you can see how you can apply classes as well as ideas. Ideas are specifically for one single element. You can't you shouldn't apply, and I d to more than one element. Ideas are unique. They're meant to be specific for one single element. But with classes, you can use classes to assign styling to several different kinds of elements, and it doesn't have to be the same element you can see in here. Going back to Hostel, it's CSS. We applied the class of center to the two AP tag right here and also to additive. And we're also able to do this because the particular style or property wanted to apply, which is text. The line goes for both dibs and up text. There is no way would be will build to apply a textile line off center to, let's say, an image, for example, because you cannot take that line on an image element is not just it's not just gonna happen now. You could also get very specific while using the class. Right now. As it is, we're ST dot center basically with the targets and every element that has the class off center. But if even I come in here and say p dot center now, these changes because now we're saying every P tag that has a class off center make its text align to the center. This is very different from Joe, saying are not sent up. Let's put it into a test. Let's save, Let's go. But you are Broza. Let's refresh the page and now you can see the first davits text is No. One girl into the centre while the P E class right here over center. It's Texas aligned to the center, so I know the difference between including just the class and then on then, including an element of attack before the class. There's a big difference between those two now. You could also target multiple classes and I ds at the exact same time. To demonstrate this, I'm going to give you an example. Let me just go ahead and remove the front. Wait here off 700. All right, let's go ahead now and just save this first and let's just see the difference. Let's refresh. Okay, so all the text right now is basically Bigelow. And in weight. Nothing is too bold. Okay, let's go back in here. Let's do this. Okay? I'm gonna come in here right now and say every class of center And then I was now at a coma . It and I will say every class off red as well, another comma. And then I'll say an I d off blue. And now we can add the property and say it up front. Weight off 700. What I've done here is I've said every element that has a class of center all has a class Harvard all has an idea of blue. Make its content, have a fund weight off 700. Know that we used a coma to separate the classes. And I ds is going here right now and save Go back to our girls are refresh the page And now you can see that the first divided it has a class of red. It's fun to it is 807 100 at this one too. Is 700 as well because it has a class off center. While the regular text in here is still Legler. Because this Dave doesn't have a class off red or santo on idea of blue and and so on and so forth. So this is how you could make use off I e ds and classes. The bottom line here is classes can be used to target multiple elements at the exact same time. While ideas are used to target one very specific element that is the core difference between classes and ideas. And, of course, you will be exposed to Walker with classes. And 80 is a lot more as we progress in this course. Thank you for watching. I will see you in the next class. 31. The Background Image Property: Welcome back. Hope you're enjoying this CSS course those far now. So far, so good with explode. One major way off adding a background Teoh elements. And that's been the use of the background color property, which, of course, adds a bag on color. But what if you wanted to add an image instead of wanted to use an image as a background? How will be do this now? I want to go back to the folder that contains are each similar files in images full there? These are the three images we have, right? Pay Very close attention, Tiu. The second image. This one right here. It's 300 pixels by 168 This is gonna become real event very, very soon. But I want us to use this image right here as our background. All right, So to do this, I'm gonna go back to brackets and let's go over to our index dot html file. And I'm gonna apply that images the bag onto this empty Dave that we have right here. The one just above the r gets study with your files are comment. All right, So what I'm gonna do is I'm gonna give this, Dave and I d all right, and I'm going to call these image dash section. All right, So this is how you would use more than one if you're gonna name your I d. S. Are your classes with more than one would use a dash. Teoh, separate those words. Okay, so image section I'm gonna go ahead now and save the file. Let's go over to a style dot CSS. Now I'm gonna say Dev, I'm sorry. Hash tag and then section image section. All right, now, first of all, I will add a background color. First of all, so let's do this. Ah, background caller. And this is going black. All right, now let's see what's gonna happen safe. Go over. Teoh Broza refers the page and Ah, well, as you can see right now, we don't see any div with a black background. That is because the Dave right now as it is is Mt. There is nothing inside of it. There is no tax, no image, absolutely nothing. So one way to actually show a black bag one color would be to add some content or we can set a height. And with for the deaf, and I'm going to introduce to you right now to new properties off heights and because I'm going to say 1000 pixels and then with, let's say, 1250 pixels so you can set it definitely hide. And with for your containers, your Dave's, your sections and so on and so forth. So let's go ahead. Now save this. Let's go back to your bills are refreshed the page and okay, so here it is. Right now it's the one that wait here so you can see right that we now have our empty section. I am too Dave with 1000 pixels and hides 1250 pixels and with with the background color off black. Awesome. Okay, now let's go back. Let's now apply the background image. To do this, I'm going to say background dash image. Now you'll have to specify the u. R L. Where will sisters find this file this image that we want to use us a background so we're going to see your of L and then in brackets coats. Remember the file path that we learned about in HTML? I'm going to say images because it's in a folder called Images and Images and there is going to be CSS. That's two p and G. This is the source of our back on image. Let's go ahead now Safe. Go back for first a page and take a look at that right now you can see that. Okay, The image now has taken over the entire width and height off our section. But you will also notice the wait a minute. It's repeating what? Remember that this image is only 300 by our 168 pixels, I believe, but we set the height and width of this section to be much, much larger. As a result, by default, CSS will repeat the background image so that they can occupy both with and hide off its container. But let's do something else. I'm gonna add a new property and this is going to be called the background sighs. Very, very, very important. Now check this out. Auto is usually the default. This kind of the safe option. Let me save. Go back in here two barrels ever fresh and you can see there's really no change at such. Basically all there is a way of saying Let the bells will determine the best way off displaying the back on image. Okay, No change. But if I go back in here and I say you know what? I'm not going to repeat the background any more. A new property background repeats no repeats. That's right. Now I'm saying do not be picked the background image. Okay, let's see what happens. Go back. Save Coming here. We fresh now? Do you see that? With auto CSS will only display the image as best as it can. It's not going to stretch. The image is just gonna displayed as neatly as they can. And then for the rest off the container, it will display the background color. You can see that, right? Okay, lets go back now. We're going to switch the bag on size from auto to something known as cover. What's the difference? Take a look. I'm gonna go ahead and save the fight right now. Go back, Serb Elza And now check this out. I'm gonna refresh And Blalock look at that. Basically with the cove Alu for the background size were saying Hey CSS, I want you to ensure that the bag on image will always occupy the full with and height off its container. I don't care if the Baghlan image is smaller than the container. If you have to stretch that image so that it will always occupied with and hide off its content. And that's why you can see right now that image has been stretched, its not clear. It's blurred and you can even see that part of the image has been cut off because, in desperation says there's a strain and say, Hey, okay, I'm just gonna make sure that this image will always occupy its continental matter. What? That's exactly what the value off cover does. There is another one. Another value in this one is called contain. Similar but different. Let's go ahead now, save this. Go back to our Boza. We're fresh and the look of that there is a difference, right? Right now you can see that even though the image is still blurred, it's still blurry. You can still see the entire image, and you can even see the bag and color off black Friday. Now what contained those is that it's a Z. No matter what happens, I'm always going to make sure that the entire bag on image is always visible. It's not like over where the priority is. The container, basically the bagman. Images stretched. The entire container is covered in contain. It is the Baghlan image itself. That's the priority. We're going to make sure that the background image is always shown. It's fully shown at all times. Even if you have to leave some some space. That's fine. In this case right now, the space being the background color. That's fine. The priority is to ensure that the Baghlan image is always visible, even if and and also of course, sometimes the bag an image will be blood, just like with cover. But again, at least, the entire background image will always be shown. That is the major difference between cover and contain. Let's go back in here now. In addition to contain cover an auto you can set values Lexus, for example, Let's say 75 pixels endemic and also say, 50 pixels. So basically never saying OK, we're going to give the bag on sites and fed pixels in with and infants pixels in height. Let's see how this would look like Let's save, let's go back in here refers the page, and there you go. So now we've given that background image, you know, with us and for pick sold and head of 50 pixels so you can see it's very, very small. You could add all the values like, say, for example, about other and using two different fellas, Let's say 400 pixels. So basically what this does here is we're saying, Set a with off funder pixels and then the height set it to auto. That's what this is. So let's go ahead. Save. Go back to Balza, refreshed the page, and they go well with a fund of pixels and a height set to auto going back. We also have different values for the background. Repeat. You can go with values like, say, for example, are repeat X. All right, so let's check this out. Let's go with repeat X. Basically, we're saying we put the bag on image, but Onley horizontally. That's on the X exit. So to demonstrate this, let's go back to the background size set to auto. Okay, let's go ahead, save. Go back to a browser or first a page so that you can see right now it on Lee filled out the horizontal axis full at the bag on image. Right. But if I go back in here and I say rather than repeat X goal with the repeat, why this right here is going to be vertical instead. So let's save. Go back to the browse. Our refers the page and there you go. Now you can see it feels the height off its container better than the with off the content . So that's basically the bag ground Repeat values in action. Now there is one more background property I want us to take a look at, and that's going to be the background position property. So in this case, right now, it's gonna be back in position. Now what is those is with back and present. You can tell CSS on what part of the image you want to focus on. So to demonstrate this, what I'm gonna do is let's remove. All right, let's just back on size from auto to cover, and we can even just removed that moved back on. Repeat, since the size of Carvel pretty much cover the entire continent to begin with, so there's no need to repeat So let's do this. I'm gonna go ahead now and save No. I haven't added any values for the back in position yet. So let's go back to our Broza. Refresh the page and okay, so right now you can see this. Is that the fault way? That status will display the Baghlan image. When it's it says that said to cover, You can see part of the CSS here has been cut off. But what if I came in here and I said for the position, Let's focus on the center from a vertical axis and also dissented from the right exit, So we're gonna concentrate at the center off the image. Instead, let's save Go back to our browser, refers the page, and now you can see that CSS has now shifted its focus so that the image is now properly at its center is a split, probably at its own center. Now you can see all of its email and you can see all off CSS. But there are other Vela's weaken Sit in him as well. We can go, but let's say left. And then we could also say bottom right here. This is one way Let's go ahead now save. Go back, Teoh, browse our refresh, and now you can see that the concentration is on the left side and then at the bottom. That's where the concentration here is. But if I go back in here and I switched to, let's say rights bottom instead safe, Go back to a broza, refers the page and how you can see the focus has now shifted instead to the right off the image and then the bottom. So you can see this is always how you can change the way or at the angle with which you want says is to display your image at and usually for the first values in here. You typically go with either left or right, or maybe even center, and then for the second value this would be for the vertical axis will either be top center or bottom, so that's the background position in action. Of course, we'll take a look at this a bit late out once we begin building our website. But these are the most common had the most Cornell background properties, especially when it comes to dealing with the background image that you'd be dealing with, you know, Baghran size back on repeat Baghlan position on, of course, the background image itself. You could set more than more burger an image if you want to. It's possible, but we'll take a look at that much, much later. Wants to begin building our site, but for now this has been how to set your bag on image. But after said Image s your background warned there, less intimation is that always ensure that the images you're going to use as backgrounds, at the very least are equal in size to the container with which you intend to apply them to . So, ideally, if we're going to apply a background image for this section, with the height of the 1000 pixels on the with off our 12 50 ideally build have gone with this image. That one, the bigger one. The sisters that's wandered PNG. This would be a much better image to use as your bag, and because it's very, very big, it's big enough to compile the width and height off our section. So just as a reminder, always ensure that your background images, the actual image themselves, are big enough to occupy the full width and height off the continent. You intend to set them to that way. They will never be stretched that way. There will always be displayed as cleanly as they possibly can. That's it for background images. I'll see you in the next video. 32. Display Property: Now let's talk about a particular property, which you would find very useful, and that's going to be the display property Now. We really discussed about this a bit briefly when we're talking about HTML and specifically the differences between the line elements and block level elements. Now, just as a refresher block level elements are your head into a church won's excuse your P tags, your Debs and they typically stand alone on a line they don't stand or sit side by side a line. Elements can actually stay side by side, and this tend to be your hyperlink, taxiway tags, images and so on. Now, with the display property, you can actually change the way block level elements are displayed, and you can also change the way in line elements all displayed as an example. Over here we've got our H one, which say's getting celebrities CSS. And then we have hte to that says this is your guide now by default, of course, they're now on separate lines, as you can see. But if I went back to my style that CSS and I said, I'm gonna add a new declaration and say h one h two Let's open up. Our colleague Brace is now the property off display. I'm going to give it a value off in line. All right, that's safe. Go over to the browser, refresh. And now you can see that the H one and H to announce staying side by side. We could do something opposite with the images down here, you can see that image two and three are side by side. If we give them a disparate property off block, then they will be on their own separate line. So that's how that is people. But it works, but it is actually another value, which I want us to talk about. And there's going to be called the in line block value. How exactly does this work? You see, by default, you cannot add a height or with to the line element or a block level element You can't. But if you give them a display off in line block, you will then be able to provide them with a set with Let's do this. I'm gonna remove our declaration that stays in line for H one h two. I'm gonna come down in here and I'm going to say image. All right, so that's I get into three images in the original document. I'm going to come in here and say display. Now check this out. I'm going to say in line block, all right. And now I'm going to say you with off 33 percent. So basically, I'm saying all right, every image in our HTML document display them as an in line block and then give them a with off 33%. These that 33% simply means the this is in relation to their container. In this case right now, if you come over here, you would notice that the three images are inside off a death with an i d off blue. So basically the first image will occupy 1/3 of the width of the entire Deve container. Then a second line of the third and then the last will occupy 1/3 as well. That's what that simply means. Let's go ahead. Safe document. Let's go over here right now and see what's going to happen Now. Note that the first image, of course, is very, very large. Let's see what happens. I'm going to refresh, and now you can see all of a sudden the three images and now side by side, because we've given them a set with off 33%. But before we could give them their with a 33% we had to set them or I give them the display value off in line block. So this is where in Lyon Block will be favor useful when you want to set or provide a height, or with to either a blood level element or an airline elements you want to give them to display value off England block first. Now there is one more property or value other, which is the value off? None basically. So any yes, and you know what don't display the element. So if they save this, let's go back to browse are coming here. Refresh. Well, there you go. No more images Now. The question, of course, is when would you use this particular kind off value for display? This typically over is very popular with responsive displays. Menu designing your website to look good on a mobile device. There are certain elements or content, like maybe animations, sliders that will not look that good on a mobile phone. So you could specifically say that. Hey, if someone is viewing this website on a mobile phone, do not display this light. I did not display this image or something like that. So that's where you could use the value off. None for the property off this play. Let me go ahead. We move that Listen back to display in line block, kid. So that's it. Thank you so much for watching. I will see you in the next class. 33. CSS Margins Paddings and Borders: Welcome back. Now let's talk about another set off properties that are very, very important. And we're talking about margins, patterns and borders, and these are very vital for the way your content is. This played. But what exactly are these three? What is in margin? What is padding? What is a border? Well, to demonstrate this, we're going to do some things. First of all, we thought html document. I'm gonna go ahead and remove these idee off blue for the Dave that holds our images. And then down in here, the very first Pitak on Mother's Day. I'm going to give this a go, and I d Excuse me, an I d of ah, let's say orange. Okay. And then the immediate next be tag, I'm gonna give it an I d of let's say gray. Okay, let's save go over to a style that CSS Now check this out. Okay, I'm going to give the very 1st 1 which is orange. That's a P all interested of a very specific Kelly braces opening up. Let's give it a background color off orange, obviously, and then we'll give it a with of, let's say, 475 pixels and then I'm going to give it a height of 100 pixels. All right, I'm gonna go ahead and I'm gonna copy everything. And then I'm going to paste, and then I'll simply change the i d off orange in here to gray. And then, of course, Jenny's about going cola here from orange to Glee as well. Let's save. Go to our Boza, refresh the page and let's see what we have. And there you go. All right, Both pretext. With that back on Kahlo's and with height of 100 pixels with all 475 pixels Now you might notice that the text is right at the edge off its container. Look to the left and it will look to the right of the AHL. INGE Pitak, You can see why did that D for end? It's right next to the board. It's right next to the edge. How do we create some space before I show you how to do this? Let's add borders, right? I'm gonna come in here and I'm going to say border. Two pixels. Solid red. What exactly have I don't hear have added a border around the P tag and I said, make it thick off two pixels. So to pick two pixels represents the thickness off the border. Sollied means the type of body because you can have solid, you can have a daughter dashed and so on, and then red represents the color off the border. I'm gonna go ahead and save. Go back in here. We're fresh, and now you can see the border right there. But still, the text is right next to the border and over here as well the Texas right next to the edge off its container. So if we wanted to create some space between the text and it's bought out all container, we're going to need to use patterns that are patterns off for the create space between content. But it's an image. Ah, text or any kind of element basically create space between that element and its border or container. So if I go back to brackets and I say for the first P orange, let's come in here and say, padding off 20 pixels. Okay, let's save. Go back in here for first the page, and now you can see there's a lot more space around 20 pixels from the top 10 pixels on both sides. The bottom. It's irrelevant because there was. There is always space between the text on the bottom to begin with, because we gave the container of height off 100 pixels if we didn't provide any height. In fact, let's do that. Let's remove the heights completely. So no more height of 100 pixels in here as well. No more height of 100 pixels. Let's save. Go back to the bills up, refresh And now you can see the difference. The first p tag looks a lot neater and cleaner because there is patting while the second looks very, very rough because there isn't any padding. But let's change that. Okay, I'm going to go back to brackets and not for the second p tag, which is the one with the idea of great. I'm gonna come in here and say, Padden, check this out. I'm gonna say 10 pixels and then 20 pixels. You would notice the difference that in the 1st 1 here we gave pattern 20 pixels. Here it's 10 pixels. 0 10 pixels, not 10 x sorry. 10 pixels and then 20 pixels. The difference here is that in this it's scenario where you have two different Vela's for your pattern. The friends Vela will be for the top and bottom. The second will be for the sides left and wide. So let's save this. Go Bachir Barrels are were first a page and they you go now P Tech number two has 10 pixels from the top and bottom 20 pixels to the left and light. There is another way how you can white patterns in here. You can give 1/3 value and this guy's right Now it's gonna be 50 pixels. What this will do is 10 pixels on the top, 20 pixels for both sides, 50 50 pixels from the bottom safe. Good boxer barrels are refreshed the page and there you go. So now the bottom has 50 pixels, right? There is even 1/4 way off right in our patterns. And as by providing 1/4 value in this case right now, I'm going to say 100 pixels. If you can guess what this means here Is that 10 pixels on the top 20 from divides fiercely from the bottom 100 from the left Save Go back to her bows out, refresh and how you can see that the left has the most because it's 100 pixels and the other patterns remain the same. So these are the four different ways how you can write develops off. Your patterning can give one valid develops three values or four values. Okay, awesome, Beautiful. We've seen what borders are somewhat patterns are. What about margins? What exactly is a margin? Margins are used to create space, a distance between one element in another. It's different from borders that create space between an element and its container or its border patterns are more internal. Margins are external margins is now okay, Christmas between one element in another. If I come in here very have P orange and I said, Ma Jing, check this out. Bottom 100 pixels. I'm gonna save. Go back to Ambrose Are notice the distance between the first Pitak and the second right here. It's not that much right, but if I refresh now, you can see it's a lot more because we've given it a margin. Bottom value off 100 pixels. Basically, we have said from the bottom off the pitak with the idea. Orange gave a distance of 100 pixels to the next element, which happens to be the p tag with the i d off gray, we could create this same effect by doing the exact opposite coming here right now and say OK, ah p Gray. Let's give you a margin from the top 100 pixels safe. Go back to the Broza refers the page, and there is no difference because we've simply quitted the same display board by changing the values the opposite way. So incidents that given the P orange margin bottom of 100 pixels with BNP great imagine top value off 100 pixels, so you could also wide margin left margin. Why it you can have those for those ended the same way. You could even write patterns the same way. So violence saying, patting 10 pixels from the top, you can say patting top and then 10 pixels. This essentially is a shorthand way of writing Op Ed unveils for all four sides. If you want to add padding for just one single side, let's lex it to invite. You would say pardon dash lights. OK, so keep that in mind. One more thing to mention before I around this up is a patterns can never have negative values. It is impossible. Marge is, on the other hand, can have negative values. Check this out. Okay. I'm gonna go back to the plaza. It looks good, right? The kind of idea looks decent. But what if I came in here right now and I said, You know what? Let's remove the margin top, but I don't see him. 100 pixels. All right, I'm gonna come in here and I'm gonna say negative 25 pixels. What's gonna happen? That's safe? Go back in here, Refresh. And now you can see that the second p tag has essentially jumped into the first p tag in here. You can see that, right? If I go back, let's increase the value here to 50 pixels. Let's double it. Come back in here. Refresh. And now you can see it's now gotten up even more so this is the effect off. Adding a negative value for your margins. There are set in situations where you may want to use something like this. You might usually involve you trying to said maybe like a background video for container, and he noticed that you also want the bag round our video to occupy another container as well. These are the kind of scenarios where you may need to use like a negative margin. It's not very common, but there are uses for this as you begin to build up sides with CSS HTML. You might want into traditional where you might need to use negative margins, but for the most part, you won't need to use them as such. So I'm just changed this 50 pixels back to does just save a glass 50 pixel save. Go back now let's just refresh And there you go. So that's essentially for Mougins. Patterns and board as well, of course, be dealing with them a lot more as we progress in this course. Thank you for watching. I will see you in the next class 34. CSS Box Model: all right before we progress in the course. I want to talk about the CSS box model because it's important that you understand exactly award. This actually is. So. The box model is used to calculate the total height and with often element so as an example , if you're going to calculate the total with oven element, this would be the from like you would have the with, they said, with of the elements to begin with. And then you'll have plus the left pad and the white pad in the left border white border if there are. And then, of course, the left margin and then the right march. And this will be the formula for calculating the total with often element in pretty much the same way. You can calculate the total height of an element by first of all, adding the set heights and then the top Adam bottom pattern, top border bottom border and then top margin and bottom margin. This would be the way to calculate the total height off an element. So it is formula in mind. Let's try to calculate that doesn't well with and hide off R P tags. So let's start with P orange. First of looking, let's calculate the total with that doesn't live here is gonna be the set with first of all , which is for 75 and then notice that we've got two pixels of border left and white off to pixel, so that will be four pixels. This is gonna be forced on the five plus four and then the pad Internet pixels on all sides . So left tonight it will have a pattern off for the pixels combined. So there's gonna be forced into five plus four plus 40 which should give you 519. So it's little with off the Peter with the idea of orange is 519. But what about the height? There is no set height, so we'll just go with a patent, first of all, but you will be for the pixels because we have a pet in 20 from the top 20 from the bottom and then another four, because we've got two pixels of border from the top and bottom, so it's gonna be 40 plus four, which would give you 44 pixels in height. What about the second Peter Regulated with an I d off. Great. You can pause this video and try to calculate the total with an total height off this element Composer video right now. And I'm gonna go ahead and solve the So what about the total with First of all, we've got they set with or 475 And then in here the patterns are written different. But we know that the second value here is for the right. The third value here is for the left. There were no borders. That's fine. So we're just gonna go with 4 75 plus 20 plus 100 which should give you 585 for little with and then for the total height, there is no said height. But we know that it patting here 10 pixels is from the top. The third fellow here is for the pixels from the bottom. So that six of pixels and imagine top. And in a few of the pixels, which gives you ah, 110 pixels in total height. That's basically how to calculate the total height and with off an element using the CSS box model. Thank you for watching. I will see you in the next class 35. Max Width Property: elastic about another property, which you would find very useful and that property is going to be the max with property. What exactly is this property? Well, it's usually used to create responsive designs of your website. And what exactly is a responsive design? Well, responsive design is when your website would look very good, regardless off the screen size. So whether someone is viewing your website on their computer, their tablet or maybe even a mobile phone, your site will always look presentable and neat. Now the max with property is very vital for creating such an effect. Now, to demonstrate this, I'm going to go back to our HTML document and let's take a look at what we have in here. We do have the Dave section in here with the idea of Image section. What I'm going to do is to go to start at CSS, and I'm actually going to hide that entire def. So let's come in here and say display and let's say, uh, this play is set to none. All right? Okay, go ahead and save. Now there's another thing we're going to do, and that is I am going to remove the set with for the P tagged with the Great with the idea of Grey. Let's remove that set with Save. Now let's go back to our pearls. I'm going to refer us to Page, and this is exactly what we have. Right now. You can see the obvious difference between the two p elements. The 1st 1 has a set with off 475 pixels. The 2nd 1 no longer has a set with and as a result, being a block level element because it's a P tag. It's no occupying to fool with off our A screen, as you can see. Okay, but let me say something right now, I What if we were going to make this screen size smaller? Now, at this point, you can see that everything still looks pretty good. And if ever going to reduce the size of the screen, which is the size of the screen, you can see that even the images are getting smaller. The text is getting is kind of like breaking into several lines. At this point, you can see right now, that is, it's still responsive. And one way how you can tell when a pages responsive is when you don't see any horizontal school box at this point right now. Right now, right here. You can also we now have a scroll bar Whenever you see this, that means that the website is not responsive. And this happens when there is content that is wider or bigger than the coin screen size. And I was as a result, you now have kind of like an overflow. Now I'm going to make this as small as it possibly can and you can see Yes, we definitely do have a bit of an overflow somewhere. Now if I start from the top, you can see right now that the day of with a red background doesn't seem to be overflowing , because if I shifted right here, you can see nothing. But if a Cuban schooling down, everything is still aligned, a still aligned. But now you can see that the P tag with the idea of orange is the one causing the overflow . You can see with this particular portion right here is outside off the actual screen size, and that's where we now have this overflow. But if I keep going down, let's just make sure it's the only one, so you can see right there is the only one. The final different red background is responsive. But it is this main Peter great here. That is not responsive. And the reason for this is simply because we have given it a set with off 407 5 pixels. But it's green. Screen size currently is probably about maybe 400 pixels. Okay, so what is the solution here? Solution is to change the with to Max with safe. Go back to him. But I was there. Refresh the page. And now you can see there is no longer an over flow. The entire page right now is responsive. This is the big difference between with and Max with basically, with Max with us saying okay, never go beyond this particle out. Ah, with this particular set with if you need to make the with smaller so that it's responsive , then do that as well. That's exactly what the max with property is all about. So that's it. Before I go, though, I'm gonna say something real quick and it's gonna be kind of like a question, actually. What if we wanted to centralize RP tag right here. The P elements wanted to centralize. Make put it right there at the center off our screen. How would you do that? We cannot use textile. And because Texas landowners walks with actual text. But we're dealing with an element basically right here to centralize this. What you want to do is to go to the element. In this case right now, it's the P orange. What I'm gonna do is I'm going to say margin and then zero and an auto. Okay, let's go ahead safe. Come back in here. Well, first the page, and now you can see that Ah, orange element is now right there at the center off asking. So this is one of the CSS tricks that you need to be aware off. Basically, to centralize any block level element, you need to give it a set with and then said the margins to zero and auto, just like we did right here. We give it a set with Now, you could also do the irregular with and do margin zero auto. It will also centralize the block level element. But remember, it's not going to be responsive, but you do it max with. And then you say Jim margins to zero. An auto that will automatically centralize your block level elements. So that's what for the Maxwells. But what do you think? A fortune. I will see you in the next class. 36. The Position Property: Let's look about one final property, and that's going to be the position property now. As you might have already guessed from the name, it's basically used to set the position off on element on our Web page. Now, by default, whenever you create content with HTML and you use ceases to style it browse as well, Vanda such content. Naturally, you can see right now that the content goes from left to right, the elements stuck in on top of each other and so on, and even down here with the P tag with the idea of orange were in the previous video. We set the value here to the exact centre, using margins. Your auto, All these are natural by. But what if we wanted to? Let's say, for example, shift the position off this P tag right here, slightly more to the light, or maybe slightly more to the top. How would you do that? This is where the property off position comes into play. Now, by default, we do have a value off static for every single element. So if I came in here right now and I said position and then I said, Ah, static this right here is I'm sorry. Position. That's a spelling mistake. All right, So if I came in and I said position static, this really doesn't do anything because all elements have a position of static by default, right? But what if I came in here right now and I said, I'm gonna change this? No. Too rarely achieve. And I'm going to give a value off top 400 pixels. Now, pay close attention. What is does this relative value for position? What this does is that it stays. Consider the natural position off this element. First, use it's position as an uncle and then from that position, shift its position by whatever values replace for maybe a top school left, light or bottom. So in here, we have said from the top now 400 pixels. Right. Let's see this effect in action. I'm gonna go over to the powers up, pay close attention to the natural position of this element right now. Like that's the natural position in the center. If I refresh, you can see right now it has bumped it downwards by 400 pixels from its natural position. This is how relative works. Then you might be thinking yourself. Wait a minute. Didn't we say that it's supposed to be from the top? Yes, you might be thinking because we set top here. It's supposed to bump the content upwards, right? Bono is the opposite. That's how this works. If I came in here right now and I said, Okay, let's do left 200 pixels, you might think, OK, this is going to shift. The peak tag is going to shift its content to the left, but under pixel, but it's actually going to be to the right. Let's go ahead and safe. Go back to rebels out now, refresh. And now you can see it's jump now to the white by an additional 200 pixels. That's exactly how the value off relative works. And just like with top and left, you can also Advil useful right and bottom as well. Just keep in mind that the values here tend to act in the opposite direction, so if you give a valid to the bottom, it will ship the content upwards. You give your value to the right, it will shift the contents to the left. That's exactly how that works. Okay, awesome. I'm gonna go ahead now and remove this. Okay, let's save. Left it about the second value for our position. Property. And that's going to be the value off AB. So, Lute, let's go over to our index of HTML file. Now, pay close attention in here, Right? We have a div, and instead of this live, we have the H two b tag. We also have a pizza with the class off center. In case I haven't mentioned this yet. All these elements are basically Children off these Div. This Dave that occupies every thing is there is essentially the ancestor or the parent off every single element inside in here. Now, this is important to understand because we're gonna be talking about the absolute position right now. The absolute position essentially ignores the natural position off the element on like, relative that says, OK, starting from the position, the natural position of these element, let's now shift it by social. So and so with absolute, it doesn't consider the natural position all for the element. Rather, it will concede that the position off the immediate and sense tore off that element. And if there is no immediate ancestor off that element. It will simply use the view port as an ankle. What am I talking about? Let's come in here. Just go to start ups. CSS. And I'm going to target this class right here, off center. Okay. The peak last video center. Let's targeted. I'm gonna come in here right now and say position, Position? Absolute. And I'm going to say top off. Let's say 20 pixels go over to the Broza. Now, this is the element of targeting, right? This is the text right here. Never go ahead and refresh. Now you can see it has been bumped up right here. How did that happen? You see, the absolute position has ah law. It has a rule and they will essentially here is this First of all, it will take a look at the element We've currently applied the value off absolute to for its position in this case. Right now it's the P Class off center light. What is going to do is that it will say OK, what is the immediate ancestral off this particular element in this case right now it's the Dev does the right here now because we've not given this, DIV a said fellow for the position. It's going to look at the next possible and sensible, which in this case, if we're to go all the way up, it's going to be this section tag right here because this Dave is inside off this section. It will check for this section to see. Okay, what about this section? Does it have a said fellow foods position? If it doesn't, it will take a look at the next possible ancestor, which would be the body and they finally. But it doesn't have a better if the final final ancestor doesn't have any, said fella for the position. It will simply use the View Port, which is the browser, as it's an Cole. That's exactly how it works. So to demonstrate this, let's go over him and say OK for this, Dave, Let's use this Dave, As the ankle points will say, Dev style equals and then we'll give it a position off relative. All right, let's go ahead now and save now if we go back to the browser and we refresh now, it's jumped down here because now it is using its Dave. It's immediate ancestor, which is a Dave as the and coal point. Let's try something else. I'm going to grab what we've done here. This style. I'm going to cut this so this Dave is no longer the immediate ancestor. We're going to go all the opiates section pace that let's save. And if we go back to the browser and we refresh now, you can see it's now down here because it's using about. It's up here because it's now using this section tag as its and coal. That's exactly how the absolute position works. It ignores the natural position off the element the value of absolute has been applied to. But is it to look at the next a sense toe to see if there is a said Bella for it? And if there isn't any, it'll simply used the View port as its own ankle. That's exactly how the APP salute position works now. To be honest, you probably might not find too many uses for the absolute. In fact, it tends to break the layout off websites quite a bit, but it does have its uses, and we'll take a look at those Are it beat later? But for now, I'm gonna go ahead and remove the value because we no longer need it. Let's save. Let's go out to index of the HTML and I will also remove the style for the section. Okay, that's take a look at warn, more value for the position, and it just goes right now it's going to be the value off fixed. All right, this is very, very interesting. One fixed, Essentially say's that. Hey, no matter what, do not move the position off this element. Even if the user is browsing down or browsing airports. Keep that element exactly where it is supposed to be. As an example, let's go back to our bells, huh? So in your mind, you can see as we scroll down the content schools up essentially right. You can see that basically, how it works. But let's say hey, wanna make quick edit forces and JavaScript you want to make this always appear won't make it fixed that when we school downwards, it doesn't school upwards. Let's do this. I'm going to go over the index of HTML and it's ah, the one Where is it? OK, it's the one right here. Quick edit for CSS and JavaScript, right. So let's is I'm just gonna very, very quickly give this and I d So we can use our start of CSS. Just itch I d equals and we're going to say Fixed No, right, Let's save go voter style that CSS And then just ah, down here. I'll just say fixed. And I'm going to say position right here is basically fixed. Okay, let's save Go back to the browser. Let's refresh the page. And now you can see it is right here at all times, even if its goal up your school down, it's always going to appear so essentially, it's sticky. So whenever you see those navigational menus, the top of websites that are always day, even when you school down there basically using these value right here off fixed for the position off the navigational elements of this is one of the best uses for this particular value. You can use it to set sticky menus at the top off your browser and off course. If you wanted to put this age to retake at very top or just come in here and say top off zero, but it's semi colon, let's save go back to a browser. And now, if we refresh, it's always going to be at the top right here. No matter what, and use go down. It's always going to be at the top no matter what you do. Plus, this would ignore set in textile, lying to the center or stuff like that. So, for example, if we came in here and then we said Okay, let's make this text that line. Ah, center save. Go back in here. Refresh. You can see right now that it doesn't go to the center. It's still at the exact spot right there. So if you want to push this to the center, this is where you would not need to use. Tends, like up coming here and say left, Let's say maybe 400 pixels. And actually, let's go. More like 700 pixels, I'm guessing. So we saved that collector Broza fresh. So now it's Yeah, maybe seven was a B 200 more like 600 but now it's more towards the center. So that's basically how the valve off fixed works for the position Property. One final position to talk about before we around. This up is going to be the value off sticky. Now I know we just talked about the fixed position and how it's used for sticking menus, but in actuality, the value off sticky is actually a bit more useful. And it's a bit better to use than the fixed position. What am I talking about right now? You can see that the quick edit full CSS and JavaScript. It's always fixed. It never moves. It never schools up. It never schools down. Right? If you go back to assist us file, what I'm gonna do is I'm gonna change fixed here too sticky. And let's remove the left. 700 pixels. Let's save. Go back to the bells are now. If I refers the page now, you can see the text right here. It since normal natural position. Right. And as we begin to school down notice, it's also schooling up. Normally, nothing has happened so far. But as we keep on schooling down the couple's calling down now you can see it has reached. I'm sorry. Now you can see here right here. It has reached the top off the view port. That's what type of the brothers right now if I keep scrolling down notice. It's no longer school in up all the content. Benefit is now going to start school in up, schooling up, schooling up on teal to get to this point where it now also schools up, but at a certain range here it did not scroll up. Now why, that is because there is one restriction with sticky element. Basically, an element will continue to be sticky as long as its parent is visible in the view port. If we go back to our index dot html and we come over here, the parent here is this particular Dev. So as long as we can see the contents off this entire Dev, the element here, which has the person off off off sticky, will continue to stick at the top off the browser. That's how that works. So to demonstrate this better Let's do this. Okay, I'm going to remove these I d. Here. Am I gonna take it all the way to the top over here? And in fact, let's do this. I'm going to create a new tag right here and call this Let's call this another H one tag. We'll give you the ideal fixed, and we'll just say, uh, I am sticky, you know, like each one. Okay, I'm gonna go ahead and remove these h one tag right here because we don't wanna have more than one h one tag on a page. Save this. Go back to a Boza. Let's come over here. Refresh the page. All right. You can see I am sticky at the top right here. And thats whats called down there begins to school up. But now it's forever going to be at the top because it's parents is essentially the body tag which basically occupies, which is basically the parent off all content on the Web page. Let's demonstrated even a bit more. I'm gonna go back to the fixed here and I'm going to say, Ma Jin top off, let's say 100 pixels, right that save this, go back to the browse up, Let's refresh and OK, so you can see right now this is the sudden position because we've given Imagine of 100 pixels on the top Now, every school down, you can see it's cooling up. It's calling up until it now gets it up, and then it's always going to be right up there. So in reality, if you want to create yourself a sticky menu, using the position off off sticky might actually be better than using that off fixed. So I know this has been a very, very long video, but hopefully you've now learned the different values for your position. Property relative, absolute figs. And, of course, sticky. Thank you so much for watching the video. I will see you in the next class. 37. The Z Index Property: Let's take a look at one final property. I know. I said in the previous video that position was gonna be the last property, but I promise this is going to be the last property we're gonna talk about. And this is going to be the Z Index property. Quite useful. Now to explain what this particular property it does. I have made ah some small changes to our HTML document. Basically, what I did here was I gave the P orange tag position of absolutes and then position top minus four pixels and then the great P tag. I gave it position absolute and then position top minus 10 pixels. But then I also made the Dave right here that holds them. I give it the position of relative so that they will use this particular Dave as their ankle points. And of course, this is the result right here. You can see right now that the second day of with the i d off grey is overlapping the first API tag with the i d off orange. This is where the Z index property comes into play. What if we wanted the orange Pitak to actually be displayed first and then will display the gray P tag behind it. Who would use this? The index for this kind of situation. So the default velvet falls, the index is zero. So all you need to do in this case right now to push the orange Pitak Ford would basically basically be to come in here and then go to the P on engine and give it a Z index off anything above zero. So we can just say want, for example Let's go ahead, save this. Go back in here, refresh the page. And now you can see that the P element with the idea of orange is now in front. This is the use off the Z Index. Likewise, we could go back in here and say, OK, well, we're gonna give ah gray tag right now. Is the index off four? No, I save. And as you might guess already, it's gonna go back in front off the pizza with the I d off. Always. That's basically what we use Dizzy index four. Thank you for watching. I will see you in the next class 38. CSS Specificity: a round of this section on CSS. Let's talk about CSS Spacey C T. Now this is an extremely important concept of CSS, and it's one that you should be familiar with because, like I said, it's very, very important. So what exactly is specificity? Well, let's say, for example, there were two or more conflicting CSS rules that pointed the exact same element. Your brother in this case will follow some rules to determine which one is most specific and will therefore be applied to the elements. Now think of specificity as kind of like a school or rank. They'll determine which style declaration is ultimately applied to an element. Now, just so you know, specificity, specificity is usually a come one reason why some of your CSS rules don't apply to certain elements. Even when you think they shoot, it's usually because there's another rule out there that's a bit more specific than the one you're are currently walking with. So what exactly is this specificity, hierarchy? All of these rules well, there are basically four categories which will define the specificity level off a selector . You've got the line styles, which, of course, we forked with it's basically the one where you apply a style directly to an element, usually in HTML document. Next, you've got the ideas with, of course, the hash tag symbol. Then you've got your classes, attributes and cedar classes. We've talked about classes and attributes. Classes will talk about it later. And finally, on level four, you've got your elements and your pseudo elements, which, of course, we're not talking about. Still, elements will talk about those a bit later. These are the four main categories with the line sells the most powerful four by DS and classes and then your elements. So how exactly would you calculate this specificity? Well, let's take a look at some examples in here. Now we've got your regula each one tag just on its own, but that next you've got the Class H one, and then next you've got the I. D. H. One as well. And then finally, you do have the in line styling full of the H one. All of them have different colors apply to them, but ultimately it is Option D, which has the Ellen Stallion told Wind out because, well, it's the most powerful now, if we only had three options with the elements the I D and class. Well, it is the I. D. In this case that would win out because ideas are more specific. They're more powerful than classes. And then finally, of course, if you only had two options between the element and in the class, the class would win. Because the class is more specific. It's more powerful than just the element standing on its own. Now, in a rare occurrence where the same rule is written twice in an external style shit, then it's usually the Lowell rule that will be applied. So in this case, for example, if you had two different background colors for the exact same element in this case right now yellow is applied first and then read, which is second, will be the one that will ultimately be applied because it is lower than the Yellow Declaration in the style sheet. Let's now take a look at CSS specificity in action. Using some life examples and we're gonna do is we're going to target this structure right here. The bomb with the body tag all the way over here. So basically we've got the body element, which is the outermost element. We're going to have the section, the next, the meat, it's ah, inner element. And then inside of this section without having Dev and then instead of the day if we have the Pitak here and then you can see also have the m tax of a good we're going to be targeting the attack because it is the innermost element will be using that as a guinea pig . In this experiment, let me, first of all, go ahead and remove these h one because we no longer need it. Let's save. I'm gonna go over to my style that CSS and I'm also going to remove the background color for this particular Dev with the class of red. It's right here, So I'm going to remove this. Let's remove that background. Kahlo. Let's save. Go back, Teoh Broza And okay, so looks good as it should find. Let's not go back to brackets, and the first I'm gonna do is we're going to give the body tag the body element. Let's give it a color, and it's going to be my all time favorite. Kahlo bitch is paying. I'm joking. That's not my favorite color. Let's go back, Teoh. How's that? Refresh the page and okay, so pink has taken over. OK, let's go back. And now what I'm gonna do here is this. Okay, let's give this section. Let's give it a class of let's say section eight, Okay? And then while we're at in this, let's also come down here and give this particular p element class of let's say, class, not a class army. Let's give it a class off. You know, Dash P, we'll also give it on I d Oh, outta Dash P. I am so not creative with my ideas and classes, but hey, whatever. Let's just do it. Let's just move on. Gonna save this. Let's go back to Estella. CSS. What I'm gonna do right now is I'm going to give class of section eight. Was it section eight? I'm confirm that it was section it. Okay, Just making sure I'm not losing my mind here. Section aids. And then let's give this a color off Aquaman. Alright, Akwa safe. Go back to the browse. Ah, refresh the page. Akwa has taken over. Okay, fine. We know all this. Okay, let's continue. This one's happening right here. Now just so you're aware, the class obviously is more powerful than the regular elements, so class will be more baffled and just bloody We've talked about that already, but let's go back to index of each day mail. Unless there's something else in him. We've targeted this class, right. Section eight. We're going to add a color for the Dave right now, which also has a class of red and will also give these P class right here another different color as well. So let's do this. I'm gonna come in here right now, and I'm going to say OK for Red. Already have the collection right here. We're going to give him his own color off red, but then check this out. I'm gonna come in here right now, and I'm going to say, What's the P class again? It's not P. So I'm gonna come in here right now and see in a dash. P has its own color off and let's go with Ah, let's see, which one do we go? Let's go with coral. All right, that's safe. Okay, So now who is going to win this contest? Because we're dealing classes. Now we have given section section eights its own color. We've given the red class its own Qala. We've also given the NRP class its own caller as well. So which one is going to win? Let's go back to our bows out prefers the page and now you can see that it's going to be curl. Essentially, that has one. But the where color also won in a way. Why, If we go back to our document, take a look at this. Even though this Dave contains this P class right here in a p and we gave this color of in a piece of coral by, we gave this Dave right here of red because the P class here is closer to these m tag right here with the text. It's going to apply to the M. The M is gonna have the coral call. If we go back to a browser right here, you can see that the brackets is a different type of it. It'll has the coral color because it is inside. It is inside off a p element that has a class off in a P. So even though the Dave right here which also in a way holds these m tag. Even though it had its uncle of Red, The M would go with the most immediate ancestors Our style. In this case right now, the P Class had the call off call P. That's why the M went with it. But let's do a little twist in here. Let's go back to style that CSS this exact same P class right here that has a close of an API we're going to give its own I d a different color. It is out. R p I'm going to copy this. Let's come back in here. Pace that. Let's change in. Appear right now, too. Outside p And then for the color. Let's see. But let's go with Blue. Simple safe. Go back in here to Broza. Refresh the page. Oh, wait a minute. Oh, I think it may be made a mistake and Oh, yeah, of course. We made a mistake. Yeah, I did not change the class to an I d. I'm such an idiot. Forgive me. All right, so out to Pete. That's the I d. Go back to the Broza. We're fresh and now there you go. The color has now switched to blue because remember that ideas are more specific than classes. But we're not done. Let's go back to index of HTML and out for the M right here. We're going to give it its own style, equals caller. And let's go with ah ah, Azzurri. And I'm sure by now you already know what the result is going to be off course right here. You can see this is now the Azzurri color in action because we have given it. And in line styling, which is, of course, the most powerful are the closure that you can give to a particular element. So that's it for CSS. Specificity will be walking with this a lot more in the very next section. But that's it. Thank you so much for watching. I will see you in the next section. 39. Project Section Preview: all right. The time has come, and I hope you are ready because together we are going to build ourselves this full warm page website called Web Impact. Now where the impact is, a fictional business company built their business. They specialize in Web services. Internet services. Basically so the offer. Things like cybersecurity services. Ah, Web design. What devote man's app? Application instance like that. So this one, Pedro Upside is all about promoting the company and describing what the company is all about. So, as you can see at the head of we do have, ah, logo, we have ah Mei navigational menu. We also have this section where you have, like the main headline, discovered who they are. You can see the background image basically blends into the background because the logo and in navigational menu are on top off the Baghlan image. So I'll show you how you can achieve that. You have the two buttons idea, and about a Section seven is provided section as well. Why walk with those very, very important a myth? The team There were eight of them Testimonial section a client section, of course. And then finally, a contact or section with a form. And of course there's going to be a footer with some more links, social media likens and, of course, the all rights reserved text. So as you can see, this is a full one. Page were upset, but it's not just about the content and the sections on the columns. There's also gonna be some animation you can see. Right now you see this button right here to the light. Most of all these sections have this particular are brought in these two arrows. When you click on that arrow, it takes you all the way back to the top, which is useful, very useful for one page websites, so I'll show you how you can achieve that. The logo host also has a little bit. Animation against when you hover on the circle begins to rotate are continuously so also these other little additional skills that you can apply to really make a website stand out and make it favor excited. So, so far, so good. You've learned about html even see assess. But it's quite another thing to be able to combine both of them to build a full website. So this is exactly what you're going to learn in this section. You'll in some more HTML And of course, you'll learn a lot more. CS is as well. I hope you as excited as I am, because now this is the real deal now, but gets in a harms really, really debt. See, we're building something real. So sit back, relax and I hope you enjoy the section Let's get started. 40. Download the Files Project Section: all right so ever to begin the product. But before we do so I need you to download some files. You will find them either in the protect section or in the attachments of this video, depending on where you're taking this course. But you will find his of files Final code and protect Starter kit. We'll be working with the projects. Topic it. First of all, you will find an index file. It says file, that's the code will study, put it with. And then the final code is the complete code for the entire course. You can use that as a reference whenever you get stuck and and finally there is an external systems guidebook of credit for you. It is gonna provide you with some very quick tips about CSS XML and also some links to some other websites. We can learn more about HTML and CSS. So I hope you find this file very, very useful. So that's it. Go ahead down with the files and I will see you at the start of the project. 41. The Starter Code: So hopefully you've been able to extract the documents and the files, and this is what you should be left with. Once you're done, you will have the index dot html file, which is well, as you could see right now, there is no content yet and the file, But then, in your Assets folder, you should have to all the folders you will have the CSS and then images images. It's pretty straightforward in here. You would have your fave icon logo. The hero, which will be a bag on image, will take a look at and then you'll have images for your team members for the clients as well. And then, of course, for the bag rounds, which will be using and then for the CSS folder leading here, you'll have to files the main dot CSS, which will have some code already in it. All this Cordy already familiar with why'd you have the body tag? You've got the fund, family font size, bag and color and so on. I do have the attack here for strong, which will make the text bold at the front weight of 700 and then for the head as off edit some styling for H ones H two h three and in for the paragraph have also added three properties for the fun size line height and then some margin. So of course, as we progress in the course, we might be making some little tweaks here and there. But this is the cold you should be left with for the main dot CSS and then for the index dot html, we do have the similar code you've seen before. Each human language, some head attacks as well. In here we have the title will be impact build amazing websites and right here we have linked the two style sheets normalized up CSS, which I'll talk about in just a moment main of CSS and then also the five icon. You'll find it in here as well. That's the five icon for the website and now it looks like a look at the normalized at CSS . So what is those? Basically is. Let me come down in here. The normalized of CSS is a file written by a particular individual who loves CSS. But what it does is that they file is men to stabilize the way your content looks across all different browsers. So the idea here is that by default the different types of browsers Firefox, Internet, Explorer, chrome. They have slightly different ways off interpreting content. So, as an example, if you tried to display in an H one tag with, Let's Say Firefox, Firefox might add, we would like 0.5 pixels margin to an H one before komm, komm might add a point to intern Explore might not add any margins and so on and so forth. So basically, the idea here is to make your quantum look exactly the same across all browsers. Now, if we take a closer look at the actual code itself. But, I mean, I opened this right here, there's a lot. There's a lot of cording here, many of visually familiar with, for example, so in here you can see that the comments right here, right, for example, like heavy say's remove the margin in all powers as so. Like I said, some brothers might add some additional margin to setting kinds of tags. So right here we have said margin is set to zero for the body. The main displays that to block a swell down here, you have some additional properties and some values. So just scroll down. You begin to see everything. My dead from family model space full the cold K B D. Sam tags and so on. You come all the way down here and you see some other information. Don't worry. I know some of these you're not familiar with yet, but by the end of this course, you will be able to understand exactly what all these properties are and what the values mean as well. So that's pretty much the code that we shall be starting off with. So Germany, very next glass available now begin to build the header for our website. 42. The Inspect Tool: Okay, So before we begin the project section, I wanted to spend a few minutes to introduce to you a tool that we will use in this section . And this is a tool that you cannot do without as a Web developer. And there's going to be the inspect tool. Now. What you're looking at right here is the finished product that finished were upset, which we're going to build by the end of this section. But no, it is that when I right click anywhere on the Web site, you will see this line here cold Inspect. Now let me point out that I'm using the Brave browser, but it's pretty much the same concept on any other kind of browser views. In Firefox, you're using chrome using Apple's Safari Internet Explorer. It's pretty much the same thing. You will either see, inspect, inspect elements or inspect tool Either one of those three. When they click on it, it basically Oh, sorry about that. I didn't intend for that to happen. Uh, okay. You say it's always weird when they record strange things begin to happen. It's like, Ah, you think this this browses. They have a mind of their own. They know when I'm recording and they begin to misbehave anyway. So what happened? It basically brought out this particular window. And right here, this is what we call the inspect tool. It allows us to take a look at the on the line html code as well as the CSS code making up the web site. So over here to the left, we have the external code over here to the light. We have the CSS code. However, if this is the first time you're opening these tool, you might discover that it is not detached from the browser. You can see mine is already details. I can move it around. So what you want to do to detach it would simply be too a lemon. First of all, we attach it back. So right up here, I have these three buttons. I am going to dock it back to the bottom so you might find yours to be something like this . Like you can see, it's no longer detached, it's connected, it's fixed to the page. So you want to look for three buttons at the very top right here. And this depends on your browser. you might say something like detach. It's usually within the first or the second option. So mine in this case because I'm using the brave powers up. I'm similar going to click on on lock right here and now it is free. So if you're using crude, you might say something like detach or set free or something like that. It all depends, but it's usually the first of the second option. Okay, so mine has been attached. And let's take a closer look at what exactly we have here. Like I said, Alia, over here to the left, we have the HTML code to the right. We have the CSS code, But notice that when I hover my mouse around the elements on the HTML side different parts of my page of being highlighted That is to tell you that Hey, where you are right now. But you're focusing on Is this particular area notice that I have my mouth right now on this class of brand, and you can see what's been highlight head the way of impact and the logo is not been highlighted. That should tell you that. Okay, Right now, this is the element holding or controlling that everyone website in the head away, I have the logo and the text. If I scroll down, down. If I moved down to naff class of men, you all of a sudden now you can see the menu becomes highlighted. So if I want to walk on the menu, I can come in here and then simply open up the menu and begin to walk inside. He will also notice that we have apples pointing affords to the right that will indicate that inside of this particular element, there are other elements. That's why when I click on the of course of brand clicking, their notice that we now have a DIV or the class of logo dash rap and then also there's a SPAN class cold name. Both of them also have enough elements so I can click on the close of local rap clicking there, and now I have an A tag, but they're still a narrow. I cook on the again, and right here you can see we now have the image, a notice that when I hover on the image class, he can see the aspect off the logo. That's not been highlighted it specifically the circular logo and notice there are no more . I was just tells us that the image cause right here this is the enormous child off this particular day. If the same thing applies to the Spanish class of name, I can expand it instead of having a tactic and expend it again and inviting and say, we've got to Spain classes one for the Web text for slightly the Web, four slash text and then the order for impact. And there it is. So what I'm gonna do right now is I am going to basically on expand all the elements and right here you can see this is basically the too big granddaddies of the big mummies of this particular page we have had. And then we have body Body is the tag hold in everything. But even at that note that both of them are still inside of the HTML the almighty html tag , the head tag, basically ritual took a boat has just the links to five icons. Two scripts and so on will talk about that later. It's actually the body tag in this case that holds all the content of the entire page. And when I expand the body tag, you can all see these are like the lieutenant's the Lieutenant David or the lieutenant sections or the generals off all the major section. So we have head up. Note, by the way, that when I have on Hedda, it appears like it's the entire page. That's Bean highlighted, but that's not true. If I just scroll down here and I go back to head, I noticed the head on out stops just above the white Bagram Bethea Potter's text that tells us that Okay, this is the area that the head a tag occupies. It occupies the bag, an image of seeing the logo and then, of course, the menu. And then if I begin to scroll down here, limbs called on with the bells up you can see we have the about section highlighted. We have the limit. Ceramic. This may be a bit smaller. Okay, lets go down further. You can see we have the about us section serves a section. We have the ah, Why us section right here been highlighted. As you can see, same goes with the team. You have testimonials and so on. And so forth. Okay, let me make this a bit bigger. You might also notice that when we hover around all these sections, you might begin to see different kinds of colors, most notably the green Kahlo. Do you see this green color right here? Just at the bottom right there. Let me maybe drugs down a bit. So you said this green color right there that tells of that that is Padden Green in this case indicates a patent. It might also depend on your browser. I'm using Brave it. Like I've said. And with Brave Green signifies our Padden. And if he notes, is if I click on section I d. Let me come over here. I am going to uncheck this box record that stays patented pixels. If I don't check that, I remove the pattern. Now you can see there's normal padding. Eman Eindhoven services. The green color no longer exists. So once again, ah, green usual represents Padden. And then for margin, you might have a different kind off color, which is usually maybe orange. So this goes right now notes is that when I hover on the death, close off content, way wide notes is that we now have orange on the science left on lights That significant signifies that shows monitor that shows margins have been applied. So again it depends on your browser Orange my men patterning in your own brows upon mine. In this case, orange is from ours for the margins and in green, which can also see idea green is or the patterns. Let's talk about the CSS aspects. Now, over here to the to the light. Like I've said, you have the CSS sections. OK, so it all depends on which aspect of which area off your website you decide to inspect. If I came down here and I right click on the send button and I go to inspect you, we now see that in fact, the tool has taken us straight down to the HTML area where the bottom has been out Put it, you can see it's right here. You can see it. It belongs to the diff close off field dash coal, and it has a class of buttons of meat and in green has three different classes. But interestingly, look over here to the left, and I'm sure to the right and right here you can see the CS has been applied to that bottom . You can see this is where we have the bagman. Coehlo. So I came in here right now and they clicked on the value. And I said, You know what? I'm gonna changes to read. Now you can see all of a sudden the color has now changed from green to red. Note. However, don't get too excited. These changes I meant life. It's not like when you make a change right here. It's automatically saved. No, this is just full. Our front and testing basically viable. Refresh the page. The change will go back to normal. To go back to the initial are lemon color. The use of the inspector is just to allow you to see your changes life as you apply them, so that rather than you having to go to the backhand, apply your code. Say, if you come back to browse every fresh, you can just apply those changes. White fight there at the get go and see how they look like in the same way I could change the phone size, which is 15 pixels right now. I could go with something bigger. That's gold way to 30 pixels on my day can see this is how the pixels would look like. However, I also want you also wanted your attention to something some buttons might have, like a hover effect. Or some alums might have hover effect. Which means that when you hover on them like I'm doing right now, when you hover and them something happens, as you can see right now, when I hover on the bottom each and is somewhere to green. So if you want to check out the CSS for such, what you will need to do is a little bit tricky a little bit. But don't worry. I'll show you over here, I tell. But you have the are basically the toolbar you can see. You've got the Hoff toggle elements state of a clicking there. Right now, you can see the different kinds of states that cannabis that can be applied to the bottom we're looking for hover right? So if I click on hover right there, notice that now Do you now have The CSS has been applied when we ho over on the bottom. That's all right. He cannot see it, says Button. That submit and then colon hover and you consider, however effect right there being applied. So the reason why I said it's my baby trick is because different brothers have different ways off triggering the hover states. But everyone has it. You will find it somewhere along the toolbar. So limiters on. Check this again. And like I said, the whole point over the inspectors allow you to take a look at the on the line html structure of a page and then tried to apply live CSS changes. So again, let's do one more. If I went to the let's say, let me come down here Teoh Services provided night So we have service provided section light here. If I go to services all the way up here and I click in there now you can see services has the idea of services. This is the Baghlan image being applied. I could choose to own check the box and you can see right now we no longer have a background image been applied because we haven't checked the box again. You can make life changes. Let me put that back in. Let me expand the section. I have a class of content. Okay, I'm going to expand it for the I've got an H two service provided. So if I click on the age to tag right now over here to the right, you can see all this is have been applied to our H two. We have a phone says after two pixels, a text ransom of upper case and so on. So again, I can come in here and say, OK, the front weight funded. Let's test out 800 instead. Now you can see the Texas a lot more bold because we've changed from 400 to 800. You can expand the A tag right here for this link. You can take a closer look at and see how it's constructed, make life changes and so on and so forth. So that's the whole idea behind using the inspect tool on any website. Now to wrap this up, I just wanted to remind you that you can apply the inspect tool to any website on the Internet. It doesn't matter if the website is for the FBI, CIA and White House M I. Six. Whatever. As long as the website is live on the Internet, you can inspect that website. So I did. For example, I'm on the web monkey academy dot com I can decide to do is right Click in here, click on Inspect and then begin to make Ah, just some fun changes, Right? So as an example, I could even clicking here where you have the HTML and I could change the text just for the fun of it and say Ah, and just say, Hey, guys, you know, look at me or something. Just something weird, right? A press enter. And now all of a sudden, the Texan here now say is Hey, guys, look at me. Just the point of China make him is that you can you can do anything you want to do on the website like us if you are the one who actually owned that website so you can make changes to the Kahlo's, the phone sizes and so on and so forth and just have some fun. But on the most serious notes, if you wanted to actually take a look and see the HTML structure or maybe even the sex has been applied to a website, you can do so with Inspector just to get some inspiration or just to get an idea off. How something What's don't was done as an example. I do have Facebook pulled up in here, and I really, really do like the blue collar that Facebook has. This particular shade of blue is one of the really this probably my favorite shade of blue . So if I wanted to find out what color this is, I can likely quite day on the bar, click on inspects and then all just simply begin to look around here and see. Just begin to switch between elements and Syria. Okay? You can see right now this is exactly where we have the background Corbyn applied and to confirm that if I uncheck this box Okay. Still the same lesson. Checkers books. Okay, so right now you can see that the blue background color is no longer there. So this definitely tells us that Hey, this is the color been apply this particular shade of blue and that's the value. It's three beast. It's to be be 5998 And there you go. So again you can used inspect elements to find out more information about the website What colors they use in. Even the council formed family they're using, right? So if I maybe highlighted this text right here, right click, let's inspect. Let's see what fun families being used right here. Let's seat. Can you find it? Ah, we don't see Okay. It's was like Helvetica arial. Some survived, but that's canceled out, as you can see. So whenever you see like a dash appearing on the property and it's Celadon, Wednesday's another value off lighting are developed that you're looking at currently. So to do that, we need to Okay, so you can see why. Today's another fun family perverted being declared right here. And it's called Inherit. So inherit just means that the actual phone family has been taken from a death that's above this particular devil looking at. So if we begin to click up here, keep on clicking up here, you can see if it still stays inherited. It hasn't changed us. Keep on going higher and higher. Okay, let's close this. Let's expand this inherit inherit inherit looks like it goes all the way to body and then finally in body. Now you can see this is where we have Helvetica Ariel and sensory. So indeed these are. The phone's been applied on the website, and there you go. So I'll doing according to spend some time, play around with the tool, go to your favorite websites, right click inspected tools. Try to find out what fun says have been applied in particular Barton's or find out the background color being applied. It is like that and just have fun. The more you use the tool, the more comfortable you will get that at at using it. So that's thanks so much fortune. If you have any questions about how to use this to, by all means Richard to be to reach out to may be more than happy to answer your question, because this is a very, very important skill to have. Thanks for watching, and I'll see in the next class. 43. Building the Header Part 1: Okay, so let's go about building the header for our site. And I've pulled up the finished product right here, and you can see this is the goal. This is what we're aiming for. So let's take a closer look at what we have right on the left. We do have the logo, but you might notice that this logo is actually two parts. You do have the image that IHS spinning around when we hover on it, and then you have actual text, which our web and an impact. So I want you to think for a moment. How do you think we can achieve this kind of design? I'm talking specifically about a text right now. You would notice Web is in white and these four sledges and what is well and an impact has a light blue color. How do you think we can achieve this kind of design while you think about that? Over here, to the right, we have our menu items. We have seven of them and they also do have some styling which will take a look at a bit later. But let's think about the structure because we're talking about HTML now. So the structure here is we're gonna have a container that will hold the logo and then the menu items on the light. But then we can also have one column specifically for the logo, which weaken metric in style and then another column specifically for the menu items. So let's do this. I'm gonna go over to my brackets, and before we begin to add the HTML to the index dot xml file, there is something we need to do that's favor important, and I deliberately left this out. The thing is, usually a lot of developers tend to forgets to close their tags. I'm guilty of this. I have done this so many times before, so take a look at the file right now and tell me, which tax do you think we need to close? It's pretty simple. It should be pretty obvious. We need to close at the body tag, so let's go ahead and close that one. First of all, let's come down here, all right, and then finally, we also need to close the HTML tag. That is another tag that we need to close. OK, that is that I'm going to create some space now. So let's bring this down here and let me just go ahead and we moved that India and Oh. Okay. All right. So the first of all need to do right here is we're going to add the Hedda tag because we're walking in the head up. So let's do that one. And then the might of the bed. I'll also go ahead now and simply close the Hedda Let's create some space. All right, So what do we now do? The first I'm going to do is to create the container that will contain both the logo and the menu items. So let's do this. We're gonna add a div, and we can call this. Let's give it a class off our content. We're gonna be reusing this particular class over and over again and you'll see why. So this is going to be the Dev containing the menu items and the logo. Let's go ahead and simply close the deal right now. Okay? I'm going to create some space and fine. Okay, so now we have the container all set. We no need to add a column specifically not for the logo. So let's create another Div. And let's give it a class and I'm gonna call this class brand because the logo is the brand . Let's let's give it a class of brand. Let's close the Dev And now inside off the brand Dev, let's begin to add the contents for the logo. So first, his first year is I'm gonna add another Dev right here and we can call this day of class. Let's give this a class off, Let's say local rap, Okay? And now inside off this particular Dev, we're going to add the image, the logo itself. So let's go ahead now and give it image and we'll just give that classes. Well, let's call the class logo. And now for the source, it's going to be we have it in assets. CSS No, as I'm sorry, assets, images and then logo the PNG. Okay, that should be correct. And I'm gonna add something else called the all text. Now, if we've not talked about the all text and you don't know what it is basically all Texas very, very useful because people who are blind, they use particular software to lead the contents off a website now because they cannot see the images. And because such software cannot describe images, they would use the alternative text for that image to describe what that image is to the blind person. So it's great for blind users. And also search engines like Google will will reward you. If your images have alternative text, so is very, very, very important. So to add it all text was simple. State Ault equals and then and Coats. I will say Web impact logo, because that's what it is, right? Web impact logo. And I think we are good and okay, I'm just gonna go ahead now and save this and let's take a look at what we have has come down here. But first a page and okay, so fine. Now we have the logo appearing. Okay, let's go back. Two black. It's all right. What next? Went Now we're gonna add the name the Web impact text. So again, we're going to create a new Dev or whether we don't even need it. Given this case, we can go with a simple span. Leslie, it is okay. I'm gonna go with this span and we called is a class spend class equals and and was just simply called his name. And then when a new line, I'm gonna come in here right now and say span class equals. So now we're gonna add the raved force text, which is web. So we'll just give this a class off. Let me come in here and say name. Let's say web, Okay. So that text right here is going to be Web and then Ford slash because remember, I hear that in the logo. Let's go back right here. You see Web and then four slash isn't white. So those are together and then impact this and blew. It will be a different class. Let's go back. So that's Web. Let's quit close this pan. And now we can add the new span for the impacts of span class equals And then I'm gonna say name and then impact, okay. And then the text itself right now will be impact. And now we can close the span and then we can close the span itself the main span holding the text and that is it. Then just make sure that we are fine. Me remove any empty space and ah, okay. There is a bit of an issue because you can tell right now that body and HTML are in red. So this tells us right now that something is missing somewhere. Let's make sure this is all correct. So this Dave is closed. This Dave has been closed. This Dave has been closed as well. And Oh, right here. The span has not been closed. So let's go ahead and close that span. Uh, okay, this is the kind of issue you're gonna face as a Web developer, specifically with HTML and CSS. So start getting used to this. I'm gonna go ahead now and save the file and let's go back to our blows. Ah, and let's see what we have. Let's refresh and OK, so fine. We now have Web impact and, of course, will not have to do some styling to get it to look exactly like this, which is going to be quite interesting. But you should be thinking of the kinds of properties will be applying in here, for example, Web an impact. Obviously the front sizable will be bigger. They will have separate classes for their spans and of course, text transform. The logo itself is going to be a lot smaller than what we currently have. And most important of all, the text and the local appear side by side. So these are things we should be thinking about. Let's go over to our brackets and let's go to our main that CSS. And since we're Stylin specifically the brand section, remember, we're dealing with the brand area right now off the head up. I'm gonna create some texting here, so I'll just copy this white here. Let's copy this. Calm down here and paste that Andrew Cold is brand. This is gonna be all the style and specifically for the brand section. All right, So which do we handle first? Let's go with the easier One way. Let's go with the text festival. Okay, so going back to our index of HTML, we do have the span name Web, which is Web and then name impact. So let's do this very, very quickly. I'm gonna come in here right now, typing name, dash impact. And the only thing minutes do right here will be to give it the color. So let's do this color and it's white. So it's gonna be f f f f f f six efs. I'm just going to copy old this, Come down here, we paste. But now we're dealing with a name which would be ah, Web, I believe so Let's come down here Change the span to Web. Now for the color I know the color here is going to be five b a D a f f OK, but if we go back to our HTML structure up here, remember, we do have a span class of name holding both and I specifically created is because note that the text is capital it is, and also the phone size. So whether they're not having to apply the same phone size and the same text transform a poor case to this sparing class and then this bank less ready right here as well we can just a plate on Lee to this pain class off name. That's why I created this class. So let's do that. It's gonna be at the top right here. Celeste is I'm gonna come in here right now and say, uh dot name. Then let's go ahead and add some properties. So the 1st 1 here is going to be the font size. Ah, let's go with 17 pixels. For now, we might need to change that text transform. Obviously, it's up a case and then let's go with the phone to wait as well. We'll make that wants 700. So it's a bit are bold, and I think we should be fine. Let's go ahead now and simply save this. Let's take a look at what we have refresh. And OK, so obviously you're not going to see the impact because, well, it's it's wides and up. We will need to add the background image for you to show. But oh, we made. I'm sorry. Made a mistake. Web is the one in white and then our impact is the one in blue. Oh, my gosh, I apologize for that. Let's quickly make that change. Ah, Web, right. His should be white. Ah, I am such an idiot. Let's come down here. Make that general quick. Uh, okay. F f f f f f. Okay, now this should be, I promise. That should be. I quit. Now let's go back in here your fresh and okay, So weapons and white impact is in blue. Ok, let's go back. And now let's take a look at what else we can do in here. Let's try to get the text to align to the side off the image. So to do this, we're gonna have to make some changes to the logo itself. Let's take a look at what we have in the index with HTML. So right here we have the class of local rap holding the logo. So maybe we can apply display in Lane blocked to this class of logo rap. So let's do that. I'm gonna come in here and let's go with the logo at the very, very top. So let's create some space. So I'm gonna coming in right now and say logo Oh, that's a bit too much. Let me add space right here. Okay, Logo. And I'm gonna say, Dash rap, Let's open up our colleague braces. And then, well, let's go with this. Play off in line block. Okay, So let's transceiver what will happen? I'm gonna go ahead now and save. Let's go back. That's refresh. And that still did not work. OK, not a problem. Let's go back and see what else we can do right here. What I'm gonna do is I'm going to set a with for the logo itself. Take a look at the logo. You can see right here that it's significantly smaller. So we're gonna add a logo right here. So I'm gonna come in here and we'll simply come right here. Dark logo. And I'm going to give this a with off. Let's go with 60 pixels for now. So my colon, let's say that now let's take a look at what we have. Come back in here. Let's refresh the page. And right now you can see that we now have the exact size off. 60 are pixels, but you'll also notice the circular border, right, Jake, and see it's in blue. So in order to achieve this particular feature we'll have to do is we're gonna have to add some border and then a border radio. So let's try that one. I'm gonna go back in here and we'll go over to the local rap class itself, so I'm gonna say border two pixels. Let's go with solid And then I know the collar is exactly the same. It's gonna be five b d e a. F f. And then to make the borders circle. I remember that is this property called Border Radius and I think it's that it four pixels . That's what we need to make it circles. Let's save, Let's go back, Let's refresh the page And there you go. Although you will notice that the logo itself it's a bit further to the top. It's not align perfectly at the center off the border, so there is a property we can apply, and it's called the vertical, our line that will ensure that the logo is placed directly in the center there in the middle off our border. So to do that, I'm going to jump in here, go back to a mental CSS and then for logo right here. I'm gonna apply to you and say Vertical ah, line going to be middle. Okay, let's save that. Let's go back to rebels. Let's refresh. And now you can see that the logo is now placed perfectly right there in the middle, and that's why I'm going to stop for pot. Once the jumping part two. Where will continue to design the header off our website? I'll see you then 44. Building the Header Part 2: well, comebacks. And if your video is successfully added, ah logo but did some design and we also added the web impact text. But now it is time to add the menu items all seven off them. So the head of us you brackets and in my inexact HTML, I'm gonna add the new tag just underneath the span. Please pay. Very close attention, white kid. This div for the one for brand right here. We're gonna add a new tag for the menu just underneath these particular hierarchies. So right here I'm gonna add some space, and then the tag will be using for the menu will be the knave. It is an HTML tax specifically for your menu items. So always use this particular attack as opposed to Davy Could use it, Dave, if you wanted to. But it's more awkward to go with the knave tag. So right here, I'm going to give this a class, and we'll simply called his menu very, very, very simple. Have class menu and okay, let's go ahead and close the knave. Oh, I Let's create some space and we're gonna add on many items as a list, so we'll go with the on order list of U L. And then just like that, we're gonna add L I I'm sorry. Let's close the ul festival. And then inside, let's add L I The very 1st 1 the very first list item. And that is actually Don't remember. Let's come back in here. All right, So about services, right? Gonna come back in here. So what I'm gonna do here is I'm simply going to add all the list items for the menu and then always, um, the video, once I have finished welcome back and is against the right now, I've added the remaining menu attempts. I have also added the tags for them. The A tags, the links basically, and these will be called the ankle tags. The idea here is that when people click on this links, it will take them to the sections where we have the content for the item they've clicked on . Don't worry, we'll talk about that a bit later. But for now, make sure you have your hashtags and then the text representing the actual menu item. Now, here is my page. After fresh, You can see right there we have all our menu items, but we do need to make some serious CSS changes. So let's go back Teoh brackets and I'm gonna open up main that CSS. What I will do right here is I'll grab the brand. Let's copy that. Let's come all the way down here and add the new section between, Of course, be menu. Okay, let's create lots of space. Let's come back up here, all right. First interest is the menu class itself. We're going to make some changes in here. The fun family. You needs to be changed and is generally a good idea to have a different form family for your menu items and in another for your tech so monster it will be for the body. And then, for many items were going to use a latell. Feel free to use a different menu item if you want to. We could also add the collar off our text, which will be white, but I don't want to do that because the bag one is already white and we do need to be able to see our menu items bought. Extras from Definitely apart case are we're going to make the position relative as well, for good measure, relative and OK, that's for the menu class gonna come down here. Let's make a change to the menu. You l Because we want to remove the default, styling these circles for the menu items so well coming in right now and say the list style type. And of course, we'll just give. This are none. We don't want any list styles. We'll give this a pattern as well of one pixel. And for good measure, margin will be set to zero. And then let's come down here and do similar for the Airlie items themselves has come down here. Am I gonna odd margin off 10 pixels and then one pixel for left and right? And that would be that. Let's go ahead, and that's just save and see what this looks like right now. Let's refresh and OK, looking much, much, much better right now as it is, but we can make some actual changes to the text themselves. We can maybe change the phone size at some funk weight as well, but can also display them as an in line block soap. Let's do all of that. I'm going to go back to brackets and down here will have menu and then got a so like Now let's directly make changes to the tech. So I will go to the fun size and ah, let's go with 16 pixels font. Wait. Let's see. Frontal, wait. I'm thinking of maybe something like, let's say 400 I guess. Let's go it 400 and then the color again. We could change the color to white, but I don't want to do that. But we will change the display two in line block. Okay. Ah, position will set this one to relative as well. And ah, for good measure, text decoration. Let's say this to non. We don't want any decoration. What so ever? Okay, let's go ahead, save and let's take a look at what we have. Fresh and okay. No looking bad. We're getting there now. Obviously, the big challenge right here is trying to get our menu items over to the light and while keeping our logo to the left. Now, this is a property I haven't talked about yet, but there is a property known as the float property. The idea here is that we float. You can push elements or content either to the left of your page or to the right. So what I'm gonna do is I'm gonna come back in here to have brackets. And if we go over to the HTML structure, remember that we have two main columns one holding the logo, one holding the menu items. The one for the logo is the brand class while they want for the menu items is, of course, the class off menu. Let's add our float properties. I'm going to go over to maintain CSS and for the brand right here. I'm gonna open up the brand class brand, and I'm going to say float left. So we're floating the brand to the left. I'll also give it a position off relative really tive. And there you go. And then down here for the menu, I'm going to float the menu over to the right. Let's go ahead now and save and let's see the changes. Let's refresh and voila! Now you can see something very interesting happening that menu items are now to the right. The logo is now to the left, and you'd also notice that the text the Web impact is now right next to the local because we floated the contents off our brand over to the left. But our allies a list items are still displayed as blocks so we could change that. I also add in the flu the float right? I'm sorry. Float left, brother for our allies. A Leicester. This float left safe. Let's go back. Let's refresh And there you go. So we're still quite some way from achieving what we what we currently have right here. But we're getting there gradually. So that's it for adding our menu items and also working with the flood property. Germany, Vendex Variable will continue to walk on our header. 45. Designing our Header Part 1: well, come back. So let's continue to develop head out. But before we do so I need to point your intention to an arrow that I made right here. Every gun in the structural. So right here where we have the Dev class of brand this close and they've here should actually be outside because this Dave of classic brand is supposed to contain the logo as well as the name the Web impact name as well. So I'm gonna cut this right here, and I'm gonna paste it just outside the clothes and span like that. And then I'm going to do some invitation right here, and this is how it's supposed to be. So in the container of brand, you have the class logo rap, and then you'll have this pain class off name. So I do apologize. It's a mistake on my part. But these are some of the things that happened when you build our websites. You always prone to making are these kinds off mistakes or do apologize for that. But let's now move on. I'm gonna go ahead and save and let's take a look at what we can actually do on our site. now. So right here. You would notice that the content is more towards the centre, right? It's not like what we currently have, where the content is right here at the edges. So we need to put a content in side of a container and then tried to align the contents at the center. So let's go back, Teoh html document. And right here you can see we have the day of class content. This is the main content holding the low goal, the menu items and so on. And in fact, this class off content is a class we're going to keep using over and over again in this court. So let's do this. I'm going to go over to Maine and I'm gonna grab the brand text. I'm gonna add some styling toe a content class. Let me add this way there, and I will call this content, okay? And now I'm gonna add the class of content itself. Unless there's some stuff. Okay. First things first is we're going to declare the with, which would be, of course, 100%. It's a good idea, 100%. But now we're going to set a max with off 402,140 pixels. So this is going to be the container with for our contents. Let's go ahead now safe. Let's go back to the Broza Refresh. And now you can see that the content basically right here is now pushed. More are towards the white towards left, as you can see better. So we still have to try and figure out how we can centralize our content more towards the center. And because we've changed the XML structure for the brand container, you can see right now that our Texas now aligned right next to the local. So again, I do apologize for that mix up. I should have noticed that Ah, I beat Alia. But let's try to get our logo and the menu items more towards the center. So, do you remember this trick, don't we? I showed you the margin and then zero auto trick. Well, I'm gonna play that right here, So let's do that. That's safe. Go back to a browser refresh and there you go. So right now you can see the content is now more aligned towards the center, so again very quickly you want achieve this very, very, very quickly. You will add a max with for your container and then simply said margins. You also those this will give you are these kind off structure. All right, a few more things to do Gonna head back to our CSS and right here I'm gonna odd some padding as well, so we can see Pat in 0 20 pixels for left. And right now, do you remember Decisions Box model, where the total with will also include the border as the patterns imagines. Well, we're gonna do that. So it's gonna be books size in is going to be the property box sizing and then the velo off border boxes What we're gonna add. So this right here will will mean that it'll with will include our margins and patterns. And it's usually the way you want to go. When set in your containers position, I'm gonna go with relative as usual and voila. Okay. I'm gonna come down, hits you brand as well. And if you notice right here, the logo is still bombed up by there at the top. So we need to add some margin. So we're gonna add margins to the class or that the container holding the logo, which is, of course, the brand. So let's go back to brand right now and right here I'm going to say Margin and I will say 20 pixels and then zero left and right. Let's go ahead now and safe. Let's go back to the bells are refresh and there you go. So things are definitely looking much, much better now, but there's still some work we need to do. We need to add some margins to the menu item, and if you notice right here on our the finished product, you would notice that the logo and the many items basically the head up they are a bit wider than the rest off the actual content. You may not see it now, but trust me, it's there. The header is just just a little bit wider. So we're gonna do is we're also going to increase the max with off the head are specifically okay, So let's do this, for instance, was, Let's go back to brackets and is go over to maintain CSS. Let's just go ahead right now and add margins to our menu, so I'm gonna come in here and say margin is 25 pixels zero. Okay. And now for our header. Check this out. I'm going to go over to index with HTML. And right here we have the death class content. I'm going to add another class off wide. Okay, So basically, we have two classes right here, content and wide. And now I'm just save this. Let me save the file. I'm gonna go to Maine. That CSS Emma. We have the content right here. I'm gonna come in here and and say dot content and then don't wide notice. There is no space because these two classes belong to the same elements. So I'm gonna come in here right now and simply say Max with and I'm gonna say 12. Let's go 12 50 pixels. So it's just a little bit wider than the 1140 pixels. Let's go ahead now and save this. Let's head back. Teoh Browser. Uh, it's coming here. Let's refresh. And there you go. Okay. Much, much better. Now, over here, you can see how it looks like, and we need to figure out a way how we can get this effect where when we hover on the menu items, you might notice that the initial text you seriously like about, for example, it goes down and then another about like, comes over it. So basically, it's like we have two texts right here, one that we can see, and then another one that takes the place off the previous one when we hover on that menu item and you can also see the background color changes to blue as well. So how can we achieve this? Well, the first thing we're gonna do here is we're gonna change the structural off our menu items . Basically, we're going to repeat the text. So rather than having just one about link right now, we're gonna have to will have to for services, Why us? And then we will hide one in the default state. And then when we hope over on the default one, it will now hide, and they will now show the Harvard States version basically, So I help them make sense. Don't worry. It should make sense as we continue to build it. So what I'm gonna do is I'm gonna go back to our index of each similar and We're going to change the structure off our menu items, so check this out. I'm going to create some space here, first of all, and I am going to add a new line right here. Let's close this one as well, and Okay, so look at what I'm gonna deal right right here. I'm gonna say a trip is about Let's create some space here. All right, Here. So the idea here is we're gonna add the about text twice, which means two different span classes. Okay, so I'm gonna add the very first span right here, and he called his pen class equals, Let's call this one default. Okay, so this would be the default menu item that we see when we load the page. So let's added text right here about and then I'm gonna close the span, and then the next pan class here will be the one that will appear when we Khobar on the menu item. Okay, so let's call this one over. Okay? So basically it ah comes over who end me over on the menu item. I am going to repeat the text and call that one about as well. I'm gonna go ahead closes pan. And there you have it. So right here. This is going to be the structural have for our menu items. Like I said to defense pan classes one that will be the default. And then wonder will appear when we hope over on the default are many item. So what I'm gonna do here is I'm gonna do the exact same structure for all the main items. I'm gonna pause the video and resume once I have finished. Welcome back and is again. See, right now, I have added the Spanish classes default and over for all the menu items I have saved. Now, when you do the same, this is exactly what you shoot. See, when you refresh, you can see Right now we have the text with pizza in, but it's okay. We're gonna make some major changes now. I'm gonna head back to brokers, don't see assess and the first thing we're gonna do right here. Is this okay? We're gonna style the span classes themselves, first of all. Okay, we're gonna add some of all starting for them. So let's do this menu A and then span. So all the text on the menu items will have these styling together. So first things first is we're gonna set a position off a relative and this is gonna be very, very important. Very, very soon display. We consider this to an in line block as well, and we're gonna add some padding off 10 pixels. And also let's do the Buddha. I'm sorry, the book size in property as well. And of course, we'll go with the Buddha books value. Let's go ahead and save this. Let's go back to the browser. That's refresh and they go, OK, fine. So right now you can see there is more space right now because we've added some pattern as well. We've added the display in Lyon Block, so it's beginning to look quite neat. Now let us style. The default states off our menu items right here. You can see the default State has the brownish darkish background. It has the border. It has like, ah, lightest blue border top color in there as well. So let's see how we could add that design gonna head back right here. So we're gonna target basically the span class off default. That's why we're gonna tuck it and we're gonna do that right here. Down here. I'm gonna say dot Menu spaced or default. Okay. And let's possible at the background Coehlo. Okay, so we have the bag and culo and I have it right here. It's 40 40 40. We'll add a border as well, which is one pixel. It's gonna be solid and also brown. So that's gonna be for I'm sorry. 555 and then the bullet top color. It has the lightest blue color, so I'm gonna say, but its a color and the value there is going to be a 00 b one e four. I believe that is correct. And let's also do the display for the online block as well. And Ah, okay, let's go ahead. Now safe. Let's head back and see what we have. And voila. Okay, we're getting there. Will get in there. The only thing now is we need to try to figure out a way how we can get the menu items back towards Div ICT, but also how we can hide the over state for the menu items. So all the menu items without the background color, we need to hide them. But How can we do this? How can we hide this many items? Well, to save time, I'm going to tell you exactly what we're gonna do, right? We're gonna come back in here, and I'm gonna add the class menu. This is gonna be very interested over and now I'm going to come in here and very quietly I'm gonna say Position. Can you guess the veil of the position right here? It's going to be absolute. Voila. Let's go ahead. Save this. Go back to a Broza refresh And there you go. The idea here is that remember, whenever we're dealing with position absolute, such an element will anchor itself to the closest parent element with the position off relative. It's right here, Frank. About two index dot html. It's right here. You can see we have the about span class over which is absolute. But then the a tax themselves apparent a tax at position relative. It's right here on the main that CIA says you can see right a position Vela tive. So that's what's happening right now. The absolution elements are now anchoring themselves to the apparent A tags. But you will notice that the text is still kind of spilling around. So to fix this, I'm gonna come back in here right now and for the adult over class, I'm gonna say, Left off zero. So my colon and very quickly let's come down here to the menu. Let's add, I'm so on the menu A's. Instead, let's add the color now for White. Okay, let's do that. That's safe and 1/2 ahead back in here, and I refresh. There you go. So basically, because we've said left to be zero, we've basically pushed the absolute pushing elements to the edge off the apparent containers, which have the A tags. Which is why you might also notice that it's sex right now is bold. They're not like the light takes, you see right here. This is like a front weight of maybe 300 right here. This is more like a front weight off 600 Cain gets why that is because we're seeing both texts at the same time. You have the default about text right day and then behind the about X, you have the about both for the over class, So basically the text are doubling up. That's why it's now Bold. Do you understand that? So basically you have the first text appearing and then right behind it. You now have the text with the class off over. That's why it's bold. And we need to do something about that. So how can we hide the text behind the text with a class off the over? How can we Onley show the class off default, But in high the class off over. It's very, very simple. I'm gonna head back in here, and here's exactly what we're going to do. I'm going to give Check this out. Okay? I'm going to give a height to the parents a tax. So I'm gonna come in here and I'm going to say heights. Let's go with 40 pixels, okay? And then for the over, I'm gonna call me right now, and I'm going to say top minus 40 worn pixels. So basically, we're going to throw the texts with the class off over, but gonna three over the eight tags themselves when they come in here right now. Safe head back in here. We fresh And there you go. Now that text has disappeared. You can I give you better understand? logically show you something If I came back down here and I said OK, what is love? Banners for 21 Let's go with minors are 13 instead and let's see the difference. Okay, when I refresh right now, can you know? See, this is the text behind it's Friday. So we're trying to push it. Opportunity pushed away. So what I simply did again was to give the content of themselves the menu a span we give their heads for the pixels and then simply to hide the class off over orders. Give it minus 41 pixels by death. And if I come back here, refresh once again, you can see it's gone. So that's one trick that you might want to apply in the future. In the order Seasons projects. This has gone way too long. So thank you for watching German event excitable. Continue our building out our head up 46. Designing our Header Part 2: Welcome back. Hope you're enjoying the lessons Those far so previously we were able to twist certain extent hide the span text for the over class. Right now, all resting on the menu is the text for the default span. But the text for the over span is still actually there. It's right up here. We cannot see it because the menu items the text has been set to white on. We do have a white bag on color. So to see them, let's do something that I'm going to go back to brackets and for the over class, Let's go ahead and add a background color. All right, so let's do this back ground. That's not how you spell background bag on color, and I'm gonna give it 00 b one e four. And let's also provide the border as well. And I have developed right idiots, one pixel, a solid border. But the color of this exact same column 00 b. I won't e four. Technically, you don't even need to add the border. But hey, let's just add that. All right, I'm gonna go ahead now and save. Go back. Teoh Broza were fresh and There you go. Survived. Now you can see it is right there. But this shouldn't be happening, I because we've actually provided a height. Don't forget that. We came in here and we said for the A span it We're gonna give it a height off 40 pixels. This right here is definitely higher than 40 pixels. So what could be happening? What we need to do is we need to provide a new property known as the overflow property and set it to hidden basically with overflow whenever contents belonging to an element goes out of its container. It could It could be because you've positioned such content. Absolutely. Which happens quite a lot. You can use the overflow property to hide that content. So here's executable we're going to do. I'm gonna go in here, and I'm going to go over to the apparent element, which is the menu? A not the span class, but the actual a element itself. I'm gonna come right in here, and I'm going to say overflow. Hidden. All right. So basically, we're saying right now that any content that goes above 40 pixels hide it basically. So we go back in here Well, first the page and how it's gone. It's still there, technically, but right now we've said over floor he didn't hide it. We don't want to see that. So this, ideally, is what we want to see. But how do we now achieve this effect right here? Such that when we hover on the menu items the class off default disappears. And then the one for over appears. You consider blue background color that appears. That tells us right now that it is the class off over there were now seen when we ho over on the menu items. How do we achieve this effect? Will to do so I'm gonna introduce you to a new selector known as the hover selectable. Basically, with this electoral, we can apply setting kinds of changes whenever we Khobar on an element. So to do this, check this out. I'm going to go back in your brackets and I'm going to create a new declaration. I'm going to say I thought menu A and now the the colon and then hover. This right here is the hover selector in action. So you choose the element. You want to apply the over effect to you added Cologne and Inditex Hauver space. And now what I'm gonna do is I'm going to select. I'm gonna tug of the class off over. We want to now show the over text when we ho over on our menu item. I hope that's making sense. Gonna come in right now, adequately braces and let's do this. How do you think we can now display the over text when we hold off on the menu item? Think of all we did to hide it in the first place, which was what we gave it a top position off miners for 21 pixels. So therefore, to make it up here, we can just simply come in here and say top zero. And there you go at a semi colon save. Go back to a Boza, refresh the page. And now look at this. When I hope over on the items now you can see that the O Vertex is now appearing because with the bag on color changes now we know it's the hover text that is actually in there, but we're not done. If you take a look at our model website, notice that the change in the text in the background is kind of smooth on, like what we currently have. Right now. It's very, very instant with over on the menu items and it's immediate, like there is no change. I mean, there's no delay, it's not smooth, is just very, very instant. And even though this works, it's not quite the same as what we currently have right here. This is a lot more fancy and a lot smoother. So how do we achieve this effect where there's a bit of a delay when we hold on the menu items and then also notice that the default text seems to go under while the overtakes comes from above on, If you can see that effect right there. So how do we achieve this? Well, I'm gonna introduce you to a new set of properties. Known s CSS transitions. Basically, CSS transitions allows to apply effects to an element. Typically, when we hope bar on that element right now as it is, if I go back to the brackets, where are we applying the hover effects too? It's going to be to the over class which have don't so right here. And then later we're going to apply the same thing to something very similar to the default class as well. So rather than also playing the transition to the over class and then also to the default class, let's just apply it to a class that covers both of them, which is going to be the menu. A span again, if I go back to my HTML document notes is right here. We have over, we have default. Both are spans, and both fall on that. The A tag which coincidentally falls on that the menu class. That's why we're specifically going to target this particular element. Waited menu A spent. So here it is. Transition. All right. And now in other for transition transition to work, we need to apply the effects. So a setting kind of property, it could be the with it could be the height. It could be the position in this case right now. Since we're moving elements top. Usually we're going to take it to the top values. There's gonna be top right there. So it basically said we're applying the transition to the top property, and now we can now apply something known as the duration. How much time should you take another four the transition to start and finish. In this case I'm gonna go with 40.2 seconds because it's gonna be quite quick. And then finally, we can add the actual effect itself. How do we want to go about the transition? She did start fast and and slow. Should it's that slow and fast things like that. I'm going to go with the ease out he's dash out that would be developed. So basically what this means is that it will stat quick, but then and slowly, that's what the ease out is. Ease in would be the opposite where it will start slowly put end quickly. So there you go. That's a transition. I'm gonna go ahead now, save. Let's go back to a browser. We first a page, and now can you see the effect? It's basically taking 0.2 seconds to finish the transition, but you can see it makes a walk off difference what we had originally. However, if we go back in here, notice that there's still something missing and that is a fact that the default text goes down, it goes down when we hope over on the menu item while the over text appears from above, we've been able to achieve the overtakes our payment because we already in our pockets. We already said when we hold our on the item, the a element add top zero for the over class. So we've been able to achieve the over text I paint from above. But how do we now set it so that the default class goes down when we ho over on our menu item, it's pretty much going to be something very similar in this case. I'm just gonna copy of this any right here under the default. I'm gonna come in here paste, Let's change the over class to default and now it's gonna be tough. But now we can go with 41 pixels. However, were not gone yet. One thing you should be aware of is that whenever you're trying to apply transitions to the Children of an element their property, you're targeting unit to said that property to the parent element itself. In this case, what exactly all be doing? We're applying the transition effects to the classes off over, and the default right and the property where targeting is the top property. The different class has developed for 21 The the over class has a value off zero when we are planted transition as such, we need to go to the parent element, which is menuet span. When it's a community right now and simply just a top is zero. Give it the default value. This is important in order for your transitions to work. So keep this in mind in the future. Whenever you are playing a transition to Children elements and you notice they're not working that particular property, your targets in set their property to the apparent element and give it its default value on potential. Your transferable walk then. So let's go ahead now and save this. Let's go back to our Broza. Let's refresh, and now you can see the effect walking properly. And there you go. In fact, let's do one more thing before around the stop. Let's change the duration 23 seconds instead, so you can really see the effect in action. Let's go back in here. Let's refresh the page and now you can see it right? Dead three seconds. And there you go. Pretty cool, right? And in fact, we could do something interesting. Rather than going with the top 4 to 1 pixels for the default. How about we did negative for toe? One pixels? Let's save. Let's go back in here. Let's refresh And now you can see the difference, right? You can kind of sit defense the way that would work. So it really old the pains on your one particular preference. And then right now this looks kind of ugly. But if we go back again to our brackets and we made this back 2.2 seconds, it's gonna look much better. Let's go back, inhale. It's very fresh, and now you can see the change that it's It looks a bit better, but it looks kind of weird because it appears both menu items side by side are jumping up at the same time, if you see that. So I just wanted to show you what you can do with the transition effects and, ah, just let you know there are possibilities. You know, it's all about changing the values and so one slum. Just make sure that this is said back to the default, which is 41 pixels, not negative for 21 save. Go back in here. First the page. And there you go. So who we've finally been able to very nearly finish building out the head up. And don't worry about transitions. We will talk about transitions much later in this course. All right, So don't worry. We'll cover transitions in more detail. So Germany for next video bearable. Now, go ahead and add the background image for our Hedda. I will see you then. 47. Adding the Header Background Image: welcome back. So let's continue by trying to add the background image for Hedda. And this is basically the Baghlan image we're trying to applying to the background. So let's do this. I'm going to go over to brackets obviously. Now I'm going to create a new section. Salam Ambrose could grab the head as text and we can paste this stunning for Heather just right here and instead of head as I'm going to call these the header just head up and let's do this like I'm gonna go ahead now and add the background. I'm sorry. Let's take the head attack. First of all, hit a tag. Open up the code braces, and now let's add the background image, background, image, and then you're well open up the brackets and ah, we're gonna add the double coats as well. So how do we target the image we want to use? Well, if we go back to our folder right now, the trends are plenty called inside Main that CIA says. But the image we're trying to target is inside of another folder called Images, and this is the image right here, hero doj PG. So basically, we need to leave this folder called Assets and then jump. I'm sorry, called CSS and then jump into the folder called Images, and then I'm taking the image itself. So to accomplish that, check this Arctic. I'm gonna go in here and add to co two dots rather to escape the CSS folder. And now we shall jump inside the Images folder and then specifically target the Healed or J . P. G file. Let's go ahead now save this and, ah, let's see what's gonna happen in here. Let's refresh the page and nothing. There is no background image, but that's because our header has no height. We need to give the header a height off some sort. So let's go back to our brackets. So let's just say, for example, I can come in here and say hi. Ah, let's go to 500 pixels. Let's say that gold backed er because I refresh the page and there you go. So now you can see with 500 pixels off height, you can see part off the bad gun image. However, notice that over here the background image essentially feels the entire height off our squint. It's only when we begin to scroll down that you don't see any, um, off the background image. So to achieve this effectuate, the bag on image occupies the full height off the screen. When you launch the page, we will have to add a very special value called the View Port Height, the H. So check this out. I'm going to go back in here and instead of 500 pixels, I will changes to 100. So he didn't remove that I will changes to 100 envy h. This right here is the standard value given to any height when you want the bag an image to comply the full height. And I'm just gonna go ahead now save. And now let's see some magic. Let's come in here, refresh the page and there you go right off the bat. The bag on image combines the full height, and that's because of giving the head are a height of 100 view ports, so another value might find interesting could be the view port with which would be VW. That is, in case you want your background to go the full with of your screen. But since we're using a bag an image that is large enough. We don't need to set that. So just remember the 100 V h. This will always give your head, uh, whatever element you are playing developed to to always make sure it occupies the food height off your screen. All right, I'm gonna add some additional properties in here. Let's go with the background size. Remember, we talked about size? We have cover container citizens cover. Let's also said the background by ground position, I'm gonna go with center and then one more property background attachment, and I'm gonna call this one fixed safe. Now you know what the bag on size does? What the position does the attachments. It basically will make the background image fixed. It's the value that you see right here. It's what you see right here when we try to scroll down notes is that the bag an image just stays right there. It doesn't school up as we scroll down. So to achieve that effect, that's why I added the by gun attachment fixed. Sobel said that in effect, want to begin to add text just beneath our header. So I've saved this and let's just go back in here and refresh. And okay, the next time you need to add the would be the capacity Noticed the black layer right there . We need to be ableto add that to our background image so that when we begin to add our texts, like the level of your business, it to be more readable. So to achieve this, there's quite a few weeks that we can do that. But I'm going to show you the easiest way to do this. All right, let's go back to brackets. Now, where you have the Baghlan image, I'm gonna add just a little bit of some space, and then I'm gonna provide a nouvelle a cold delineate Grady int. Okay, And now inside of Li Lina. Great. And I'm gonna add a color model called the RGB A. You may have heard of. This is basically stands for red, green, blue and, um, al Fahm. So with this, we can actually add the black overly, so check this out. Okay. I'm gonna open up new brackets again. I'm going to go with zero for red, zero for blue, another zero for green, and then I'm sorry, Kaiser for red zero for greens here for blue. And then finally, let's go with 0.7 for the Alfa. But then we need to repeat this Oliver against all copy RGB A all the way to the 0.7. I'm gonna add a coma right here, pays that again. And then outside the closing bracket, I'm gonna add a come off for the u. R l and ah, this should be fine. Let me go ahead now and save. Let's go back in. Here refers the page and the way you go. So basically the 0.7 is what dictates just how dark is the bag and essentially is going to be. So if you come back in here, for example and we said, Well, let's make this 12 instead coming here, make this one too. Let's go back. You will notice an immediate difference Refresh. And there you can see it's not quite as dockage as before. It's a lot more blight, essentially. So the values that we have at the end will dictate our just how darkish it's going to be. If we went all the way to 0.9, for example. Okay, go back in here and then went back to my brows ever first. Now it's very, very, very dark. So 0.7 is a nice spot to be in. So I'm just gonna change all this one back 2.7. And there you go. Okay, let's just go back in here. The bells out, refresh. And we're nearly there. Almost just a few things because it needed to change. Obviously, the Web impact text right here is a lot smaller than what we have right here. So let's try to fix that. I'm gonna come in here and use my in spectral and let's just see if I coming there to Spanish class name and I changed the phone sized from 17 and I'm into older age, 26 pixels, for example. I think that looks pretty nice. Let's also try to add a vertical a line middle. Okay, And then maybe you can also add, like margin on the left to appreciate away from the local or just a little bit. Let's go with, uh, five pixels and let's see, I think this looks similar to what we have here, though this is still a little bit bigger. Let's go back in here and Ah, let's go with maybe 20 eight pixels, maybe. And Ah, OK, that should be close enough. I think this is perfectly fine. All right, I'm going to go back in here and let's add those values. So I'm targeting the name class. It's down here. All right, So what exactly do we have? We have vertical align set to the middle and in margin left for five pixels. And let's not forget which is the phone size from 17. And I believe we went all the way to 28 pixels that saved that. Go back to your bills are refers to page and there you go. So not bad at all were very, very nearly the In fact, we've actually successfully added everything we need for the header with the exception off just the text right here and the buttons which usually add in the very next video. So that I think, is much for fortune. If you have any questions, as always, be sure to reach out and I will see in the next class 48. Adding the Hero Section: welcome back. So let's continue building out the head and we're gonna do here is to add the text for level a pure business are built an impactful web presence and basically the to our call to action buttons. So to achieve this, we're gonna have to add some structure to the HTML files. Let's head of 02 brackets and I'm gonna go to my index of HTML. So where exactly are we going to add this text? Well, it's gonna fall on the menu, but it's gonna be still inside off the main Dave, which is the one right here, which is the content white. So we have to make sure that we're adding the content. Still, instead of this David and I click on it right here, you can sit down here. This is where it closes. So just above the limb, just remove the space here, just above it, directly on the knife. The knave. I am going to open up a new Dev and let's do this. I'm gonna call this Dave. Let's give it a class off hero. All right, So let's do that hero, and I'm gonna go ahead now and simply close the Dev to ensure we don't forget later. But inside of this Dev, let's open up another Dev and we can call this Let's give it a class off call to action. Okay, so let's go That call Dash Two dash action. And now let me just go ahead and close this Davis Well and OK, inside of this day. Let's not begin to add the text. Let's go with the H one tack festival because typically, this is what you want to do for websites are for S E O Popper says, basically, you want to have your keywords as an H one tax somewhere on your web page. So that's where we're going with the H one tag here. So let's do this. I'm gonna open up a new line, and I'm going to use the strong tag because notice that in our design, the level light here it's bold compared to up your business is bold impactful this ball here as well, while the others are regula r text. So that's why there isn't a strong tag right there. So this is gonna be strong and level is the text, and it's going to be level space up you're And then business is going to be strong as well . So as do that on strong. Let's close that And inside here is going to be a business level up your business. Let's close that one. And then I'm gonna add the break tag so that the next one the next text stats on the new line. Let's add that one. And then on the new line, I'm going to say build and I live. Just confirmed it text again. All right? So impactful impactful is gonna be strong. Then what presents? Okay, Got it. Let's go back, Build an And then I was coming here. That's called his one stroll along. Let's close a tag right there. So build and impact, Full Web presence K space Web presence. Press sense. Okay. And ah, that's it. I'm gonna go ahead now and close the h one tag, okay? And I think that should be fine. Let's go ahead now and save and let's see how this would look like with fresh and ah, okay. Oh, it's it's up yet. I was looking down here. It's actually up here. Okay, The rest of the text is up here as well, level up your business building building impact for their presence. Okay, so obviously we'll have to do some styling and get it right in the center. But let's go ahead and add the Romanian buttons we have are services and then get in touch . So let's add that to the HTML structure as well. So just underneath the H one, I'm going to add our buttons. So we have the a tag h ref equals and then in coats were going to go with services services and then we'll just typing our services. Let's close that and basically the sentinel over again on the difference here is that we're going to change services to contacts. Let's go to contact right here. That would be the ankle link for the text, which would be ah, gets in touch. I believe it's getting touched. I'm just confirmed. That's actually just go back in here and yeah, so get in touch. Is the text okay? And ah, just go ahead and make sure everything is closed and I think we're done. That's it. So this Dave is closed. This divide here is closed. This Davis close all the way up here and then our Hedda is closed. Okay, let go ahead, save. And we should be good to go Now. There you go. All right. So we have all the necessary text, and then we also have our bottoms are links. So Germany for next video available. Now, go ahead and and show that it looks exactly like what we have over here. 49. Styling Hero Section: well, comebacks in the previous video is successfully added the text for our hero section as well , as well as the buttons, the our services and get in touch. But we no need to get this content to look exactly like what we have over here. Now. The big challenge here is gonna be having to central lies the text as well as the buttons right there in the middle off the screen it's into at background colors. At this point, it's easy to, you know, change the size of your text. All that is pretty straightforward, but how do you get content right there in the middle of your screen? The beauty about CSS is that there is usually more than one way to achieve the same result . However, one way usually might be better than the all the way. So to achieve this, I'm gonna show you one new way how we can get our content right there in the middle. And to do this, I'm gonna introduce you to a new veld for the display property, which is going to be flex. So far, we've dealt with display block in line in line block. But now I'm gonna introduce you to a new velu cold flex. Okay, Before I get there, there is one thing we need to do. If I go to brackets and I take a look at the index of HTML, let's observe the structural very carefully. At the very top, we have the header, right? But then we also have the Dev, which is the content and then wide. This Dave basically contains all of the content. It contains our logo, the menu items as well as the Huell section as well. In order for us to use the flexor that use display flex, we need to set the parent container to 100% with 100% heights. That's going to be important, all right. And of course, the parent death for the hero divide here is the content ready? The day of class of content as the parents, Dave. So just follow along. But I'm going to do I'm gonna head back to Maine, that CSS and right here. But we have the Hedda. I will add our CSS just right there. So say, Hedda Space, that content so it's gonna be height is gonna be 100% with 100%. Now I know this is the first time we're dealing with percentage values and not pixels or the View port. The view high part of the view with port. So what exactly those percent do in this case right now? What this will do to the container Dave is that it's going to set its height to 100% off the height off its own parents, Dev. That's what the percentage does when you apply a percentage value to an element in this case. Right now, it's heightened with it is going to set the heightened with off our content there right now to be the exact same height and with off its own parent. If we go back to the index that HTML, who is the parents off the day of class content? It is Hedda. But also remember that we've already given the header A hides off 100 view our port height pH so basically the head of light, it will have the exact same height and with of course, off 100%. Technically, you could come in here and say height 100 VH with 100 VW. It's the same you'll get the same results. But this is the very first step to using the display flex. Okay, let's get that one out of the way. Now I'm going to come down here. I'm going to create a new section specifically not for the Huell diff. I'm gonna come here. Let's paste that and right, I'm gonna change this to hero. Okay? And now let's come down here to a new line, given the class off. Heave! Oh, that's the Dave. And now this is where the magic happens first, in order for us to get the text to a line right there at the center, this Dave hold in our content also needs to have a height of 100%. And with off 100% this is important to centralize the text, right? So I'm going to go back in here, and I'm going to say with also 100% hides 100%. So far, so good. Now here is really magic comes into play. I'm gonna say display flicks, okay. And now, to do the elements of the center, I'm gonna say justify content. That's a new public to justify content sent up. Now we are a lion in horizontal aerial lining. It takes a detective the buttons, but also in a little light them vertically. I'm gonna come in here and say our line and then dash and in items. And then it's going to be center as well. There you go. I'm gonna go ahead now and safe. Let's go back in here. Let's refresh. And there you go. Right now you can see that the text right here and the buttons are almost right there at the center off our screen. But now how do we exactly get them right there at the center? Now, to answer the question, we need to ask ourselves why isn't the content yet in the middle? All is blocking the content from arriving at the middle. Well, I'm gonna introduce the inspector to right here, and let's take a look at what's happening. So right here you can see that the header is all full width and height. And of course, the content class is also all full with and height as well. You can see why death But now if I come down here, notice that the day of class hero isn't going full height of 100% even though we've already explicitly said height 100% but it's not going 100%. It's stopping right there. Why, that is, because we do have margins applied to the menu and the logo as well. It is. Those much is especially going for the menu that is the one that is pushing the content for that down. The thing about this play flexes that it will take into consideration margins off other elements placed above it. That's why this content right here isn't exactly at the centre. So how do we get the death class of hero to ignore the margins said by the menu and the logo. Here's exactly what I'm going to do. I'm gonna come in here right now, and I'm going to say position Absolute. And there you go right now. When we hover on Dave class here, Now you can see it goes full height. That is because you've said the position of absolute and absolute will always ignore patterns, imagines and all that stuff. And if you look at the text right now, it is Friday at the center off our screen. So that is some useful information for you. I hope so. Never does go back in here and apply this changes that we've discovered. So I'm gonna come in here right now. I just simply say position and we just call that abso lute. And we'll just also say top zero left zero as well. It's a good idea. It's a good practice to apply these values as well. So just go ahead, save that one. And, um, there you go. I'm gonna go back to the Broza Refresh, and there you go. Awesome. But we do have an issue. You see, if I try hovering on the menu items right now, you read notice it no longer works. Why is that? Well, that's because we've given the heroes section the full height because we said it position to absolute. And now it's basically staying in front off the menu items and the logo to prove this. Check this out. Okay. I'm gonna change the with from 100% to 75%. Okay. Now you can see it's with you can see now that the about menu items services are y O R team are all covered. Several try hovering on these. You can see that nothing happens. But then, if I tried having on testimonials, now it begins to walk. Clients is working. Contact is working. But that's because the hero class do with doesn't extend beyond just the 1st 2 letters off the testimonials menu item. That's what the Seminoles can still display. Classical split can display contact on display, but seeing while services and about and no longer this plane. So essentially, we need to do this. We need to push the hell contents behind the menu items or push the menu items in front off the hero content. So how do we achieve that? Do you remember the property we can use? It is the Z Index property. Without property, we can push contents either to the front, all behind. So let's do this similar change the with back to 100%. OK, but now I'm going to go over to the naff class and give the naff class Z index of let's say 10. And right now you can see that the menu items are now walking a game. So there you go, the power off the Z index property. So let's do this. I'm gonna also give us the index to the logo as well, just for good measure. So I'm going to go back to brackets and let's do this. So Menu, I'm going to give this a Z index off. Let's say 10. And then let's also give it to the band as well, because that's the day of the contents are logo. So we'll give Z Index and let's give developed off. Nine. There you go. That's safe. Let's go back to the bills are refreshed the page and there you go. Awesome. Now, But we need to do is to simply apply our style into our text and our buttons as well. And to do that, I'm going to go back to brackets, obviously. And, ah, let's do this. Okay, I'm gonna open up the new class of call to action. Let's open up our colleague braces so the color should be white. They'll be for the text with 456 ah texts. A line is going to be center as well. And what else do we have? We have books size in. Let's go with the book size in property. And of course, border box is going to be the value because now we're gonna add some padding and the pattern valves will be 10 pixels. That's good with 10 pixels is going 50 pixels and also 10 pixels. There is a shorter way of writing this values, which we've talked about. So try to figure issue that we have rights in the four values for the patio. Essentially, you will only have three Veloso a supposed to the fault so you can give yourself that little assignment and, um OK, so let's go ahead and save this. Let's go back in here every fresh and looking better. Okay, But let's make the size a lot bigger right now. The H one tag, which is what is showing the hero content against the right here. H one h one has been set to what validated? We give the H one. It's like five pixels. This is kind of small, So let's take this old way to 40 pixels and maybe h to becoming age to 25 pixels and then maybe HDB we can make HDB 20 pixels. For now. We might need to change is a bit later, but let's just save these as they are. Go back in here. Let's refresh and OK, now that is much, much better than what we currently have. Our cape. Awesome right now for the buttons notice in here that they share similarities in the font size, the front way, the patterns as well. So what we need to do is to provide them with the same class and apply the same for Protestant, that one particular class. So let's do this. I'm going to go back to brackets. Let's go over to index dot html. And now over here, where we have the A treff. I'm gonna come in here right now and give the class off. Let's just call the class button because it is a bottom. But I'm also going to give another class to the services because notes is that the one major difference between both of them is the background color. So we'll have an extra class that will apply the purple background and also the green background. So our services we'll have a class off purple, okay, And now for the contact, we can give the class off button as well, and then space and then green. That's going to be for the backgrounds. Let's go ahead now and save this. And now let's go back to Maine, Docs says. And let's begin to apply the buttons. So for the buttons, I'm actually going to apply them just underneath Hedda's. I think that my better auto let's played underneath our paragraph. So let's come in here. I will copy this and then down here, I'm going to change paragraph two buttons. You'll be okay. So we got buttons and let's begin. Okay, so the first class, of course, will be bought in itself, and we do have a series of valves to provide the button. The 1st 1 who is going to be the phone to size, which is of course, going to be 15 pixels. I'm going to add the front weight as well, which I know to be 400 are the color of the text. Of course, let's not forget that one. There's going to be F f f f f, and we need to remove the text decoration as well, because the links are on the land automatically. So let's removed the links. So take that question would be none. And, ah, what else do we have? Let's go ahead and save this. And let's take a look at what we have a fresh and, uh, okay. Textron's form, I think, should be in order. Text transform. We can had some padding. Add some margins as well. So let's do that. All right, I'm gonna go back in here. Let's do the text. Transform. Text transform will be upper case. Okay, let's add the margin. Let's go with 10 pixels. For now, we might change this. Let's go. 10 pixels and patting. Of course, we're gonna add that background very, very soon. Let's go. 10 pixels and 20 pixels and ah, let's just go with this. Play in line block as well. Okay, this should be good. Ah, let's at border radius So we can make the the borders a little bit. Circulars go three pixels and we're good. Okay, Next I'm gonna do right now would be to add to the actual background Kahlo. So we have purple is gonna be the 1st 1 So per pool and I have the background color background caller for Pop Earl is going to be 40 b seven f f and let's also provide its border, which would be one pixel. It's going to be solid, of course. And then the colors of our limits. See? What do I have? 1/2 cc seven to F f. Okay, let's do something very similar for the green button as well. I'm gonna calm down in here. Let's add the background, uh, caller in here, which would be What do I have? I have eight c b 913 And then finally, let's also add the border, which is going to be one pixel solid as well. And the final valley it will be d to f 37 be okay. I think this should be good. Let's go ahead now and save and let's see what we have. A fresh. And there you go. It's actually not that bad. Okay, awesome. Awesome. Awesome. Awesome soap with lots of style in there. We've finally been able to get our contents to look almost like what we have over here. Except for the fact that wait a second. The cold here isn't exactly the same. What is going on? A limb just confirmed this really, really quick. C c a 03 d d eight. Oh, okay. I do apologize. That must have made a mistake for the background color. Let's quickly change that. Let's come back in here. And Oh, this was a different color I chose. Apologize for that one. Ah, let me check. Okay. You should be curry. Let's go ahead now and save that. Let's go back in here. Let's refresh. And there you go. Okay, That's a lot more like it all. My one. They were lasted. Of course. Right now is you would notice there is an effect when we hover on the buttons. You can see that we don't have that just yet. So Germany Pfennigs video where I will now show you how to had some cool hover effects to your buttons. 50. Transitioning our Buttons: well, come back. So let's now take a look at how we can apply the transition effects to our buttons. And over here, well, we have, basically is nothing really fancy. The major change here is the bottle Coehlo the one for purple changes to light blue and the one for green changes to white. So let's just go ahead and do thistle. I'm gonna head back to brackets, obviously, And let's add the purple class all over again. And what I'm gonna do right now is to change the border. Coehlo. And the call we're gonna be going with is going to be 40 will be seven f f. So my colon off course I'm gonna add the hover selector. Let's not forget about that. Uh, case I will copy this and we'll do the exact same thing for green as well. So let me change purple class to the green class. We change the butter color to white 123456 and cool. So that's it for the hover our effects action. Now let's go ahead and apply it the transition itself to our buttons. So gonna come in here transition and we're changing the border, Coehlo. Because the property, we're gonna be changing. Somebody call law. Let's go with 0.4 seconds and we shall ease out. That's go ahead, save and bolivars should define. That's headed back in here. That's the first page. And there you go. So 0.4 seconds is maybe a bit slow, but, hey, it still it still works. Okay, now that we're here, I want to use this opportunity to delve a little bit deeper into the world of transitions and just to show you a few tricks that you can actually apply the thing here. Is this Okay? You can actually apply transitions without even having to hoe over on the element right now . The effects are actually been applied. I don't If he notice when we refresh the page, look immediately at the bottoms, you will see the transition actually taking place. The bottle calls actually changing when I refresh. Look at that. Do you see that? I'll do it again. Okay. Hopefully you saw that, but to demonstrate this better. Let's do something. Okay. I'm gonna go back to brackets and where we have the button. What I'm gonna do is this I'm gonna come in here. I am going to change the transition from the border. Coehlo to the background cola now. Okay, so check this out. I'm going to save this and let's see what's gonna happen. All head back to my bills are refresh the page and there you go. That's a bit too fast. Let me change the time, actually from 0.4. Let's go old with your four seconds instead. So you really see what I'm talking about? Let's head back to her. But I was Ah, well, first the page. Now look at the buttons. It's taking four seconds for the Bagram Col toe actually feel in, and that's because of apply to transition directly on the button. So if it also Harvard right here, we're not really going to see the bag and color change because, well, of course, we've no added the background color to the hover effect to change. But because if had a background color directly on the transition for the button in its default states right now, whenever we simply refers the page of a load the page, the color is going to apply slowly in a transitional effect. So the question might have you is OK, fine. But what if we don't want the bag unclothed to transition when we load the page, but only when we actually ho over on the buttons. How do we achieve that? Well, to do that very simply, what you can do is to remove the transition effect from the bottom class, which is the cold. Of course, the different states. You can remove that and then simply applied directly on the hover states for purple or green all we could do something here instead because simply, say, Boughton. And then we could play the HOA va selectable. And now right here we can come in here and then apply the transition. So basically right now. But this code were saying Okay, when a user hovers on the element of the class of button transitions Baghlan Coehlo by four seconds and to really see the effect, let's apply some Baghlan close to the hover effects now for purple and green. So for purple, I can say that the background color should change to read when we hover on the popular button and for the green button, it should change bygone color. It should change. Let's say pink off all the clothes in the wall pink. So let's see what's gonna happen. Okay? I'm gonna save it right now. Let's head back in here. Now What? I'm gonna refresh. Okay, Pretty normal. But now, if I hover on the purple button, you can see right now it transitions to red and I go to green a transitions to pink on the full seconds. That's how you can achieve such effects. So, to recap, you can either apply the transition you faked directly on an elements default state, which is, of course, when the element is loaded or you can specifically apply the hover selector. I'm so you can apply the transition specifically to the whole for selective for such an element. One multinational mentioned is that in addition to specifying what property you want to transition the duration as well as attentional effect, you can also play something known as the transition delay. Basically, it will be a time that will have to pass before the transition actually begins. That's what is called a delay. So, as an example, let's do this. Okay. Where we have the the hover for the button. I'm gonna come in here right now and say five seconds. Okay, So basically, before the background color begins to transition, we'll wait for five seconds. And then after five seconds, it will start the transition and and finish in four seconds. I hope that makes sense. Let's go ahead. Save this. Let's head back to a poza. Let's refresh the page. Now take a look at this, okay? I'm gonna hover on the Popil. It's not changing it. It's not changing. It's not changing. It's not changing. Meanwhile, five seconds is counting down now. Five seconds, Expats. Now it's beginning to change its paid into transition, Right, as you can see, the same thing for green as well. 2345 And now it begins changing. And then in four seconds, it goes to paying. So that is one other thing you should know about. CSS transitions. Now it question might have. Here is OK, there's the order. Matter says we have to defend him as we have one for the duration. We have one for the delay. Doesn't matter which one comes first. It matters because CSS will always recognize the first time a as the duration. That's how CSS works so Whenever you're adding a timer for both your duration and you delay , the one that you add first will be considered to be the duration. That's one of the important thing you should take note off. So that's basically eat for the transitions numbers. Go ahead and remove what we don't actually need, Which is the bag on color, the over effects for the button and also training back on cooler, full purple, I believe. And oh yeah, let me just go back and add the transition for the booking class transition. Ah, Buddha. Coehlo is the property and we do not in 0.2 seconds and we're easing out. Okeydokey. Let's go ahead and say this is just head back. Make sure everything is in order. Were first a page and there you go. Awesome! All right, so that's it. Full at, in transitions to our buttons German Avonex video available Now begin to add the about section. I will see you then 51. Building the About Us Section: well, come back. So far, so good. We've been able to completely build out the head out with a logo, menu items, hero section as well as the background image. But next we have to build out the about US section, which is essentially the second main part of the entire website. Now, over here, I have already gone ahead to add the basic HTML structure for the about ALS section and let me show you what I have in brackets. So it's basically right here. I added the section tack cold content. I give it an I. D. S. I'm So I called about giving an idea of about. And then we had the Dave of content, which will be using over and over again and then the age to tag for about alls and then Pete Sacks for the award winning Web development company and successes in a blah, blah, blah. Then I added in you deaf with the class off role, which will talk about a bit later. But inside we have the H tweet head of who we are some pitak strong tags and ah, that's basically it. So you can go ahead and simply grab this code and simply paste. It's in your text document. If you'd like to do, that's a composer video. Do that and let's no go ahead and design the about all section. So let's take a look at what we have to accomplish. So right here you can see that the about loss has kind of like a blue on the line, which will take a look at a bit later. We consider text right here is towards the center. The text right here for our success has the phone style of italic. It also has a front weight of about 300. But this is where things get brother interest in you would notice in here, though this is kind of like a two column section on the one column we have who we are on the other column. We have what we do, and they do have some icons green, and also the text appears to be aligned to this center. So some pretty interesting walk in here. So let's do this. The very first thing we'll do is we're gonna head back to brackets, and when I'm going to do is to very simply create two new Dave's for the who we are and the what we do sections. OK, so check this out. I'm gonna come in here right now at a new DIV. We're going to give this Dave a class, and here is the name of the class we're going to give. It is gonna be called the call Dash one dash to class. This is typically the standard in in CSS or HTML, whenever you're trying to create a class full a two column section. If it was a four column section, then you would go but one dash forward about that a bit later. But that's what it did for the first diversity lenders. Go ahead and copy this class, and then we're gonna do the exact same class in here as well for the what we do. Let's go ahead and pace that and off course. I'm going to go ahead now and close the dibs. Let's close the 1st 1 and of course, we'll close the 2nd 1 down here as well. Let's go ahead and close that and OK, so successfully now have to Dave's one for the what we do and another for the who we are. Let's go ahead now and add some styling, so I'm just save the HTML document. First of all, let's head down to main dot CSS. Now, what I'm gonna do is I'm going to create a new section and tally because now we're dealing with the content layout. Essentially. So ah, let's do this. Just, let's see, just underneath buttons going to come in here, Piece that, and we'll call this section layout Lee out. And OK, so the class off call upside call Dash one dash to What we're gonna do here is we're going to give the lives with such a class A with off 48.5% it's not gonna be 50% because we still have to apply in margins and patterns as well. So you typically want to live some space for that. So we're gonna go with 48.5. And, of course, speaking of margins were going to give it a margin or give them a margin. Let's say 1% and zero and then one percent as well, and another 1% let them go ahead and add my colon. And I also know we're gonna add some padding for them. So those going zero and 15 pixels let's not forget the book Sizing have a very, very important border box, and we're also going to float to the left. So let's do that as well. Odds are semicolon, and this should be finalised. Go ahead now and save and let's take a look at what we have. Let's go back in here. Refresh. And there you go. Awesome. So now at least we have the two columns life there, but we still have quite some work to do. Let's start with the award winning and the success. So let's go ahead and try to style these two paragraph tags. And to do that, we're gonna go back to our HTML index of html file and let's give them an individual class . So for the first P tag, we can give this one a class, and let's give this one a class of Thai tool Dash one. And then for the second p tag, let's get a P class off on will go a title. Dutch, too. Oh, kid, sounds good. Let's save that one. Let's now apply some CSS for this. We're going to go over to the paragraph section. So over here, just down. Him gonna come in here right now and they'll say, P dot title Um, dash Juan and let's go ahead now and apply some style into them phone size. I think we're gonna go with 17 pixels. I'm not intelligent. Might need to change that. There might be a bit too small. Front weights. Let's go with 400 text a line. Of course we're going to go its center. Ah, the color also is going to be 777777 and a semi colon. And for the first P title, the margin here is going to be 25 pixels, 14 pixels and then 14 pixels. So basically the defect exhaust for the top 40 pixels left and right for 10 pixels from the bottom. I'm gonna go ahead and copy all of this, and we'll do something very similar for the P title to its paste. Change 1 to 2, and art's A 42 is gonna be a little bit smallest. Let's try 15 pixels. Ah, front weight off 300 textile industry descent of as well are the color is actually 888 which is similar 456 Our margin is just gonna be 14 pixels all around. Let's go ahead and add fault in pixels. And ah, there's one more thing. Oh yes, the fun style. Let's not forget the font style. It is going to be our italic. Okay, let's go ahead. Save this and let's see how this would look like. Let's go back in. Here refers the page and there you go. So obviously the fun size in here is way too small. Way, way, way too small. We need to make some major changes. Oh, okay. So let's just try something in here. I'm going to go all the way with 26 pixels. Actually, school detective pixels, maybe 30 pixels looks much better. And then, for the 2nd 1 the Peter to let's try 24 pixels. Let's see. Okay, the definite looks a lot better than what we initially had. So let's go with 24 pixels for P title to and in for Peter for P title, 1 30 pixels. So 30 and 24. Okay, let's make this changers 24 right here and then 30 for Peter toe one. Let's go ahead, save. Let's head back to a Broza were first a page, and there you go, all case, so we're very nearly there. One more time you need to change, though, is going to be the size off the about US text. It's the age to tag. So let's go back in here toe brackets and maybe we have age. Do we have each to a 25 pixels? Actually, if we're gonna make age 1 40 pixels, that should be a little bit bigger than to, in effect picks. Also, let's try 52 pixels. Let's save that one. Let's go back in here. Let's were first a page and OK, not bad. It's looking much, much better that will be originally had. However, we do need to add some padding for our section because if he notices, there is more space between the about ALS and the bag, an image that all we currently have in here. And that's because the section itself has some padding soap. Let's go ahead now and target the section tag itself, which, by the way, the section tag is usually used whenever you're creating our new sections in your website. So if we take a look at the model said that we have in here about us is going to be a Section seven is provided will be a section where workers will be a section and so on and so forth. So, typically for sort you would use thesixties on tag. You could use a div in place off section and simply give it maybe a class off section. But since we're trying to be as accurate as we can with code, we're going to go with the html section tag instead. So let's go ahead now and add some pat into the section tag and we'll do that in here where we have lay out All right, so it's gonna come in here, and we just call this one section on, Okay, so basically, the pattern is going to be We have 50 pixels, we have zero pixels and then finally we have 45 pixels. So basically the pixels from the top, so zero pixels left and right, and then 45 pixels are from the bottom. So let's go ahead. Now, save and let's head back in here for first the page. And there you go. So looking much, much better. Finally Finally, let's notice that the who e. R. Tex and what we do the text is aligned to the center. As you can see, it sticks Alliance center Now, technically, we could simply go back to our buckets file and then in here, where we have the mental CSS because simply just come in here and give text align center to the coal dash one dash to, because this is the class. Ah, hold into the contents for who we are and what we do. We could do that. But it's not the best idea, because farther down the road, we might need to be use this class off called Ash. Wander stood to create another two column section, and in that scenario we might not need the text to be aligned to the center. So to avoid such issues in the future, let's just create another class and we can call that one center. So let's do the same here as, well, Sentelle. It's at center for second column as well, and then easily, I'm just saved this. We can just go back to Maine that CSS and then right here where we have the layout just coming here Or rather, let's come down here to content. Actually, let's do every content. So for content, we'll just call this one dot center and then I will just say any elements with the class off center. Just simply give it a textile line off center. And there you go. Let's go ahead now safe. Go back to oppose our refresh the page and there you go. So Germany, very next video available, will not begin to add some more styling to our about also section. 52. Creating the Services Section: well comebacks. In a previous video, we successfully added the content for the about US section and I did say that we were going to do some designing. However, if you take a look at the finished website right here, you might begin to notice some similarities from one section to the other as an example right here to the vital will notice we have these ankle. A link they went clicked on will take us straight to the top of the page. We do have the titles having the blue border right there, something with services provided by walk With us and so on and so forth. So also you'll notice the number of different Aikens available who we are has and I consider left. What we do has Icann's The Headers insensible, but it also have Icann's and so many other headers in our website also have Aiken soap. The point I'm trying to make here is that it is always best that you figure out the kind of content you can create and the type that you can postpone for later. Typically, the content you wanna postpone for later is content that you would reuse over and over again throughout the site. So the style in hand, this case right now full the titles for the sections like about also has provided we can apply this later. Same thing with the Aikens as what we can ignore the icons for now and simply apply them are much later. But for now, let's just concentrate on building other men in sections as well as the call content and also add some standing that is unique to that particular section. So in this case, right now, I have gonna here to add the core html structural for the services provided section. So if you go over to brackets right here, you can see I have added the new section off I d services. I have added their class of content as well as the H two title which is services provided and then the you well for the on ordered list and then the Ally Elements and then h 34 Web development and then in Norther Ul for the list items on that each particle, our service. So let's break this down very, very carefully. You will notice right here that we do have kind of a list off major services and then services that fall under those major services. So we have Web development as an example. So that's why we have the very first ally here. And then it's a HDB because it's a Hedda Web development. And then on the this particular list item, we do have services owned the that vigil service. So on the Web development, we have custom websites we have with applications e commerce stores, progressive Web, APS. That's why I decided to create another least inside off the very first list, if that makes sense. So the exact same structure is a play to mobile APP development. You are you X designs mobile game developed man to put the design, cloud migration, quality assurance, soft optimization. And then finally, our cyber security is so ultimately, this is what you're going to be left with. You will have your H two, which is the service provided main title for the section, and then you'll have your main services and then the sub services that fall on the them. But somehow we do have to get this to look like what we have over here. So let's try to tackle the easiest styling that we can apply, and that's going to be the background image for this section. So in order to do this, when I'm gonna do is I'm gonna head back over to brackets and let's do this. I'm going to go ahead and add a section class to the services, the idea being that if you notice we do have all those sections that have background images , for example, meet the team has a background image, and our cleanse also has a background image as well. So it might make sense for us just to create one class that we can use for these three different sections that have background images. And the class I am going to use for that is going to be, ah, them. Just go back to my brackets. Let's expend this so it's going to be over here, but I have my section i d. Let's give this a classroom we use over and over again, and that class is going to be image dash BG. All right, this will be a class will use over and over again. Let me go ahead now and simply save this. Let's no go over to Maine dot CSS and we're going to be begin to add some stones to the 1st 1 here. Let's try to add the background image or we have over here. So lest it is, I'm gonna try and create a new section specifically for services. So let's do this. I'm going to grab the title right here. Let's copy that. And then some of them to come over here. Let's pace that. And we can change Shiro too. Ah, let's changes to the services came services. And now let us creates the class. I'm sorry, the i d. We do have an 80 here for services. Right? So let's do this. I'm gonna come in here right now, and I'm going to say services, and then we're going to provide the background image. Fourth it. So I'm going to open up my column, braces. Let's come down here. All right, So is going to be background background image, and I do have the structure right here, so let's just take a look at that real quick. All right? We're gonna play the Lena. Great. And remember, we are played lean ingredients, Alia. So it's gonna be all G B A and The first votes I have in here are 000 and then 0.2. So it's not really that's what capacity. So it's not gonna be too dark. Let's repeat that one just right inside. Coma RGB a again and then inside the exact same value. 000 and a 0.2. I hope I'm not making any mistake right there. And OK, coma and then not let's now add the your of l for the image itself. So in here we have our coats, got thoughts to escape, and then it's going to be images. Four slash We have background as the folder by ground, and then it's going to be services dot j p g. Let's go ahead and add a semi colon. Let's go ahead now save and ah, let's take a look at what we have us head back over here. Let's refresh and there you go. All right. So far, so good. We do have the bag on image right there. Okay, I'm gonna apply some more standing right now to the class. They'll be using over and over again for the sections that have a background image. So check this out, I'm gonna head back to brackets. Let's go back to our indexed with HTML. So in here we already added the class of image dash background. So let's go ahead now and add some styling for this very specific class. And to do this, let's head over to this section uh, area. So, like here we have sexual issues like I'm gonna come in here right now and let's call this one section dots. Be image very image dash BG. And then let's open up the Kohli braces. So let's change the background size they were going to be applying. Let's go with cover, Okay? And then we can also add a background color for such sections that have it better. An image that is going to be 555555 Let's add the background position as well so we can change. The angle from which the images will be displayed from in here is going to be bottom and center. And if you notice is if we go back, if you notice right here, the bag on images do not move. They do not scroll. As we scroll down over school up, they don't move So you should already in no Walt property we're talking about. That's going to be the background attachment property. So let's go ahead and add that as well. I'm gonna come in here right now. It's going to be background. Ah, back ground dash attachment and it's going to be fixed, okay? And that's pretty much it. Let's go ahead now and safe and let's take a look at what we currently have. Let's refresh the page and there you go. Okay, we're starting to get there. But now let us try and do something about the actual content that we have inside. You would notice right here that the content is actually the same color, but they're all covered in like, white background columns, and it looks pretty nice. It's with him much better than what we currently have. So there is a very nice property that we can use, and that's going to be the display flex. Remember, we use display flex for some of the content, or Pierre for specifically for menu items. So we're gonna try and apply the exact same process in here as well. And to do this check this. I think I'm gonna head back over to our index of ex Tamil. Let's add a class full, The main u l and were essentially targeting the u L. Because it is the main element holding all the least services as well as the soap services as well. That's where specifically I get in this UL right there at the very top. So what I'm gonna do here, I'm gonna give it a class, okay? And we can call the class, Let's say services dash list thing that makes perfect sense. Let's go ahead, save Let's head back to a main docs says. And then down here on the services section, let's now add some styling services dash list. And now check this out. I'm going to go over here right now and say Display, Flex. So let's do that. Display is going to be flicks, okay? And now you can actually specifying the direction off our flex in Still to say so. Check this out. I'm gonna come in here right now and say flex dash direction. And now I'm gonna go with Whoa! Let's go ahead. Save this and let's know, see what we have for head back over here. Let's refresh the page and there you go. Now you can see because we've said, Hey, flex direction is a row. It's gonna display all the elements all the list services in a single low, as you can see right now, however, notice that all of these items are inside off our content class that has a maximum of one powers on the 140 pixels. So whenever you display your elements as a flex, they tend to break the structural. And they might even donors might even move outside off the container. Right now if you notice very carefully the contents for the cybersecurity, our list right here. These ones right here they have gone outside off the container of 1000 wandering for the pixels. So in order to properly and show that you're flex items are stay inside all the container. We have to add another property, and that property right here is going to be the flex rap. Okay. And right here we'll just say crap. Let's go ahead. Now let's save this. Let's head back, refresh. And now you can see now they're contained inside off the container. So these is a very, very important property that you need to keep in mind whenever you display items as a flex and you get him. If Lex, direction of O or column or whatever and show that you is also include the flex wrap wrapped old and show that your flex items are contained inside of the container. Let's add some extra. Put it this way to your pattern is going to be zero and, of course, the least style type. Let's go ahead and remove the default styling, so this will be set to none. And that's pretty much let's go ahead. Now save this. Let's head back to our bells are refresh And there you go. Okay, we still have a lot of work to do in terms of like styling the actual list items. But before I around this video up, you will notice that the contents off the about US section are actually spilling inside off the service provided section and right against the text for who we are, what we do. They're basically practically inside off the section for the services. So what exactly is going on here? And how do we fix that German Avonex video? Bet I'll show you a classic sets a strick to fix this kind of issue 53. The Clear Property: welcome back in the previous video is successfully added content for the services section. However, we also noticed that the content from the about section is basically spilling over to these services section. So in this video, I'm going to share exactly what's happening and how we can fix it. But first of all, why is the content spilling over? Well, if you remember, we did give the two columns in sign of the about US section. We gave them the property float left floating will always break the structural off your content of your layout. So you need to fix it in you to ensure that the floating effects are cancelled. As such, there is a property that we can use and that's called the clear Property. With this property, you can say that. Hey, I don't want any elements above me below me, to my left, to my right to affect my own structural. The idea here is this. I'm gonna give these section container services. Take a look at this. I'm gonna come in here right now and say clear. And if it is, I'm going to say both. And there you go. Now you can see that it's services section now has its own content inside off its own container. That is the effect off clear, and it actually has three different values you can go with left, right or both. So, actually, in this case, instead of going both, I could have said left and it will still work because the two elements above it, which are the who we are and the are what we do. Sec air columns are floating to the left. So I came in there right now and change left. Let's say right, it will not work. But most developers typically just go with both just to be on the safe side, so this would actually walk for the services section. However, it is not the best approach because even though we've been able to provide real structure to the services section, notice that the about or section is still broken. Look a day over here. If I hover on section idea about notice that the who we are content and also the Hurriyah content, as well as the what we do content is still outside its floating outside off its container. That's because those two elements are still floating so the ideal approach is to fix those elements with the floating property rather than applying be clear property to other elements they are affecting. So what exactly do we do? You might be thinking. Well, okay, if that's the case, why don't we just simply go over to each column and I played it clear property? That's not going to work because you cannot apply the Clipper party two elements that that floats in It's not gonna work. Okay? The other option would be to add the clear property to the parent element, which is role not as we have the def class of wrote that contains these two columns that are floating. Unfortunately, that will no walk either, because applying declare property to an element whose Children elements are floating is no going toe walk either. So what exactly do we do? And this brings us to a classic, says a streak which you will use over and over again in your journey as a CSS developer. What we need to do is we need to create some dummy content either before our elements of the floating maybe after or maybe even both, and then that dummy content will now apply the clear property to it to offset the effects off the floating elements. Don't worry. And I'm speaking of the great. Now, I'm gonna explain this to you. Very, very clear. Feli, take a look at this, okay? I'm gonna go back to CSS brackets. Okay, let's open up Main that CSS. I'm just close this one right here and now I'm gonna go over to our section area the layout by that and over here, let's first of all, give Arvo a with of 100%. Okay, 100% fine. Now we need to create some dummy content before and after our low class. Please keep in mind we're targets in the low class here because it is the element containing the two elements that are floating. Look at its demo structure. Right here. We have the day because of Roe and then the day of class off center, right here who we are and what we do. These are the ones floating, so we need to target the element containing both. Which is, of course, the class off road. That's where Take it in the low class. Okay, let's head back in here I'm going to see that go. And now I'm gonna introduce you to a new kind of element known as the pseudo elements. And we indicated by to Colon's. And now I can say before. But also, I'm going to say that Low Coghlan's and then after. So basically, right now we want to create content before and after our low class. I'm gonna open up my column braces, and this is exactly how we created dummy content. I'm gonna edit property called content. It is going to be empty off course because we're not displaying anything. I'm gonna add my semi colon. It's good to add some space between the two codes, by the way, so that at some space in there and now I'm going to say this play table, This is a new one. What is does is it creates any much. Now we sell, So it's much better than you saying display, blow call in land block or inland with table. It kind of creates an imaginary empty cell. So it kind of adds to the content if that makes sense. And then finally, I'm gonna come in right now and say clear both. So what we've done right now is that because we could not apply the clip about it directly to the role class, we had to create dummy contents before and after they will. By the way, listen, by the way, it's not compulsive that you must go with before or after. You can just say before, simply or after simply it's not going to matter. It all depends on the structure of your XML page, however, to be on the safe side, just like with clearing both the typical go with before and after pseudo elements just to be on the safe side. That's why I had said to go with before and also with after. So now that we've credited dummy content, we can now apply, declare property to them. Let's go ahead now safe. Let's head back in here. Let's refresh the page and that you go still the same thing. But now notice that if we inspect the about or section notice now that indeed the who we are content as well as they've already content are now contained inside off the about or section. So that's exactly how you would handle elements that have floating elements contained inside of them. Like I said, this is a trick that you are going to be applying over and over again in your journey as a CSS develop up. So take note off this. So that's, I think, is much fortune. I will see you in the next class. 54. Styling the Services Section: Welcome back. Now let's try and style the services section to make it look like Ah, well, we have over here. So let's see. You can see right now that we do have three rows and also three columns. So we should be thinking, All right, maybe we need to provide a set with for the parent l I elements like the Web development amable, abs. All this should have, like, a set with, and it should be around 33% so that the addition of all three columns will basically amount about 99% off the entire with for the container. So that's how it should be thinking right now, 33% with for each container. Also, we can see that they do have a white background as well. There's a lot of padding margins applied, but we also have what looks like to be our something from Bordeaux videos, maybe about three pixels and so on. So let's do this. Okay, what we're gonna do First of all, it is never going to provide a with for the parent l I elements. Let's go back to our indexed of XML. So right here we should be ideally should be targeting these main elements in Hagen CLI. It basically holds Web development, and then it holds the sob services on the Web development. There's another airline here as well, so these are the allies we need to provide the with for as well as the background. However, there's a bit of an issue. You see these only only allies and that inside our UL class of services list, these sub services themselves are also L. I elements. So if we come in here right now and we said something like, Hey, let's do this we're going to say don't services. Just as an example, I will support services, the police and then I say a lie and coming here right now and then I say, Okay, let's give you a few with off the 3%. Let's go ahead and save this. The problem here right now is that every single l I will have that a 3% including the soap services as well, but we Onley want to provide the with for the main L I elements, the ones the parent ally elements, so to say. So how exactly do we specifically target them and them only Well, I'm gonna introduce you to in new selectable called the Element Element selector. It's usual, represented by the greater than symbol. So what is those is that we can tag it very specific elements in signed off a parent elements. So if we want to target the main allies, we can say that Hey, only the L IES that are directly on the the your class off services list provide them with is with that way these other allies, thes sub services will no longer be applicable because they don't full directly on the your clothes because they fall on the You were right here, and then they fall on the the parent a lion, and finally, they fall under the your class so it will be applicable to them because we're only targets in the elements directly under the, um, class, which would be the ally ally hair and so on and so forth. So let's do this. I'm gonna go back in here. Let's go all the way down here. I'm gonna remove this and let's add services dash list and then the grated and symbol, and then l I all right now let's go ahead and add the with as a lost the background color. Oh, let's go ahead. Now with is going to be I'm gonna I'm gonna go with it a 2.3 percent. Okay, let's also add some margin on. I do have my margins at 1% and ah, 00 and then 1% from the left as well. And let's add ah, background call awe, which is going to be f A f a f a. Okay, let's see what we have. A safe. Let's head back to what We have refreshed the page and there you go. Okay, not bad. Add all. However, we still off obviously need to apply some more padding inside. Waiting to apply are some border radius as well, and also in its you apply. So margins within the are sub services themselves. You can see there is a lot of space in between them. So let's try to fix that. Let's head back to brackets. All right, So for the parent allies, let's add some padding, okay? And I do have five pixels. I have 20 pixels. I have 20 pixels and 20 pixels. Again, let's add the border. Who it is as well. And I'm going three pixels. Let's not forget the border. I'm sorry. The book size and property as well Book science. And let's just said that you bought a box as well. Okay. All right, let's save these and then just take a quick look and see what it looks like. Okay, we're getting there, but get in there now. We just need to apply some margins to the L. I. The allies are inside off the parent allies and also change. Well, looks like the phone size. This appeared to be a lot smaller than what we currently have in hit. Okay, so think about this. All right? How are we going to specifically target the Children ale? I elements now because there's a Dylan was willing to take it. We don't take it. The parent ally elements. Can you think of how we can take them specifically? Well, it's not difficult, and I'm just really sure. You How you gonna do that? We're gonna go back in here and the exact same thing Services dash list. And now I am going to say greater than to get the ally. And now the U. L Okay, take notes. You can see right now this is the parent a lie. So now that targets in the U. L. These guys that are holding the soap services, that's exactly how we do that. So let's go back in here and let's apply some silence. I'm gonna open up my collie races as usual and the list style type. Let's go ahead and apply. We do have disc is a style and then the phone size. We do have it at 14 pixels, I believe, and it has also add some padding to the left, and I do have to the pixels right here. So let's see how this looks like right now. Let's go ahead now and save. Let's head back to rebels on the first page. And there you go, looking much, much better. Just a few more things. We especially with margins. They do still tend to have some monies between themselves. As you can see, they don't look that close to each other, unlike what we currently have in here. So let's odd much is directly to the sub services our ally elements now, So I'm gonna head back in here, and I'm just gonna grab this. There's just copy the whole style and come back in here paste. And I'm gonna change the L I right here. I'm sorry, the, um but I'm gonna change it to the l I. We don't need to add the UL anymore because it doesn't matter where still to get in the Children elements, the Children, a lie, elements that fall under the parent Airlie element. So we don't have to add the UL anymore. So Well, because I'm gonna add here is going to be the margin, and I do have eight pixels written down for them. Let's go ahead safe, and we should be fine. Now, the first page. And there you go. One last thing, as you can see, would be the culo, all of the h to the services provided anyway taken. See, it's in white. You come down, he can see meet the team is also in white. And then down here, our classes and white. But remember that we provided a class specifically for sections that have a bad ground image. Like so. All we need to do right now is to simply take it the age twos inside off such a class. And to do that, I'm gonna head back. Let's go over to the age to section itself. So all the way up here. So I'm gonna come in right here, and I'm going to say section okay, And then don't image Dash BG. That is the class we gave them decisions with a background image h two and just very, very simply, I'm just gonna say color here would be set to f f f f f f semicolon save. Let's head back in here Refers to page I'm sorry. Refresh this page and there you go. So obviously we could also still add, like the ah blue border of ideas You can see because simply say, border bottom blue Add some margins as well, things like that. But there's another way how we're going to add the our blue borders underneath the h two tax. So don't worry about that. And also notice that the bloom background the blue border rather is actually present on all H twos, regardless over there. No, they have a background image or not. So we cannot apply the styling specifically to this class because then the sections that don't have a background image will not city same effect. So we need to find different ways off. Adding Are the blue borders to R H two tags? So that is it. Thanks so much for watching. And of course, there's always I will see you in the next class. 55. Building the Why Us Section: Welcome back, hope you're enjoying the course those far and we've made quite a lot of progress. We've added our main header with the hero background with added about a section services provided. And now we're talking about the wire walker section and is against the already going ahead to add the HTML structure for this section. But let's take a look at what we're supposed to design in here, and it's pretty simple. It's not a complicated section by any stretch of the imagination. It's very similar to what we have inhibit the about US section, the major difference being that while this section had two main columns, one for the Who, we are the order for what we do down here. We have four columns instead. So right now we should be thinking about creating four different Dev's, given them a particular class, and that class will have maybe with off, let's see, maybe 23 p saying two or 24% or something like that, you know, and in here for the text like research and allies plan execute, we can, of course, use spans for them and in fact, I have already done that. Let me show you the HTML structure or what I currently have. So it's right here. Pretty simple. We have our section I d. Why Tash us the same class content, which, of course, puts all the content inside the container we have the age to which is where walk with us and then the main p, which is the we don't we don't just developing. And of course, the spans for research and allies plan execute. And then we have the day, of course of row. And then right now, we now have the main Dave's holding the middle reason. So Dave number one right here, content sufficient. This research filled and two packs of texts. The second invited contains the analyzed data and so on. So these are the Dave's that will have to give the class two and provide that class with the with off 24% of them about. But before we do that, let's just handle the very easy styling. And of course, that's going to be at in the colors to the our text. Right here. Research and allies plan execute. So let's do this. Okay, First of all, I'm gonna give this text right here. I'm gonna give it a class off title Dash three. So over here, I'm going to say class equals and then title Dash three. Okay, Now let's add class is full. These special text. So the 1st 1 here is going to be blue because research is in blue collar. Uh, analyze, I believe. Should be orange. Let's say orange that's know how to spell orange. Ah, plan, I believe was green calls green. And in the last Panelist execute has the class over add red for execute. Oh, okay. I think this is fine is go ahead. Save this. Let's no hit about two main that CSS. So right here on the ah paragraph section, I'm gonna add the styling for Pete. That title Dash three and I do have a fun size of about 20 pixels. I have a text, a line of center as well, and I have a lot of margin, which is going to be 35 pixels and 14 pixels and another 14 pixels. Okay, awesome. Let's now add the styling for the spans. So we have span span dot blue and the collar is going to be a limb. Just check what I have in here heart. It's 40 b seven f f That's going to be for the blue and then we have spanned it orange and let's add the colorful orange. Speaking of orange, I didn t eat an orange as well. I love oranges. I don't know about you, but I love you like I can suck six oranges at a go. I simply love them. All right, let's continue. We got span that Ah, green and then green color Linda's Check the yellow hair for the green. It is a to C B 913 And last but not least, we have Mr Executes execute arms or expand that red not execute. And the color here is going to be f f 5050 Okay, now, one last thing, though, is the front weight. And the funny thing is actually 500 for all of them. So we can do this. I'm gonna come all the way down here. We're going to create a new section. Let's copy that. Let's come all the way down here and I'm gonna call this. Ah, Why us? OK? And now I am going to say, Let's add p dark title. Well, let's just say basically, services. I'm sorry, not services, but why us? The i d of why dash us? I believe it's why Dash Islam just confirmed that real quick. Okay, the ideas Y dash us. All right, let's head back in here. So why dash us? And then I'm going to say why this span? So any spans inside the why dash us? Let's give it a phone toe Wait of 500 and then he goes, Go ahead. Now, save this head back to a broza Refers the page, and there you go. Okay. Not bad at all. Where gets in there? Let's take a look and see. Okay. Ah, this doesn't seem to be Let's just confirm the size of this. It is 20 pixels, but it appears to be a little bit smaller. Soul. Maybe we can go with 23 pixels. I think that okay, up 23 pixels should be a bit more accurate. So let's make that quick change. Let's head back up here. Where do we have the Peter? There's three. Okay, so let's just into the pictures to 23 pixels and we are good. Okay, now for the main stuff, which is to, of course, divide the main text right here into four columns. Now, remember that when we dealt with the about us section, we used the dot Cole dash wand dash to class for the two columns. So now we're going to create a new type of kilometre beauty dot called Dash 1-4 All right, so let's head back in here. Let's go over to lay out. I believe that's where we created the structure. And Okay, so here it is, right here. So I'm just gonna copy this. You know what? Let's copy that coming here, paste that and then I'm gonna do is I'm gonna change to here to full will change the with way now so that it can accommodate four columns, So this is gonna be 23.75%. That is how much I have are The margins are going to stay the exactly the same. The same pattern box science and floaters left as well. So that's all we need to do. Let's save. Let's head back to index of html and actually let just copy this. I'm going to copy this class Let's copy that head back to index of HTML and now we can just give this class to the divide. Here they've class equals and then let's pays the class white. They let's remove the dots and there you go. So let's just copy this and we'll just copy and paste come down here. Oops, let's keep the indentation That the same thing here is, well, paste backspace to keep the indentation. And last but not least, there you go. OK, so we should be fine right now we've added the classes to all our lives. Let's go ahead now save this one as well. Head back in here refers the page. Come down here and there you go. OK, let's take a look. And it's pretty much almost exactly the exact same thing. The only difference, of course, is that the titles, the research field, they have icons, which, of course, will add are much later. But that's it. Full building out the way I walk with US section Germany, Venezuela, where will now go ahead and walk with the MIT. That same section 56. Building the Team Section: Welcome back. Hope you're having a wonderful time wherever you are. So previously we were able to create the wire walk with a section, but now it is time to take a look at the meet the team section. So how are we going to create the structure and then design this section? So let's take a look at what we currently have. We do have eight team members, and you might be thinking, OK, we might be able to use the column structure in here, but we might use the class. Don't call Dash 1-4 because we do have four columns, but that will not be the best, because we do have to. Rosa's Well, it's not like the work of those section where we have four columns and just a single vote in there. We have to row. So right now you should be thinking more display flex, sitting on display flags, and then the flex direction should be low. That's exactly what you should be thinking about from the design perspective. But from the HTML perspective, the actual structure itself. Right now this looks like a list. Okay, so we're gonna have a ul and some allies, but we're also gonna have some Dave's. We're probably gonna have a dead for the picture, okay? And we can also have a day for maybe the name off the person and then another day for the title. We don't necessarily have to use thieves for this. We could also use spans and maybe display them as a block, all there in the most ways, having congrats about achieving the exact same result. But in my case, I'm going to use dibs to hold the picture to hold the name of the person and then the position. Okay, so let's try this. I'm gonna head back over to brackets, and what I've done, as usual, is I've gone ahead to add the very basic structural, which is just the section I d. I gave it the idea of team have given the class of image dash Bijie. Because, of course, we do have a background right here for the images for the baggers again, see? So it's been a much similar to services provided. So that's why added the class right there and of course, the good old Dave of content age to form it. The team and that's what I've achieved those far. So let's go About 18. The list, first of all, So I'm gonna come in here right now, and let's just add a u l and let's give it class immediately. I'm gonna give it a class off. Let's call this team a list. Okay, Now, let's go ahead and close this. Now, in order to display our members easily, we're going to use these as Ally, so we'll have an ally. They'll be like the parent l I. And then the dibs hold in the picture. The name, the position will be on the that l I So it's kind of similar to what we did over here with theseventies provided. So check this out. I'm gonna head back over to brackets and on the the U Well, in the ad apparent ally. Okay. And then inside, I'm gonna add are forced to Dev and will give this the class off. Let's call this team picture. Tim, picture uh, Kate. And let's just go ahead and add the image for this particular employee which was going to be the CEO equals coats. Now, to find the source, I'm gonna head back over to my folder, and I believe it's inside the assets. Fooled. Ah, and then images and then team. Okay, so this is where you would find the images. So it's going to be team images assets. Okay, I think I got that. Let's head back in here. So this is going to be assets. We don't need to do any escape, because remember that the HTML document itself is inside of the same folder as assets. So it's not like we're escaping out of the ah out of the index of the HTML had a B. We're dealing with the CSS file dam building to escape out of this year's folder and then into this folder where we can take it assets. But since we're adding the images directly through the index of XML file, we don't need to do any escapes. Okay, so I hope you got that. Let's head back over here to brackets. All right, So it's going to now be images four slash team, and then I believe his name is Rusty. J P. G. And there you go. All right, let's go ahead and close. This first Div came on. Did I'm gonna jump down. That's a sure this is closed. What's jump down in here? Let's add the next Dave. So Dave class equals This is going to be for the names. Will called his team Dash name and his name is Rusty Dela Cruz. And let's closed Div. I don't know about you, but I've always found that name kind of funny. All right, let's just lose his head back in here, Dave Class equals ah team than the position would be Pos. And of course, he's the c e o death. Let's close that one. And OK, so we haven't closed something else that's going to be the ally. We need to close the air light and let's also close the u l and voila! Okay, so let's just recap. We have the U. S class of team list the L I hold in the div that holds the image. Another day of that holds the name. Position them have closed everything Okay, Let's go ahead and save this. Let's head back over to bills over first the page and he's so happy is like, yea, I'm the CEO, all right, so anyway were successfully added the first person Dela Cruz, Mr CEO So what I'm gonna do right now is I'm basically going to use the exact same structural to add the remaining members off the team's. I'm gonna pause the video and resume once I've added all of them. Welcome back. And as you can see right now, I have gonna add to add all the many members for the team. I did make a mistake with this spelling for Rusty, so I fixed that. But I also added the all text for the other members. And I'm gonna do the same right now for Mr Rosti Dela Cruz. So this is something that you should always try to not forget to do like I did. I always tried to add you all text for all your images. So let me do that right now for Mr Rusty dela Cruz. And OK, so let's save this. And let's just take a look at what we have right now. Refresh. And of course, right now you can see all the images with the people's names as well as their positions. Okay, so let's get into the CSS action. Go on dropping their two main that CSS. And let's cool old way down here. Let's grab the why. Why us? We're gonna create a new section. We're gonna call this team. Let's go to the team members about the team members. Okay. All right. So the freshman gonna do it next to display as flex. All right, so we're gonna take the, um, class of team Nationalist. Okay, open up. Our colleague braces, and let's get into some action. All right? So display is going to be flex and then deflects direction, as you can imagine, is going to be role. And there you go. So let's also do the flex rap as well. Flex rap is going to be rap. And let's also remove the A list style type. We don't want any styling for our lists or lists. Style type. I was said, I want to none. And let's just remove any pattern as well. Okay, so zero And OK, so let's save this. And let's just say the progress that we've made Let's come back in here. That's the first page come down, OK, but nearly we're getting there were still need to set a with for the actual allies themselves. So let's head back in here. I'm going to create a new declaration. It's a team dash list ally. And then let's open this up. I'm going to give this a with off 24%. Okay, because, of course, there it's It's a four column, so it can't be 33% or 50% because then it won't have four columns or 24% should be just about right margins. And you have my margins margins at 1% zero zero and then ah, 1% as well, which is pretty standard. I do have the background color, which is the same. Ah F A f a f A and I do have a lot of Patton, 20 pixels, 20 pixels, 10 pixels and entering pixels. Let's add the book size in. These are pretty standard rules but a box and that you go OK, so now we've added it with to our allies Margins, background color. Let's save head back in here, refresh and all. OK, so where we're almost getting there. I know this looks terrible, but at least right now you can see that CSS is attempting to display the employees into two rows with four columns, so there's a lot of stuff in its do right now. The major problem is that the images themselves are quite large. If I head back to my folder, you can see they are all basically well, they come different size. This, for example, is 12 80 by 1 50 Mr. Shown right here is 9 50 by 8 50 and so on. So what we can do is that we can set a maximum height for all the images and then we can also set our overflow to be hidden. So check this. I think I'm gonna head back in here. Let's create a new declaration team dash picture, and check this out. I'm going to set something known as the max height so that no matter what, it will never exceed 200 pixels. Let's also do something known as the overflow and we said this to hidden. So basically, what this does is that any parts of the image that might spill outside of the container just simply hide it. That's what overflow hidden does. Let's save this head back in here, refresh. And there you go. Okay. However, there is still another problem. The fact that we've set a maximum height for the image has kind of altered things a little bit because right now C s says only knows that. Okay, this image should not be more than 200 pixels in height. But what about the with? We also need to do something about do with as well. We cannot set a specific with in terms of pixels. But what we can do is it needs a little trick. I'm gonna head back in here and check this out. I'm gonna say team dash list was just say image. I am G and now with is going to be 100 percent. See this? Let's head back in. Here refers the page And there you go. What we've done right now is a trick. Okay? Even though we've said the maximum heights to be 200 pixels with also said, Hey, CS says no matter what displayed the full with off the image, so are such CSS now has to think of a way how it can display the full image while keeping the image at the maximum height off 200 pixels. CSS is amazing, but right now you can see this is what we have gotten so atypical trick that people always use developers typically uses. When you're setting the maximum height three images always go to with 100% and most of the time you will get some pretty good results. Okay, let's head back over here. Let's see what else we need to do over here so we can see. Right now, the detects is aligned to the center. The position is kind of light about maybe 300 in terms of weight. And it's also a line to the center. But it's in italics, right? So we're gonna try and make some changes in here. Let's head back over here and let's do this. The first we're gonna deal with would be the team name, T name. Let's open up our quality braces. And, uh OK, so I do have text the line a line that's going to be the center. Okay, Like, let's do the exact same thing for team position as well. Call it braces. Text that line to the center and remember, Would you have a front weights? Because it is kind of lights. I'm gonna give it 300 and the fun styling as well. Phone style is it? Alec and let's also change the phone size. I do have this size of 15 pixels right here, and I think that should be fine. Let's go ahead and save this and let's see what we have. Head back in here were first a page and, uh, okay, we still have a few things missing. For example, there's a bit of a margin between the images and the titles and as well as the names of the employees. As you can see, right. It is quite a bit of margin, actually. So we need to do something in here and then head back over here. Let's add margin student name. First of all, so margin right here is gonna be 17 pixels zero and then have 10 pixels. And then let's see for the position I do have Ma Jin set to 10 pixels and zero. No que. Let's see that one. Let's head back in here. Let's refresh the page and OK, so the last thing we need to do right now would be to add the background image, but also notes is that the Allies have a border radius. Ooh, I almost missed that. So that's quickly fixed up one. Ah, where we Tim Least l i Ah, Buddha Radius, And I'm gonna give it three pixels. Actually, let's get five pixels. Things a bit more than three. This good five pixels save head back in here fresh. Okay, that's more like it. All right, let's simply go ahead now and had the background image, so they should be fairly straightforward. We're going to go over to where we had, like, the services, for example. So all those grab this, let's copy this. Come down here and we have team. And I was gonna go ahead and simply paste that and then change services to team. It was a team we still team, and I remember, Okay, I have team. And so it's just team. Okay, so that's gonna be team background image. And I know the image itself should be Team O J. P. G. Let me confirm that. Let's head back in here. Ah, background. Yeah, it is team that J p. G. So I think we should be fine. Let's go ahead now and save this. Let's head back to a Boza, refresh the page and voila. There you go. So hopefully this wasn't too complicated for you. And hopefully you've been able to build your middle team section as well. So that's it. Thank you so much for joining me in this video. Germany, the next one available. Now go ahead and creates the testimonials section. 57. Testimonials Challenge: well, comebacks. And if your video is successfully created, the myth that same section now it is time to create the testimonial section. But before we do this, I want to present to you this challenge. Okay, I want you to try your best to go ahead now and create the testimonial section all by yourself. I'm gonna give you a few hints. Now the structure for that, the seminal section is a bit different from what we've had in the past. We don't have multiple columns in here, is just basically one single column. But then we have for Rose. So because it's just one column, we cannot use the column structure like we did with the Buy a book with a section or even the about US section. We can't use the dot called Dash, wander, Stewart or Dash 1-4 for example. We can use that we can also use flex the display flex, either because yes, even though we do have four rows and technically we could use the Flex displayed their display flex. Rather, it's not really gonna be the best approach because we don't have multiple columns. It's just one column with for rose. So the best way, the easiest way to this play. This will be with the use off Debs. So that's all I'm gonna say in their used their strategies that gives to display your testimonials. Forget about the codes that are called will handle that a bit later. And if you can try to think of a way how you can float, I'm just giving you the hint by day how you can flow to the second and the fourth. Testimony testimonials. If you can figure out how to float them to the light, doubt would be fantastic. So think of Dave's think of classes and also try to do some style in. Try to figure out a way how you can add the white background color for the main Dave's that will hold the testimonial and also the name as well as the website for the person providing the testimonial. Take note of the border wages as well, and just have fun. Go ahead, do your best to display this testimony, allergies and Dave's And, um, that's it's good luck. I will see you never next video where I'll now go ahead and create the testimonial section 58. Building the Testimonials Section: Okay, so hopefully you've attempted to create the testimonial section all by yourself. If you did, if you made an attempt, Congratulations. If you didn't well, let me know. Show you how to create the testimonial section. So, like I said in the people's video, we cannot use display flags or the column structure. So where is going to use dibs for this? All right, so we're gonna have one, Dave, that will hold all the men. And Dave's the second day of will basically displayed this Emmanuel while the other Dave will display the name as well as the website for the person given the particular testimonial. And just on a side note, if you recognize any off these names, well, send me a message, Okay? Just tell me. Well, you know, through this people from these fictional characters from and that we can have a chat about it, Of course, you know. So that's all I will say about that. Let's head on over to the brackets. So what I've done as usual, of course, is to create a new section for the testing won Il's and I've added the idea for testimonials have added a class A very special class of grey dash bgl before the background of a special background. So I don't know. One already have also added the usual day of class of contents H two for the testimonials title, and that is pretty much it. Okay, so now how are we going to display our testimonials? Well, I'm going to create a new Dev writing him and let's just give that did the class off role. Okay, so this will be the main Dave holding the other dibs. So now let's try to add the other day of now that we hold the actual testimonials themselves. So this is gonna be div class equals and now testimonial. So this is gonna like the parent Div. So now for the day that will display the coat itself, So def class equals, uh, coat. Okay, so let's just do this. I'm gonna go ahead now and simply grab the coat from Mr Hans Gruber's. Let's copy this right here. Let's copy that. It was head back to brackets. Let's display that. And ah, I'm just make this two lines. Let's go ahead now and close this, Dev. Okay, so that's the day for the coat lets don't add another day. Right now, Full. The author. It's a day of class here is gonna be equal to ah author. And in this case, his name is hands Gruber and its Asian Dawn. Uh, calm. Let's go ahead and close this, Dev. And that is it. So I'm gonna go ahead now and close the main day of hold in. The testimonials was closed up one. Ah, let's ensure this is indented purple E Okay. And then we can close the road. Dave itself. Hold on a second. Let me just make sure this is indented. Probably def, def. Okay, So this device for the row and then this one is for the content. And, uh, let me. I'm not confusing myself in here, okay? So happy Dave. Right here for the content. Dave. Class for Vaux, it seems like we have an extra Dev Islamic removed this Dave. Okay, so let's see, we did not close the day for the testimonial. Okay, just make sure this is corrects and one more def. Okay? These are the kinds of issues you face when you're building with CSS. It's a bit annoying, but it is what it is. So let me just make sure this correct against Dave. Dave, they have right here. I'm just at space, def. And then this Dave Right here. Let's push this over here and okay, Just go ahead and save this. Let's head back to a browser. Well, first the page and there you go. OK, so we do have the first day of that has been displayed. I'm gonna go ahead now and add the remaining lives for Hannibal Lecter, Military wretched. And Michael Myers. Welcome back. So offended remaining testimonials for Hannibal Lecter, Mildred Veteran and Michael Myers. And this is what I now have. And I refreshed the page. You can see my testimonials and that there, but we now need to add some style into them. So let's take a look at what we have over here. You can see that they have some padding, some margins as well. They have a white background. There's also a border Ovidius for the testimonials. So let's do this. I'm gonna head back in here. I'm gonna go over two Main that CSS And let's do this. I'm gonna grab team members. Let me try that again. I'm gonna come down in here, paste this and we're gonna change the name from team members to test t more. Neil's testing more knee yells. Okay, so let's go ahead now and at the first class, which is going to be a testimonial. Yeah, Okay. And, uh, all right, so let's add first of all, a phone size, which would be 17 pixels. Let's now add the background color, which is going to be white. Okay. And then let's also add the border because they have avoid us is going to one pixel. Ah, solid. And I know the color here is going to be easier. E zero easy zero. Okay, there is also a border of ideas. Don't forget about that one. And the blood of it is here is going to be 10 pixels. And, um, that is it. All right, let me go ahead and save this and let's see what we now have your head back in here and every first a page and there you go. Okay. So obviously, we now need to add some padding to push the text away from the borders. And also add some margin to separated testimonials from one another, and also you might notice that the with all the testimonials are a bit shorter than the Regula container with. So we'll have to set a max with for our testimonials as well. So I'm gonna go back in here and I'm gonna do this. I'm gonna come in here. Let's add the pad in first of all, So I do have a pattern here off 12 pixels, and I have a margin off 12 pixels by 20 pixels. And finally, let's set something called the Max with Okay, Max with here is going to be Let's go with 800 pixels. Okay, so let's save this. Let's not take a look at the new testimonials, and there you go. Okay, we're getting there. Let's now try to change the style of the text itself. So we do have the author class float into the light, and we also have the text with affronted of about 300. And also, uh, the font style is italic. So let's go ahead and make those changes. I'm gonna come in here. Let's go with test t more neo and coats. Uh, okay. So I have the front weight at 300 have the fun style italic. And I'm also gonna add a line heights of one point full. Those are the three I have. Then go ahead now and add this tale in four. The author. So remember, we're floating the author to the right. So let's do this. I'm going to give up. I did not press enter for the college bracelet. Do that again. Okay, let me remove this f right here as go back inside, Tab floats, and we're going to float this guy to the right. And what else do we need to add? Okay, let's add a margin top as well. I've got five pixels and there you go. All right, let's go ahead. Now, save this and let's it was gonna happen, OK? I am going to refresh. And there you go. However, you would notice that the also is now breaking the structure because well, guess what? We're floats in it to the white. So to fix this to ensure that the floated elements stays inside office block, What we're gonna do is we're gonna come in here, and we're simply going to display our testimonials as in line block. Awesome. Let's save this. And now, if I go back in here and refresh. There you go. So that's exactly how you can fix floating issues when you're dealing with Dave's. If you're floating any of the elements to the right or left set the parents Dave to display as an alien block and it will not break the structure any more. Okay, we are almost there. However, you would notice that right here, the second and fourth testimonials are floating to the right. So how can we achieve the exact same result? Well, it should be pretty obvious at this point. What I'm gonna do is very simply, we're going to create a new class for the second and fourth testimonials. I'm gonna come in here and I'm gonna call that class. Right? Is that exact same thing here as well, right? And now we're gonna head back toe a main that CSS. And what I'm gonna do is I'm gonna go all the way to the top where we have the section section right at the layout section of other. So right here. Let's come down here now and say that any class with rights, any element with the with the white class, I mean Let's float to the right. It's safe. That one head back in. Here refers the page and there you go. So we're a leave a Oh, we still have to add the background. The background here is has kind of like a different column. So remember, we've already given the class off Grey Dash BG. So I'm gonna go over here right now and right here I'll just say, ah section dot gray dash BG. And let's give this a background color background color of F o F zero F zero. Let's save that one. Go back in. Here refers the page and there you go. So they let the missing right now is, of course, the colored coat symbols, which, of course, we will take a look at ah bit later. But that's pretty much how to build it. The someone else's section German Avonex video. Where will now add our clients? I'll see you then 59. Building the Clients Section: well come back soon in people's video is successfully added and styled are testimonials. But now it is time to add. The clients section will have to add the logos of all this companies. And of course, the client section is a very, very popular section on any business website because the business has to show potential on new clans that, hey, you know, we've worked with this conference before. We have the experience, you know, we were we were competent in what we do. So it's always a good idea to showcase of the clan's portfolio. Now I want you to spend some time to think of how we can display this logos. The HTML section should be pretty straightforward. Will have to create a new section, will have the day of class of content as usual, and then we can use a list to display the logos. But then think of the CSS aspect of it. How are we going to display this logos? We very had done something similar. We admit the team where we had two goals but in this case will have three rules instead. But is there going to be the same display flags and so on and so forth. Soap, just like with the testimonials challenge represented to you if you want to spend some time to transfer, Got how we can display this section by omens, paused the video. Go ahead and give it your best shot at the barest minimum. Try to create the HTML aspect. So try to create the section of the Dave's, the on ordered class as well as the least items for each one of these are logos. But let's go ahead and do that. Now I'm gonna head over to brackets as usual and let's head over to index dot html. So down here, just go ahead and create a new section and okay, we'll get an I D off clients, just like with the or the sections of clients. And then we'll give it the class off image background because we do have the bag on image of two people shaking the hands. All right, so let's just create some space. And so we're gonna get now and at the very first day of class equals, let's call this content. It's the same old content classes usual. Let's close that one and then in here let's add the title, which would be age, too. And then it's going to be our clients. Okay, let's go ahead at new line. And now this is where we'll begin to add the UL. Let's give this a class off our client list, okay? And then inside of this, you will will now have the very first least item L. I and then inside of this list item. Let's go ahead and add the very first l logo so we'll use it as a link. Also. So a tree, if equals, will just use the hashtag represent the link. Let's add target equals and then on the school blank so that when the images are clicked on , it will open up in a new tab. Let's go ahead and close this and now inside. Finally, all of our eight I will now have the image source equals. And now let's get the images so it's gonna be inside off the Assets folder and then you'll see clients. And then you'll have said our homes daughter P N G. So let me go ahead and simply copy the name. Let's copy that. Let's head back over to brackets and right hit. All right, so we'll simply say assets and then ah, images. And they will say clients. And that's it. Set of homes. The PNG. That's it, right there. Let's close this and let's add the Olt text as well. Good for S e o will call this said our homes logo. And there you go. So now the only thing you need to do it right next to and show that we have closed everything we have, the A tags close. We have the l attacks. Close. So we have to close. Rul. That's close to you. L that's closed is closed a section as close as well. And I think we're good to go. Let's go ahead and save this. Let's head back to our bells. Ah, were first a page and there you go. So now we do have a very first logo appearing, so it's gonna be the exact same process all over again. I'm going to add the new list items for the main logos are posted video, and I was in the video once I have added all off them. Welcome back. As you can see, I've added all the men and logos for the remaining companies so already going ahead to save this. Let's head back about your But I was ah simply refreshed the page. And there you go. So we now have all the logos showing up. So Billy Kuwait in the HTML aspect, isn't really that difficult. At this point, you should be comfortable creating your sections, your Dave's and using the U L and L I elements to display the logos. But German event eggs video well, but will now take a look at how we can style the clients list Elsie then. 60. Styling the Clients Section: welcome back. So nihilistic. Look at how weaken style the clients section. And like I said previously, you should be thinking of things like display flags, maybe a flex direction of row. And then maybe to also remove the list style type things like that. So it's very similar to overly Don't over here for meat. That seems so Let's go ahead and get the show started. I'm gonna grow out first of all the services part because we're going to make you so this exact same say, Cisco to display the background image. So just copy this and we can use that to create a new section four. The clients. I'm gonna change services here to clients. And then, of course, right here will change services to clients. Okay, let's go ahead and save this. And let's just make sure that it's working so well. First the page and there you go. Okay. Awesome. So we had to beg an image showing. Good. Now let's begin to style the actual UL class holding the logos. And, of course, that class is the client list, as you can see. So this is where we'll begin to add the display flex and so on. So let's do that. Let's Oh, I forgot to change services here to clients. Let's just quickly do that. Clients. Okay, so let's start off right now with the class of clients dash list. And like I said already, several times, we're going to use display. Ah, Flex. And then we can also add the flex direction. We're gonna go with the flow. Let's add the flex rap prophecy and we'll just call this our rap as well. And then because the least style type remember, we don't want any of that. So we're just gonna say none. And, ah, well, doesn't have any patterns that might be available said that. Zero. Let's save that head on back to our browser. Well, first of page and there you go. OK, good. So now it's beginning to take shape with like this. What we need to do it now, of course, would be to add some background color for the logos. We can also set a with notice over here that we do have four logos on each row, so we should be thinking of which, like maybe 23% or 24% well at have to add some margin as well. You can see we have some border videos also in the mix. So let's go ahead and add those. Let's head back over here So I'm gonna creates new line. I will say clients dash lists and then l i And now let's that give it the with I do have 24%. Let's arts a margin. I do have one, ah percent 00 and then 1% from the left as well. Let's add the background color and I'm gonna go with an RGB a value here. OK, so it's gonna be hard to be a, uh 255 255255 and 1.8. Okay, but you have don't forget we have a border radius. Do you have five pixels? And, of course, let's not forget the good old box size in. I bought a box and ah yeah, let's go in and save this and see what it looks like right now. Refresh the page and there you go. So it's not too bad. I mean, we have the logos displaying quite a light, but you can see right now that it's not quite the same. The locals over here are perfectly aligned to the center. That's plenty of patterns all around the logo. So to achieve this will need to take it to the A tax themselves. Because remember, it is the a tack that I actually holding the images. The l A tax hold a tax. But it is the A tax themselves holding the images. They want to target the images. It's good to targets on the A tax for patterns, things like that. So let's do this like I'm gonna head back in here. And now I'm going to say, Client dash. Least a tag. And the first thing we can do here is legis Forcible display as an in line block. Okay, and then we can now add a pad in and we'll go 20 pixels all around. Let's also give it a with of 100%. Ah, 100%. Let's not forget the good old box sizing, but ah, box and ah, that is it. Let's go ahead now and save this and you should see some major improvements. Let's come over here, refresh the page and that you go say, from a Dexter perspective, the images look perfectly fine. They look just as good as what we have over here. However, I was going to postpone talking about this until we go to the responsive section of the course. But let's do this. Okay, Let's But from an experience, I'm gonna minimize the window right here. And you can see that when we minimize the length off the with off our browser, you can see right now that the locals look to start head. However, if we go to our mortal sight, take a look at this. This looks perfect, right? So if this set was viewed on a mobile phone, this is exactly how it would look like. But Oz right now would look like this. This is very, very bad. So what could be happening in here? This is where we now have to target the images themselves. So I was going to do this later, but let's just do this right now in order forced to get our logos to look good and responsive. The first thing you need to do, though, is to add the overflow property for a taxi concern right now that it logos are jumping outside off the our border. So let's come over here and simply say overflow and we can hide that. Okay, let's go. Please save this and let's head back over here and refresh. Okay, good. Now you can see that it logo's are no longer going outside off their borders. However, in order for the logos to shrink along with the browser so that as we minimize the with of the brother, the images also shrink in accordance will have to set a max with property of 100% to the images themselves. So let's do this like I'm going ahead in here. I will say clients dash list and an image. And now this is where the responsive magic happens. We're going to say Max with off 100% basically were saying Just keep on shrinking the meat as you shrink The width of the bras are also shrink the image as well. And then, for good measure, I will say this play block. Okay, let's go ahead and save that's head back in here. Refers to Page and oh, it's not working. What's going on? Oh, I'm sorry. I misspelled client. Ah, gee, apologize. But I get this way when I'm really, really excited. All right, so that's client list that saved this. And back in here refers the page and there you go. Awesome. Awesome. Awesome. So it doesn't look quite like what we have over here because this is basically two columns . Whereas in here we still have four columns. So this is something we'll deal with much later once we get to the responsive aspect. But not, as you can see, that the logos are still retained inside off their borders. That's because we said in Mexico 100% and we also displaying them as blocks. So that is pretty much it for designing the clients section with the logos. So Germany Vendex video Bill will now go ahead and begin to add the contact US form. I will see you then. 61. Creating the Contact Form: welcome back. So we're very nearly there. We've pretty much created all the main sections. But last but not least, we do have the contact or section. And obviously this is very important because as a business, you want away for potential customers and clients to reach you. So we're gonna build ourselves this form that you're looking at right now and creating forms is a whole new beast entirely when it comes to external, because there's a lot, ah, lot to external forms. So I'm gonna share exactly how we can build it out. And from a design perspective, you should be thinking about Okay, we might have, like a parent div hold in. Maybe the label in this case would be named would have maybe another Dave holding the actual field itself and things like that. But we'll talk about that a bit later. Let me show you what I've done those far I have really going ahead as usual to add the section I D, which will be contact The good old days, of course, of content have added the title section H two tags contact us and I've also added the intro Do you have something to ask us. You know, you just want to say hi above about I give that a class off intruders who will be doing some sailing in there. All right, now, let us begin to build out the actual form itself now to create a form with HTML. Well, we're going to start off with the tag itself called foam. Okay. Now, the form itself has lots of different kinds of attributes that you can apply to it. The first I'm gonna apply here but will be called the method. And the value for this is going to be post Now there's two types of algae can adhere. You can either go with, get or post them. Just add equals two here. All right, so you can either go with get or post. I'm going to suspend the explanation of what these two are for a while. We'll talk about this a bit later. But this is where most inexperienced developers tend to really mess up. They usually go with get as opposed to post. Don't worry. I'll explain exactly what these are a bit later, but let's just a quick for method equals post, and then I'm gonna give it class very simply off a literacy contact form. Okay, All right. That's the first tag out of the way. We've created the form. Now let's add the Dev class off role. Because if you look at the website right now, these are essentially those. So we have fall those and kind of like to Dave's in its role. So one deviled hold label and other different hold the impute field and so on. So we're going to use the class of Ole. Okay, let's do that. Hvo And now inside of this, Dave, Let's at the very first day that will hold up the label so they've class equals. Let's call this Lee Bill call Liberal column, basically, And now check this out. We're creating labels now, So the 1st 1 here is going to be the label, and I'm gonna say four. It's basically right. Now we're saying, OK, this label is for this particular filled. So to do this properly, I'm gonna add equals two and then I'm gonna add the i d for the field, which will add a bit later. But for now it is contact Dash name. This is the idea migrants you use for our name filled. So label four contact name. And now I'm gonna type in a name. Let's add a colon and let's close the label. Okay, let's close the day of as well. Awesome. Now let's create another day of now for the actual input field itself. So check this out. I'm gonna say div class equals and we can call this field Dutch coal. Okay, Now check this out instead of label. It's now going to be impute impute. And now the i. D. What is the identification for this Particular filled is the name, right? So it's gonna be equals to contact dash name. Always ensure that the label full value and the input i d values are the same. So we have contact name. Contact him down here. Now, when it comes to the other attributes for input, there are many, many, many off them. They're probably about between 15 to 20 of them. Obviously, I can't cover every one of them, so I'll just show you the most important and the most popular. Actually, it's for the impute fuel. So the 1st 1 here we've added the ideal. It's at a class so we can do some stand. Okay, so this class will be used throughout. Let us give it field. Okay, Now, calm is type equals text. This basically demonstrates, or it indicates the type off filled. This is Are we expecting simple text? Are we expecting an email? Are we expecting numbers? Things like that. So this is very, very important. And I will show you a bit later. Why? It is extremely important. So type equals text. And now let's add the police hold up. So just please hold out and we can say equals. And then in coats. Let's say your name, okay? And last but not least, we want to make this field required. You will never find any contact from on the Internet where providing your name is not required. It's always required most of the time, at least. So to do this, I'm just gonna taping re quiet. That's all that we need to add required. Okay. Oh, some. Let's go ahead now and simply close this, Dev. And then I'm also gonna close the Dev for the vote. Let's close that. Okay? And let's not forget to close the form also, and there you go. All right? Let's go ahead now and save this but ahead, back to the browser. And let's see what we have refers to Page and there you go. All right, so we have the first label name and then the field. Your name. So what I'm gonna do right now is, as usual, I'm gonna pause the video and add the remaining fields and labels on autism. Once I am done, well, come back. And, as you can see right now have added the remaining fills. So we have the filled for the contact email we have for the title off the message. And then down here, we also have the text area them. The message. Lindell's Go ahead, save this and let's see what it looks like right now. Let's refresh. And there you go. That's basically how it looks like right now. So let me walk you through all the code. I added. It's pretty much exactly the same thing as with the name field. So we have another low in here. We have the contact, email, the class of field, the idea of contact email, that type here, please. Pip. Close attention to type here has been set to email. This is very important because check this advocate. If I go back in here and there, let's say I attempt to fill in some some nonsense in here and I hit. Submit. You see, Right now it stays. Police include an at symbol in the email address. That is because we have indicated in here that the type has been sitting email if I came in here right now and I change this to text instead, I save. I go back in here. Let's just refresh the page. So I come down here, I taping some nonsense again. Now, when I hit submit, it basically submits. You can say we did not get any message telling us that they're here. You know there's an issue with your email feel. Please add the at symbol. That is because CSS or each team of other at this point isn't expecting an email kind of imputed, simply expecting texts. So this is what is very, very important whenever you're quitting your email fields and showed that it type in here is set to email so that it silicon very fight that indeed the person has added an email address in the field all right, so down you it's been much the exact same thing as well over here for the contact title, the type I kept blank. Because a title can contain numbers, it can also contain text, so it's usually best to just leave this blank and not adding anything in there. However, note one major difference for the message for the text area we did not use impute. Instead, we used Text Avia, so this is a different kind of feel they can create with each temple. Forms are many of them. So whenever you're trying to create your message area, always used text area and then over here notice, I said those equals five. This basically indicates how tall the field is going to be the vacuum it right now, and I change five to, let's say, 10 for example. Now this is going to make it a lot taller. So look at the size right now. If I refresh now, you can see it a lot taller. But it's not often that, sir, because you can always just click and drag. Ah, using the mouse in here so you could just live there some five. You don't really have to go taller than that, and that's pretty much it. Now down here, we do have a special input class for the submit button, and if you pay close attention, have actually going ahead to add with the classes for Button and Green. Remember this for the same classes were used to style the bottom right appear for the get in torch. So it's basically the exact same style. And that's why I simply added our button and green for it. And of course, we'll was left a play. Some stallion in here. Let's just go back in here. And, um, that's pretty much it. So the type here was been set to submit a swell. That's why you have this of meat, Tex India Showing. And that's pretty much it for constructing the HTML form. So German Avonex very well will no go ahead and begin to style the contact form 62. Styling the Contact Form Part 1: welcome back in the previous video is successfully created the fields for our contact us form. But now we need to do some cereals style in. Now, before we jump in their notice over here that I do have send as the actual text and not submit over here. So So mitt is the default value that you're but noble always have. However, if you want to modify the text all you and introduced to go back in here where you have the input classic ALS button green and then types of meat or you could do here is simply provide something known as the value case against use value equals and then just simply in capital it as send Save this, Let's go back in. Here refers the page and there you go. So now it is sent. So that's how you can customize the text for your button. Okay, let's take a look at this styling that we need to do. And over here right now, you can see that there appears to be some sort of like a max with for the contact us form. Everything is aligned at the center as well. So let's do this I'm gonna head back two brackets. Now, remember, we've given the form class off contact form. So let's do this. I'm gonna go ahead, grab text and just come down here, paste that and we'll just change clients to contact contact. And so let's get cracking. The class is going to be form. I'm sorry. Contact. Dutch form. Let's open up our colleague braces. So we're gonna provide a max with, and that makes it is going to be 680. Pixels will also apply. So margin to try to get it to the center so they can go. That's a teddy pixels from the top auto. So this will now centralize the former aide in the middle. And let's add in March of 20 pixels for the bottom and, as always, book size in. I'm gonna go with our border bucks. Okay, let's go ahead now and let's save this. Let's head back to him. But I was ah. Refers the page. And there you go. Okay. All right. We're getting there. So now it's kind of like a lion other center set off, but we need to stretch the fields, make them a bit longer, and also add a lot of pattern. So with the structure right now, basically with a class off the liberal dash, call and fill dash coal, they will have plenty of the exact same properties and exact same values. So let's do this. Okay? I'm gonna create a new declaration in here. So let's call this dot label dash coal and then comma so we can then add the other one, which is field dash coal. Let's open up our colleague braces. So the first I'm gonna do here is this. Let's add some margins. No, it So I do have 1% zero and then 1% and then another 1%. Okay, let's add some pattern as well. So I do have five pixels all around. I think that should be fine. Let's go. Some books size in border box and less, but not lists were going to do some floating, so let's float them to the left. Okay, But now this is where things get interesting, you know, to have them on the same line will have to set withs for them. And, of course, let's start off with the label dash. Cool. Now the labels themselves, they're not that long? Let's see. So the labels here can maybe be like, let's say, 25%. Maybe, and then the actual feels themselves would be more like, let's say, 70% or something like that. So let's head back in here so level. But coal will have a with off. Let's go 25%. Okay while got lay Bill, I'm sorry, not label, but field. Dash Coal will now have a with we're not going to go with Center 5% because we want some space. So let's go with, let's say, 72% instead. Okay? And, ah, let's go ahead and save this And let's see how this is gonna look like Let's head back in here. Were first a page and there you go. Okay. Okay, fine. Now, you can see there now on the same line because we've given them set withs, and we've also floated them to the left as well. Okay, Now let's go ahead and begin to design the actual labels themselves and also the field. So what I do have here is let's see, this is kind of big. Let's take a look at what we have. It's a bit big front weight of maybe 300 color and then noticed something very, very interesting when we hover are mouse on the label. You see how it now turns to the hand with the finger pointing up, but enough to do something like that? Because right now, as it is, we're not getting that. So I'm gonna introduce you to a new kind of property. So let's do this. I'm gonna head back in here. So let's first of all, target the label itself. Okay? The label tag. So check this out. I'm gonna add a formed size. I'm gonna go with 18 pixels. A front weight off 300. Ah, let's add a color of 555555 And now, take a look at this property called the cursor. Okay, This is how we can change The symbol of appears when we hover on the actual label itself. So the value here is going to be pointer. All right, that's the volume by day. So let's go ahead. Save this and let's see, let's refresh. And now I can, you know. So when we hover on the label now, the symbol changes from the arrow to the hand. So that's exactly how you can use the crucial property and the value off point. OK, so that's it for the label. Let's look feels so. Yeah, the fuels do have. Let's see. Ah, kind of like maybe a phone size that's typing something inside. Okay, if one size culo with us, well, we'll have to settle with of, Let's say, a 100% add like a border radius. Add some borders as well. Okay, let's do this. I'm gonna head back in here and let's take a look at what we're gonna do. Let's add the field class, because remember, we're using the class off field for all the imputed and C class field right here, field filled and so on. So let's head back over here. Let's head back to Minden CSS. And let's do this. Okay, The first we're going to do would be to add a phone size and for the fun size I'm gonna go with, let's say, 17 pixels instead. The same color. Let's stick with the 555555 We're gonna add padding right here of 10 pixels and 12 pixels as well, and we do have a border and the body is gonna be one pixel is going to be solid. And then the caller is going to be de de de de de de ha sixties. We do have a border radius off three pixels. And let's not forget the good old books size in which is going to be border box. Okay, I want to take a look first of all and see what we have. Let's save this. Let's head back in here. Were fresh and OK, so right now you can see that the fields are still not going full with so very simply will just add with off 100%. So this right, that should do the trick. Let's go ahead, save this kid back in here. Refresh. And there you go. So in other fields are going full with awesome. Now let's just style the placeholder consider placeholder right here has its, you know, front weight of 300. It's n talic style and the color looks like a c C c. So let's just do that very, very quickly as head back in here we're gonna do it's just very simply gonna typing field. OK, but now I'm gonna add the pseudo element again. And this time it is now going to be placeholder. That's how we can take the place holder in our feels. So then open up the color braces and just very simply, add the front wave of 300. The color right here is going to be si, si, si, si, si, si. And less banal is we do have the funds style set to italic. Okay, safe. Let's head back in here for first a page. And there you go. Awesome. So German Avonex video bail will now continue to stylized and in fact, finish stylized in the contact form. I will see you then. 63. Styilng the Contact Form Part 2: welcome backs. Let's finish style in our contact form, we do have to make some changes to the send button because right here notice that it has, like, a nice border radios, but And also and we hope over on it notice that the bag on Calo kind of changes around there. We have, like, a buck shadow at the butter colored also changes ever so slightly. So let's make some changes to the send button. And of course, the intra text also needs to be style allies. So let's do this. We're gonna head back in here now. Over here, Another two style, the button for our form. I'm gonna add a unique class to it. All right, so I'm gonna comment right now and where we have biblical as bottom green. I'm going to add submit as an additional class to separate it from the other buttons. OK, so let's save that. Let's go back in here right now and let's begin to style the buttons. So I'm gonna go with button, don't submit. Let's open up. Good old Kohli braces and I do have with me right here with sets to auto, we have margins that zero as well. And we're also gonna add the cursor. We're gonna make it, pointer. Okay? And then a border cooler. And I do have developed with Bada Koloa in here sets to seven b nine and then a 00 And that is it. Okay, let's quickly do the hover effects as well. So button that submit. And now when we hover on it, let's make some changes. Let's come in here and we're going to change. First of all, the border Coehlo. Okay, actually, guess what? We're going to stick with the same color but will apply a transition. So let's stick with the Barnacle of seven B A 900 Okay, books, Shadow. We're gonna say this to none. So no books shadows for this. And then now this is where we're going to make the actual change. Background color. We will change the background. Coehlo to a d. D 247 Okay, All right, let's go ahead and save this. And let's just see the new effects in action. Let's refresh and OK, so you can see right there that when we hover, it makes a change. However, notice, of course, the transition This is a lot smoother then we currently have in here. This is just instant. So let's add transition. Okay, I'm gonna play the transition directly to the submit class. So in here will just say transition. I made the transition to background color, and it's gonna be 0.2 seconds and we'll just ease out. Okay, Let's go ahead. Save this. Let's head back in here. Refers to Page and there you go. That is much better than what we initially had. Okay. All right. So the last time you do right now would just be to style the intro text. So let's do this. I'm gonna head back in here. Let's go all the way to the top because it's AP class of that just down right here. We can do the p dot intro. Let's open up our colleague braces and OK, so phone size. I did have a fun size off 19 pixels right here, have a front weight. 0 500 and then a color of 777777 And a bulleted text alignment is also to the center. And last but not least, we do have the margins. Let's a play Some margins and a so I do have are 35 pixels, 14 pixels and then 14 pixels. Okay, let's save this. Let's head back in here. Let's refresh the page. And there you go. Awesome. Awesome. Awesome. So that's pretty much us styling the contact off form now in closing, we've not yet made the form actually active because right now as it is, if anyone comes in here and fills the form and the hit send, nothing is going to happen. So in order for us to actually make the former active so that we receive the contents of the former via email, we will need to add some extra code. But that will be P. H. P code will take a look at that a bit later and the cost on to worry. I've not forgotten that. I also mentioned that we do have the two types of form methods post and get. We'll talk about that a bit later as well. But I also want to use this opportunity to invite you to take a look at the HTML forms tutorials on public schools so you can lend more about the order types off our impute fields. So as an example, we've only taken a look at the email field, the text field, a text ever filled. But you also have access to, like the radio filled, for example, where the person will have to choose between. That would actually have to choose just one option out of a set of different options. So, for example, in here, you know what kind of gender are you? Miller Female. You can use video Putin's for that. You do have access two other types off attributes, which we'll talk about a bit later, especially action. We're going to go up action much later, but down here, where you have HTML form elements like I said, we've used the input element, the select element. But you also have access to multiple selections as well text every we've talked about. You have access to the button elements which we've used but in yours are fuel, said legend data list Some of these you may not need to use them as such, but it's still a good idea to familiarize yourselves with all these different types off impute types. So yeah, the image you have password, search, and so on and so forth so I can guarantee you that no matter how complicated it from your trying to create, you will find the necessary impudence and attributes and elements with HTML. So I will invite you want. They're going to spend some time and just family raise yourself. It's more off these available impute types as well as elements. So that's it. We have finished pretty much finished the or the entire website. It just remains the food that we need to create. So we'll do that in the very next video. I'll see you then. 64. Building the Footer: welcome back and we've come to the final section. We will have to build out the FOTA for the website. So let's take a look at what we have. We do have what looks to be like two different menus. The one on the left has links two other pages or external sides and then the one to the white has the social media icons. And then below we do have are all rights reserved text. Okay, so let's go about and begin to build out the structure. I have already added the foot tag. So in the same way that you would use the head a tag all the way up here for your head up. You would also use footer for the foot section, averted the class of content and then also wide. Remember, we used a class of white also in our header for the logo and for the main menu. So I've applied the exact same class in here as well just to make the continent a bit wider than the West off the our page. So let's do this. I'm gonna add the very first Dave right here, which would be the class off role OK, and now let's do this. Okay. I'm gonna create AIDS the very first class, and this will be for the U L So far forced list is gonna be ul class equals. Let's call this one the foot. Our menu. Okay. And now let's add the first l i. And then inside we're going to add a tag eight riff equals So we don't really have any links. Persists will just used the hashtag to a place that and then we'll also added the targets. Attributes equals And then it's going to be, of course Ah, blank. And then let's go ahead now and add blawg at the text. Okay, so let's go ahead. Close the a tag. Let's close the ally tag as well. And ah, there you go. Undisclosed DUl as well. So let's just see. How does it look like? Let's safe. Oops. But save head Doctor Broza refers to page hope. Sorry. A wrong website. Is this one. Okay, refresh the page. Let's go down here and there you go. Okay. So we have blogged now appearing fine. We can still do lots of Stelling, which we will do, but then let's also create the first list item for our social, many to the right. Which is going to be Facebook. OK, so gonna head back in here and let's do this right. Lendl's grab everything in here. Let's copy that. And then I'm gonna come all the way down here. Paced up, deliver again. Instant. Now I will change the foot a menu. So let's go with the social menu, okay? And now in here, this exact same thing. But I'm gonna change. I'm gonna add an extra attributes in here, and that's going to be the title attributes. The title here will be equal to Facebook. Okay? And we're not gonna have any text in here. Let's just close this as it is. Don't worry. You will see what I will do a bit later. So let's see your class l a lie. They've they've and uh Okay, let's just close the last day of right here for the role. Let's save. Let's head back in here. Who first the page And OK, I know you can see the Facebook, but we're going to use an image to represent the link. So what I'm gonna do right now is I'm gonna pause the video, and I'll add the remaining list items for the Food Thai menu and also for the social menu as well. Welcome back. And as you can see right now, I've added the remaining list attempts for the foot A menu. We have events career as if accused policies and then for the social menu have also added for Twitter, LinkedIn and dribble. Okay, let's go ahead. Save this. Let's head back in here. Well, first the page and the Hey, you go. Awesome. Okay, Last but not least, we do have the 2020 will be impact, all rights reserved. And we do have the copyright symbol down there as well. So let's add that. So I'm just gonna do this. Let's see. So just right in here after the u l. I'm gonna come in here and simply add a paragraph tag And then for this symbol for the copyright, that's the simple right there. So it's going to be copy semi colon. So this will display the copyright symbol for us, and then I'm gonna say 2020 Web impact dot and then there's just typing all rights reserved , and I think that's it. Okay, let's go ahead. Save this head back in here. Refresh the page. And there you go. Awesome. So, Germany rednecks Video Web will not begin to style our food. 65. Styling the Footer: well, comebacks and people's video successfully created or footer. But now it is time to do some serious design, and this is the end goal right here. So let's see what we need to do. We need to add a background color for the foot up. We need to figure out a way how we can float the first menu to the left and then the second to the right. And it also notice that the menu items the text items. The text here is all caps lock. They don't have any a list in style that they don't have the guts or the circles around them. So these are things we need to do so, But that wasn't intent. Let's head back over to brackets and let's head over to a main that CIA says I am going to create a new section as usual for the footer. Let's go ahead and paste that and then I'm gonna change contact two footer. So let us add our bag on color and we're going to target the foot tag because this is the main tag, are holding all the elements in our food. So let's head back to men that say assess emigrant to type in footer And now let's go ahead and add The very first opportunity is going to be the background color. And I know the value here is going to be four for 44 for four and then we also have a collar for our text, which is going to be a and then a Let me add the hash tag. Okay, One more thing we're gonna add will be the are fun size. So the very fun size off for 10 pixels. Okay, let's go ahead and save this. And let's just take a look at what we have and see what has been done. Okay, so we have the background color in there Now let us try and design the actual least items themselves. Will have to remove the text decoration, Remove the list. I'll type changed the color as well on transform the attacks themselves to upper case just like we have over here. Also have to add a hover effect notice. When we hover on the list items the color turns blue and then we also have an on the line. So let's head back to maine dot c Assess Now notice over here index dot html be added a class off foot our menu. So we're going to use this cluster to get the ally elements as well as the r A r elements themselves. So let's head back to Maine. Will see assess And then right here I am going to say food dash menu. Ah, OK, So the first of a good to do here is we are all going to remove the least style type and we'll just say none. We don't want any list style in, and then we are going to float it to the left, Okay, because it is to the left, while the social media icons are to the right. And then let's add a margin off 15 pixels for its open bottom and zero for left and right. And then Padden Bull said this to simply zero. Okay, Now let us quickly go ahead and also target the ally elements themselves. So foot a dash menu l I will also have to float them. Do they left as well. So they said that they can be in line and then orders at some margin on. I do have five pixels as well as eight pixels. Okay, let's save this. And let's see how this will look like. Let's head back over here. Refresh the page. And there you go. OK, so we're getting there. So now we just need to target the actual A tax themselves, willing to remove the on the line text, transform them to upper case and so on. So let's head back over here, and we're just gonna go ahead and do this. I am going to say Footer, dash menu. And now a So this is where we're gonna do some serious design. So first things first here is going to be the text transform, which is going to be to upper case. Oh, right. We do have a collar as well as a and then text decoration. This would be such a nun. We don't need any takes decoration at all. And, ah, let's save this head back. Let me refresh the page. And OK, so we're very nearly there they are under two minutes. Do right now is to add like the hover effects. You know this over here we do have that nice over effect. That is also some transition going on. So let's first of all, do this. Okay, I'm gonna head back over here. Two footer menu. Let's add a border bottom. All right? Is gonna be two pixels solid. But then it is good to be transparent. Okay? And now let's add the transition effect. It's a transition. We're gonna change the caller. Remember, by changing the color to like a blue scholar, So we'll do 0.2 seconds and we shall ease out. There's going to be the effect. But also now the border color itself. That's changed the butter Coehlo. And this is going to be 0.2 seconds as well and then ease out also. Okay, so now let's go ahead and add the actual hover effects. There's going to be footer, dash, menu A and then on hover. Let's now add our effects. So the 1st 1 here changing is going to be the color, the actual color off the text, and this is going to be full zero b seven f f And then now the border call. Oh, this is what we are going to change. And that's also going to be 40 b seven f f Let's go ahead now, save this head back over to our blows up, Professor Page and that you go. So there you go. Now we have the hover effect when we hover on our list items. So that's it. For part, warn Germany in part to Bill. Will now go ahead. And our style, our social media icons as well as the rest off the footer. I will see you then. 66. Getting our Social Media Icons from Font Awesome: welcome back. So the time has common offers to add our social media, Aikens. But if you notice we're actually using what might look like images, but these are actually icons, all right? And you also notice that over here we do have Aikens on other sections as well, Like with the wire walk with us. You have X actions for the research field, the analyzed data, and so on and over here as well. We do have several icons for the services provided. So in this video, I'm going to show you where you can get these icons from. And this is the website right here. It's called font Awesome Doc home, and it's basically reps. American Get thousands and thousands thousands of icons for free. And let me show you exactly how you can get started with front. Awesome. All you need to do is basically just go over to the log in page them to show you Let me go back to front. Awesome. All right, so this is the actual first page that you would see. So you will see the start for free button right here. Simply click on start for free, and then you'll be acts to provide your email address. She recently coming here at your email address and then click on the Sand Kid code. Now, once you've done that, this is the kind of email you would receive. It's basically a way for you to confirm your email address and our begin to set things up. So just go ahead, click on to confirm your email address, and then you will be redirected to another page, and this should be the page that you're redirected to. If you don't see this page, just click on the stat link on the main navigational menu. And then right here, you will have to add a name for your project or your website. So you can either give it a you can either give it a specific name or you can just add the name of your website and then click on, create and use this kit so you will be presented a link. Let me just show you mine. All right, Now this is the one I got and this is the name right here. So you will see the link right up here. This is the link will have to copy and then paste into our index dot html file. I'm gonna go ahead now click on copy kid code. And then let's head back to brackets and in right here on our index dot html file, I am going to add a link right up here in our heads section. And there you go. So don't go ahead now and save so this right here this link is what connects our index dot html file to the front. Awesome website. But now, how do we display the actual icons? Well, let's head back to front. Awesome. Now let's see what they have. So let's just go ahead and close this. So from here, I'm just gonna go. I'm gonna click on the 1588 Free Aiken's, and this would should being goes to a page. So just as an example, if you wanted to display our Airbnb, we can click on Airbnb right here, and then you will see the code right here. You will see, I class it calls something like that. So this would be the code that would actually display this icon on our website. But we're trying to display the icon for Facebook Twitter, LinkedIn and dribble. So let's do this like I'm gonna head back in here and where we have the such icons bar. I'm going to search for Facebook. Let's search and let or C we're gonna have defend results. Okay, so we have 12 matching results, but we're just gonna go ahead and grab the very 1st 1 in here. So click on the icon, and then right here, I'm going to click on this link to copy the HTML. You can see it's been copied. So now I'm gonna head back to our index with HTML. Let's cool all the way down here and then but we have Facebook. I'm gonna add a new line and then paste the code. That's it. I'm gonna go ahead now. Save this. Let's head back. Trump goes up, Let's refresh the page. And there you go. Now we have Facebook down there. Let's do the one very, very quickly for Twitter as well. So we have Twitter and again we're just gonna go ahead and go at the very first want. So let's click on Twitter and we'll click on this link right there. Go back to index html. But we have Twitter pace that code. Save it. Head back over to ah, website refreshed the page. And there you go. So now we have Facebook and Twitter showing up. So what I'm gonna do right now is our positive video. And quickly add the ones for LinkedIn and dribble all rights. Welcome back. I'm gonna have to add the remaining icons for LinkedIn and dribble. And, of course, if I head back over to my browser, you can see that right now I have a LinkedIn and dribble displaying as well. So that's it. Germany Vendex video. Well, we will now finalize the styling off off, which saw many I'll see you then. 67. Styling the Footer Part 2: Oh, it is a ball come back to part two off style in our FOTA, and previously we've been able to add the content we have, ah, navigational menu but also have a social menu as well. So now let's try to get the footage to look exactly like what we have over here. And let's festival Tackett, the Social Media Aikens, and you can see the massive difference right decision menu over here is to the right, so we'll have to float the minutes of the right. But we also have to change the color off the social media items, increase the phone sizes as well. We'll have to remove the default list styling, but and also notice that when we hover on the menu items, you can see that we have a background calo that appears. And also we have some colors for the icons themselves out. Twitter and Linda, not blue dribble is read. Facebook is doctors blue, so we do have to try and figure out how we can get our many to look exactly like what we have over here so lit or start the process. I'm gonna head back to brackets, and that's what we have. We do have a class off social menu, so we can use that one to target our allies as well as our A tag. So let's do this. I'm gonna hit over two main don't CSS. And as usual, I'm gonna grab fota. Even though we're technically still designing the foot tall. Let's create a new section for our social media. So we'll call this. Ah, so she'll Food menu And OK, so but lenders make sure that we grabbed everything. We did not grab the Ford Slash. All right, let's come. But let's come down here and let's get this show started. So the first thing we're gonna do is we'll target the social many class. Let's open up our colleague braces. So let's quickly do this, as you might have guessed, will have to do some float in. So we're gonna flow this to the rights. Let's remove any patterns. So keep that that zero Ah, the list style type. We don't want any Lee styling, so all say none as usual and let's out some margin. We have seven pixels and then zero. All right, let's go ahead and save this and let's see what we have and OK, so fine. Right now the menu is to the right. Let's now begin to style the actual menu items themselves. So to do this, we're gonna head back over to brackets and let us stop. Or first, by targeting the ally ailment itself. So we're gonna say social dosh menu, and then l I and then you'll float them to the left so that they can sit aside. So flow to the left and then margins will add liberalism, margin zero and ah, let's go. We two pixels. Ah, OK, Now let us begin. Its I get the A tag. So we have social doctor menu a year and what we're gonna do here, First of all, let's add some Padden 10 pixels, and then it will also add the display of the in line block and then last but not others. We're gonna add a border radius off 20 pixels. Now we're adding the border videos because we noticed that over here, when we hope over on the menu items, you can see the circle appearing around them. So that's because the brother videos eyes in effect and 20 pixels get off. Or so let's head back Over here. We've added the pattern. 10 pixels we have display in line block. But then we also have a bottle. Videos off 20 pixels letters. Quickly. Go ahead and add the hover effects. Okay, let me close this one. So we have social dash menu a and and hover So they hover. Effect we have here is the background color and we're going to add that Ah, we have hashtag f a f a f a. Let's go ahead. Now save this and let's head back over here and see what happens. I'm gonna be first the page and there you go. And then when we hover on the menu items right now, you can see we have the white background apparent and they're so far, so good. But notice that over here the icons are much bigger. So we'll have to do some fund size. And keep in mind that these are not actually images. They are fond icons, so you can apply regular front ah, properties to them as you would to regular text so we can apply phone size, so I have to make them a little bit bigger. And we also have to add some color effects when we ho over onto the menu items themselves on the actual icons. But in una force to target the actual icons themselves, we will have to create a class for them, right? So letters duties like I'm gonna head back Teoh index dot html And then for each one of these icons, we're gonna add a class off icon. So let's add Icon for Facebook for Twitter. We'll add one for Lincoln as well. And then last Panelist will add 14 dribble. Let's go ahead and save cool. Now we can target the icons themselves. Let's head back over here. I will say Social Dash menu and then the class off icon. And now this is will begin to do the real style. Unser first and first is let us change the color and the value is going to be a a a a. A light. Next in here is going to be the font size. Now I know it's gonna be 20 pixels. So at 20 pixels, let's also add a line heights off 20 pixels as well, just for some good measure. And then we can also add a text align off center. Okay, let's go ahead and save this and let's see what we now have. Let's head back over here. Refers to Page and there you go. OK, so we're getting there gradually and notice when we hover on the icons, that still looks good. But then we also have to now add the change in the color effect. So let's do this. Okay. When we head back to brackets, let us know Kuwaiti hover effects for each one of them. So full can start by saying social dash menu and then a and then we'll say hover. Okay. And in duck icon dot f a dash phase book Dash F. This is what we're targeting were specifically targets in the icons themselves. Right? So remember that when we hover on, the icons were also hovering on the A tag. Technically, so we have to take it the a tag in addition to our icon classes as well. That's why we have these rather very, very long Thekla vision. So let's go ahead and do this. But just gonna add very, very simply will say the color here, we'll change this to three. Be 599 eight and there you go. So basically, when we hover on the Facebook, I can change its color from a A to this value. So let's go ahead and try that. Let's save this. Let's head back. Refresh and okay, we can't really see because it's dark. Let's quickly tried awful tweet up. Okay, let's just read it for you real quick, so just grab this. Let's copy there one Come down here, paste. Let's confirm the class for Twitter. It's actually the icon is actually f a dash Twitter. Okay, let's come back in here f a dash tweeter And then the call of value here is actually going to be 55 a c e. Let's save that. And now let us see if you will not is a change. There you go. There you go. So now Twitter is working properly. Let's concluded the same for LinkedIn and dribble so again, I'll just go ahead and grab this code. Just come down here, paste, Come down here paste as well. And let's confirm the icons for LinkedIn, it is F A. In fact, lenders grabbed us, I might forget, because my memory is really, really bad. So Linda's grabbed this right there. Head back to remain that. See, assess. And then right in here I am going to change this to F A dash wingman. And then finally, the 14 dribble days F a dash dribble. Okay, so let's do the one Aziz. Well, let's paste that. And Ah, find. So the 14 LinkedIn its value is actually 0077 b five and then the 14 dribble is going to be e a full C 89 Let's go ahead and save this. Let's head back over here. Refresh the page. And there you go. Awesome. Awesome, Awesome. However, we're not done. We still into air like a nice transition effect because notice over here we do have that very smooth transition effects. So let's do this, Okay? We're gonna head back over here, and then when we have the social media icon, let us add our transition effect over here. So we'll say transition is going to be color and and as usual, let's go 2.2 seconds and I wish I'll say, Ease out. And there you go. Let's safe. Let's head back, refresh the page. And now we have that nice easing effect. However, you might have noticed that the icon for Facebook looks a little bit different when we hover on it from the others. The others have, well, nice, rounded circles, as you can see. But Facebook is not quite as rounded. So what we can do in a situation like this is to simply provide a with and a height for our icons. Okay? And ideally, you want to go with the value of given the font size. Now, so far, we have given a phone size of 20 pixels for icon. So let's just do this like I'm gonna go ahead now and simply say height is 20 pixels and then with is 20 pixels this way. I'm sorry, Edna. Spill with properly with all right. So that this way, the border videos will now have on actual proper our circle of former Remember the body videos where here was 20 pixels. So by given our icons a height of 20 pixels with the 20 pixels and in the front of the train pixels, it is going to match properly. So let's save this and let's head back over to a Broza first a page and then Let's just wait for a few seconds. Let's come down here. And now you can see that Facebook now has the same hover circle effect, like with Twitter, LinkedIn and dribble. So to end of this video will still have to design the copyright. Tex and also add, are plenty of margins and patterns. As you can see, there's a lot of imagine and pattern between the two are menu sections as well as the copyright text. So the first thing we need to do, though, is that we need to fix a slight arrow. And that's because over here and I html file right here. The copyright text is actually inside of the day of class off, so it should be outside. So let's fix that issue. Okay, I'm gonna go ahead now and cut this and their levels pasted outside off the deaf class off road because it then is the copyright. Tex is stands a lone on its own. The death class of Roe is the one that holds the footer menu as well as the social menu. So if we want the foot a text to stand alone as it is right here, it has to be outside off the day of holding the food. Thai menu ended social menu. That's why all we are making this change. So let's go ahead now save. And then if we head back to the Poza, we should notice an immediate change. And there you go. So now you can see the full text is all by itself down there. So what do we need to change in here? We need to do some text transform. We need to align into the to the center as well, and also add lots of imagines and patterns. So let's do this. I'm gonna head back to remain that CSS. And then up here we have food. I'll just come in here and say Fu tha and then p all right. And then I'm just gonna First of all say the text transform. Let's just go text the line for a sex line to to send her and then texts. There's transform is going to be upper case or cable, but also going to add some margins and patterns. But let's go ahead and save this first of all and see what it looks like. Let's refresh and there you go, OK, So let's try adding some margins and pattern student entire content because notice over here, the foot on menus. Which how many did you have? Some margins from the very top itself, off the foot up. So what we can do is we can target the main Dave holding everything, which is the actual death class of content wide. So let's target this class. I'm gonna head back in here and then just after food, I will now come in here and say food and then dot content. And now this is where we can add some serious patterns. So there's going pat in. Let's go with 15 pictures from the top 20 pixels left and right, 35 pixels from the bottom and in margin for good measure will go zero auto, Let's save, and we should see some big improvements right now. The fresh And there you go. So that is pretty much it. There's there some slight differences in here, man. Maybe the the corporate text. There's a little bit smaller than what we have over here, but it's perfectly fine. I don't think we need to be. We going into Masters match this design exactly, but That's as we've been able to successfully design or build and install our food. We've also been able to get icons from front, awesome as well. So that's it for building and starting the foot. A German Avonex video bell will now add the remaining off our icons from front Awesome. 68. Adding the Remaining Icons: welcome back. So now it is time for us to add the remaining icons from front. Awesome! Now over here on a model site, notice that we have icons for the who. We are what we do but notice that they are green colored and then for services. We do have nine different Aikens, and they're all purple and color. And then finally, in the UAE, walk with us. We do have four different icons as well. We have one that's lightest blue, orange, green again and then read. So we need a plan and what we're going to do here is let's just first of all, create classes for each one of these icons, especially using their colors. And Dan will just assigned the hex a dismal values for those color properties. So here's exactly what we're gonna do. Let's head back of our two brackets. Let's head over to remain that CSS. And let's find a good place to add Aikens and all we can do so right here We have buttons. Let's just grab that. Let me clean up these empty space and, ah, we'll just go ahead now and add a new section, but we'll call these the icons section. So I comes and ah, let us do this. All right, so the 1st 1 here is going to be green. Okay, so let's say, uh I can and then a dot green so this particular icon will have the call of value and it is going to be eight c b are nine worn three. Okay, let's just go ahead and copy this'll. Let's go ahead and paste. Let's quickly change this to purple so we have purple and then the value off the purple icon color is going to be, ah, CC 72 and then f f Let's just go ahead in paced the room anyone's for are red, orange as well as blue. All right, so, as you can see, I've added there many colors for blue, orange and red, but notice there are two more properties that we might need to add. You might see the phone size. We can't really tell how big they are, but I'm gonna go to the four pixels for the icons. But I also noticed there is a little bit of some space between the actual text and in the icon so we can give this may be a margin right of, let's say, five pixels. So let's do this. Okay? The icons are actually inside of an H three tag. Let me just show you this really quickly. If we head back to our index of HTML are, for example, over here where we have the whole we are, you can see right now it's in. It's in an H three they What we do is in an H three Web development for the services is an H three. So these icons are going to be placed inside off our age. Three. Tax. So that's why we will come in here and at the very top. We will now say R H three and then space and then dot icon. I hope that no spell I can properly, so this will now have. First of all, let's give it a phone size and we'll go to the four pixels and then margin right off five pixels is go ahead and save that and all K. So how do we now this play the icons? Well, let's start with the very 1st 1 and this one is actually a chess king. I do like playing chess. I don't know about you, but I love playing chess. So to add the chest King, let's head of a back to front. Awesome. Let's go over to the icons page. And over here, we'll just type in. Ah, chess king. And there you go. So this is the one right here, so we'll go ahead. Copy this. Let's click on it, and we'll just copy the code to display it. Let's head butt head bug about your brackets. So it's gonna be where we have the who we are. This is very good at the class like day. But remember, we still have to add the class off icon and then green because it has the green color. Right? So let's go ahead, save this. Let's head back in here to our bells of interested Page. And there you go. So we can see an ICANN. But there is a bag run Kahlo covering its workability problem. Well, if we head back to our brackets, remember that up here where we have the contacts. See over here we also have the class of bottom. But then green, right? So where is in the exact same class fall? They get in touch button with the icon for the chest king. There is in the same class of green. And if we had about two main Nazi SS member over here, where we have green, we do have a background color off eight CB 913 So, basically, right now the icon is getting the background color from the class off green, which would give initially for getting towards bottom. So to avoid this kind of issue or just make a slight adjustment Ah, let's head buck over here we have going and we'll just say Let's go back to the original first Enciso. We have button and then green so we can just say button and then green for that particular property. Soldiers coming here, let's know, say are bought in and then green. So basically, any element that has the class off Bolton and Green should have the background color off HCB nine police. So any of that class with just the any other element with just a class of green will no longer have this background color. So let's go ahead. Save this a little, see if that changes anything fresh. Let's wait for a few more seconds. And there you go. Awesome. So now we can see the icon right there while the gettin torch the green Baghran is still intact. So that is an adjustment that we've made. Both remember that we also did something similar with the Our services that has the purple are back on Coehlo, and we're also going to be using the class of purple for the services I console. Let's also make that adjustment will head back of a two brackets. So very have purple. Will just also say, our button purple. That's it. Let's just save that and we should be fine. So what we need to do from here right now is to add the icons for our service, says a list. Let's just do want us an example. So this one right here is basically our code for Web development. So let's go back in here. Let's search for code and let's see what we can get from formed Awesome. And is this one right here? So it's basically just code. So let's click in here and let's see. I'm gonna go ahead, grab this. Let's head back to brackets. Let's go over to index of html. So let's do the one here for the Web development. Let's go ahead pace that but of course, will now add the class off icon and then also are purple. And let's go ahead, Save this. Let's head back to our bells over first to page. And there you go. Just like that. We now have the icon for a purple, so it's basically going to be the exact same, our process for all the remaining Aiken's. So what I will do right now is simply pause the video and add the remaining Americans to our page rights of any other men and icons for these services section, as well as the Why walk with us section and, of course, the remaining our icon over here, where we have the what we do. So if I take a look at my website, this is basically what it now looks like. We have all the icons right there, So if you're interested, you can easily just get the names of all these icons from the files of Shed with you the files for the website. You can just find the names right day and are simply copy and paste. However, we still have to add the ones for the testimonials. As you can see, we don't have had the ones right here. So let me just show you how to add one for the testimonial. We're gonna go back in here and we'll just happy in coats and ah left. Okay, so that will be the very 1st 1 before the actual court itself. So here it is, right here. It's called Left. So let's click on this one. And here is the code. So let's go ahead and copy that Now head of a back to brackets and let's do this again. Let's look for the testimonials section and Ah, OK, so it's right here. So we're gonna add this just right after the class off coat. Let's add that. But then this is going to be the icon classes. Well, don't forget after at ICANN class and then red as well, because the first coats are red. But then we also have to go. We're going to have to do some design as well. So let's add another class called courts, which we can use to may be odd to imagine and maybe even increase the font size if necessary. So that's it for the first cold. Let's head back and let's add the coat from the right so we can just say our coat right? So let's search. And of course, this would be the one at the end off the testimonial. It's the one right here. So let's click on court rights and ah, well, copy this and then we'll just do the exact same thing all over again. Let's come over here just before the Dev. We add that and, of course, will add the Eiken class, the red class and then coats as well. So let's go ahead and save this. And let's see the change that we now have. Let's refresh and there you go. OK, so we now have the red coats. All we need to do right now really is just to add some margin. As you can see, that's quite some margin between the Aiken and the text. So let's do this. We've already added the class off court, so let's head on over to Maine. That's ES says. Let's look for our testimony nails section. It is right here, so we can just say testy, more Nial and then we can add the class off coats and we'll just do this, okay? We'll just added margin and the values that have here are five pixels and 10 pixels. Let's go ahead and save this and let's refresh the page. And there you go, looking very, very good. So all I will do all we need to do right now is just to add the remaining codes for the green, blue and orange. I'm going across the videos visual and resume Once I have added them. Welcome back. So you can see I've added remaining codes for the three testimonials. And of course, if I head on back to the bells are refreshed the page. Well, there you go. We now have all the icons on our page showing up. So that's basically it for adding icons from funds. Awesome. Hope you enjoyed the video. I will see you the next class 69. Adding the Navigational Anchor Links: well come back. So at this stage, we have pretty much built ourselves a pretty good looking website. But now we need to also add Welcome back, sir. At this point, we've pretty much built ourselves a good looking website. We have all our sections. We have, ah, content design is intact and pretty much everything looks good. However, we can still improve the functionality of our side by adding some navigational buttons, especially the ones over here. Notice that whenever anyone clicks on these arrows, it takes them straight to the top off the page. So this is a great way to enhance the user experience on a website, especially on pages that are very, very long, like the one that we have over here, so rather that the user having to school old way to the top, they can just look on these buttons and it will take them all the way to the top. So we need to create something known as and called links. Basically, we need to quit an uncle somewhere around the very first section in here so that whenever anyone clicks on this hours, it will take them to that ankle. So we need to create the uncle up here and then link those uncles Lynn that uncle, either to all the navigational hours that we have in each section, As you can see. So let's do this is this is gonna be a little fun. Let's head ahead on the voter brackets. And the first thing we're gonna do right now is to create some space for the buttons to up here. So let's do this. Okay, Let's go ahead now and add the very 1st 1 here too, where we have the idea off about. In fact, let's do this one for the services first. Okay, I think about this a bit too close to the top. So let's go on section for that. Down to the services. All right, so we're going to do this. I'm gonna add this new a tag because, of course, it's a Linda, but clicking on So we have to use a tax, so I will say h ref equals we'll add coats for now, for the actual link is gonna be the uncle in Baltika. Look at that a bit later. Let's add a class because we're gonna do some styling. So let's call it button and then to top. So it's basically bottom to the top. And now let's create a span that will hold the actual content itself. So span. And then we can say class equals. And then we'll just call this. Ah, Arrows! Arrows up! Okay, I was pointing upwards and that is it. Okay, let's go ahead and save this All K. Now we need to go ahead and display the Avalos. The hours that we have over here. Now, to display this, we can use something known as a CSS NTT. And of course, in here you can see we have so many different kinds of entities. All this symbols your sin Over here. These are the entities. And then these right here are the codes with which we can use to display the entity. So the one we're looking for specifically is the I'm trying to see where it is. Okay, so after spending nearly five minutes, I finally saw it. Is the one right here? The 00 B right point in double angle quotation mark. Now I know that over here they're actually pointing upwards. But if it is, we don't have an actual entity that does that. But we can apply to use of some CSS to turn the else to point upwards, so I'll show you how to do that. So let's go ahead and simply grab the code. So it 00 BB. I think I remember that. So let's do this all right. One thing you should also know before continue is that display entities. You can use the content, the common property to display them. However, the content purported would only walk on pseudo elements like the before or after class. So as a result, we need to do this. I'm gonna head back to brackets. Let's head on over to Maine that CSS and lentils creates a new section. I think just on the buttons Let's do this like I'm gonna come in here and I'm going to say , Let's add the new section first and I will see instead of buttons. I will say, Ah, arrows up. Okay, and then Ah, button and then space and then arrows. And now we'll add this low class off before let's open up our colleague braces, and now we'll use the content purposely to display the entity, and we have them in coats is gonna be backward slash and now 00 BB. So this is exactly how you can display a an entity content. So you'll have to use a pseudo element like before, after and then simply use the kind of property for slashing, then the value off that particular and let's go ahead. Now save this and let's see if I notice any change and ah, OK, so it's right here. You can see it is right there. So that is the entity, this plane. But somehow be no need to get this right over here to the right off our age to tax off course. This is where some CSS styling is going to come in to play. So let's does I'm gonna head back over here. Let's create some space just above here. So we're going to target the A tags holding the hours. And of course, the eight I care is the our bottom to top class. So we're gonna come in here and I'm going to say butts in and then dot top I would say to a top and now let us begin to add some style. And first of all, let's just add the collar. Okay, so they call here is going to be 555555 We do have a background color, so let's add that one as well. And when I do have you is just pure whites. It's F f f f f f. Okay, let's also add some padding as well. So we have five pixels. 12 pixels. Do you have five pixels in here and then to pixels? Oh, cape and last Panelist. Let's add a border radius off three pixels. Okay, let's go ahead and save this. Let's head back in. Here refers the page and there you go. OK, so it's starting to look better. But now how do we get this guy over here to the lights? You should be thinking of the position, property and specifically the value off AB. So looks will have to use the app slipped property to get this over there to the right. So let's head back in here. Um, I'm now going to say position is going to be ab so lute, and then we'll simply save ICT actually, much about the value off. Right? Yet bullets go with maybe 10 pixels and then We'll see. Okay, let's go ahead and save this. Let's come back in here first a page and there you go. OK, so it's right here. So we do need to maybe push it a bit further to the right, and then also we can say top zero. Now it's a good thing that if you notice, is the Dev hold in the class of content. We've already given it the value off relative for the position. That's why we're still able to see the entity right here. If we removed this veil of position, you could see right now that it simply begins to go outside off the borders. That's why usually it's a good thing to just add personality for your content. Dave's just in case you want to walk with any elements inside of those Dave's that might have the position off ab so lute. So let's just go ahead now and make a few changes. I'm going to use the inspector to light here, too. I see. So let's come in here and let's say white, 20 pixels instead, and then we'll say top off zero. There you go. That looks much, much better. I feel All right, So let's do that because we're gonna have right 20 pixels and then top off zero. So we'll save rights 20 pixels and then to the top, we have zero as the value. And then let's also add a border. So is going to be one pixel solid, and then the value off our d five d five d five? That's going to be the value. Okay, let's go ahead. Now save this and let's see what we have refers the page and OK, so there you go. All right. We need to make some more changes. Notice that the hours are pointing or pours the a bit bigger and they do have some pattern as well. So we do need to fix that. So let's head back in here, we're gonna do is we'll have to take it specifically the class holding the entity, the hours and that's going to be Hispanic class over the travels, right hours. So let's go ahead and do this. I'm gonna add our new clothes down here button and then Avalos. And now we'll add the very first property in here, which would be the fun size. Now I know the phone size here is going to be 28 pixels. Okay, let's go ahead and save that. Let's take a look at what we now have. Refresh the page and there you go. Okay, So is looking bigger right now. But this the temer's now come forced to do some transformation. So we need to figure out a way how we can go take the arrows so that the point upwards now there is a property known as the chance from property specifically for such, however, note that the transformed property Onley walks on select in line elements like images. You can apply the transform property on images. No problem. Both for entities regular text, you will need to display them as an in line block before the transfer property can work. So let's go back in here and let's first of all, just say display and then in line block. Okay, let's save this. Let's head back in here. Let's just refresh. And now we'll make use off the inspect tool to do to do the transformation. So check this out like I'm gonna like looking here, go to inspect, and then right here, check this out again. I'm just minimize that this a little bit. Ah, Drugs over here. Drink this one right here. Okay, so this is the class, but I get in right here, so I'm going to say, transform, transform. And now we're going to rotate, so it's going to be rotate. And then inside we can now add the degree off the rotation. So in this case, right now, we can go with, let's say, 45 d e g. So now you can see it is rotated by 45 degrees. Now it's pointing kind of diagonal down. All we could have gone with maybe 90 degrees instead. Now is a point down. What's completely? Oh, we can just go all the way to to 70 degrees. And now it is pointing upwards, as you can see. But another value we could simply give instead of to 70 degrees would be negative 90 degrees. So this would be like the anti clockwise movement. I think I'm sorry. I'm very bad at math, about 2.2 hours or project, and you go with to 70 degrees or negative 90 degrees. So that's like that's exactly how you can transform your entities so well but isn't inspector? Let's also try to add some additional CSS to make this look really, really good. The first night will do in here is to add a line height of, let's say, 20 pixels. Okay, so it looks a little better. We can also disorder, known as the vertical our line and then middle so that the hours of position in the middle off their borders and, ah, what else can we do? We can add some monster. And I think, let's try some margin left. Maybe. Let's go to pixels. Actually, let's go a little bit more. Five pixels. I think this looks fine. Yep, I like I like what we have in here. I do. I do like this. All right, let's go ahead. Actually, five pixels is to be too much. I'm sorry. I'm actually doing his real time, so okay, I think three pixels looks Ah, more like it's now are lined right there at the center. So we'll go in. Margin left are three pixels s. So let's head back in here and let's do this right. So I'm gonna say transform and of course, is going to be rotate. And then in brackets. So we do have negative 90 degrees, and then we do have the margin left, which was three pixels line height. Let's not forget the line hideout, we added. And I believe it was 20 pixels if I'm not mistaken. Lisbon, always. We do have the vertical align middle. Okay, let's go ahead and now and save this head back in here. Refers to Page and there you go. OK, almost there. Almost there. Two more things we need to do is we do have the hover effect in here, as you can see. So let's quickly add the over effect. Let's head back in here and we'll have to target the class. The A tags are holding the hours, so that's going to be the baht in our two top. So let's come over here and ah, all right, so right here. I'll just say, Ah butts in and then to top and then hover. So we're going to do very, very simply will be to change the border color so it's going to be border Coehlo and then developer. Having here is the full zero B seven f f. And then we can also add a box shadow just to enhance the effect. So develop your 0001 pixel and then you can also add the exact same color. Oliver again. 40 B seven Ah f f Let's go ahead and save this. Let's head back in here. Well, first the page and voila. So now you can see we have that nice over effect in there. But now the question is, how do we create the ankle so that when we click on this arrow, it will take us all the way up here? Well, what we need to do is to create the ankle, some around the header section. Okay, so let's head back over to pockets. And my tone index of HTML will use the head out tag because this is the tag basically holding the menu items and the local. So this would be a good place to add ankle. So I will say I d equals. And then I'm simply going to say, Ah, home. That is going to be the idea off the ankle. So now to link this ankle with our A tags, I'm gonna come in here and you have the h ref. I will simply say hash tag and then home. So this now will link toothy ankle. Let's go ahead. Now save this head backdrop blows our refresh the page and never come down here. And I click on the arrow. You can see it takes us all the way to the top. So all I'm gonna do right now is just to simply add the remaining are ankle links on the page so well, come back. And as you can see right now, I've added the remaining ankle length. And of course, when you click on them, it will take a straight to the top off the page, and that's pretty much it. But I do know that over here on the model side, you can see that the ankle is very, very smooth when it scrolls up. Ours right now is just instant. You click on the link and it goes all the way to the top soap. We need to figure out a way how we can make the movement very, very smooth. What we have over here so German event exude over will now finalize the enhancement off are ankle length. Thank you for watching 70. Adding Animations: well, comebacks. In a previous video, we successfully added the navigational arrows for our different sections. But only thing now is that when we click on those arrows, the navigation of the school in back to the top of the page isn't smooth. It's not like what we have over here is an example. You see, when I click on the I've always sees its schools all the way back smoothly. But over here it's instant. So we need to fix that. But also notice that when we hover on the image right here for the logo, it spins around like the wheel of fortune. Right? But Oz does not do that. So in this video, we're gonna fix this to issues like we're gonna add a very smooth scrolling behavior for our navigational Islas. And then we will also add some animation to our local that's handle this cooling future first, So it's very, very easy. All we need to do is basically target the html tag because we are scrolling on a page, the hours schools on a pizza. Basically, you're not targeting one specific element. You basically take it in the entire page because your schooling open down. So we're going to target the HTML tax Lester's. I'm gonna head over to brackets and then at the very top at the very, very, very top Bordeaux. Say html okay, and then open up the college braces. And then the property here is going to be called a school behavioral. Auto is the default. But now but similar. Going to go with smooth. Oh, yes, smooth operator, Let's go ahead. Now save this. Let's head back to oppose our were first a page and now you can see the school in effect. Yes, it really was that simple. I'm pretty sure you are probably thinking, Oh, it's going to take quite some amount of code for us to achieve this effect. But, hey, it was only one line, and that is it. So successfully added the cool school in effect for our navigational arrows. But now what about the local? How do we animate the logo so that it would Tates when we hover on it to animate the logo, I am going to have to introduce you to a whole set of new sisters properties that deal primarily with animation. Now they're similar to the transition purported of Wilfredo walked with in the past, But now it's gonna be purely about senses animation, and I am really excited. But before we get into that, what exactly happened? So when we hover on the logo, it is supposed to rotate about. So obviously we know now should create the class off hover when the user, you know, hovers on the on the image it should now will take. So let's first of all duties, let's go back to a brackets and let's look for the logo section, and I believe it should be around here. Okay, so here it is, right here. So let's just add it. Just blow brand. So what we're gonna do is we're gonna see brand on the class of brand and then hover, and they will not say logo the class of logo. So here is where the magic happens. A light. The first I'm gonna say is the animation name. You have to give your animation a name or it could be anything in my case, because we are spinning the local, all those cool. It's pain. Okay, that's gonna be the name of our animation. But now we're supposed to provide the duration. How long should the animation take before it starts and then ends in alleged total duration ? So I'm going to see animation duration. In this case, let's go 1.2 seconds. Okay, then we also have this one known as the animation Timing function. Basically, it's a semis transition where you have Lini A. You have easing ease out is basically you're dictating the speed of the animation from start to finish. We want asked Gilenya, so it basically starts with the same speed ends with the same speed, right? But then there's also another property, which is the animation. It's oration count. Basically, we're saying How many times should the animation repeat itself in our case is going to be infinite because let's go back in here. You can see right now, as long as the mouse is holding on the logo, it just keeps on spinning and spinning and spinning and spinning. So it's infinite, right? So that's a Bible chosen, the infinite value. Let's head back in here. So these are the full values that we are going to be using. However, just so you know, we could even shorten this, but I will show you how to do that I want so I don't With the animation, let's come all the way down here. Let's creates just in new section And we can call this the animation section. This is where the real animation all kicks in. So let's change the name here too, on a mission. And OK, now the property I'm gonna introduce it's you is an extremely powerful property known as the at key frames property. With this property, we can indicate several animations that the element is supposed to go through from start to finish. It is extremely powerful, so check this out. Okay? I am now going to indicate the name off the animation, which is spin. So another for key frames to walk, you need to have a name for animation with ready provided it has spin. So I have Spain curly braces. And now check this out. All right, we can first of all indicate at times I'm gonna open up. Another set of calibrates is bare with me. Okay, so inside the first in our colleague brace, we can indicate the start. Okay, in this case right now is going to be zero percent this is one way off, indicating to starts with physical stain at the very beginning, right? What we're gonna do right now is we're going to transform the logo. Bear with me. We'll rotate in, but start from zero degrees. Okay? Basically all western right here is that when we hope over on the logo and some of the hobos on the logo begin to rotate it, but start from zero degrees and then statue, rotate it. Okay, Now that we've indicated the start, we can now also indicate the end. In this case, right now, it's going to be 100% which is basically now at the very end. And then we'll know, say, transform. It's going to be rotate again. Bore Now, by the end of additional rotated by 360 degrees. I really hope this makes sense. Basically, always right now is that at the very very start, at 0% when the user hovers on the mouse statue, rotate but start from zero degrees and then by the end of the rotation usually have transformed by 360 degrees. That's exactly what this has. Don't fall horse. So but all waste any more time. Let's go ahead now. Save this. Let's head back in here. Refresh the page And there you go. Now the logo is rotating and it is infinite. So to Bennett, explain this. Let's give. Let me give you some older examples. Okay, let's head back in here And just as an example, very, very quickly. Let's play with the situation a counter, right? So let's just change this one might say the infinite. Let's go with three, for example. Okay, so the animation will repeat itself three times, so let's refresh. And now we have one, two and three. There you go has after the third time it stopped. So let's also make another change. Instead of like zero degrees, we can start with maybe 45 degrees and then end. Let's even say to 70 degrees, so you will now see that the logo that will know Tate fully. Let's refresh. So now you can see it's not quite rotating fully. It stops the to 70 degrees. As you can see, it's doesn't 45 then stops a to 70. And there you go. So it's not just the rotate function that you actually have a transform. You can do other ones like skew scale. In fact, let's do scale. Scale simply means that you're going to make the local. You're gonna make the image big. Then there are different kinds of skill as well. Let's go with the three D so from three dimensions let's go with scale by 1.2 ah two. And then let's say too. So you gonna scale 1.2 on the X X is to y exist two and Z exists. And then the same thing here as well. Let's just do the same thing. Scale. Ah, three D But now let's say ah, 0.52 and then Ah, 0.5. This is gonna be insane. Actually, have no idea what I'm doing. Let's go ahead and save this. This is going to be a vein, a crazy kind of animation. Let's refresh and ah, well, there you go. That is the animation right there, in effect. So all the really encourage you to spend some time and check out all the kinds of transformations you could do. You can play on the animations and oh, before I go, let me show you very, very quickly The shorthand for writing your animation properties. So let's head back over to our logo and ah, it was all right. So it's right here. So the way how you can shorten this very easily would just be to say animation. Okay, this will now be the property itself. Animation, you start with name off the property. That will always be the very 1st 1 And then we can see Ah, one 0.2 seconds. Because that this, of course, will be the our time in duration. And then we'll know, say linear, which is going to be the time in function. And then finally, we're gonna go with infinite because that is going to be the situation count. Infinite. There you go. So this is the shot shorthand way of writing your animation there, of course, the Mother nation properties as well, but are not going to get into that. So, Linda scroll down here and changed the values here back to what it was. So we did have the rotates and we had zero degrees, and of course we had what state again. And we also had this at 300 and 60 degrees. All right, that should do it. Let's go ahead. Save head back, Teoh. Bills up refers the page. And there you go Now to give you one final example before around off this video, I have already gone ahead to create a very special empty Dave classified here called our Sample. This is just to illustrate to you what's possible with animations, right? So I have this divide here called Class of Sample. And then right here I couldn't the key firms and I called it colors. That's what you now have the animation name right here of colors. But now take a look at this. Okay? I have indicated the different kinds of animations that the others particular Dave has to go through. So the very start, its background color is red. And then, about 1/4 of the way through the animation, the bag ankle should change to black after another quarter, which would be halfway the curtains to blue, 3/4 of the way it turns to orange. And then, at the very end, is your tongue back to lead. So right there, you can see the additional properties have applied with a 100% so that the Dave occupies the full with off the page, head of 100 pixels. Added position relative. I give you the bag and cool off red as well and invited. The admission division is six seconds, but then they also add edit and animation delay off three seconds, so basically three seconds will have to elapse before the animation actually starts. That's what the animation delay our property is. So let's take a look and see what's gonna happen right here. I'm going to refresh the page. Let's call up and let's do it over again. So So let you can see. Now it has started. You consider it. Now it's changing. It's changing back to orange and are finally back to head. Let's try that one more time. So it starts at Weird and Mission Division of Three Seconds has elapsed, not animation, starts black, blue, orange and finally back to it. So this is just an example of what you can achieve with the animation property off CSS is extremely powerful. You can combine different types off properties as well, so you don't have to stick with just the back on Kahlo. You could if you apply this, for example, let's say our text, for example, you could change the phone signs to fund Wait the line height all at once are using the animation. So I really hope you've enjoyed this video we recovered, says animations. And also we added the smooth valid for the school behavior property. So that's it. Thanks so much fortune. I will see you in the next class. 71. Adding Filter Effects: welcome back in the previous video is successfully added these school smooth effect for our ankle links, and we also were able to animate our logo. But if you paid very close attention, you might notice that over here on a model said when we hover on the logo, there is a little bit of a blood effect. You see, right there you see the image you can see very, very clearly. But then when you Hoffer on the image right now, there is a small, little blurry effective right there. Ours, on the other hand, or there is no blow. It's clear all the time. So what I want is a bit of a quickly is to show you or introduce you to a new property known as the CSS Filter property, where we can add things like blood effects, brightness, contrast and so on. So let us do this. I'm gonna head back in here And unlike here where we have the hover class for the logo, I will no se filter. And that right there is the property. And then we have different values for filter. In this case right now, I'm gonna go with the Blur one pixel that will be the value one pixel does. Go ahead, save head back in here refers to page, and now you can see that blood effect right there. So that's how you can achieve it. Blood effect with CIA says. But of course, there are other values available for filter up. So, for example, let me go ahead and remove the blur and let's try something else. Okay? I can cause I can say brightness and we can give a percentage value in here. Can see isn't like 200% just as an example. Let's go ahead, save this, and then if I head in here, refresh the page and that you go against. The image now is 200% more brighter than it was initially. You can do other things so you can combine by the way you can combine value. So let's be brightness. I can also say blur and then our one pixel, So all you need to do is just add a space between your two different values. Let's go ahead, save this, and now we should see multiple effects. There you go. So now it's 20% brighter, but it's also blood as well by one pixel. Another very interesting value could add in here. Let me move. All of this is going to be grayscale. This will actually turn your cold image to black and white. So if we say 100% right now, they will turn black and white ones. We hover on the logo and there you go. I'm telling you, CSS is amaze. And you would think that you would need some very advanced code to achieve all these effects. But you don't. There you go. We now have that at 100%. Actually, I'm Chris to see what will happen if we are brothers down to, let's say, 50%. I'm curious. Let's go and say this and see what will happen. Let's refresh And OK, so that's 50%. Not bad, not bad at all. So let's go back in here and just make the change back to what it's supposed to be. So that's filter Ah, blur. And then, of course, are worn pixel. And let's go ahead and save that. I just hit back in here. Refresh and there you go. So that's how you can create additional effects on your images using the filter property. Thanks so much fortune. I will see you in the next class 72. Project Section Review: Well, so that's what we've come to the end off this project section, and we have built our cells. This full worn page were upset with HTML instances, and I hope you had plenty of phone, and I hope you've learned quite a lot about HTML and CSS. But there is one thing we still need to do, and that is we need to make the site responsive right now. It looks great on deck stops, but when you view this website on a mobile phone, or maybe even on the table, it you might discover that things have been quiet as they seem. You might see a lot of columns, this joint head. Maybe some Texas would be too big. It's not gonna look quite as good. So we need to tackle responsiveness. And that's exactly what we're going to do in the very next section. I'll see you then 73. Responsive Design Section Preview: all right. Just a welcome officially to the responsiveness section. And our goal here is to ensure that our website looks just as good on tablets and mobile phones as it does on a text up. Now, on the Dexter, it looks fine. Everything looks perfectly fine as it is. But the goal here is when we begin to minimize the screen size. So, for example, right now, just on here, this would be the typical squint size off a tablet and you can see right now. But stand to see some changes. We can no longer see the navigational menu, but now we have the traditional hamburger menus. When you hover in it, you now have access to the items in the main menu. And if I begin to school down, you will notice some changes says provided Now is now two columns before it used to be three by walking. Those is now two columns of the team is now three columns and so on and so forth. And if I go all the way to the end to the small screen size, this would be the one for a mobile phone. You can see the lots of Changes, says provided is now one single column. Why Walk With Us is also a single column that the team is now two columns. Our testimonials is one single column. It's always been one single column are cleanses now. Two columns are supposed to four columns on the next up and, of course, some changes in the future as well and on the header. So the goal here is to show you how you can make your content adaptable so that when the screen, the menaces of the screen, changes the content. Also, the size of the content also changes the structure changes to reflect that are changing the screens that that's the whole point off this entire section. So sit back, relax, and I hope you find in this section useful. Let's get started. 74. Introduction to Mobile Responsiveness: so welcome to this new section. Will will be taking a look at mobile responsiveness and before we start doing any code and let's take a look at what we currently have. And right now this is exactly how the website would look like on a tablet device. And let's try to scroll down. So far, the head. It looks fine. We have a logo. We have the main menu. It's OK. The hero section is fine about our section is still fine. Services provided is okay. The why with my book of those section. I think we can improve this by maybe displaying. Two columns are supposed to four columns. Ah, simply with maybe made the team we can make Mitt The team are three columns as opposed to four columns. Testimony also looks fine. Clients still looks OK. Contact us fine. Let's keep going for the down. In fact, let's just go all the way to the small screen size. So this would be for a mobile phone and right here the photo. You can see that we do need to make some changes in here. Let's go all the way up. Yeah, our clients, we can definitely improve here by maybe displaying the logos on two columns each as opposed to the focal ums that we have in here. Testimonials actually looks good by default. I don't think we need to change anything for the testimonial that. But that's because we already displaying the testimonials on single lines themselves. They're just one column are won't go as opposed to the other sections that have, maybe, like, two columns, three rows and so on. So definitely up. Sorry about that. Definitely meet the team. Will need to be improved tremendously at the mobile. Our screen size. You can see right now. This does not look good at all. Let's keep going up. Yeah, I walk. Those looks terrible. The sensible fight. It also looks terrible as well. So probably here will have to display two columns. Or maybe even one single column will have to wait and see. Yep. Ah, who we are. What we do will have to be single columns as well. And off course, the head. Ah, well, we'll have to make some major improvements in here. Mostly the menu, as you can see. And this, ideally, is what it should look like. So you can see. Right now we do have the menu, and it just only appears when we hover on the menu item, you can see right now you can see all the are many items up here. Let's scroll down and see what else we do have so you can see how they about all section is who we are, what we do. So services provided you can see right now is an A single column. Each so looks much better that way. Same with why walk With Us made the team is in two columns H and testimonials and clients. Consequences in two comes as opposed to the four, and the rest remains the same, so those are the improvements will have to make. But before we jump into the actual coding, let me show you how you can add your screen sizes. 75. Creating the Break Points: well, come back. So let's now talk about the screen sizes, how we can target the squints size for a tablet and also how we can take it Is queen size for a mobile device? A phone? Basically. So we have this thing called brick points when it comes to CSS responsiveness and a break point is defined by when there is a major our style change. So what I'm saying here is this OK? At this point right now, everything still remains the same, right? Even if I scroll down, you can see that the content is pretty much the same to structure. It's pretty much the same as it were at full size. But then if we keep on minimizing the screen size and then it gets here. So around here, just where you have the Hamburg, Germany, up here, this is what we call a break point. This is the particular screen size where a new design change kicks in. And you can, of course, that the change would now have a hamburger menu. If we scroll down, you can see right now that sensible violet is now basically two columns in each row, and you do have some other changes in here as well, with white walk with us and the team. So that is what we call a brick point. So what we're gonna do it says responsiveness, is that we're going to indicate that, Okay, once the screen, which is this screen size, initiate these new design changes and then if we continue to minimize the screen, let's keep on going. Just keep on going. No change, no change, no change. And then all the sudden around here, there is another big one, because now you can see sense provided isn't one single column as well as some other sections in here. So there's gonna be another break point. So ideally, you should have a minimum off two break points. One would be for your table. It's queen size, and then the other would be for your mobile phone scoring size. But you can go its highest three, or maybe even for our different break points. It all depends on the kind of content that you have and how it looks like. So here is the Faneca. Let's go ahead and add the wafers. Break 0.4. It's queen size around this particular range which is about 1000 and 24 pixel. So let's do this. I'm going to go in here. Let's go to Maine to CSS. Let's come all the way down here and I'm going to grab. There's content because we're creating a whole new section. I'm gonna pace this and then we can call this. Let's just called is the uh, mobile letters called his responsiveness, Instead, responsiveness. And now let's could in new line. And here I am going to say, Let's add a new comment. Ah, fourth slash hysterics and now I will cold is the tablets breaking point. All right, so another hysterics four slash And now here is the actual code to create a break when we're going to say at Media and then on Lee screen, and we're now going to sit in the max with. So as long as this content is viewed on a maximum screen size off 10 24 pixels initiatives , new changes, I will have to add the college braces right there. So that's it. We've created the very 1st 14 table it, but now we can do the exact same thing all over again. Solyndra's copy everything in here a copy Come down here paste again and then changed tablets to Let's go with our phone. And now in here, we can change the screen size to 768 pixels. Now 10 24 pixels and 768 pixels are kind of like the standard screen sizes are a smaller screen size for than 76 It would be our 4 80 That is, if you want to go that. I think that's really the minimum screen, says one can actually target for 80 pixels. But for the purposes of this cause, we're gonna create two break points, which would be 10 24 and then 768 pixels. So this would be for Taylor devices. This would be for the phone, our mobile device. So that's it for creating are breaking points. German Advantix Video available now begin to applying some responsive design changes with CSS 76. Creating the Mobile Header Part 1: well. Comebacks in a previous video is successfully created our break points for our mobile design. So now let us begin to create our CSS changes for responsiveness. And the first time in a target will be the mobile. Many, which is usually are one of the more difficult parts off amable responsiveness. So this right now is how the many looks like it never changes board Trying to do is to get the many to look exactly like this. So we have three bars. And then when we hold on those three bucks, that's when the menu items now appear. But also note that at full screen size we don't see those bars. They're not there. It's on Lee. When we get to a set in screen size, that is where it's around here. That's where the three bars appear, and then the regular menu disappears. So how are we going to achieve this effect? Well, first of minutes do right now is to create eight these three bars. Let us create them first of all. Okay, so here's what we're gonna do. Let's head of look back to maintain CSS and we're gonna do is let's head over to index dot html and then right here. Ah, just beneath the naff class of men. You This is where we'll add those three, boss. So to do that, check this out. Like I'm going to say Dev class. And let's just call this. Ah, let's call this handle. Okay, you can call this handle. That will be the name for hamburger menu. Basically, let's go ahead and close that. So now inside off this class of handle, they're going to add three dibs. Three empty lives, in fact. So let's do that. So it's gonna be the 1st 1 the 2nd 1 And, of course, 1/3 1 Because we do have three. Boss, that's what we have three empty lives. So let's go ahead now and save this. And of course, if we had back to our Broza, we are not going to see it because it's empty. There's nothing that you see. So let's head back to Maine that CSS and then from here, let's go all the way to the top and let's look for the menu section and it is right here. So let us do this. Okay, let's go ahead now and add some styling to those empty dibs. And what exactly are we trying to accomplish? Well, let's take a look. Okay? This is what we're trying to accomplish. So each day of right now, as you can see has a background Kahlo. It seems to have its state set with a set height, and there's also some margin to separate the three lines. So let's do this. Okay? First, I'm going to say, here is let's target the menu and then dot handle and then the div. All right, so we're targeting the empty dibs now. So the first profitable ad is going to be the background. Kahlo and I do have my Bragan color here set to ah E five c five e five. And now we have a with each. Dave has a width of 22 pixels and then very short height of two pixels. And then let's also add some margin, five pixels and zero. Okay, let's go ahead to save this. Let's head back to our Boza. Let's expand this. Let's refers to Page and there you go. OK, so for some reason, this goes full with not sure what's happening. Let's head back in here. Oh, I'm sorry. I did not spell with properly. Ah, yes, that this is the kind of thing that happens when you code. And we called videos at the same time. I apologize. So with 22 pixels, let's head back in here. Refers to Page and there you go. Okay, so now you can see we now have the hamburger menu apparent. Awesome. But we need to get the ID. The many items over here to the right. We need to get the menu over here to the right. So obviously, right now, you should be thinking off float. So we're going to flow the menu all over to the right. So let's do this. Okay? I'm gonna head back. Two main that CSS. But now we're going to target the main Dave hold in the three dips. And of course, that's going to be the class off handle. This is the class. We're going to float to the light. So let's do this right here. I'm going to say menu dot handle. And then right in here, just like that, I'm going to say floats to the lights. Okay, Let's go ahead. Save this and let's see how it looked like refresh. And there you go. Okay, so right now you can see it's over there to the light, but we don't want to displayed yet. So we want to hide the menu. The hamburger menu Until the scrimmages, the screen size for our tablets will have to use something like this. Play none. But we're also going to use position relative because we're going to position the menu items. These many items begun to position them, absolutely. So we'll have to create an ankle points. All we can add the hamburger many personality of and make this the anchor point for the least items. So lessons I'm gonna head back in here. So I'm going to say this play none to hide it. And then let's add position for relative because we're going to create. We're going to use it as an anchor point for our menu items. Okay, that's that handle. Now let's go over to our responsive section and then right here we will now see where we have to 10 in football now see, display the menu handle as a block, so basically doing the opposite now because right here this will control the view for the mobile device for tablets so will simply say Block, So essentially went there were saying, Wants the screen, which is a maximum with attention for pixels, display the handle displayed as a block. Now note that unless we come in here for the phone and then overwrite this particle up style, whatever styles we include for the letter screen says, will automatically be inherited by this small ass coincides just so you know. So there is no need for us to come in here and also at the exact same thing. It there's no need for that. So let's go ahead. Save this. Let's head back in here. Let's refresh. And now, if we men minimizes queen now, you can see we do have the menu appearing right there. You can see it's now apparent awesome. However, we now need to get our main menu to kind of float under the hamburger. Many kind of like what we have are over here, as you can see. So the thing is right now, the only reason why we have the many items many items by default are block items. But the only reason why they're displaying there's a land blocks is because we do have the our float applied to them. You see, right here we have float left. So if you remove float left now, you can see there now appearing as they shoot. But we can also apply the property off text align, right as you can't, as you can see. So now we're stand to look exactly like what we have over here. The list items, but the text are lying to the light and then no floats. So let's go ahead and apply those changes in here. I am simply not going to say menu and then Ally, and then we're going to say float. None. But Daniels also have a text align to the right. Let's go ahead now Save that. Let's head back in here. Let's refresh the page. Sorry, long, long page. Let's refresh this page and there you go. Awesome. So now we have our menu items looking like block items, takes a line to the light. So all we need to do right now is to figure out a way how we can position them to appear just on the Navy hamburger menu. But then Onley appear when we ho var on our humble got menu. So we'll tackle that in Vertex video 77. Creating the Mobile Header Part 2: welcome back to part two for style in our mobile head. Also impart warn, we've been able to do some good work So far, we've been able to get the hamburger, many to display only once, it which is a screen size of 10 24 pixels as it is right now on tech Stop, it's perfectly fine. But then, once we get toothy, are tabled view. This is what we currently have. So what we need to try and accomplish right now is figure out a way how we can hide all the list items from showing. Basically, we're going to have to talk it under the hamburger menu and then Onley show them when we hover on the hamburger menu. So, like I hinted in a previous video, we've already made the hamburger menu position relative because we are going to absolutely position are least items. So let's first of all, do that. Okay, I'm gonna go in here and invite here. Let's see, just above in here, I'm going to say dot menu and then you l okay, and now let's just say position is going to be app salt. Okay, let's go ahead. Save that. Let's now see the change. Refresh. And there you go. Okay, so now you can see that it is positioned. Absolutely. But then you can also see that it's basically now going outside off. It's borderline for elementary. And open this up a second. So right now we have to scroll down here to the white in order to see them. So the way how we can ensure that they don't go outside off the border for the humble government is to simply save light zero. So let's do this. I'm going to go back in here. Two main that ceases and invite here. I will save right zero. So this will lock the absolute position items within the border. Let's go back in here with fresh. And there you go. Awesome. So now we have the menu items, Absolute position right there at the border, off the hamburger, many awesome. So the next step right now would be to figure out a way how big can hide the many items and then Onley show them when we ho over on the hamburger. Many so we can do this. All right, let's head back in here so we can say the right here. But we have our menu ul. We can just say this play none. Okay? And now we can say show. So it's on the menu, the menu. And then when we hover on a menu now for the U L display the, um Okay, despite the least items display as a block, right. So by default, we're going to hide our list. Item the handle notice. By the way, they handle classes. The one is the one displaying the three bars. So there is this plane as a block. We're not talking about that. We're talking about the actual least attempt themselves, which is the UL class. All right, so that is the one we have seen displaying none. But then now displayed as a block on the whole, over on our hamburger. Many. That's exactly what eyes going on here. So let's go ahead. Save this. There's head back in here for first a page and let's wait and see. All right, so they can see it's gone. The Hamburg, Germany is still there. But then when we hover on of the hamburger menu, now you can see we now have the list. Items are Pierre in just like that. Look at that. Lewd. That is awesome. Ah, there you go. Okay, so, being nearly there But note is one thing I'd when we ho over on the menu items do you see the subtle way it appears is like it is a transition going on. Okay. Do you see that? It's very, very, very smooth. It's not like what we have. Ah, I'm sorry. Let me put that back. It's not like what we have over here where it's instant. So there is a transition effect at play here, but transitions do not work on the display property. So basically, we can say transition display and easy. And he's out stuff. I know that's not gonna work. So how can we apply the transition effect while still hide in the many items? And then on Lee showing them away ho over on the navigational menu But we can do is to simply change display to another property known as the opacity. So Okay, but we have this play. I will change display here to opacity, and then to come to not show anything, I will say opacity. Zero that basically will hide the menu items and then right here. When we ho over on a menu, items let me change display here as well, back to capacity. And then instead of zero, we now have ah one. Okay, let's go ahead, save this. Refresh the page and says it can see Right now the effects hasn't kicked in yet because we don't apply the transition. But you can see it's still basically walking the same way The many items did not show until be now, over on the hamburger menu. Okay, so let's now go ahead and add the transition effect. Am I gonna do that right here where we have many you? Well, all those coming here and say transition opacity. And now we can add That's a 0.5 seconds. And then the timing function here would be ease out. Okay, let's go ahead. Save that. Let's head back in. Here refers the page, and now you can see the transition effect appearing. However, you may notice another slightly change in that even before we get to the hamburger. When you can see the menu, items start to display basically wants, the mounts enters into the testimonials, all with area you can see once it gets in here, all the earliest attempts begin to show. So this is something we have to fix with only one list attempts to show when we actually ho over on the hamper. Got many. So to fix this, I am going to introduce to you the inspector to once again. So let's do this. Okay? Let's first of all ensure that by default these guys, we don't even see them. What am I talking about? Let's do this. Okay? I'm gonna head back in here to the l IES and actually the UL. Sorry. Let's do this. Okay? I'm going to remove the opacity so that they're always shown by default. But now let us try and hide these list items underneath the hamburger menu. What we can do is to introduce a top position, but then in negative or, let's say, 100 pixels as an example. So why do you can see we no longer see about. So if we keep on going Increasing, increasing, increasing, increasing, you can see they're disappearing. Disappearances, appearances, appearing disappearing. Let's go all the way, Teoh. Let's see. Okay, let's just about foreign to pixel. So negative 100 pixels will by default. Hide the menu items. All right, let's do this again. I'm gonna head back in here and let's do this. I'm going to say Tup Negative. 400 pixels. Okay, let's go ahead. Now save that and then I'll head back in here. Let's refresh the page. And now notice that when we hover around here, we no longer see the menu items explain, because we've already pushed them all the way to the top outside off the browser, however, even re now over on the hamburger. Manu, we still don't see them because they're still at negative 400 pixels. So now we have to say when we hover on the hamburger menu, change the top position off the UL class. So less is I'm gonna introduce the inspector to once again and let's do this. Okay, I am going to go over to the class of men, you and then right here where you have Hall of I'm going to click on Hope and then simply force the hover State. Okay, so this will now show all the CSS available when we have our on the menu and we're specifically targets in the U. L. Element survived Here you have our top funder pixels up here. This is where we are hovering on the, um I'm I'm not going to say top. Ah, let's say maybe 20 pixels. Okay, so now you can see they're 20 pixels. Will, in fact display the menu items properly. So 20 pixels, maybe 25 pixels. Now, I think when it is just fine. So just like that, when they hover, owned a hamburger menu, change the top position from negative 100 pixels to 20 pixels. So let's go ahead and do this. I'm gonna head back in here and very simply, just right here. I'll just say top 20 pixels. Let's go ahead. Save this head back in here. Refresh the page. And there you go. We have successfully created the hamburger meat in that we have over here. As you can see, I'm sorry about that. Let me put that back in here. And ah, that's pretty much it. So the only major difference here is of course, the margins You can see over here. We don't really have any margin. So maybe we can also change the margin. Maybe also pushed down the hamburger menu a little bit. You can see it's a bit higher than the logo. So let's apply some changes in here. I'm gonna head back and just very simply, target the menu class. So say menu and then legis on a margin top off. 32 pixels now have tested this boat. So I know this work so that the two pixels Let's go ahead. Save head back to rebels are refers the page and the ego. Now you can see that the hamburger menu has shifted downwards further and is now aligned with all logo. Okay, a few more changes Noticed that when we hover on the many items right here, you can see that the cursor turns to a point are and then our list items don't have any margin. So let's just go ahead and fix those two favorite quickly. I'm gonna head back in here. Let's first of all go all the way up here where we have the handle and I'm going to say right here cursor will be our pointer. Okay, And then let's go. Come all the way down here and we're going to remove the margins from our list items. So margin set zero. However, let me save notice now that when I refreshed the page, let's first of all tested the crystal so the crystal works. But now you can see that because we've removed the margins. The menu items are now bombed up right there at the border off the Hamburg, Germany, of the bar of the Hamburg, Germany. So we need to push them for the down. So let's see what value we can give them. Ah, let's go back over here to the U A. Class. So okay, so instead, off the 20 are pixels limited stooges. Well, quick, because instead of the 20 pixels that we have over here, maybe we can bring this down for that to, let's say, 30 pixels. But I think that the pixels would be just fine. So let's just go ahead and change that. I'm gonna change 20 pixels over here, 2 30 pixels safe head back over here for first the page. And there you go. Who we finally finally been able to finish our building out the Hamburg, Germany. Italy to costs are more than 20 minutes to achieve this, but hopefully you've no city techniques involved in creating yourself a hamburger many. Thank you so much. Fortunate video. And as always, if you have any questions about anything covert so far, do let me know. Alderman. Best to answer them as quickly as I can. Thanks so much. I will see you in the next class. 78. Tablet Responsiveness: welcome back. So let's continue with the responsive changes and previously we've been able to create the hamburger menu and it looks good. I think this looks good on all screen sizes. That's perfectly fine. However, Let us begin to scroll down and take a look at what else we can change. The hero section looks perfectly fine. I don't think we need to change anything in here. Ah, let's cool down about a section looks fine. Also, no need to change services. Provide dead looks. Okay, let's try to make this a little bit smaller because, remember, we are targets in a range. So let's try to take this close as close to 7 60 pixels. It's possible. Notice the decider with size off the screen right day as I am minimizing, minimizing, so we're going to get as close to 7 60 pixels. That's possible, and you can see that. What about around here? It starts looking pretty bad around the 7 90 pixel Lynch's that's looking really bad. So what we can do is we can creates or change the structure to become our two columns, as opposed to three. Okay, so we need to make a change for services provided. Why? Walk of those? Definitely. We need to make changes. Well, to maybe two columns as opposed to four minute. The team can go to three columns. Testimonials is fine. Clients should go to maybe two columns on the B three columns. I will see and contact us. It's perfectly fine. So let's change. First of all the services provided. All right, So to do this, I'm gonna head in here. Note. We're still under the tablet section. So light here, let us add comment, and I'm going to call these the service list. Okay, So what are we doing here? We're going to talk it these services class, and then it's going to be dash list. And now note. Or remember that back in the services section? No. There were trying to target the l i elements directly inside off the service list class. These are the airline elements they want at the top. Like the men are targeting the child allies here. This one's are inside of another rul. We only want to target this particular ls because these are the ones holding the actual content. You can see their old the H three the title off each particular service of development and then the child list high temps under each one. So these are the Allies wants to get this particular one right here, this one, this one and so on. So we'll have to use the grated and symbol to directly target the allies that are under the service list class. So we're gonna head back in here and we're going to say greater than L I. And now we'll just change the with to Let's go with the foot 9%. We do need to be careful, though, because I believe we added some margins as well. Let's called weight appear to the deck, stop view and see. All right, so this is the services section and light here. You can see the initial with will stay 2.3 and then we have margins at the top and then left. We have 1%. So to be on the safe side, let's go with maybe 48.5 as opposed to 49% less good for the 8.5%. So we have enough room for are the margin. Let's go ahead now. Save this. Let's head back in here. Let's refers to Page Ah, let's scroll down here And there you go. So now it is looking much better. And even if we go very, very close to 7 60 pixels, it still looks perfectly fine. We do have one column on on standing alone on its own, but there's nothing we can do about it because we do have nine column. So there's no way how we can divide on nine columns are equally. It's just not gonna happen. But this is perfectly fine as it is. Oh, let's go down in here. We do have the wine walk with us. Okay, This needs to change. We need to get each Colombian here to go. Maybe 49 or maybe 40.5% basically are two columns in nature. That's what we're trying to target in here. However, if you remember over here where we have there, why us? We used the call dash on dash for class and we gave this class I believe it with off 24% of something like that. So all we really need to do here is just to change the width of this particular class to maybe 48.5% and we should be fine. So let's do this. I'm gonna come back in here and then just above the service, listless creates another section, will call his layouts, changes aesthetics. So we're gonna take it called Dash 1-4 And now we'll change with again to 48.5% just to be on the safe side. Let's go ahead. Save this. Let's head back in here. Refers to page. Let's scroll down here and OK, so let me just show you a common mistake that developers make. Let's start to expand this a little bit further to detention. Okay, so, like, right now, this looks perfectly fine, right? And you might think to yourself Oh, it looks good on this particular screen size, so it should be fine now, right? However, when it comes to testing responsiveness, you should always test the ranges for each Brit point. So, in our case right now are break point currently is 10 24 to about 7 60 We should test our design at both end points. Right? So at 10. 24 which is about around Ah, here. This is 10. 24. It looks good, right? But then, as we begin to get closer to 7 60 we now begin to notice a major issue right here. Notice now that the third column execute efficiently is now further down. If we keep on going, minimizing, minimizing again, all of a sudden, it's now back to where it's supposed to be. But then, if we now get as close sound 60 it's possible we have the issue yet again. So what's happening here? Why is the heights fluctuate? And why is it going up going down? Good. I'm going down. Well, it's simply because at this different points, the research field has an additional line of text compared to the analyzed data column. Notice the right here right now, for example, we progress for their own is the additional line of text. But then, if we make this bigger now, you can see the number of lines for research field and analyzed it all the same. That's why these two white here are kind of balanced, right? But then you expand and then again out here, the exact same thing happens again. So the reason why we're having this issue. In addition to this additional line is because we are floating the columns. Keep in mind when you float a coma, you float an element. There is always the possibility you might break the natural structural. But remember, we've also talked about the clear property. We can use the Clipper Party to prevent such issues from happening. But here is a thin. How do we know which off this Columbus were supposed to target? It's not gonna make any sense for us to just come in here and say, OK, well, let's just get every column in the section because in that case, known off, the columns will be floating. But we want some clumps to float while we want others not to float. So he was exactly what we're going to do. We would have to target the columns to the right, in this case, to the right off those whose structural has been broken in this case right now. Call him 40 by the way, I think I said earlier that executed Vision there was 1/3 column. It's actually the fourth column. My mistake plan ahead is the third column. So in this case, and then you can see that the fourth column is the one being affected. As such, we want to clear the column to its light. So basically, we are going to clear the third column, which is plan ahead and also in the future. If we decided to add additional columns, maybe two more columns. I can guarantee you that there is a possibility that the sixth column would be affected. So in this case where that you'd want to take it. The Third column The Fifth Column, The seventh column, ninth column, 11th column and so on and so forth. Those are the columns. You it targets in this particular kind of scenario. But how do we do that? How do we target the third column? The Fifth column seven column and so on. Well, I'm going to introduce to you in new selected known as the end child selectable. Let's go over here and here's exactly how it's going to work. I'm first going to sit. Call Dash 1-4 and now Coolum and now ends Child. This right here is the selector we can use to target specific elements in any structural, but we're going after the 3rd 5th 7th and so on. So I'm going to introduce to you this formula to end plus one. I know this sounds like Greek, but don't worry. I'll explain this to you right now. Basically, what's happening here is that we've created a loop. You see this end right there? It will start with a value off zero. So, basically, the very first element we're gonna target it would be to time zero plus one, which would basically be zero plus one, which would be the very first element. That's fine. But then end will now turn to one. So now it'll be two multiplied by a one plus one, which will be three animal 22 which would be to multiply by two plus woman should not be the fifth element and so on and so forth. So this right here is a way how we can target the odd numbers, Theo, old columns in our structure. So I'm gonna do this. I'm gonna come in here. And just to prove to you that this actually works, let's just change the color first. Okay? To read. Ideally, right now, it should only be the first and the third columns whose Culo turns to red. Let's go over to our Broza. Let's come in here. Refers to page and right there you can now see that both the first and third columns the color has changed to read because we're targeting all the odd numbered columns in our structural. So that been said, I'll just come back in here right now. Change Coehlo to clear and we'll just say are both. Let me make sure this is correct both. And there you go safe head back to rebels are refresh the page And there you go. So we no longer have issues with the columns are stacking up on top of one another. So that's exactly how you can fix this kind of issue, but isn't a Clipper party and take it in the odd numbered columns in your section. So that's it, for part won't give me a part two. Available Now tackle the minute the team as well as the our clients sections. I'll see you then 79. Tablet Responsiveness Part 2: well, come back. Teoh are responsive design and all right. So far, so good services provided has been taken care off while walk with us has also been taken care of. But now we need to change the structures for Mitt, the team as well as our clients. So let's just do this for made the team. We can go with three columns thing that should be fine. So let's try going in three columns in here. So it's going to do this. I'm gonna go over here and just after service list. In fact, numbers, grab this entire code. Let's copy that. Come down here, paste. And of course, we will now change service list too. Our team team list, maybe. Let's call the Tim list. So what we're gonna do is we're just gonna change the least. And the classic is the team dash list limb. Just confirm that is the case. Let's head back to index with HTML. And ah, there was Okay, so you can see. Yep, it is team list. OK, good to know. So we have team a list, and then there is no need to use the greater than symbol because there were no child Ally Elements is just one single ally element in the structure. So the with here will change the with over two. Let's go with 32.5% because again, the Allies also have margins. So you have to keep that in mind. A swell. So let's go ahead. Save this. And ah, let's see what we now have. What's refers to page. Let's scroll down here and oh, okay, so it does appear 32.5 might have bean a bit too much. Let's inspect and take a look at what we have. L I Okay, so you can see we do have margins to the left, which is 1%. So Oh, I'm sorry. That actually goes beyond 33% immediate, because if you add 1% for the left to 32 point further becomes to the 3.5, so that would know walk. So what we can do is we can maybe changed with here 2/3 to 1.5% instead. So with that, at 1.5, we now have this particular structure, which is good. It's OK. It's very similar to what we currently have over here, as you can see, so theta 1.5% are will do the trick. So let's changes back to 321 0.5%. Awesome. And finally, we're taking a look at the our clients declines section. It is the one right here. So what do we have here? We do have the client list, and then we have our allies. Okay, pretty straight forward. Let's do this. I'll come over here and all those grab all this code all over again. Copy Paste. And then we'll just change team to clients. And then the class here is going to be client lists, client list. And of course, the with. We'll just keep the with at 31.5% as well, just to mention some consistency. So let's save this. Let's head back in here, that's where first page. Let's call all the way down here and there you go. Awesome. Awesome. Awesome. Classless. Now looks are pretty dope. So that is it for the table. Let's scroll down here. Make sure that Okay, So the contact from still looks good. The future looks good. Let's go all the way to 7 60 and see if there's anything that needs to be changed again. Okay, so at this point, right now, we're in fact right now in the 7 50 range. So this is how things would look like when viewed on a mobile phone end. It's actually not too bad anyway. We'll take a look at that in the very, very next video. I just wanted to confirm right now, there for the table view at 7 62 everything looks perfectly fine. Soul. We were pretty much done with the table view, and then we can now move on to designing the site for the phone off view. So that's a German in the next video about, we will take a look at that tells you then. 80. Phone Responsiveness: welcome back to the final video in a responsive section because now we're going to target the smallest screen size at 7 60 pixels. And to be honest with you, it's usually by far the easiest to fix, because all you really need to do is usually just set all columns to go full with most of the time and then our columns that were three columns before you simply said them to go to column. So you give them a with maybe 48%. So it's it's pretty easy. Anyway, let's just go ahead and target the very end. So this is as small as it gets and they had us. It looks fine, but now they're about of section definitely needs to be changed, as you can see, so we need to go are full with for each of these individual columns. So let's take a look at the structure. Let's head back to index dot html and right up here. So this is where we use the coal dash Juan dash to class. We didn't have to take this in a tablet view because it looks fine. But now, for the mobile phone view, well, I hope we do need to make some changes. So let's head on over here. And of course, we're going to go all the way down here. I'm just remove all these empty space. Okay, so right here inside of the max with 768 pixels for the phone, we are going to say dot call Dash one dash to and in this case will just said the withs to go basically full with, So we'll just go with with 99%. Let's go with 98% because remember, we do have are some margin. So let's go with 98%. Let's save head back over here were first the page and there you go. Right now it looks perfectly fine. Awesome seventies provided I think we also need to set this to go full with because at two columns it doesn't look that good. I think over here we said it's to one single column. Yep, you can see right now this is one column. It looks much better. So let's change that. So I'll just go over here, grab the services list entirely. Let's copy that. Come down here, pays that all over again. But now will simply just change the with for the service list from 48 to 98.5. Cool FM. Let's go ahead. Save this head back in here. Well, first the page and there you go. Just like that. It looks good. Looks much better, but like it, OK, why walk with us Also would need to go full with. As you can see, this is not looking all that great. So let's just do this again. I will grab the layout changes. Let's copy that. And in fact, let's paste it right here at the top. Okay, we move that line. All right, so column, Dash 1-4 we're gonna go with 98.5%. Say that head back in here, refresh the page. And there you go. Like I said, it is very, very easy. All you really need to do at this point is just change the widths of your columns amid the tim. Definitely. I think we can go with two clubs here instead, as opposed to one. I think two columns. We will be fine. So let's also fix that one. Ah, team list. Let's go ahead. Let's grab this Let's come all the way down here paste. And now we'll just simply change the team list the with from to the 1.5 and we can go with 14 9 actually, not for the name but 48 0.5% safe. That head back in here were first a page And there you go, looking good. Looking good. Let's come all the way down here. Our clients Okay, This can definitely go to columns as well. So let's do that. Let's grab this copy, come down here, paste, and then simply will just change the client list. Different. That 1.5 2 48 0.5 as well. It's safe. Let's head back in here. Well, first the page and that you go. So that looks beautiful as well. And then last but not lists all the way down here. Ah, contractors looks fine. There is going to change anything in there, but the food does need some changes. As you can see right now, the social Media Aikens are to the lights and then we have the navigational menu to the left. So this looks kind of distorted. So what we can do here is just basically set them to go full with and then maybe just our text, align them to the center. So let's take a look at the coins structure for the footer so you can see we do have you a class photo menu and in your class are social menu. And if we go to our main dot CSS, let's go all the way over here. You would notice that. Okay, we did float the social main into the rights, and we also floated the foot on many to the left. So maybe we can just remove the floats and let's see what would happen. So let's do this. I'm gonna create ah whole new section for the footer. Let's paste that and we'll just change client list here to food and then simply will just change the class here. So we have Fouda Dash menu and we can go with a coma and then class of Social Desh menu limb. Just confirm that these are the actual classes. So we have social menu and then food time menu. Okay, awesome. So let's go all the way down here and now basically will just say floats. None float none. Let's see what happens. Let's save this. Let's head back in here. Let's refers to Page and there you go. Okay, so no more floats in. But now you can see that we still have the social media Aikens kind of like on the same line with the food top menu. So the reason why this is still happening is because the airlines in both menus are also floating to the left. If we go back to ah, main that CSS and let's go all the way up here, you can see right here that we do have probably have the footer you can see. We do have the foot, Emmanuel. I hail floating to the left. We also have under the social menu. We do have the social, many ally floating to the left as well, so we can just move the flow tin from them and simply display them now as an in line block . So check this out like I'm going. I'm gonna go back in here and let's just grab all this code. Let's grab that copy, come down here, paste, and then we'll just say Food time Menu. Ilyse, Social menu ally and now float. None But then, if we don't float them, they will display as a block. But to ensure that they don't displace the block will just now say, display as and in line block. Okay, let's go ahead. Save that. Go back in here, refresh the page and there you go. So right now, they're no longer float. But we've been able to display them in line because we're using them as in line blocks. If we did not say display in line block, they'll display as blocks stacked up on top off one another. The final thing we need to do is just to text ally in them to the center. Basically. So orders come in here and under the full time, a new and social many will just a text, ah, line center comma colon saved that Come back in. Here refers the page and there you go. So there's actually ah different ways how we could have fixed this particular issue. But I just want to show you these other way off this plane. Your list items as inland blocks as opposed to floating them to the left or to the right, so that is pretty much it for the responsive are part for the phone view. Thanks so much for watching. And of course, I will see you in the next last. 81. Responsiveness Section Review: so they have it. We've come to the end off this section where we tackled responsiveness and at this point, you already to begin to build websites because you know it's Jemele. You know, CSS, and you also know how to make your content and the structural adaptable to different screen sizes. But you can always learn some new things that some new additional things. And in the very next section, I'm gonna show you how you can further optimize and enhance both of design and functionality off your website. I'll see you then. 82. Site Optimization Section Preview: what is welcome to this section where we're going to tackle site optimization and arm angle . The main objective in this section is to get our website life on the Internet. So far, we've been building locally. By now, it is time to transfer all our files over to the Internet. So I'm going to show you how you can get yourself a domain name, how you can get Web hosting and, of course, how you can finally launch your Web site live on the Internet. But before we do that, it's also important that you tackle some really, really important aspects off Web development such as S E O search engine optimization. So I'm going to show you how you can optimize your HTML website, full search engines. And of course, we'll tackle speed as well. It's not gonna matter if you've created the most beautiful website. If it's slow to load people and not going to like the website, so you want to ensure that you're upset loads as quickly as possible, and I'm gonna teach you all of the tricks that you need to know to ensure your side loads as quickly as possible. So this is kind of like the complementary section to the predicts section, but nevertheless it's also a very, very, very important section, So without further ado, let's get started. 83. Search Engine Optimization: Alright, guys, let's talk about the basics of S e o for our HTML website and most of it is going to come down to us optimizing for the key words that were trying to target. So when I say cures, I mean the kinds of words that people will type into Google. In other financial you find us. So we are a Web design company. But let's assume we are based in New York. All right, so we should be thinking, all right, How would people find us on Google? Typically, they might go to Google and type something like, Ah, Web design company in New York. Right, Let's go ahead. Now press enter and let us take a look at what we have over here. So down here, you can see that we do have, Ah, Big Drop, Inc. We have Max burgers, we have Blue Fountain media. So let's imagine we're trying to get Web impact to be on the first page of Google. How are we going to do this? Well, like I said, it starts with the keywords. So the keywords were trying to optimize our Web design company in New York, so he was exactly what we can do. We can go back to our index of HTML and a white or you have your meta section. I'm going to go ahead now and paste this code and there it is, right there. So we have metta name description content and then we have metta name keywords and then the continent numbers go ahead and actually remove this content because this is not what we're trying to target. So let's start off. First of all with the one are underneath keywords. The key was in this case right now is going to be a web design company in New York, right? These are the key words were trying to target. So this is exactly how you would indicate the keywords such a targeting with your HTML document. Now, the description this is will be now provide for the details about who we are and what we do . And you can see the meta description for all these companies. For example, Big Job has its not much of a description is just Cesar Web design company in New York were beside developments big dropping. Okay, but Max Burns has a much better description. They say at Max First Report point comprehensive up the site design, developing a Web marketing services for various sized businesses and so on. So this right here is what we call the meta description, So it's a great way to further optimize and rank for the keyword targeting. But it's also a good way to provide more information to prospective clients. And you can see the other our links idea. Have something similar. Our blue friend and say he's a digital agency created expenses that connect problem. All right, that's good. Go back in here. So what we're gonna do here is for the meta description. Contents weaken, say something like award winning and now Web design company in New York. Okay. And then we build fantastic websites at ah Ford Able Prices. And of course, you can go and add a little bit more, but you typically don't want to go beyond 160 characters. That's usually the maximum so but right here we've added the keywords again Web design company in New York. But we've also provided some more information about its obeah and award winning How about design company? And of course, we build fantastic websites at affordable prices, So that's going to be our meta description. Boy also added. The key wards were targets in which is Web design company in New York. So that's typically Step one. Step two is now going to be the actual title. It's obvious that the title tag right here this represents the title off our page. Right now it's a zweiri impact build. Amazing upsides. Okay, that's fine. But we could optimize this by adding, are keywords were in here as well. So instead of saying would be impact building is up science. If we can say Web impact and then award, actually. But let's just say Web ah, design company in New York again. All right, so at this point, we now have our keywords in three different places. We have them in the actual keywords meta we have them in a description, but we all now also have them in the title off our page. So this right here is already a very a very good start for S C O. But the other issue now deals with the structural off our page. Google and other search engines, they love structure. They want to see us having h one tags age two tags. It's with fags because that shows structural. This is all the reasons why the very first main text we have on our website, which is, of course, the one right here, which is the level of your business. Build an impactful, their presence if you notice we used H one tags for them because they're all right there at the very top of the page. That's why we used H one now. Technically, we could come in here and also try to add the exact same keywords again. So instead of saying level up your business, build an impact forward presence, we could just simply say, World Design Company in New York. However, you don't want you overstuff your page with the keywords because Google can actually penalize you for that. So be careful. Use your keywords. I mean, you really want to optimize for them. But don't begin. Teoh how What I said is, don't don't over optimize them. Basically, if you have them your description in your keywords and then your title, that's fine. Okay, that's that's perfectly fine as it is. Okay, let's keep scrolling down. So it took about the key words we took about the structural, which is fine as it is, however, one other than we could do to for the optimize. Our external document for Seo is something we've actually already done, and that's going to be the old tags for our images. Remember, we talked about the old tag. The old type is very, very important because it helps, ah, software used by blind people to indicate to them what the image is all about. So let's take a look at some of the images that we have. We do have, ah, the image writing. For example, for the team members, you can see the old tags, an idea you have rusted alert crews. Print feels basically the old tax. Here are the names off the team members, but then further down here as well. But we have clients. You can see the old tanks all have descriptions, for example, said that Holmes logo ah, grow secretary logo, hyper hyper hyper kit, checked logo, finance, look, logo and so on. So one other way to really optimize your site for a seal will be to optimize your images by simply providing them with all tags Google loves this And you really want to ensure that all images on your side have old tags? One final way off optimizing our XML website will be to improve the speed, make sure the speed is as fast as possible and that something will come of our interview next video. 84. Speed Optimization Part 1: So let's talk about optimizing all websites. Speed and speed is important, not just for s CEO, because Google and other search engines love it when your site loads very, very quickly. But it's also important for the user experience. When people visit your site, you want them to have a good time. And one of the ways how you can ensure they have a good time is by ensuring that your pages and their content loads as quickly as possible. So websites one of the best ways to optimize their speed is by optimizing the images on their side. And in his bid, I'm gonna show you how you can optimize your HTML images. Like hell Now said, We have lots of images. We have backgrounds. We have images for our team members. We have images for clients as well, the logos and so on. So generally, when it comes to optimizing your images, the most important thing is trying to ensure that they are a small in size as possible. Then there isn't why you want to Images to be a smallest possible in size is because the smaller the images in size, the faster it would load an image that is 10 kilobytes in size will load much, much quicker than an image that is, let's say, 500 kilobytes in size. So the very first trip here, when it comes to optimize your images, is to simply use J pegs as often as possible. You typically have either pings or J picks free images, and it will take a look at all folder you see right here. Notice that the five icon isn't it is in the pink format. The logo is in the pink format, however, the hero image is a J peg. Our team members are all J pegs, as you can see and then background all the bag anime design J. Pegs, but and finally the clients, the images, the logos, whether I in pink formats now, if you didn't know this, the pink format of an image is typically up has better quality than the Jay Peak format. But with the better quality comes a trade of better quality means the image is going to be begun in sight. So as such pings typically load slaw, then J pegs that they are better quality, but they load slower. So as a result, of this. You want to ensure that most of the images you use on your website R J. Pegs use pangs for your logo for your five icon and for the kinds of logos on your side. Because, like I said, our pains tend to be off better quality. So for your one low girl, the logos of clients, you want them to be off good quality. That's why we used pings as a result instead of J pegs, but then for the backgrounds for our team members, we don't need images to be that grating quality. That's why we used J. Pegs as a result. So that's gonna be the very, very first tip here. Used J picks for most of the images used pings for logo's and then for the five icon. Now, with all that being said, one other way to reduce the size is off. Our images is by ensuring that meant we don't upload oversized images in the first place. Now what am I talking about? You say if we take a look at the MIT the team section as an example, let's take a look at our sea or Mr Roster Dela Cruz. I'm going to right? Click right here and I'm going to inspect. Okay, check this out. So right here you can see we do have the links to the image. But do you see two separate dimensions? The 1st 1 is the tree to fall by 200. But then in Beckett's, we have intrinsic 9 50 by 8 50 Intrinsic indicates the actual size off the image in our folder that is 9 50 by 8 50 however, were actually displaying this particular image at a dimension of 22 full by 200. The use of the massive discrepancy right here we are uploaded an image that is 9 50 by 8 50 but by only displaying that image actually at U four by 200. So in such a snow, right now, the image for Mr Dela Cruz is oversized because typically you want the uploaded size. The original says of the image to be as close as possible to the dimensions which we're going to use to display the image on our website. So you want to ensure, or whether we want to ensure that the upload it size is as close to 2 to 4 by 200. But But before we do that, don't make the mistake. I'll think of that. Oh, energies at a next of you are at the biggest. No, even we do use the screen says right here, huh? Let's go back in here. Let's go all the way to the template view. Okay, let's keep on going. Let's keep on going. Right So I don't here right now. You can see the image now appears to be a little bit bigger, because now they're in three columns, as opposed to four columns. If I right click and inspect notice number, the image has now been displayed at 258 by 231 Okay, let's keep minimizing the screen size and then around here Notice. Now it's now at two columns. So if I go back and right click right here right now, you can say it's not been displayed at 303 by 271 So let's keep let's keep on going and see if he gets any bigger. And no, it appears to get only smaller as we shrink the screen size. But around here, this is where the image or images for our team members are displayed at their largest dimensions at roughly three or four by 2 72 So before you begin cropping your images, make sure that you figure out the largest dimensions with richer images will be displayed in on your website. So this goes. Right now it's around three or four by 272 However, before you begin cropping your images, Limoges notify you that we do have high resolution screens, and these are typically the ones from IOS from Apple computers, Apple devices. So the recommendation is that you actually crop your images two times, two off the largest display that mentions. So if we has them, the legis displayed dimension right now is that to be a fall by 272? Then we should couple images to around 60 wait by 544 If my math is correct just so that they would also look good on Apple devices. So when it comes to cropping your images and changing decides a Billy all depends on what you're using the values in a Mac. I do know that you do have, like an inbuilt tool for that. You can use that one. I am on a PC, and I do have my good old paint. I'm going to use the paint tool to simply resize. So I'm gonna go over here, Teoh, simply click on resize switch from percentage two pixels. So we're going to go with 6 10 and by it was gonna be 6 10 by for five for five. Okay, let's go ahead. Now click. OK, so what I'm going to simply do right now is I'm going to save the image and I'll upload the image to the teams are folder. All right. So as you can see right now, I have applauded the new of rusty image. It's called Rusty Dash New, and you can see right now that the original image the size here was 118 kilobytes. But because we've reduced dimensions, we now have the new size at 62.4 are kilobytes. So what I can simply do right here is just to go ahead now and delete the oiled image. And, of course, make sure that the name of your new image is the same name used in the HTML file. So it's rusty dot jpg. So if you let to optimize the remaining images for your team members. Please go ahead and do so You could do the same four the clients. But the truth is, these images are already very, very small in size against it. This one is 8.6 kilobytes, Uh, just 1 12.5 So they're already really, really small. And there's really no point in you trying to for the reduced the size off such images because they're already very, very, very small. So you can simply just our ignore this one's. However, a group of images that we might need to optimize would be the background images, because this ones are a little bit bigger than all the other ones that can see clients is that 600 Kilobytes Services is at fund of 51 kilobytes, and then the one for team is a 328 kilobytes. Now, instead of us reducing the dimensions, what we can do it, we can try to compress the images, and to do so, we can make use of this tool called the Image, Compress It off. Comets actually called optimize illah. So you go to image compressible calm and right here you will see the green button to upload files. I'm gonna go ahead now, upload the files. Let's go about your background and let's go ahead now and upload the three of them. Let's upload them. The first in has uploaded second, and then the 3rd 1 has uploaded or K. So right here you can now begin to see the possible results, the ones for clients. As an example, There's no was 601 kilobytes, but and if we compress them, it now forced to 468 kilobytes now because the quality of these images are not that important, what we can do is right over here. With the quality, we can further reduce the quality, and by reducing the quality, we are also able to further reduce the size off the image. So we put it down to 88. Let's see what will happen. Actually, let's keep on. For some reason, it's taking a bit longer, forced to see the new results for the compressed image at 88% quality. All right, there's been more than five minutes now, and I'm still stuck on this page, and it appears to be some sort of a bug. I don't know why this is happening, but each time I try to reduce the quality of the image, you simply have this spin wheel and nothing happened. So maybe when you try yours, you might be successful. Maybe they might have fixed the issue. Maybe I'm doing something wrong, I don't know. But nevertheless, even with this ever, we've still been able to optimize the images. You can see clients was with used in size by between 2% sources by 24% and team by a measly 1%. But I'm guessing the team our Baghlan images already optimize. That's why. So I can simply go ahead. Now click on download all and this will provide me with a Zip folder. I consent is a folder and then simply unzip the folder on my computer and then simply replace the compressed images are with the ones already are. On the HTML I'll filed, so that's been much how to optimize your images again. Used J pegs wherever possible. Only use pings for your logo's and your five icon. Try Teoh. Reduce the size of your hopeless images to match the all not match Bobby. Times two off the lightest dimensions are with which they will be displayed on your website . And then, of course, you could also use the image compressor that come to compress your largest images. So that's it for speed optimizing you upside for speed. One drumming part too well will optimize our cord. 85. Speed Optimization Part 2: Welcome back. Hope you're enjoying our site Optimization adventures and what I'm going to show you next is how you can optimize your CSS code. And just like with images, we can also compress our CSS code, and we can use a tool called the CSS. Many filed calm. So what this does is that you simply provide your cities code, You run it through the engine and you'll have a optimized version off your CSS code Now, the thing here, though, is that you typically want to do this when you all ready to launch your Web site because it's not going to make any sense for you to optimize your CSS code. And then you begin to add some extra cold later. No, you want to optimize the final product. But you also want to wait until you're about to launch when you're ready to launch, because the output we're going to get it's not going to be easy to read. So what I'm gonna do right here is just to provide you with an example. I'm gonna go ahead and simply grab some not all but some of the code that we have. So let's go. But Teoh Main that CSS And I am going to grab right here from number one. Let's go all the way to 133. I was a very random number. Let's go ahead and copy that. Let's head back to our But I was Ah, I'm gonna go ahead now, paste that. And now check this. I think I'm gonna click on men if I And there you go. So right now, this is the compressed version off or we have over here and you can see right now this is a lot smaller in size, but the orders that he called right now is practically unreadable. This is gonna be very, very difficult for us to read. But that is the trade off if you're going to compress your CSS code so that it loads faster and your absolutes faster. The trade off here is that the CSS code is going to be more difficult to really, Because why again? You only want to do this, wants you all ready to launch your web site. So I'm not gonna go ahead and notify the court because we're not ready yet to launch our website. But I just wanted to show you this. So that's in the future. If you wanted to launch your customers upside or your one website just before you do so you can optimize for speed by using the CSS many fire tool. So that's it. Thanks. So much fortune. I will see you in the next class. 86. Creating our Favicons: all right, so we're almost close to long chain all website on the Internet. But before we do that, let's quickly took about five icons. And if you don't know what if I have Icon is It's basically the I can you see on your browser tabs. So right here open. You can see this is the five icon for our website. I do have other websites I've opened up. We do have Amazon. You can see the A and the yellow are sign right there. You've got Mars. If you don't know Mars, they are specialists in S e o. Be sure to check out the website, but you can see their own. Perricone is an M with a blue background. You also have lab cyber over the black and green shield. And it's not terribly important that you must have. If I have, I can. But it's good to have. It shows professionalism. It also shows class now. We already have a five icon, but I haven't shown you how you can actually create yours. There are several tools on the Internet that you can use. One of my favorites is going to be the rial five icon generate all dot Net. So what happens here, basically, is that when you go here, you civically can select your fabric on image and simply choose the image you want to use. Now they recommend you going with an image that is about to 60 by to 60. There were at least one of his 70 by 70. Notice that they are squares, the dimensions are square. So please, whatever fabric when you want to use, make sure the images in a square format. So I'm gonna I'm just gonna go ahead and use the logo that I have and let's go ahead down and upload it. Now, if your image isn't up to 60 by to 60 you'll to this message telling you that Hey, you know, we're command to succeed by to 60. I'm just gonna go ahead and ignore this and continue with this picture. All right, so right here you can begin to see the results how I can would look like on different tools and tells us so any can see. This is for next up and Google, it looks fine if you scroll down here, this is how it will look like on IOS you have the blood bag uncalled there with the icon. That's okay. You've got the one for the enjoyed comas. Well, you've got the one for Windows Metro in this case right now. I don't like this background because I think it's kind of overlaps with the light color so we can go with let's say, darker blue as an example. So right now you can see it now looks are so much better. So that's keeps going down. And, ah, yeah, so really, that's that's all you need to do at this point. Right now, you will have the final step where you'll have to choose where you want to display them away. You'd like to have the five icons are located in this guy's right Now you do have the option of saying Abu plays def American files at the wood off my website. It's recommended, but I don't recommend you actually do this, because what this means is that you are going to have to have your five icons inside off this particular folder in exact unfold are holding your index of HTML, and I would rather have My fabric comes in a folder called Five Icons inside off the assets folder, if them Except so here's exactly what we're gonna do. Okay, I'm gonna go back in here, and I'm going to say I do not want to place it in the root of my folder. Instead, I am going to place it in the assets, and then the five Aikens are fold up. Let me just confirmed that I'm spilling assets correctly because I'm tablet spilling, so it's OK. I knew something was wrong when I saw this. All right, That's not the spirit of assets, right? Assets A s s E t s okay. I have to remember that. So we're gonna do right now is we're going to place the five icons inside off this directory will have assets and then five icons. All right, so let's go ahead. Now. Click on generator fabric owns and HTML code. And, um, that is it are In the meantime, I'm gonna head back in here right now instead of our assets folder. I'm gonna go ahead now and create a new folder. Um, iconic got called out. The five icons fold up. Okay, so let's go back. Teoh bills down. So right here. It says down with your package, okay? And then inside this code in the head section off your pages I'm just gonna go ahead right now and just grab this court first of all, So let's grab that copy Head back to Mr Brackets. So let's just like I'm going to go ahead. And now we move the original fabric in that we had the link all we move this one, let's create some space. And now I'll just go ahead now and paste all that code. Let me ensure that all these links are tabbed correctly. There you go. And OK, so, lenders, remove these empty space. Remove the last empty space here as well. Okay, that's good. Now save head back. Teoh blows up. So now I'm simply going to go ahead and download the £5 package. All right. So, as you can see, I have downloaded the package. Let's head over to my folders. And it's right now inside off the five icons folders you can see this is the zip file. So what we need to do right now is to simply extract. I'm gonna go ahead now and extract all the files. And now you will find another folder with the actual five a concert after going here and then we move again. I'm gonna cut all these and then ensure that they're actually inside off the five Accounts folder. So I'm gonna go ahead now, pays them in here. Let's remove the zip file and also the package folder. So this is it. So make sure that if you're doing your similarly make sure that the five reckons themselves are inside directly inside off. Your five icons are folder. So we have been said everything should walk properly. But if I go back to my browser right now and I refresh this page, you would notice that we no longer see the five icon. Now, I'm not sure why this doesn't happen locally, but I've already tested this. And I know that if we launch our website live on the Internet, you will see the five icon and in fact, let me quickly do this. I'm gonna go ahead now and open up one of my sample sites and you can say this is the exact same code that we have. But notice that this is an actual live website task a pivotal come and Why do you can see We now have. The five are showing and I've used the exact same color we have over here. So there is something I don't know what what it is exactly. But when we go ahead to launch our website live on the Internet are the five icon will up here so that if a five icons hope you enjoyed video, I will see you in the next class. 87. HTML Markup Validation: already really almost ready to now finally launch our website. But before we do so, it is important that we verify that all our code has been checked and has also been optimized. Now we've already talked about the CSS unifier previously. Don't forget to do this just before you're ready to launch to you coming here impute all your CSS getting unified output and then copied them in effect output over to your style that says this file. Don't forget to do that. If you want to optimize the speed off your side, it's not compulsory. It's not necessary. But it helps to boost the speed off your site. Gonna go ahead and close this, but that's for the CSS. Now, for the HTML document that we do have, there's another service called the Validate all. And basically what this does is that it checks are html file to ensure that there were no elbows, there are no broken links. And it's just a very, very good tool to use just before you launch your site. Life on the Internet. So right here there are the various ways how you can check. What we're gonna do is we're gonna go validate by file upload. I'm gonna click in there, and then I'm going to choose our index dot html final. Let's go ahead. Open that and ah, let's click on check and see what we have and Oh, well, we actually have three arrows. Wow. Okay, I wasn't expected this, to be honest with you, Okay, Let's see. So we do have a bad valve for attributes. Time online 491. Okay, let's head over to our index dot html file and let's see, so it stays on line. 491 and it's the wound down. Ah, where is it? Okay, so over here, line 491 eyed. So what's the problem Here, Let me go back in here. It say's bad villa for the actual but type on element impute. Okay, let's see. Ah, ok. I see what the problem is. So I hear we didn't specify the type of field the title is supposed to be. So in this case right now is just gonna be text. OK, text. Ah, let's just go back in him and see what else the other two were. So number two is also lying for 91 It say's placeholder is only allowed one MP type is email number. Password. Okay, okay, because we've specified type to be text. This should be taking care off. And finally, record is only allowed when? Okay. Okay. So the only issue we had here was because we forgot to specify the type of field this is supposed to be. And as a result, that was the very first Aargh. And secondly, you can't add things like required for any kind of, ah field that doesn't have a type. That's why we had the devil messages. And you also can add a place older for any feels that don't have a specified type. So Maley by specifying that this field right here is a text field. I think we should be fine. Then go ahead. Now save this file. Let's go back in here. I'm gonna go back and choose the same fell all over again because this is the same version . Let's open that and let's check. So Okay, there's gonna see right now, we no longer have any a levels at also, and it is on HTML. Document is good to go, and we are ready to upload all the files to the Internet. So German event. Next video. Well, we will now go ahead by Ah, domain name, get hosting and finally launch our website. Life on the Internet. I'll see you then. 88. Launching our Website Live: Okay, so we all ready to launch all website life on the Internet. But we do need to things. We need a domain name, and we also need some hosting. Now, there are several hosting companies out there, and one of my favorites is side ground. I have been hosting with them for many, many years now, and they are, in my humble opinion, one of the very best our horse and companies in the world. If you want In its alternative, I do also use cloud ways that men difference here is that Cloud Way specializes in cloud hosting. So the hosting here is much faster, but it's also a little bit more expensive now. Side ground also offer cloud hosting, but their cloud hosting is a bit more expensive than cloud ways. All right, so one reason why outer comment. First of all, that you start with side guns because in addition to have in our cloud hosting, they do have the regular kind of hosting, which would be the shared hosting. So let me just show you on example of what I'm talking about right here. They do have different packages. They have these sort of posting grow big and then go geek. So the major difference between these three, of course, is the amount off functionality being offered. Start up, for example, offers you just want single website grow big offers you unlimited website, so there's go gig. But then the big difference between Go big and go get is that go back. Of course offers. You are more space. It can handle 100,000 visits per month, while Grbic unholy handle 25,000. And so So the thing is, if you all lunch in an actual real website out recommend there. You either go with the startup package or grow big. Now, as your website begins to gain more traffic and you feel the need to upgrade your packages , you can always go over to go gig. Or, if you prefer, you can end up switching from side gun and go over to cloud ways for cloud hosting. Don't worry, you can always archangel these deals and packages later on, but although come in of course started side ground and go with either the startup package or the go big. Now, before we go with the host and we need to buy ourselves a domain name. Now, to do this, I'm gonna go over to services again. But right now I'm going to switch over to domains and I'm gonna click on the register domain. So there you have the basically the domain extensions. You've got the U. S. The calm. Don't nettle auto biz. Ideally, you want to go with the calm. The calm is by far the best. Because when people hear the name of your website, the automatically as them, it's going to end in com. There will never izumi Oh, it should end in dot net or the AWG? No. The only other times where you might not want to use the com is if, let's say you're building a website for school, for example, then dot e d. You might be a lot more appropriate the ogle before, like organizations and so on. But most of the time, 90% of the time you wanna go with dot com. So right in here, you do have the option of typing in and section to see if the domain name you want those exists. So in this case right now, the name of our business is web impact. So I'm gonna type in Web impact, and I'm gonna choose dot com and ah, let's see if this exists. I'll be very, very shocked if it is a concern right now that it is not available for registration. So I'm just gonna go ahead and switch the SI two K and let's say I'm gonna go ahead now and such and hopefully that one will be available and it's also not available. So when I'm simply going to do right now is, I'm just gonna go ahead and add a C so it's now impact dot com. Let's go ahead and search for that one, and this is available to understand. Now the thing is, this is not a well website, so I really don't care about the actual domain name itself. But if you are building oil launching a real website, please do spend some time to come up with a domain name that will match what you're trying to offer and would also are make sense. Don't go in to begin typing in random words and ah, just so you can get yourself a domain name, make sure your domain name makes sense and also, in a way, is related. Which website is about? So I make is right now. I'm gonna go ahead now and select Web impact or home. All right, so right here. I'm gonna go ahead. Now, click on, add. So it's added now, down here. A lot also depends on the hosting company of going with so might offer you additional services. Some might not. So, in the case, off side going right now, they do offer additional hosting the offer Domain privacy. So if this is the first time you're going with Saigon, I can recommend you click on add so you can go with the domain hosting Web hosting package right here so you can click on add, and you can then choose which plan you want to go with. But I already have a hosting plan with side ground, so I don't need this. So all I'm gonna do right now is I'm gonna come down in here and simply pay for the domain name. Now, one thing I should mention is that when you bind yourself the domain name and hosting, you'll have to do some verification. So you will have to provide yourself. You provide them with the phone number with which they can then either call you or send you a text message. Then that's the first of a verification. The second step as that they will perform a small our bank transactions or charge a card with a certain amount off money. So you'll have to go to your bank account and verify. Tell them how much they actually charged and then Ardell verify your identity. It's important for security reasons, obviously, so you can see. Right now I have verified my identities, and now I can go over to the home page and the next thing will be to set up a website. Now let's just go ahead and close. Cloud weighs. So like I said, you need domain name and he also need hosting. And I said, Alia, that I wasn't going to go into hosting because already do have a hosting account with side ground. But let me show you how you could take advantage of the war month retrial that Saigon offers are my students so you can go over here to click on set up sides or you could also just go to our services. You can come over to services And then you will see the get free Holsten Link. You can click in there, so I'm going to go with the startup plan. Gonna clicking a slick plan. And now this would be important. Make sure you choose the data center that's closest to your own physical location. So if you're in Asia, you do want to go with Singapore. If your new, if you can go with Germany or Netherlands and so one, I'm gonna go with Asia Singapore, I'll click on confirm, and I'm gonna click on order now and ah, all right. So let's see what's going to happen. I think I'm going to get an email confirming the our processing off the Holsten package. So let's wait for a few more seconds. It typically doesn't take too long for the order to finish process. And oh, maybe does. All right, I'm gonna have to pause the video and always, um, the video wants The order has finished. All right, so it took roughly almost two minutes for the entire process to finish. But now you can see it Say's you're all set. So I'm gonna click on set up site. All right, so I care you can see it, Cesar. New domain. Existing domain. Temporary domain. Now, we already have a domain that we've just purchased. So I'm gonna click on existent Domain and I'm gonna come in here and go with Web impacto home. Gonna click on Continue and that is it. All right. So what I'm gonna do, I hear is I'm simply going to click on Skip and create eight empty site That's click in there. And ah, these are extra services which you can go for. They're not necessary. So I just cook on finish. And so basically, this will the mean right now that Sarah Gone is creating the necessary files for the domain to exist, it's creating the databases as well. So what I'm gonna do right now is pause the video once again and resume wants. This process has finished, all right. Says you can see right now it says you're all set when I click on go to site right here. And basically, this is what you would see. You It says something like, there's just saying that Hey, there's an awesome website coming to this particular domain name and was gonna go ahead and close this and I'm going to go over to manage site now. So the next step we have to go through is we have to upload the files that we have in our folder for the website. I'm talking about the index of the HTML, the five icons, all the images we need to upload all this files over to all website. So right here this is basically the back end for side ground. And let me just stress that every hosting company you go with in fact, most of them, they will have something very similar to this. So even if you're not going with side ground, it will still be similar to what you might find with your own Web hosting company. So what you want to do is you want to look for a particular function called the file manager. I'm sure you'll find it some in your back and mine is over here. So I'm gonna click on file manager, and it is this file monitor that will allow us to upload our files over to our web site. Now, notice that when expand its for the right here, you will see this folder called the Our Public dot xml folder It is inside of this folder where we're supposed to add all our files. So please always do that. Always ensure that the fouls making up your website are inside off the public on the school html folder. So right here, O p a. You can see I do have the option off, uploaded a file or uploading a fold up. So let's just go ahead and upload the index at the HTML file. First of all, so let's go ahead, upload that one. And then next I'm gonna go over now to folder and upload the assets, fold up with all images. So it says this will put off some assets. Yes, go ahead and upload that. It's not a problem. So all of the images have been low. Been applauded logos, the images of ah team members, the five I corns and old of course, the CSS file have account. We forget that. Okay, so that is pretty much a nice All 37 files have uploaded successfully. And now the moment of truth. If I go ahead now and visit the sites, let's just go ahead and go to every petal calm. There you go, It's loaded now. There it is. We now have Web impact or comb live and direct on the Internets, and there it is. So that's exactly how you can upload your files over to your Web server. Just a few points, as if you have plenty or files, and you'd rather not upload them one by one. What you can do is you can simply adul of them to a single zip file, upload that zip file and then extract the ZIP file. In my case, right now, there is an extract button. It's the one right here so you can extract those files. But make sure that your files are in do root directory. Okay, make sure they inside directly inside of your public on the school html folder. If they're in another folder, you might have one or two issues with that. So last but not least, I would encourage you that you for having any issues trying to upload your files or something isn't working properly. I'll recommend you first of all, contact your Web hosting company. If they are a good company, they should be able to help you. And since it is their own system. They will be in a very, very good presidential advice you on how best to upload your files. But that's it. We've successfully added our Web site. Life on the Internet Think is much fortune. I will see you in the next class. 89. Managing Scripts: already, congratulations were successfully launched our website Life on the Internet. But now that it is on the Internet, you might begin to notice is one or two issues, particularly concerning the speed off your website to see right now, If I desire to refresh my page, notice that it's going to start taking a little bit longer than usual, especially when you begin add in additional code and maybe you get caught from Google or from other service out there to add something to your head of the PHP file. Things like that, you might begin to notice your upside slowing down just a little bit. One way to ensure that your site is as quick as possible is to manage your scripts and what am I talking about? If I head back to our side tools and I opened up the index of excrement file, notice that right here we're calling a script from the front. Awesome. It is fun, awesome, responsible for displaying all these icons on our paid. Remember, however, this cooperator is in our head is in the head section on the website one way how we can further improve the speed of our sites is to move scripts like this to the FOTA section. So what you want to do is you want to grab this script and then I'm gonna go ahead now and cut this. I'm gonna come all the way down here and just after the foot a section I am not going to pace the script light there. I can go ahead now and save this. And of course, if I head back to my bills, are we first the page and Ah, there you go. So basically the point here being that whenever you have scripts, unless it is explicitly stated that those scripts must be in the head section of your website, you typically want to move them down to the footer because right now, order. Before, when the scripts were in the head section will happen is that the browser starts from the top of your file and goes all the way down. So in this case, right now, before the Boza gets to displaying the logo, the contents of your page, it will meet the script, first of all, and it will have to execute their script. Executive skips takes longer than executing normal content. So Rather than having whoever visits your site waits for the brother to execute the script , the president can at least see the contents of your page and then down. Finally, once the blows A has got into the foot of section, it can then execute the script to display those icons. Those icons these icons in here are not as important as the actual content off the page. So once again, unless explicitly stated, I always add your scripts in the footer section off your website. So that's it. Thank you so much for watching. And of course I will see you in the next class. 90. You did it: So that's it. We've come to the end off this section. We've built ourselves a real walled, interactive, responsive website with HTML five and CSS three and from the bottom of my had lime. Don't say thank you so much for making it this far, and I hope you've learned it in a two along the journey. Now, if you've loved the course so far, I would encourage you to leave a review for the course, please, because reviews really do help me a lot. And I would really appreciate a written review from you. Now if you're interested, I do have more content. I do have to other sections where I show you the basics of what design and also the business of PHP survey interested? Be sure to check out those two are bonus sections. Otherwise, if you're satisfied with what you've learned so far, limb just say thank you so much Once again and Linda's wish you all the very best in your exam. A five and CSS, where projects think it's much and also next time bye bye 91. Web Design Section Preview: welcome to this very special bonus section where we're going to tackle Web design, and it's one thing to know, HTML and CSS says. But it's quite another to be able to design it. Website. Basically, think of the kinds of collagen going to use the kinds of images you're going to use, how you're going to space, sound the content, how you're going to design the structures, things like that. So it does require some training to be able to do things like that. Well designed and Web development are actually two different things. Think of Upset as a house right? Imagine a house was a website. The architect is the person who designed the house. In this case, the architect is the Web designer. The world developer is the actual bricklayer who goes on to now begin to put the Briggs and do the whole building itself. So that's the difference. So a lot of people are Web developers, but they're not Web designers, meaning that even though they can build a website, they need someone else to designed to upset first and then they'll look at the design and then build it out. So what I want to do right here is to show you how you can also take the ball off the Web designer and come with ideas to design a website and then eventually build it. Let me make wanting abundantly clear, I am more off a Web developer than a Web designer. So this section is not an advanced section by any stretch of the imagination. This is just pure basics of Web design. If you're a lot more if you're more interested in learning about Web design, there are other courses are there that you can take? This section is all about the basics, just teaching you enough to be able to come up with good designs for your websites, So I hope you find a section of various full Let's get started. 92. Site Structure: Let's welcome Teoh. This new section, where we're talking about Web design and the very first and I like to talk about is going to be the general structure off your website. And let's start by talking about the head out. Now the head of typically contains the logo as well as the main navigational menu, and most websites have this particular formula where you would have the logo on the left and then the main menu on the right. As you can see right here on the Web impact or come, lab cyber has a very similar structure. Moss has something similar, except that in addition to having the logo on the left, you do also have this small mini menu that next logo. But then on the light you now have like the main navigational menu. Now there is out which plus, which has something similar. Writer, you do have the logo on the left. You do have the main menu right next to the logo. But then, over here on the light, you do have a many, many where you can log in or try their product for free box that come have something similar. But you have the local on the left, the main menu right there on the center, but then another many, many white day to the light. So it really comes down to the kind of website you all building. But in most cases you will have the logo white there on the left. And if you need to have more than one menu in your header, you can either go with having are the very first menu right next logo and then the second over there to the right, like what you have over here on Mars and out which, plus, Or you could decide to have the logo on the left, the men many right in the center and then the second menu to the right. That's typically how you want to go. However, there are other instances where you might have a different head of design where you would have the logo right there in the middle of the top and then the main menu on the need. The logo. Now this kind of design is perfect. Full restaurants, cinemas, massage. Paolo's spas basically service over yen Ted websites, if that makes sense, but against right now, this makes perfect sense because in between the main menu and the logo, you do have, like the phone number. Which, of course, makes perfect sense because this is a restaurant where people might want to call into may be Booker's evasion. Maybe order some food to have it delivered things like that. And, of course, they also have their opening times when they are opened, when their clothes which, of course, makes perfect sense for these kinds off website. So again, it all depends on the kind of upset your building. If the building vehicle up a Web sites for businesses, then you want to go with the logo on left main menu on the light or, if you're building for restaurants. Are such Pollos Parsons like that you could go with Haven't logo right down the center and then the main menu underneath the logo. Let's take a look at two websites that do not follow this design concepts, and the 1st 1 here is going to be Neil Patel dot com. Now, even though he has his logo in the Hedda, he doesn't have his menu in the header. In fact, it's in the footer, but down here as you can see, but there's no why this design works well. It's because off the kind off page website this is, this is kind of like Google's such box where you come in here, you tap any domain you want to compete against, and then you click on Search and then he shows you how you cannot rank that domain and Google and other search engines. So the point here is that people are not really interested in navigating around the website . They just want to come in here tapping domain name and then see how they can defeat that domain. It's kind of like Google. When you go to Google, you're not looking to navigate around. You just want to search for certain keywords and then find out more information about that particular key. What's our topic? So again, it all comes down to the kind of website that you are design, and sometimes you might need the menu. Sometimes you may not need the many. So the flexible and finally, let's take a look at TechCrunch Doc com. Right here they have the logo on the left, but then they have their own menu directly underneath the logo on the left as well. This is a design debt you are not likely to see many times. And it's not the best. In my humble opinion, I mean, all of TechCrunch, I think they I read some very, very nice articles in the website sometimes, but personally, I'm not a fan of this kind of designed. Why not just have your logo on the left, right, and then have your main menu right here on the head as well. But to the light, I believe this will look much better than how it currently looks like this. This is not great, in my humble opinion. So I just wanted to point that out. You might see some websites with this kind of, um how design. All right. But have been said, Let's move on to the very next section and I want to talk about the main headline. Now, The main headline is designed to immediately convey to a visitor what the website is all about in his girls. Right now, Webb, impact stays level of your business. Build an impactful web presence. So animal committing here for the first time, we'll see that. Okay, Looks like this. People will specialize in helping businesses are improved their presence on the Internet because basically what this is all about, never go to Neil Patel. It's basically the same thing, Len, Why your competitors rank so high and how you can at long them. He tells you immediately how he can help you Lobster videos on the very similar, they say cybersecurity knowledge made easy, and they also provide some more information. In here, Mars is the same thing. There's a smarter way to do. S E O. You go Teoh out, which send personalized cold emails that get replies and then finally box dot com. Simplify how you work secure collaboration with anyone, anywhere on any device. So the point have been that light after your head up where you had a logo and your main menu, you want to have a main headline describing what your business is all about or what the website is all about. That's basically what you'd want to do. All right, let's go ahead and close these other websites because we don't need them anymore. And, ah, just closed Baltimore, all right, so next time we'll talk about here is going to be this sections All right, so right here, you can see that we do have a section for about us. We have services provided by walk with us and so on. But if you notice the backgrounds change so about house, as a plain white background says provided has an image background while walk With us has another white by grand as well made. The team has its own background testimonials has its one plane background again, clients has a different bag, and someone the point being here that one way to separate sections is by adding different backgrounds for them. It's not gonna be good if you have the exact same background are for multiple sections are consecutively. You could, in a way, kind of get away with just have, like, a plain white bag onto a plane back and cool off another type. Maybe, But in most cases, you want to have different backgrounds for your different sections. This way, it conveys to the user. Okay, this is a different section, and it just makes you look a lot more attractive over here. A lab cyber you can see died in here. I do have a plain white background For what is lab cyber, and then Mitchell instructor has the green background while Upside has a white background cause. Lobby has a green background. And then you have this, Ah, video that has kind of like a black Asian background Claims has a white background if accused as a green background. Software has a black bag on and so on and so forth. You can see right now that with each new section you have a new background as weights. You separated from the previous section soap. That's one thing I need to talk about as well. Try adding different backgrounds for your sections. You could go with a plan, background, Coehlo or you could go with a background image. Now let's come all the way down here to the food, and generally your footer is where you could have your social media icons. You could also have them in your header if you wanted to. But down here in the photo, it's a good place to have your social media likens, And he could also have, like a second navigational menu away. Third in navigational menu dependent on the website that you have in the future as well. So typically in here the menu will have in your footer would be well pointed pages that are not the most popular in this goes right now. For example, policies carry as events. These are not quite as popular as the orders right here. Like why our services testimonials. These are kind of like the pictures that are more in demand. So for the pages that are not as frequently demanded again like I said, like policies F accuses like that you can have them in the foot, our menu. And of course, don't forget to have your copy. Lights text right day new footer as well 2020 but will be impact. All right, reserved The voter is a good place to have your copyright text. Last but not least, I would just want to talk about animations. All right, now I know animations can be fantastic. They make your website look very, very, very exciting. But try as much as possible to limit the number of animations that you have running on your side because animations I take a lot more power to process. So the more the missions you have one in on your website this slow. Why? It will become. So try to minimize having animations or sliders or even video stretching. Minimize them as much as possible. Try to go with the GLA images and text. But in instances where it is, it's very important that you do have, ah, video by omens. You can show the video, but like I said, try to minimize the animations, the sliders. Ah, and so on on your website. So that's thanks so much for watching video. I will see you in the next class. 93. Fonts: So let's talk about a very, very important aspect of the design and that's going to be funds. The funds that you choose on extremely important because they tend to reflect the tone off your website. Phones are the best way to indicates that kind of personality your website embodies so it could be professional. It could be a blogger kind of personality or maybe even our comedic in nature. Now, to demonstrate the importance off phones, let me just give you some examples. So right here on our website were using the rather safe Are Monserrat off on family? Right? But then if I decide to come in here and change the fund family from on severance to let's go with maybe some like cursive, right? So my kidney right now and they change this to cursive. You can see right now that the tone almost instantly changes right now, even the headline it has this kind of ah fun that you normally associate it like movie websites or stuff like that. It no longer reflects that professional business tone. And over here on CBR, which is a comic book website, you can kind of see the fun family they're using in here. It's already is similar to the curse of that we have over here. But as because this website is about comics, a comic book, news TV shows things like that. But take a look at with the Washington Post. Okay, this is a website. It's a magazine website for news, and you can even see from the logo itself. You can see it has this very artistic kind of like fuel. Towards that end, of course, the headlines in here you can see this is very, very similar to like times New Roman and the body text itself. It's a lot more professional than crucify what you have over here on C, Belgacom and ah heavens, ellipses that was actually privileged to to walk on. It's the eliminates shaking guy dot com, and of course, this guy's a comedian. He you know he's a showman, basically, and you can tell right here from the from the phones being used in he can. It reflects the tone. It's affect the tone off the website you can see down here we're using kind of like a comic kind of a fund universe cooled down in here. You can see in here the phone's been used. You will never find professional phones like same on sellout or times new Roman being used on sets like this. You'll find something more related towards our comic comic sounds or cursive or something like that. So again, the funds that you choose have to reflect the tone off your website. Now, when it comes to the font size, you typically want to go with a science between 15 pixels and 22 pixels for your regular text. Now the reason why there is a range is because are not all fun. Families are equal when it comes to their sizes. So a Monserrat science of 15 pixels might be bigger than a little size off 15 pixels. But usually between the range of 15 pixels and two into pixels, you'll have our something ideal for the phone family that you are using now Headlines. H wants to H two bees should be bigger than your regular text. This is the Sistan dead. So here is kind of like an example of which might have you might have maybe your H one, which will be the biggest at 40 pixels h two, maybe 34 pixels each three would between four pick Susan. Of course, your regular text represented by the P R would be 18 pixels here is kind of like an example off the phone says you would have for your headlines and your regular text. Now, when it comes to choosing the actual fun family itself, there are two major types. OK, you've got the sun serif and you have Siri. If you may have heard of these before, serve simply means that the text has a declaration at the bottom off each letter, and you typically see this, especially on like the A's, the teas and maybe even the S. You will see it. You can see right here. It has that kind of like a swagger or sway, or I really don't know how to describe it. But look at the bottom of the sun. Sue if means that takes Hachinohe decoration at the bottom of each leg against right at the sunset. Basically, it's flats. There is no artistic design. Nothing. Nothing of the sort is just basically flat, so this is generally the major difference between your son Syria and your Sarif. So when it comes to choosing your your phone family for your text. You typical on the goopy descends. So brief something because it's a lot easier to read than the Su If and when it comes to choosing the phone families, I can recommend these five from Google phones. These five are usually the very, very best, and they're the safe phones you can go with for your ankle. That sex you've got open sends you have Latell. You have won seven, which is my favorite. You've got real way, and you also have PT sons. Now, with that being said, I'm not saying these are the only five you can choose. There are many, many hundreds of other funds out there, but the point here been that if ever stock and you don't know which fun family to go with, just go with one of this five, and you will be fine. So when it comes to the phone style and you want to go with one phone for your head as and and know that for your regular text, it's a great way to differentiate between your headlines and irregular text. You ready have the phone size to indicate the difference but it's often a good A. Did you have another kind of fun? Family speaks specifically for your head as one for a regular text and an optional. You could choose to have 1/3 fund for your links. It's not necessary, but you could do that as well. But you don't want to go with more than three our farm families on your website. So that's it for phones. Thanks so much for watching. I will see you in the next class. 94. Colors: Celestica What arguably the most important aspect of Web design and that's going to be colors. Colors are extremely important because, just like with the fund families, they also reflect emotion and tone. The colors you shoes will dictate the emotion or the tone Associate ID with your website. Now look at this two circles where you've got the very 1st 1 which is bigger. There isn't any color in there except gray black and basically it looks lifeless. But then you add in some shades of red and office, sort of. The circle now becomes a bit more lively. This is the impact off Carlos on your website. But another thing is, even though we know our plainclothes is very, very important, are playing way too much. Caller can also result in Europe's had been very, very tacky and not very, very good to look at. So it really comes down to you striking a balance when it comes to choosing your collars. But obviously the question might have right here is how do I choose the Kahlo's for my website. When I'm going to do here is I'm going to give you three basic steps to help you are solved . This challenge for the very first step right here would be to choose a dominant Carlo. What is the Kahlo associated with my brand with my logo? With my website. This is going to be your domain and Kahlo. I want to give you the second step here, which would be to create one or two acts and colors to create a call. Us came. So you choose your main dominant color, and then from that color you choose one or two are accent close to complement that dominant color. And finally, in Step three, you choose a background call. Oh, those at it to be basic steps. Let's go back to step on, which is the dominant Kahlo. The dominant call, like I said, is your brand association. It basically dictates what your brand water website is all about. Here are some examples with Coca Cola Light. The dominant college years, obviously red and in time I think of Coca Cola. You think off the call or read, but you also have Animal Planet. It's not a coincidence that here they used green as opposed to read. You also see why they chose green in here. Here's another example from Best Buy. If you live in United States or possibly even Canada, you may have heard of Best Buy you basically by Ella tricks From there and in Dublin, color here is usually homage again. You will see why they chose to use orange in here. So when it comes to colors, colors have different kinds of emotions associated with them. Red, which is very, very, very common, represents energy, danger, vibrancy, urgency. You typically would see red when you have the website trenching for me or something very, very important. Maybe there's a countdown. Something like that say, basically urges. People are to take action. Now you've got one is very, very similar, which is the orange. But this represents friendless and creativity. But it's also used to urge people to, like buy something or subscribe. It's not a coincidence why, on best Buy, you do have that kind of like that orange yellowish coehlo associated with them. So let's move on. You've got green. Remember Animal Planet using green as the our main Dublin Kahlo. That's because Green is used to represent nature. It represents health, it represents wealth, and also it is the second most preferred color by both men and women actually did not know this. I only found out when I was doing the research for this particular lesson. But Green is actually are the second most preferred color. Do you know what the first color is? You know, the most referred color you will find out soon enough. So agree, Like I said represents health, natural wealth. You've got yellow, represents youthfulness and share fullness. And it's used to grab attention instantly. A gamine to you. If you go to a website and you have a button that has a bag Uncle of Yellow, you will notice that button first before any author button. And now in here you've got black. Black is used trips and power locks We l against. That's what many times you will find black assisted with brands. State evokes strength and professionalism. You've got purple now. Problem is used. Represent wealth, loyalty with them. It's used in beauty products and even airlines. Actually, Thai Airways, I believe Qatar Airways as well, I believe maybe ah klm Lufthansa. I don't remember, but I know quite a few airlines actually use our purple as well. And now we've called Gray used Trip is in neutrality, logic, futuristic technology. That's why it's associated with brands like Apple Apple. They do have all great as one of their main dominant color. So it's just to represent technology, competence, sophistication. And finally, you have Blue, which represents trust, security, stability, Houston businesses, banks and blue is actually the number one most different column by both men and women. All right, so basically, you have to choose a dominant Kahlo that represents what's your business or what your website is all about. Seem I want to spend a few minutes to think about that, and then, basically, you can use your dominant call off on your backgrounds, your buttons as well as areas you want to draw attention to. That's where you would use your dominant color. But then you've also got the accent colors right. You can use this also on backgrounds, buttons and links. If you want to figure out how you can create an accent colors from your dominant Kahlo, make sure you check out the Pdf book I have. With this course, you will find a section that way. Today. I took the ball close. You will find a link theory it where you can find all that you can create. Accent clothes for your dominant color basically can go with Adobe. A believer. Adobe Colors has a tool that can allow you to create accent clothes from dominant color. You could just simply do your research and Google just happen. Your main demand. Coehlo. And find out what the accent colors are associated with. That dominant Coehlo are. And then, finally, you've got your background color. There isn't any particular vou a suitor with your bag on color, except make sure that your text is always easy to lead. It's no coincidence that most back on calls websites are typically white because the tax called the Texas, usually black and black, goes very, very well with white. So when you're choosing your background Coehlo, just make sure that the text is easily read by users. So that's it for Carlos. Thanks so much for watching. And of course I will see you in the next class 95. Working with Icons: Let's talk about icons in volition to Web design. And I thought I'd use live examples whether than its light show to talk about this particular topic. So Aikens are used nowadays on many, many websites. I'm over here on uber dot com and right here pay close attention to this critical last section. You've got icons just on top off some particular pieces of text. So you've got eat right? And of course, you've got the fork and a spoon representing Eat. You've got the car representing Vied. You've got those bars representing earned, which, by the way, you could also use this boss to represent our signal strength, maybe even frequency personally older views, maybe the pound sign or the dollar sign. But this is also perfectly fine. And of course, you can see the other icons in here and the text they are associated with. So when it comes to use in icons, rule number one is you want to make sure that the icons accurately represent the text that they are associated with. It's not gonna make any sense if for bike as an example, rather than using an actual bike, you end up using the car. It's not going to make any sense so well. Number one again. Make sure the text and the icons match. But then, where exactly would you use your icons? You can use your icons in columns. You can also use them in taps. For example. This is a tab right here. If I go to, I can click on Earn, and then you have to earn books up here. A conclusive business to business books appears so you can use icons to represent your tabs , but you can also use them in columns like Down here is an example. You've got their Bottles column newsroom column, Global's to the ship column and, of course, on top, you've got the icons. It's also why, on our website, where we have services provided I used icons represent our water. Particular category is all about again. You can see the icons accurately reflecting the text. There are suited with culture assurance, with the check mark our cloud with the cloud. I can write their cybersecurity with the shield and so on and so forth. So, like I said, you can use icons in your columns and your tamps. But there is another rule associated with icons, and that is the fact that icons should not be the spotlight. They should be very, very small, and it should be used to just basically compliment or improve the design off the column or the tap they are associated with. That should never be the spotlight. One more thing elected, mentioned we got in Aikens is when you use them in your navigational menu, make sure it is in a situation where there is enough space for them to be used. In other words, they don't make your menu look cluttered in this case. For example, with uber notice that on the left, where they have the actual main menu, they don't have icons representing our any of the text. But over here on the light, where they only have the language products, Logan and then sign up, they are able to use Aikens because, well, basically, the icons can are Philip a bit more space in here. Basically, if you remove the icons in here, the many will still look, look OK, but just this week icons the ones representing language products and Logan they do plants you up wonders over here on our Web impact. It will not have made any sense for us to have icons, right terrain arm a navigational many because again, we have already what, like seven items in our main menu. So adding additional icons will just make this look very, very, very clustered or clotted, and it would not look good. So again, if you're going to use Aikens on your menu, make sure there's enough room for them to appear in. So that's it for Aikens. Thanks so much for watching. I will see you in the next class. 96. Images: Let's talk about another important aspect of the design, and that's going to be background images that kinds of images you use are very, very important now. What I want to do here is to demonstrate the various ways how you can apply your background images, as well as the effects that you can apply to them to make them all look really, really good. Now the 1st 1 here is you have this background image, you have a logo and you also have some text. So this doesn't look all that great, right? It looks you can hardly see the logo. You can hardly read the the contents of the logo and even the text itself. It's even though you can read and you can see it's blogging made easy. It kind of blends in a little bit with the laptop because the laptop is also white, so it's not really visible that well. However, if we now apply its capacity with a Baghran call of black, now you can see that low goal is more visible as well as the text. So this right here is the most popular way off applying our background images, especially when you want to play text on your background image. You can go to capacity. Well, maybe 0.5 point six. Make the text more visible. Make whatever images or the logos that might be on that background are more visible as well . The 2nd 1 here is going to be with Grady INTs. Now Grady's basically involves combining colors, and right here you can see, for example, did you have kind of like a pinkish reddish kindof mix on the left towards the center and then under what? You have something more Greysia green in the way that you can see it right there. And here's another example again. You have something like purple bluish right there on the left, and then it was the same time. The right you have something more lemony greenish in a way, to be honest with you have never been a fan of Grady Insight. Hadley ever used radiance on my butt designs, but that is not to say that they're not. They're awesome. You can use grenades to create real Italy, are beautiful effects on your website, but here's another one that isn't very, very common but is actually pretty good as well. And that's the blood effect. So, like that you can see in the bag and we do have the image off a man holding a mobile phone . But you can. Today it's blood and it isn't white. Blood is because we want the text. Social media addiction to be more are visible to be more enhanced. So here's another kind off style. You can apply to your background images. You can make them a little bit blood in order to have the text on the background be more visible. So one more thing on the show is going to be when you add text boxes right with some text. In this case, right now, you can see that we do have the text box with the debate. Maybe the words how to make textbook of allays for for photos in food shop. One really awesome weights. You design your bag when images like this is to have some capacity on the actual box itself . Now, if you look closely, you can still see that through the box. We can still see the stars out there. It's not ah, peak. It's kind of transplant. You can see pats of the bagman as well, so there's another cool way to add text boxes on your website When they're over. Lemon dill on top of a background image, tried to make them a bit more transparent so that the user or the reader can still see at the bag round through the box. So, in general, are vital pulling images that are too small tow. Avoid stretching. Remember, we're talking about the cover size in property as well as the contain. If you're going to use cover, remember, the cova will stretch the image to ensure that it always occupies the full with a height of its container. If you use images of two small, you might end up straight in the image and they look blood, and they're not gonna look all that great. So avoid uploading to small images, but at the same time avoid opulent, oversized images. The detriment here is that when you have over science images, they will take longer to load and, as such, the speed of a reputable sofa as a result. So try to upload images that are no more than twice their actual display dimensions. Remember we talked about this in the put it section you want to go with no more than times , too, because really, times two is what's will accommodate our high resolution screens like the ones you find on Apple devices. Anything more than that is just is just too much now, just to give you a quick recap between pings and J pegs. Remember, pings off better quality, but because they're better quality, they're bigger in size, and the result will take a bit more time to load than Jeb XG. Pigs often feel quality, but the trade off here is that a smaller in science and it will load much faster, so use pings for your logos. They're grateful logos, possibly even icons. But then use J pigs, mostly for your regular images on your site. So that's it for images. Thanks so much for watching. I will see you in the next class. 97. Spacing: one final thing and let's talk about before we round up. This section on Web design basics is going to be spacing now. Already took about the general layout, but I didn't talk about space. And anticipation, of course, is very, very important. Generally, you wanted to be enough spacing between your sections, your columns as well as your head as and the GLA Texas. They could see right now on a life site. We do have lots and lots of spacing. And, of course, it allows the content on all website to basically all breathe. But now imagine this exact same website. But now we felt any space in here is the result. Right here, you can see the about US section now looks hall rebel. It looks like all the Texas like molded up against one another. You can see the services provided section as well by walk with us. Everything that looks like a mess because there is no space in so spacing, like I said, is very, very important. Make sure there's no space in between your content. Use your margins. Use your patterns appropriately. But, of course, don't go overboard. Don't that use in margins off like 200 pixels or patterns off 500 pixels. Off course you don't want to go. Our coup is easy to imagine. The patterns. Just make sure that is plenty of space between your sections, columns and, of course, between your H wounds H to use H threes and directly attacks, make sure you use your margins and patterns are for them. So that's it for space and not much to talk about in here. But thanks so much for watching. And, of course, I will see you in the next class. 98. Web Design Section Review: so that's it. We've come to the end off this bonus section where we tackle the basics off Web design, and hopefully, you now understand the importance of choosing to write Kahlo's How you Can Walk with Bhagwan Images High can play text on Baghlan images, how you can walk with icons, space and things like that. So, like I said, alien to preview this section isn't a belt advanced. The Web design concepts if you're more interested in Web design and pretty sure you confined advanced weapons and causes out there on the Internet. But if you are only interested interested in Linda basics, this section hopefully has provided you with such basics to go out there and begin to design beautiful websites. So that's it. I hope you enjoy this section. Thanks so much, and of course I will see you in the next section. 99. PHP Section Preview: all right. It's a welcome to bonus section number two. We're going to tackle the basics off P H P. Now PHP is a very, very powerful programming language that you might have heard of. When you think of PHP, think of Web servers they basically used to strike or establish a communication between it . Website Willbros Up and IT Web service. When everything cough servers, think off PHP now how compete be actually benefit all website as it is, even though right now this is a well developed website, it's designed beautifully. It's responsive, but it's not all that interactive. For example, if I click on let's say testimonials, find it takes us down to the testimonials section. But what if you wanted a separate Page four testimonials? What if you wanted to be able to leave this one page and go to another page? How do we achieve that? But we can achieve that with PHP so caught up in this section, I'm going to show you how you can make a sight more interactive so that when you click on links in the menu, it takes you to the actual pages for those menu items and of course. Don't forget our contact form. We do have a form, but it's not functional. If anyone comes in here types in their name email title message he'd send nothing's gonna happen. But with Ph. B. I'm going to show you how you can make contact forms actually work properly. So that's it for this section are you will find it very, very useful because PHP is an extremely powerful programming language and it's one that you must know. You need to know at least the basics of PHP to be able to build our interactive websites. So sit back, relax and as always, I hope you enjoy this section. Let's get started. 100. Creating the footer.php file: all right, welcome to the PHP section. And what I want to do here is to introduce you to a PHP statement or function known as include all require. What exactly are these two? Well, let's take a look at our website might. Currently, it's a single page. You click on any of the link right here. It takes you down to the respective section and so on. But what if we wanted our website to be like all the traditional websites where you have multiple pages? So when you click on testimonials, for example, veteran bringing those down here to the dismissal section, it takes us to a separate page specifically for the testimonial. That's typically how most websites are. We can use PHP for such, however. Let me show you something. Okay, Let's go over to w three schools dot com noticed that whenever I click on any one of these tabs right here, two things are always consistent. Of course, everyone of this page is the header and the foot down hit The content never changes in between the actual page itself. The content changes. Yes. If you clicked on Djebbour math, for example, all these right here changes. However, the header and footer is always the same. You will always find a logo on the left. You will find his menu on the right away, that this text on the right you will find them in navigational menu Friday. It doesn't matter which tab click on it is exactly the same over and over again as such, If we want to create a separate page for any one of these menu items, we will want to head out to be exactly the same. You wanted to go to be there on the left, the main menu on the right, and then down here. Of course, we want to put out to be exactly the same across all pages without being said. If we want to create a let's, say, a testimonial start html file, we would have to include the exact same. It's similar code for the header, and foods are all over again without PHP. But with PHP, we can simply go to the testimonials, don't html file and simply say, hey, call the contents or retrieve the contents for the header. All retrieved the contents for the footer with a single line off code you don't believe me . We'll check this out. Okay. What I'm gonna do here is this Okay? I'm gonna go over over to a public that HTML folder, and right here I am going to create a new file. Okay, Let me, like, click around here, Lim Disposable. Close this in the closing days of fixing. All right, so in here, I'm going to a click. Click on new file, and I'm going to call this fouda dot PHP. Okay, Now notice. I call it the PHP and not dot html. You'll soon find out by. I'm gonna go back to index dot html and then open of this file. I'm gonna come all the way down here, and what I'm gonna do is I'm going to grab the contents of the entire footer section. So right here, I'm going to come all the way down here. Gravel of this. Grab everything. I am going to cut this now. I'm going to open up, fouda dot PHP and I'm going to paste all that cold in here. Let me go ahead now and save. I will also save the index dot html file that saved that one as well. Now if I go back to the Broza and I would first a page notice that we no longer see the footer even door Right now we do have a foot of the PHP file. However, in the index dot html file itself, there is no code. There is nothing Tell in the browser or the server to retrieve the contents off fota dot PHP. As such, we now have to include a PHP statement in our in exert its NFL to say, hey, retrieve the contents for food tar dot PHP. And this is where the magical PHP statement is going to fall in. So right here just above the buddy tag, I'm going to say question mark PHP include. And then in coats fota thought P, uh, footer dot PHP and then colon and then question mark gritted on symbol. This right here is the PHP code telling the server to retrieve the contents off footer dot PHP. And of course, we just say for the victory because foot of the PHP and index dot html I and exactly the same folder, so make sure the path is always correct. So I'm gonna go ahead now, save this, but Now if I go back again in here and I refreshed the page, notice that we're still not saying the contents off the footer. Why? Because right now our file is too cold. Index thought HTM l If you want your server to process PHP code, you have to name your file dot PHP and not thought html noticed the debate we could right here is all in black. They're not highlighted. Like the html code. It's in blue, red and so on. So what I'm gonna do right now is I am going to simply rename the index dot html file. I'm going to rename this to index dot p h p. Let's confirm that. And now North is that all of a sudden appear to be good right now is now highlighted because we have now save the file as a PHP file and not an HTML file. If I go back to the browser and I refresh the page, you would know notice. We now have the footer appearing. So I said, OK, the icons have now finally appeared. I was always waiting for the icons to display, but you cannot see that the fota is now displayed fully because over here we have the code calling the contents of fertile PHP. Foot of the page B has the HTML code for the foot up. And of course, we've also renamed our index dot html file to index thought P H p Now you might be wondering, OK, so I've shown you how to use the include a statement. However, there is Another statement is very, very similar, which is the require statement. What exactly is the difference between include and the choir? Both of these will achieve the contents of your fell correctly. However, one is more secure while the other is less secure. What do I mean? Keep in mind that whenever you're dealing with PHP code, you're also dealing with a Web server. As such, there might be situations where there is a breakdown in communication between your browser and that website. Or maybe the UPS every refuses to respond. Who knows when such sales, or call the statement that you choose well indicate how the civil Lewis will respond in such a scenario. In the case of include include will continue to output code, even though there's an ever while require will no longer this play animal code, it will simply stop to demonstrate this. Let's do something. Okay. I'm gonna come down here and let's head about to index dot PHP. Uh, I'm gonna come down here. Let's let me just add some if similar code right here. So let me call this H one and I'm just say hello. Let me close this h one tag as well. Okay, I'm gonna go ahead now, and I'm going to save this file. However, I am going to change the name of our foot about PHP. I'm going to rename this to, let's say, foot tall. Ah, one dot PHP. Let's come from that. Okay, so right now, over here, where you have the include for the dot PHP we no longer have the foot of the Petri fell because it is now foot are warn dot PHP. So there should be an ever right here. But notice what's gonna happen if I head back to the browser and I refreshed the page. Notice that, yes, we no longer have the footer because it's now foot are wandered. Ph b. However, we still now have the We now have the hello. Tagged the h one type displaying hello because that is what it require. So that's what include does. Even though there was already an error here because footed of poetry was not found, include, still went on to outputs the H one tag off. Hello. However, if I change, include now to require whole what's gonna happen, I'm gonna go ahead now. Save this. If I hand back to the bills are on. I refers to page notice that the atria intact no longer this place. That's because we could be choir as soon a. There's an area off any sort. The rest of the cold vessel record will no longer be displayed. That's why it is more secure. You typically don't want to keep on output in code If there is an Evel, there are many scenarios where this will not be a very to not be a good idea to keep on out putting code. Even though there is already an ever message, hackers can take advantage of this and really mess up your website. So to be on the safe side, you typically want to go with require as opposed to include all Kate. So I'm gonna go ahead now and simply remove the H one tag. And of course, I will save the file. And then I will go back in here. And, of course, also simply renamed the foot a one back to ah footer dot PHP. Let me confirms that one. And there you go. Okay, I'm gonna go back in here. Just refresh the page and make sure everything is fine. And, ah, so that is it. So thank you so much for watching the very first video here on the PHP section Germany Next video wearable Now create our header dot PHP file. 101. Creating the header.php file: Well, comebacks and people's video is successfully created. Our foot adults PHP file and we were also able to use the require statement to retrieve its content. So what I'm gonna do right now is to very simply create eight a new file, and we'll call that file. The head are dot PHP is limited. Closed this index with PHP file. Ah, let me create a new file. Call it hedda dot PHP confirm and all right, I'm gonna open up eight others PHP. Let's also open up index dot PHP. So grab in the cold for the head of the PHP is going to be a bit more complicated than the foot of the PHP. The reason is that even though we only want the logo and the navigational menu, the future background image as well as this text and these two buttons all included inside off the Hedda section, it is right here. Notice This is the day of the Hedda I. D home. And his head off section also contains this divide hill of class of hero and all these other content. So it's gonna be a bit more tricky, but I'll talk about this in more detail in the very next video. So just to keep things simple for this video, I'm going to go ahead and grab everything all the way to where you have the HTML tag on top . So I'm going to cut this and then head about to head of the tahp and we paste all that code . Let's save it and then go back to in exert PHP and off course right here. I'm just remove this empty space right here. I am going to say question Mark PHP require and then coats. And then Hedda, I thought, P h P Colon person Mark acquitted and symbol. Save that. Let's head back in here. Refresh the page and there you go. So ahead of the PHP is now walking as well as the footer brought PHP. So that's it for creating the head of the Petri file Germany Vendex Video available now attempt to create a separate page 102. Creating the Contact Page: Well, come back. So what we're gonna do right now is we're going to create a separate page full. Let's say the contact section. Okay, So what I'm gonna do right now is, as usual, I'm gonna head back in here. Let's open up our public dot XML folder. Right clicking here. Quit a new file called his contact dot PHP. Let's confirms that one. I'm gonna open it up. First of all, come on, open up. Okay. I'm gonna head back to index of PHP. Now let's grab the section for the contact. What, So it's gonna be right here? Section I d contacts. I'm gonna grab everything all the way down here. I'm going to go ahead now and cut this head on over to contact with PHP paced all that code . Let's save it. I'm also going to save our index dot PHP as well. Let's save that one. Let's head back in here. Let's refresh the page and OK, so it's called on here. We no longer have the contact section. We still can click on the contact, sell in greater because we've not updated the menu. A link. But what I can do is I can go over to my your veil and then simply say contact thought. PHP press enter. And there you go. Now you can see we have the contact page without the head up without the food. So let's go back to our contact with PHP. And now let us include or require rather the header and the foot. So let's do this. I'm gonna open up a new line White hit at the very top. But you have section I d And I'm just gonna open up the PHP tag PHP require Coates hedda dot PHP Let's add a cool long closed a PHP tag. And then, of course, I don't just copy this one as well, and then it will come all the way down here and then simply repeat the process. But this time change header two footer dot PHP save. And now I'm gonna head back to the Broza, refresh the page and the hey you goes. And now we have ahead of being called. We also have the foot are being called as well and notice our contact US form is now also style because we are calling the head of the PHP that also has the link to the CSS file. So that's a German event. XVID available now Go ahead to update the menu links. I'll see you then. 103. Updating the Menu Links: welcome back to the people's video is successfully created our contact with PHP file. However, over here on the main many when we click on contact, it doesn't do anything because we have not updated the link to point to the contact dot PHP page. So to do this very, very, very simple, I'm gonna head back to the header dot PHP file because this is the file holding our main menu now and then all we have to do is go to the navigational section, look for the contacts section and of course, right here. The A tag is Well, we want to take it because that's the link. I'll just come in here right now and simply say four slash contact adat P H p. That's all we need to do. I'm going to go ahead now. Save this. Let's come over here first of Page and Linda's make sure that I am on the homepage itself. Okay, so for me right now, if I click on contact, it now takes us to the contact dot p h p page. It says easy as that. So we're going to create other pages. Just go to your me navigational menu and updated the A tax to point them two point his links to the new pages, however, notice now that we are even the world to contact the PHP page, we have no way off going back to the home page. One solution might be to create a new menu item called Home and and simply point that I tempt to the home page. However, a better way anymore, more than way off points in or creating a link to the homepage would be to add the link on the low goal. Many times you go to websites, you would not see a home page, but if you click on the logo, it will take you back to their home page. So let's do something very, very similar here. I'm just gonna go back to the head of the PHP file. Let's look for the logo section and off course. It's right here, but you have brand local rap and then the name. So very simply where we have the image displaying the actual logo, I'll just add the a tag a trip equals. And then in coats, you might be thinking, How do we point to the home page. It's very, very simple. Just add 1/4 slash. That's all you need to do. So now I'm gonna go ahead, close this And, of course, at the end, right here. I'm also going to close the a tag once again. And there you go. I'm gonna go ahead now and save this. Let's go Over here Refers to Page and of course, notice that we're still in the contact with PHP our page. However, if I know Nova on the logo, especially the circle right here when I click on it, it takes us back to the home page to the index dot PHP file. However, these text itself is still not a link. So all you all you need to do right now is you can just come in here and do the exact same thing. So just grab these a tag with the Ford Slash coming here pasted for the span class continued attacks. And of course, I did end in here. Just go ahead and simply close. Ah, the a tag save Go back in here refers to page and they go now The entire logo is clickable . Let's go to the contact with PHP page click on the text, right? A. It takes us back to the home page of index dot p h p. So that's it for updating our manual links. And of course, I will see you into the next class. 104. PHP Challenge: I want to use this opportunity to present to you a bit of a challenge if you are up for it . So far, so good we've been able to update our menu links. However, on the contact of PHP notice, there were still seen the background image as well as this hero section when ideally all we should be seen would be the logo, the navigational menu and then the contact form. Kind of like what you have over here at the World Bank Academy. This is the home page. But if you click on contact, you can see right now that you no longer have the heroes section. All you have is just a text as well as the form. It is only on the home page where you have these heroes section with the background image and the text. Likewise, I want you to try and recreate something similar over here on our website so that when you click on contact with PHP, you no longer said his background image. You no longer said this text any two buttons. All you will see will be the logo, the navigational menu and then the content for the contractors are formed, So I'm going to give you a few hints if you go back to the header dot PHP file. This is the day we are trying to remove from the heritage PHP this day of class of hero. So you're going to simply remove this text, put it inside of the index dot PHP file, and then you'll have to do some styling because when she removed this section your coin Hedda off the logo. And in navigational menu, we no longer have the background image as as, as as his background you. So you'll have to use some CSS to apply, maybe a bag on cool off black or maybe another kind of color. So that's the challenge. I invite you to try it if you're up for it. And, of course, if you run into any challenges, let me know more than happy to assist you. So that's I think, so much fortune, and of course I will see you in the next class 105. The Date Function: Well, come back. I want to show you a quick way. Or rather, a quick welcome back. I want you. Welcome back. I want to show you a better way to output the dates in our food. So But we have the all rights reserved, our copyright text. Right now, we are manually are putting the date with HTML, meaning that when the new year comes in will have to go back to our code and then change 2022 2021 boat with GHB, we can actually do this automatically. People will keep track of the year, and then when the new year comes in, it will automatically change 2022 2021. So how do we do this? Well, we're gonna make use off a function called the PHP date. Basically, PHP has a lot of functions like pre build programs that can output data force. So what I'm gonna do here is I'm going to go to my foot, started PHP because that's the file that has the date. And right here I am going to remove 20 21st of all, and then I'm going to introduce the opening PHP code. PHP and then I'm going to say echo Echo is basically used to output data. It's kind of like printing out our content. So my echo, we're asking PHP to display some content. So we want to display the date. So as a result, I'm going to say echo and then dates and then in brackets and then in double coats, I will add the code capital, why? And then my semi colon, and then I'm going to close the PHP code. What this is doing right now is we're saying echo the date and why the capital why represents the year. So let me go ahead now and save this and I'm gonna go back to my bills are refers to Page. And then if we school all the way down here, you can see we now have 2020 being output, Ted. But how do we know it's actually working? Well, if I come back in here and I changed the capital why so let's say l l in this case will represent the day. I'm gonna go ahead now save again. I'll go back to my browser were first a page and now you can see today is Tuesday. So now you can see PHP is actually working. So this is the general code, right? You have your opening PHP code and then echo to output, and then the function is called dates. But even about dates is there are a lot of variables with a date that you can have the time you can have the day you can have the month. You can have the year and so on. So each of these variables have their code. So l in this case represents the a day. And if I wanted to display, let's say, the month as an example, I will remove l and use capital F instead. Let's save this and let me show you. I'm going to refresh the pros are come all the way down here and now you can see it is June 2020. Actually, let's go ahead and output the month and also ah, the year. So there's gonna B f and then space and then a capital. Why go back in here? Refresh. Come all the way down here and there you go. It is June 2020. Note by the way, that these letters they actually case sensitive small little air. Four Not are put anything, it will only output the actual letter f while a small little why will output the last two digits off the year. So in this case right now, if I saved this and I came back in here, it will now be 20 as opposed to 2020. So keep that in mind. Let's go back in here. Change everything back to why save? And there you go. So that's how you can use the date function to output the date of the coin year. And if you want more instructions, you can go to PHP dot net and then simply search for the date function. In here you'll find all the various variables that you can use, like s capital. And you can use Z. You can use W and so on and so forth. So that's I think, such fortune. I will see you in the next class 106. Making our Contact Form work: All right. So welcome to the very final video here in our period resection. And when I want to do here to show you how to get the PHP form to walk, we currently does have it as a style form of God. Html CSS, but nothing more. There is no functionality behind the scenes Now, I have already created all the necessary code. So what I'm gonna do right now is to walk you through the court and explain to you how it actually works. So I didn't have my contact with PHP file open right here, as you can see. And over here, this is where the form actually begins. What you've got four method equals get now. There are two types of values you can provide in here. You can either go get all post post is the much better value because it's more secure than get. And I'll show you exactly why. What I'm gonna do right now is I'm simply going to go ahead and save these two files. Don't worry about them. Will explain to you exactly what's happening, but I'm gonna go back to my blows. Our calendars refresh. No, no, that we have get as the value vital where we have the formative, but it's set to get Okay, so for coming in right now. And I filled in my name email title and l s having some some some messages. Well, and I'm gonna hit send, All right. Basically, we're having an error message, but it's not necessarily because off that gets actually ill. It's because of the changed developed to get But it's something else actually wanted to show you what happens in the u R l When you use get you see right here we have the name off the person sending the email That's Alexander Bony. We have his email address. We have the title. We have the message All output head in Diyala Bill. This is what get does. It will output the contents off the form in the U. R L, which is very, very bad for security reasons. You want to go with post into the because with post, you will not see these values at all. Islam does go back in here and change the format it from gets to post now The reason why we're actually having the error messages, because in the actual form doing all the process, and we Basin, post, post, post, post Post and so on. So if we wanted to use get will have to change some of the fellas in here. That's why we actually had that Errol message. But going back in here, I've got the post for the Vela form method. And now in here, where you have action. This is very, very important. Because right here, this signifies to PHP. What exactly should happen when a user hits send right? Nervous and okay, Go to contact us, form the PHP and get all the necessary processing court from day. This right here is now the contact US form dot PHP file. This is the actual pH we could walking behind the scenes to output the form and the contents and do every other thing that's necessary. So what exactly is going on here? A couple of things were quite alot things actually them Just refresh this page. All right, Right Now let me show you something If I attempt to send this form without filling out the title guess what it says. Police fill out this field even if I fill out the field and I say hello and I hit Send again. It's also says police follow this field as well. Basically, we've told Peter to confirm that descend er has actually filled out all the necessary fields. And how do we do that? Well, we did that over here. Lenders walk you through the initial. Ah, beginning. So right here. This is just to confirm that there is actually data in the form. And if there is no form, if there is no data, just say, Hey, there is no post data. That's basically what This does this right here. This is where we begin to confirm that the user is actually filling out the fields. You've got this filter function, filter, sanitize, string email These all this right here is just to confirm that the user is actually filling out those feels correctly and then invite here. You can see it say's returns filled ever messages. Basically, if the name field isn't field or the email feel isn't filled or the tattoo feel isn't filled or even of the message field isn't filled, but into output. Dismiss it, saying one or more. The quiet fields are empty. I know this looks complicated, but it's basically PHP. It's not that complicated. Don't worry. And then over here, if for one who is not here there a user filled at all the fields but did not fill out the faithful correctly well, it's going to say the email format is incorrect. That's exactly what this particular function is doing. And you can see this if if if so, basically it's condition. It's it's all conditional if the user filled out the phones. But infill of the faithful correctly output this much message, saying the email from what is incorrect. That's exactly what all of this court right here is basically doing its confirming that user has filled out all the fields correctly. And if the user hasn't output an Evel message, all right? No, Before I go on like here, you have name, email, title message. It is important that you add a new variable to the form fields. And that's exactly what I did in here. If it was called the name you can see right here under the our contact name, we have name equals name for email. We have name equals email and then also for title. We have name equals Titou. And then finally, for the message, we have name equals message. In order for Petri to properly sanitize each of these fields, they need to have the name available. So, please, I'll go ahead and do that. Don't forget to do that. Going back to the contact form. So right here, Basically, what's happening right here. Is that okay? So what happens if the user has filled out old? It feels correctly send the email like that's basically what this does. Writer. You have the toll, and this is the address where the email will be sent to any contact from will be sent to. So you can come in right now and change this to the appropriate email right here. Right now. We off creating the actual message itself. When the email is sent, how will be presented? Well, we have the subject. Okay, The subject value. And of course, right here we have the name and then the title. So basically, when we receive the email or from the contact form, the title of the email will have the person's name as well. Asked that title That's basically what these lines those the subject will produce this line and then the actual message off the email will now have the name of the person, the email, the title and then the message. That's what all these does. You said this backward slash and backward slash and these are like the line breaks to be out. Check that you haven't. HTML. This is just to ensure that each of this will be in a separate line. But all this right here, but just outputs in the values of all the filter output involve the name email title and then message. And then, of course, your email has to have the head as in place. So the head of I t will be film will be impact contacting and in here again. You want to confirm that this actual email right here is correct? I've set mine to be the exact same one that I said it to right here and then, of course, replied to and then the post email. So we want to reply to the email that was filled in the contact form, which is where we have our post and an email right here. That's exactly what this line does. And then, of course, you have the Santa calls mail to subject message head as basically, and this is the final function to send the email. Finally ritual, of course, again will have the images. It's been sent to the subject, that message. And, of course, the necessary head of that's exactly what his function might it does. And then finally, if the email was sent successfully, Echo, This must have sent a message of successfully sent Thank you or else say there was an Evel . The message was not sent us basically what? This our final piece of code does so Like I said, I'm going to share the code with you, and you're more than welcome to test it out. Try it out. And, um, that is pretty much it. So if you have any questions about this, do let me know. Thank you so much for watching, and I'll see in the next class 107. Final Conclusion: so that's it will become official. It's you, the end off this course on HTML and CSS and from the bottom of my heart llamado safe Spanglish so much. And I hope you thoroughly enjoy this course and I hope you've learned enough about HTML CSS and some of designed en PHP to build beautiful, responsive interactive websites. If you enjoy the course, please do consider leaving the review reviews really do help. Middle also, please spend maybe 30 seconds and just waiting. If you telling people how much you enjoyed the course all really, really appreciate it. And don't forget I am on YouTube. I do have a YouTube channel the monkey subscribe Hit the bill so that you notified whenever I upload in you tutorial. And of course I'm also on Facebook. That monkey online That's my page. Join the Facebook group. If you haven't, it's a great place to interact with me and other students as well. So once again, from the bottom of my heart. Thank you so much for finishing the course. And I wish you all the very best in Europe development projects. Look and I'll talk to you next time. Bye bye