Web Development with HTML CSS BOOTSTRAP JQUERY

1. Learn Web Development From Scratch With HTML CSS BOOTSTRAP and JQUERY: I would like to welcome you to this wonderful course, which will make your Web developer from scratch. This course has three major sections for six, and we'll get you up and running with heads, Tamil and CIA says. Then in the 2nd 6 and we will dive in the boat trip, which will enable you to develop production really professional way places that are beautiful, feature reach and fully responsive. They will work perfectly for both Web and mobile devices. We will not stop there. We will also dive into J Query, and you will be surprised how cool and easy Decker is. Even if you know absolutely nothing about JavaScript, you will learn about using cool animations, learn how to select the head stable elements using a query and add awesome faces to them. Now you might be thinking, Okay, that's great. But wait, there is more. There are some great topics covered as well. One of them is adding email feature to your contact forms. Yes, it's impossible to use email feature on static sites that are built on Lee with his salmon and sea assists without any service side technology such as PSP. But we will tackle that problem too nice and easy. And it will go live as well. Yes. I will show you how to push a local project to the life server and reach out to the whole world. This one course will change everything. You know what development is vast and complex. But mainly it's because off the confusion and not being able to decide where to begin and what to learn because there's so much to learn. This course will solve that problem. Enroll in this course and change your life. Okay, so here we have a beautiful carousel in Miss Slider that we will be building in this course in the bootstrap six and further on you learn more about animation and adding flour features with Zachary. And he can implement that feature those techniques in this space as well. And our base begins with the title and a bit of a description. We have beautiful jumper, turn applied. We have beautiful, responsive image, as you can see. Let me show you. Yeah, it is fully responsive. We have the hamburger menu in the mobile mobile sites for the smallest squints. As you can see, it works beautifully. We have navigation, which will automatically highlight the section that we're on again. So we have the icons and beautiful like Aiken box. Well, you learn how to use icons. We'll learn how to use Google fonts as well. We will also learn how to use full with fixed background images for beautifully fix. As you can see here, he made stays, and then the content moves pretty cool. We will also be building contact forms, tables and so on. And this is not just a contact form, and this contact from actually works you can send. People can contact you. Big people can type the name email message and they consent and you'll get the actual email . And that's something exciting because you can't really easy to implement this vision. Just hesed emergency essence. Study excites, but we will tackle the problem as well. And as you can see when you brought in through the paces depends on with sex, and you're If you are in about face, you will see this sex and gets highlighted. And once you move to the services, you can see the space for others and when she go to the contact gets highlighted. So we will add all this functionality as well. And here we have a table with Grady in background applied to it. So which is another cool feature? You can play around with this and create beautiful Grady in background. Also, how to write problem s your contents as well. So we will keep that in mind as well. We will try to build a proper head stable semantic places that will work beautifully for Sergeant in Sands. Well, so as you can see the choir, a lot of things covered here We have battles with Header back, Body six and and the culture X Importance and someone. And there's one more quoting what model? Here. You can customize it the way you like, and you learn quite a lot about adding interactivity and animations using day query in the tar six and of discourse and all those things that you learn in the Jaqui. Second, you can apply to this project as well. So this is the second project. We will have our first project build with only his demon and CSS. And then we will build another small project with bakery as well. So you can combine all those things that you learn and create something beautiful. Maybe create your own portfolio and get ready to dive into the world off Web development. So it is exciting. I'm sure you feel it. And without further ado, let's get started. Thank you. 2. 01 Write your first html code and run in the browser: Okay, so you want to learn Web development right quick? The first thing you need to learn is Hess Dema, and it's pretty easy and it's fun to So let's get started. The first thing we need is a text editor and I recommend you use sublime text. You can use any other text surgery if you're already using them, if not to take this out. This is really cool. This service for sublime text and then it's good of the website and then you can download. I have already downloaded, so let me open up. Okay, here is the different lay out off the sublime text weaken sends the colors into Laura. Thanks, but let's keep it as it is. The first thing we need is create a folder where we will save our estimate file. So let's go to my disturb, maybe queer a folder. My name is do you know, on a limb and drag this to my editor? And as you can see, the side by opened up with the folder. This has nothing. Let's queer One file, right click new file. Come on, sit. Common s Are you getting just go from many state? Let's save it as index dot headstand. So there we have it in extreme haste. Email. So this is our fire and we real right? Heh. Steam l cold into this one and this will be displayed in the brother. I didn't go to this disturb. So we have created a fire. If you double click, it will open up in the Google car. That's double click. And as you can see, the the path of the file and there's nothing there. Kids who are simply Let's right, let's write our name. So how you ride hesed him? You start with Hesed. Emily. Dag. So we're going to quit a paragraph? Uh, yeah, your skin. It's square very. Were you open the paragraph with that? And then he closed paragraph with that. So in between, everything right will be rendered in the pace as the paragraph. Let's write my name. He's right. What saving command is a good dude from you. Come around place. Let's go to the browser and it's repressed a bit. As you can see, our name is rendered as paragraph. Great. It's exciting, isn't it? We created something or for nothing. That's the beauty of court and his devil is just the starting point. Later on, you might learn some other broad language and have a lot of fun. And how obviously recommend you, but yeah, this is the starting point and you're in the right place. That's quit. He decided to learn, Cordy, which is awesome. Okay, so this is the paragraph. But there are the text has demon attacks. Let's say heading, let's create a hitch. One which one stands for heading one right, open it and close it. So within here, everything you write would be rendered as the heading one, which is night Nice would be hitting. So his demon has six times of heading this one. It's too. They have has three. There has for all the way to head six, are you? So this is hello. We're do the same for heading to bring three heading for it's five and hit six. You can create artisanal spaces for you to read it that started the fire. It's good in Broward and refers. And as you can see, this is the heading one heading two, heading through helpfully, as you can see, besides the decreasing and it's slightly strong, that's a bold text. So that's That's the most basics off his Dimel. You learned to create headings from hate Theron, although it had six. And this is the paragraph, right? So this is it, and we'll do more in the next list. It's fun, isn't it? It's absolutely fun. You rewrite some core and then you see it in the brother. Awesome. All right, See, in the next listen. Thank you. 3. 02 Using inline css styling: I was really resorts. Um, head steam ahead. It's one to hit six and the paragraph. But this is not the right with structure and Hess team a pace. This is this Fine. Let's Kobe. What's copy? Dilated? The first thing we need to do in order to create his Sim is we have to define the doctor and let's create a proper festival base. So what is the problem? Has Tamalpais proper her stamina? Pace? What I mean by that is if you go to any website and then rightly and then going on view pays source, you see all these sticks. This is Hesed email. All the takes and their sons ever squibbed. And there's some styling. Start up. That's not really stuff. Yeah, styling and all this stuff, so listen well regarded. So as you can see, the it begins with dark type has demon. We have to declare that on top of the base and then we create Hesed email and then inside his demon, we have the heading and inside heading. We have all these title this sublime takes. As you can see, that appears in the tap and then style sitting all that stuff will deal with this later. So you begin with Doctor has done so. Let's copy that. Is that so? You always have to declare this some type of base. And then since we have this text editor is really do start typing is demon. So quit his team ill. And then let's create head sexy this sex and will not be visible for for the uses were visiting your base. It will not visible. As you can see, this is the source of this space. But as you can see the head, sex and all this, you can see in the top six in the title. But everything else you can see, I guess that just that's for the garages. Tow, Understand. So required ahead head sex and and we leave it as it. It will come back to it later. And then we clear body six. So inside of body section we write everything way, have dry. So let's clear the heads one again. Let's say work and then let's write some conduct here. Okay, so we have some country. It's just don't me data if you go to the browser and repress no thanks so as you can see the title and the paragraph. Great. So this is the most basic layout off the weapons. We can quit Bit off. Let's create a horizontal line. Hits R stands for her gentle line se so as you can see heading horizontal line in the farewell. So there got a lot off festival tax, but he don't need to know that the most important are headings. Hits on two hits, six and then paragraph. And then you will big up other things. You don't get distress about them now. Okay, so we have the basic has team. But how about styling? How about making this heading a different color? Let's do that. There's a couple of ways of doing this. The this one is called in line style. So how we do this is style equal double quotation marks and the inside this year, right? The style. So this is C assist. So what we're gonna do is we're gonna make it red, so it starts read. So you must have noticed this character here and then red. And then this second cup saved. So this hedge Juan inside this high, John inside we wrote inland CS is stir with this style day, and then we said said the color to it, your first and you can see the car that it says beer. 4. 03 Create and link your own css file: we don't drive. You have style, say sometimes it's good this way is good, but all the other times it's not practical. So what? We're gonna do it? We can quit a different style. Sit. How do you do that? We do that by simply creating different file new file its name it. Come on, sit. Let's name it Stolen art, CSX said. We have the established it. And so let's crew. Let's a let's write some styling. Let's write hits one we want to tends to read right? Uh, one double curly braces and then hit. Enter and they were in between the right, of course. So we're in the right color. Read. Thank you. We removed the styling from this place. Let's save this one. And then we have this style sit here that said this to good brother and repress The styling is gone. That's because we have created a style said, but we haven't linked this file. Do the hesitant in explains. So we need to link this sounds it to our estimable. So how do you do that? We do that inside head sex. And so we created his demo day with contents. The entire estimate based. And inside the base we have 261 is heading on his body. Inside body were all the things for the browser for our users to see and here in the head sex and you write things that you just don't see. But that that's that's how it works. The important stuff. Let's go to link for our stance is how do we do that? Using the link? Okay, destroyed. The This one doesn't have the closing. It was like so this under the knife, most of them, most of these most of them will have Or some of them will not have things like link and images later notes. A little styles it again. It righted or you can take it off. Doesn't really matter. Okay, so history will be styled or see Asus two. This is the reference. So this is really simply just remember it as a reference again. So, yeah, save it. Let's go to broken first. And as you can see, the style is back. How about making it playing some Western? Let's let's make it bigger. Let's let's make it from sides. Let's make it 50 big soup. Now this is CS is properties in CS is about color, foreign size, back and color. Loris Loris Stop! But you learn. Still bested. So you learned them one by one, Sometimes stressful, you know, Pick up and you can't really learn everything in the start building as you build your Lord . And that's the best way it's a person. See, the text has gotten bigger. What? So let's so we created a style. Sit in this. Listen in the next lesson will do some more stuff seeing the makes. 5. 04 Using google fonts: I could let to learn about using girlfriends. So you have, says the Google fronts. Let's go to the Google phones we have set. And do you want to try this literal list? I guess so. Is it until you can browse a lot off Florencia? I'm going to just take the first night looks. Looks all right. So, as you can see when you click once you said, it comes like that once you get the link. So let's take link. And as you can see, you can see how to use this art. They have shown the the way of using it to squirt. Let's go to our heads team of base and Let's baseness link here. But they have high decided from good to have you sidebar so and high The circle is common K and be back full control. K and control be simultaneously to hide, hide in short side. But again, let's try to use this marina marina. So this is this a foreign family, Very simply, is that let's do that. Let's let's sends out fund style for heading Send front family. What is that, B. R, uh, school. All right. Saved the brother and the first the biz. And, as you can see, the for instance, awesome. So this is how easy it is to use Google fronts. The reason we using little fronts is worth sites they take. Didn't it's like using different fronts in a local computer for website. You can't use all of them. So if you want to use different form than the different ones that you normally see, you have to go for Google funds. So there we have it. We just learned to use the little funds to. It's great. It's very easy. Let's get the link putting the head sex and and then in your styles, it whichever, uh, element you're targeting this right time for family and the name of fart. 6. 05 Adding images to html pages: Okay, so we have our website which is looking all right. Yes. Add some images so that let's make a bit interesting. So let's let's do that. So how do you add images in our website? It's It's pretty easy. Let me show you. What I've done here actually is in our folder. What I've done is I've created a folder called Images and inside these images I have two images. No one is beauty and on the snow. All right, so I want to link these images. How do we do that? It's bit similar. It's a bit similar. Do linking the style sittin front where it's not exactly a guesser. Let me show you only after the battle where let's create heads to And then let's name it beautiful it is. And let's bring the four during the images You. So how do you use them? Is with the immense tag I n g. And then if you have this broken insulin, you sublime text editor, it will be really, really easy to right history like you. So as a stretch I am Z and then he kep and I got all this. How we can do you can do that. Go to tools, common palette s on and you get these absence. Let's it's clicking install brackets. And, as he concedes in store, Okay, so you can type a lot of teams plugging slower things. You can do it. Sublime takes for the moment to generate the Heston attacks easily. Just shorts for E. M and T. This is a quick plug, Emmett. I don't have that. So I don't have that instant. But you can simply source for Emmett because I had it happened. It doesn't show up here. Otherwise, you just saw there on top and just click that and then restarted sublime texting. You'll be able to write like That's pretty, so it's pretty straightforward source and then old tech. So where's all the old tag? Is the name of the image on its committed? Let's create a source. First, let's delete this one. I am its source. So what is a mess? Source in this service is Let me open up this side bar. You miss this. As you can see, it's inside images for so first we have to go inside amazes folder like that, and then the name of the game is so that's so no way. No, I don't. That's it. Save it. And now, because we have images available in our full directory, you should be able to see it in the brother. Let's let's see, your friends didn't work as you can see the image stag. Generous. Listen, but the link, probably we? No, I think you got it first. As you can see, we have beautiful image. It's quite big. We can resize it, but as you can see, it's beautiful. How do we resize them? Is it's It's quite big. What we gonna do that we can do way can. Here's inland sea ASUs. We can use the stance it sometimes for individual images. It's very to It's better to use inland as well. Let me show you both. So how you do that is with the to And, uh, this do was height and weight. Let's define the height. Hide in with Hinton Twit. The height was the hide we want probably 500 pixel. The word be safe first and now it's back. Awesome. As you can see, there's scaled properly, all right, that's that's pretty good. And hide with You might not want to do with because sometimes distorts the image with 200 peaks. Say first and yeah, we have to do it properly, both both ways. Probably this image. Big flat. So probably the with should be. It should be. Five bullets in 500 height, maybe. Let's make it 300. That same hugging that. Okay, so how did we have decreased the height and so is the image is scared. So that's good. So that's how you can eat. Bring image to your head steam of far. 7. 06 Adding alt tags to images and its importance: you put the image in the for the directory and you link like that. Now I was talking about this out all tech, which is pretty important because it's it's really important for us because we we go to the weapons and we see it's beautiful in this but for the start engines. But you, if you have hard word S CEO, certain and optimization or not, well, I'll tell you anyway. So when Google comes looking for your website, when people starts and you, obviously you want to go inside to appear in the surgeons, so certainly regional. So how How does Google find your website? Let's let's go and find out. Let's click in the You play, sir. And as you can see, this is what Google's Google are. Girls. Robert, when they come looking for the proper content range to the user. When you type something when you type, let's Norway, you Google soldier. The reasons off 10. With So how does Google service Google does that best on? He goes throughout the Internet and find the most relevant results. So how well outside fully will be found only if people type Laura maps 100 even that. But you know what I'm saying? So this is what they see the sergeant. So if we don't give any old stag toe limit, they don't know what is. What is it or is this about, you know? So to inform them to make them understand the content off our off our base, we write the all time and all type. Just the explanation. This went down for the certain. So let's write picture. No, that's beautiful. Gula loves it if you're effects, as you can see the art. So this is not for humans, but it's it's really important for good. Certain optimization. Our guest. Today we have a beautiful simple Web bays with title um, better wealth. Second heading aim is off course. We will be doing much more. But for the moment, let's stop and destroyed Teoh. Try to use your own image. Tried to create real content. Maybe with your name and the ability for biographic broad yourself and stuff like that. So yet I would see in the next video. Thank you 8. 07 Add links to text: Okay, So the next thing we want to do is clear some links because we're pasar all over leaks linking from this place to another stuff like that. So let's clear some links. How do you do it? Its missile? You let me hide the sidebar. Let's see. Let's give a bit of her, uh, captain to our image. And there's a tag for in his stable for that fig. Can you? And then let's call it, uh, beautiful. No way. That's minutes. Are you? Now let's make this clear. Able. Actually, we should start with a simple texture. That's easy for you. I let me quit to me. Simple, isn't it? I guess I will make this text clickable. And then we go on making the inexplicable. How do you do that? We wrap this text. Let me call me this text, didn't it? Let me just click Type A and hit tab. If you have installed that Emmett blogging that I was starting body, you could easily get this. Otherwise you simply write down between the air. Just quit the eight X first and then right pitch, Griff, Griff. And then we give the link. Okay, so let's Let's give it a name like, Yeah, we called Beautiful. That's best click me. And when people click on this takes now, as you can see, as soon as we wrap this text as he, uh, this will look different. See this one? It looks different and as you hover over the point of changes, so that's how it works. Links. And I didn't see on your right the link. It's by default. It's going to the same place. Let's fix that up. Let's make it piston to be. We didn't treat this copy paste. That's it's good to Gould, a car that can click copy and then in the heads. Rev suspected. It symbolized that so has drift when people click. And this and let's make it a visit color. Did it fixed? Save it. And the 1st 2 pages visit color of dot com is when you click, you will be taken to the car took all right. But what if we don't want to be redirected your it to the other side? What if we want to open this link to a new tab? There's a solution for that. All we have to do is we have Ah, we have to use target. All we have to do is, uh, Target. Even still underscore bank in sight. Courtis more so. We have the history if and we have the link, we supplied the link to the history and then we created target. And what did we say in the target? Underscore Blank. What that does is it opens up the link to the new new tap for clicking. This, as you concede, opens in a new tail. Our beds here safe. It's beautiful. In most cases, these were you because you don't want people to go and get rid of register on the base. You want to have you a base, open Israel, So that's that's good. 9. 08 Add links to image: that's that's how we use links. And it takes so the same method we can use for image to make this image clickable. So the same method could a day close it. And then at the end of this image, stay, which is this We closed the attack. Okay, so it's already anchor text without writing anything. It's ankle takes either. It has been a link. Okay, I guess so. Here we do, eh, Trev? His draft and looks keep this soon Target. Don't be basted. All right? And then it's you to target neck as well. First, As you can see, as you hover over the as you can over the limit, they point to changes. And this becomes the link. If I click, I would be taken to the car door. Come. But before I do that, what if we want to clear some kind off? Let's some kind of hover effect when people hover over the the limits. Then maybe you want to Maybe you want a bit of a pop up, maybe. Ah, border Something better style. Let me show you how you do that you can use. So in that case, we would be targeting images, right? We would retargeting this thing Same as we did hits one before, you know, start did Hegel. But you don't always want to target things like that because you could You could have many heads. One in a place many heads to in a pale. So if it target Hegel on his to like that, then all of them will have the same staff. Maybe you don't like that. Maybe you want Onley this top heading to have the red text in other are there are the heads do you want? He probably one different. So what is the best practice is always to give you elements class name are you? So that's That's, uh that's about styling. And let's let's do that in the next lesson. Thank you. 10. 09 Applying border styling and hover effect: glitz. Add, um, let's have some styling to the image. So when people click when people come over the image, it will have a different style. All right, that would be cool. Thank you, sir, For that What you want to do first is we want to give because we want to target this image . So instead of targeting the image tag directly because we could have we could be having 10 differences in the pace. And we don't want to have this. This is start apply to all of them. We want only to we don't apply this istan under the descent. So let's give you this class Name a glass bracket inside quotation marks. Let's give it, um What do you know? No, you miss. No way. This'd is the class name we're giving to The scheme is corporatist. Classmate. So these are we right? This is how we give class name to the head. Stable text. This is the same way you would do this one. You would do it. I wear off everything so we give class name, nor am is and everything stays the same. Let's go to the class stances and then visit the classman we get. Right. So, citizen, this is the attack. But whenever there is a class name, there's always a dart sign in the beginning. Yeah. So when? Whenever days A class name you are playing to always given plants out dot and then recorded braces. It enters American right in between. Okay, So what you wanna do? We're gonna give it May be some kind of border. Border one think so? So did right. Save it. Yeah. Borda, What is willing to give issue five big. So I want you fired. Save it. Good. Bras up. Riff first. As you can see. Doesn't look that good, Bert. You know, you can see this. I could let stand this. It sends it from red And in fact, for web cause this beautiful place to choose with color, Let's say, um Mrs for color. Bigger. Okay, quick and easy. Way again. Select. Let's let's use this car. And this is the web cover are we don't want to ride red, white blue because we we don't get much absence. So this is the best way. So called me this card. Then go here instead of riding the grid. It's based. Listen again. So this is don't get too confused about this one. This is There is the distance for black again F f f stands for white and in between all this girl comes So for the moment, little let's stick to this one. And it's it's not that difficult to get this call its enemy. So okay, at first. And as you can see, this is the border we applied. Now what I want to do is when I hover over the image. I want this border color two tins since two something else so that it's gonna interactive. That's still so this is the world car. And how do you apply the harbor? Khan. Let's copy this name. And for a black Hubble color, you seem to do the same income. And then how? No. Whenever this thing is hovered over this concert gallbladder. So let's see different. Let's let's give it first. It is as it is as you hover over. This one tends to read Awesome. This is how easy it is to add interactivity to you. Weapon is that's beautiful. All right. So the same way you can style things. Same week and the start of the heads to give it a glass name. Good new deal. We will, Which we will talk later. Okay, so yeah. 11. 10 Applying background color and paddings: get to give a bit of, Ah, background for this thing. And then let's less pure on this. Let's heads to let's give you the last name. Actually, let's put this. I want to introduce you to the deeps, as were very important in history. Dave simply stands for having division. So let's copy this one. And it's created dear do you and especially God put this thing has to inside a deep Devi's way. Extremely. I mean, it's years, everyone. We don't normally write things like everything we put inside a deep, his one this first sex and probably it's a good idea to put it inside deep. This one put inside Eve, December and Dave's things that ever lived. Just who are the distant first. So in a difference, let's see if there is no difference doesn't make any difference. But as soon as we apply some style, it will be give it a class name and this Oregon apply You can give I d. Oh, you can give glass Are you? Get both. Thank you. So I d and clothes you can use both. If he is i d. You will be using instead of the dark you'll be using hashtag if you have. If you're targeting the I D card. I didn't name you do that. If you're targeting class, you do that. So let's let's give you the I D. This will taste, um, heading to So that's the deep name. So everything inside this deem no will have this effect that we going dark lessons heading to I'm going to apply Start on heading do and and because I named it, it's not a class. Normally you would use class for styling but just, for example, of music this one beside. Okay, so heading to what do you want to do? Let's give it a background color. Big room. It's you if, if not really sure, how my local It's as you can see, and that's nice. So that's the background color. Beautiful where we want better for batting on top and bottom both sides. So it's it's had some petty and betting you can apply overall despairing, which will apply to all top bottom, right left or union years job. If you want to apply 1,000,000 top if you're in trouble only on talk, let's say 20 pixel. Let's see how it looks Well. First, as you can see on Lee on the topside, it applied the panning. But we want to apply if you want to apply to the right side. Lift. No. And as you can see, it's been added. Medic. So that's how you did. But for the moment, I want to a blood padding all over all the area. Still, it's trying, and then you can see it's applied padding 20 pixel everywhere. Now I want a bit of a space here, So what do you do is same as we did here. We applied hers into life. But now I want to apply land a land break, which is simply this break me are great. Press dinner because it's inside deep to its digging out from there. And then let's put here, save it and for us and, as you conceded, applied the land by. So here we have. We applied beautiful petting background color, Harvard effect and let's to a place, um, started this thing as well. Beautiful things, beautiful images. So that has the class name off heading to write. So not only background and this is doing indoor rock lets you fund don't size. Let's make it charity pixel. Let's give you a call off green words we want we can tens the text type as well. For example, dicks to take a recent and all these styling these days. These styles. You might dunk it overwhelmed because they quite a lot. But you will know them as you progress. And later on, I'll introduce you to the woods framework. Then you you'll be in a different world, so you don't know whether told us about it. Text. Diggory's inlets tended to couple kiss and you learn all these things as you as you as you progress, and there's nothing too stressful. It's pretty. You learn a long way first. And as you can see, Jones is the color but didn't in the text decorous, and probably this is the wrong. I'm going it to run text decks. Transfer firms from first. Yet that's it. All right, so that's how we can play around with things 12. 11 Creating ordered and unordered lists: Well, let's start working with From's very important part of his day. So let's let's learn how to create a list order least on our released stuff like that. It's good to our history pays. And here, let's create a new dear And then let's give it a class name off. Let's say lists so that we can target this close in style for the later and to create a list. There are two types of list on order list. The end ordered list. The most problem once it's quick on ordered list. Similar time You hit tab and then I so on our list, we quitting on our list inside on our released will create least and will create many. Okay, this is the first list and let's gruesome again. This is second. This is there. This is required for list in this deer inside this Steve on a least and therefore list. Let's see her looks first, an idea. There you go. Beautiful. Please. Let's give it a title. Its three. And this is how you want to ride in real life. Okay? You don't drive. You are. It's always good to have one man heading with hedge one and then South, heading depending on the content. You know, marinating and so heading rights and paragraph. And then as the base progress in probably the third heading, you know, in a hierarchy. Thank you. So we, uh, soon one. Are this beautiful one out of this? I guess. Should that Are we clear on our list? Let's Grayson order English says. Well, there's not much difference. It's giving. Let's keep it inside the same deep. It's separate than my heart's into line and then ordered list. Well, simple as that list, this is ordered list and years of difference is no. This is ordered these. It's a big difference and we can see all the list. Uses the numbers 12 in honor of this use a bullet points. That's it. Okay, so we learn how to create list. Let's let's let's do more in the next list. Thank you. 13. 12 Creating forms: Let's do some more on fronts. Let's quit from with text area are getting it. Let's create a new deal and the reason I created this we could s started late. So this is also handy when it clicked with sublime text. When you click on this one, as you can see, there's a bit of a board highlighting that shows the beginning and the ending off. The dif were helpful and we can't even come over here. Then, as you can see this Lara clicking this and this collapses. Yeah, so this collapses if you wonder. Open it again. They play in against er list. So let me collapse. It's easy to read and sympathy. That's fine. That's going to do. And when it's it's called it constant and then we create a farm. Let's create a phone inform starts with from day and then accent. We didn't really need that now. Okay, from and inside from what we want, we want input. Let's limit story the text area, thanks to the area and then don't know I do you know where name for a moment. Get the columns, columns and the roles so rosy. Let's let's see outlooks frizz. And as you can see, this is the text area. Doesn't look that pretty, but we'll be using boots Epsom and they make the whole holding a lot better. For the moment, let's this understand the basics. So this is the input of text area. Let me see what input looks like to input in what type and let's give them time. Summit Some important you get summit it boots, input type text. So in prototype text where you can write text in some, it isn't something you say You can see this name and then some so obviously wouldn't have this functionary this request bag and technology yourself. But we learn how to create for that's good Later and obviously we will use all these techniques. We learn like something to this idea. Create a form. And you saw how to create a text area before. And we will work more on this one to make it look 14. 13 Margin and styling: Okay, so this is our pays. We have been her content here. That's fine. We can style it for the let's litter to build a styling. Here, Let's learn about the patterns. We already I already introduced you with Barry, so we applied batting here, top and bottom everywhere. Well, you know, apply only to one particular side. So that's that's protects. We all know that betting, let's struggled margins and stuff. Let's say this image. As you can see this, I want to have a bit of a margin. You know, it's too close. So let's let's world on that and probably shares Well, maybe we want a bit more marzen. We're from the discontent. So let's let's work on that like so we have here body and then they deep Let's put this also inside deep. It's always a good practice. Support things inside dereg. That's copies. So they reckon based in there, do you and then Chris this inside. And then when you get to eat, you can select these. I want to Rendon and hit Tab and yeah, that's right. Our guest. Let's give this do this name first this pain cookie save it and then Yes, it's very what do you want to do it this one first? Very well. Let's let's give it a background color. Big gun. You don't go. It doesn't that good, but yeah, for the moments, find again. As you can see on Doc, there's a bit of a bill for space here. I want this to be exactly there. So how do you How do you achieve that? Never say I was actually. Instead, this paragraph we have takes. So when you see Carla, it applies to take when it's a bag on college. Better initially, just color. It's the color. Let's give it live to use the deaf. If if it means what? So making why you're beautiful. Um, I want to get a bit of a spacey. A bit of betting. So what I could do that is First big mouth. Do you reading 10. Big sale save True. First, let's you. And it's good because it applied Parenteau all over. So even on the top looks looks looks all right. I guess so. What about this one that actually looks pretty good with were faded? You think that's good? Are that that's all right? Let's have a bit of a margin here after the game. It's thank you. So the name is since in it let's keep it inside. Dear do yesterday it's indented. Let's give it class insensitive. It's not really good name, but your point. You may. What do you want to do in this room? We want to add a bit of Ah, honestly, how you apply Martin. So let me show you It's Christmas. Yeah, that's hard. It's had some margin on top. So Marzen Dog lets you Thanks. Yeah, beautiful. Let's keep Muzzin to the left. And there's another way of applying margin too, if you just So instead of saying, talking about abuses amazing, then it walks clockwise. Okay, stop. And then maybe trying it peeks into the right. Or maybe general picks him to the bottom. You know things like that You can you can use clockwise and maybe left. Maybe you want 100 things. I said it first. Yes, So that's how it works. Amazing Maginnes really used for sometimes to fix him. Isis so fixed the base layer. But we will come to that later and I'm pretty sure will come to that point. But for the moment. Do you know what is betting? What is margin and how it works? It works clockwise. Same with the betting You can apply like the top and bottom. We're live all that. Thank you. Good. 15. 14 Radio buttons and checkboxes: are you a little work on ready of Borden and take boxes? And then we're pretty much done with his demon because we'll be working with boots. Seven in both serve. You'll knowing how to work, efficient, do test, even see assistant all that, you know, profits, no matter. And then that will be the production really kind of thing. So, yeah, we'll be good with that. So we got the basic understanding of history here, and we learned about Muslims. Bearings were styling herring links and are let including function. We'll do some take books and, um, radio really buttons. And then and then we'll jump to the bootstrap to the next. Sexy. Let's create some radio buttons in the phone. Six. And it's queer. Deny form. We don't need the X in, Like so label labour is where you it's with name. Let's let's call it what we call it. We can call it radio and then Lord sits inside. Yeah, input. Tired will be the radio. So we created a label and we gave the name off the really important we can name it anything like and then what is this? This is the input type off radio. I said Let's forbid funeral times. Where do you wouldn one button? I can't come over the better, and they have where you wouldn one button to warden stuff like that. So this is how you we can quit the buttons. Rest creates and tick boxes as well. We can put inside the same from this just protesting, but wasn't land that's queer? No, for take books, the same method level, And what do you want to label it? Let's name it, including in what way? Arjun is really input Type off. You must have noticed the input type of sit in protests is the summit. Then it becomes a burden. In Britain. Takes becomes text area, where you can type name on stuff like that. You can even give a placeholder. Let's let's say drive your name and if you fresh, I can't see that placeholder less holder and I've been and that's how you can see And yeah , so that's how you career placeholder and this is the Bordens and this is the tick box. As you can see we're creating, it's going somewhere according mm procuring beautiful. And how about making the one of these? Borden's ticked by default. How do you do that? Let's see. That's pretty. I already have to do is on the one that you want a teacher. Simple. Is that same with the take books? And then there are other things as well, like in the phones required so they can submit to that require without the filling up. I can't if someone just like that, it says police feel of the field that this will be useful for very reason leisure. And then, as you can see, these are ticked by default. So that's how we can work with From sits. It's pretty straightforward. So I think this is Ah, this is it for his semen. And CS is very basic as them and see asses. But in the next sex and that would be about boots trip, amazing wait bases you can create on the flight just like that so easily and there will be 100% responsive. There will be, well, very easy to work with. Thank you very much. And I was meeting the next section with Bootstrap. Thank you 16. 15 Downloading bootstrap: Hello and welcome back to this six. And in the section we're going to learn bootstrap in the previous six, and we did a bit of esteem and see assists. We learn how to use a styling beddings and the basic stuff, but we're going to go to Bootstrap now. And to begin with, what we will do is we will try to use bootstrap on this space and see the difference. Because this is this is really old school and you don't want to be really website. Such a structure looks. It doesn't look right so we can use boots trip and what boat trip is? It's a hesed imminent, hesitant CSS and JavaScript framework for building response. See mobile first projects on the Web. So without further ado, let's get started. The first thing you want to do is download bootstrap. So go to get bootstrap that come and you download would stretch from there and just click the Borden and down either downloaded. So I'm going to show you from a distance. Or we can even use cdn. But I think we'll come back to it later. Syrian simply means that instead of, um, let me so just the previous one. So it's better you'll understand to the style. Sit with this here. So this is how we defined. And this is a small style said So this is how you can use bootstrapping and download the dart CSS. And then you can link to your main base just like this in head sex, and that's what we're gonna do. But another option is to use Cdn. She didn't simply means content delivery network, and if you use this, only you can still use would strip. The thing is, you don't need to down with Bootstrap locally and do all that stuff. Didn't it'll automatically work from the Cdn, and it is pretty good. It's fast, and it's perfect for the website. Want you ready to push it to the production, but for development purpose, it's always good to your download and work with that lets down its downward, this down or that. And once you have that ready again, start using it. So here in my distant, I have created a folder called Boots Trip, and I have downloaded the wood strip here, let me double click to extract, and I don't need this instrument movie trash, and here inside you can see we have Seasons Funds and JavaScript. It all comes as a bundle with boots Trip and Bootstrap has its I can set with his grief icons. But we're going to use that. We're going to use fund off foreign dollars of migrants, which is the most popular one. And that's the one you'll see much most of the people using. So we'll use that. So let's move to dress and JavaScript. We need javascript leaving and then CSS. As you can see, we have many versions. We have many fied version, which is good for production, but you can even use. Like I said before, you can use the Cdn. So all we want is this bootstrap, uh, bootstrap that she says, This is the only thing we need. We, we don't want mean, mean, mean ified version. It's much dressed and let's give the team and let's move this over. We'll do trust, so it it's simplified. Now we have C s is, and we have struck chases and bootstrap theme purchases, and that's great. We have the boats of those groups, So what I'm going to do now is copy these files and pull here and get rid of this one trust . So we have boots, your folder, and inside this folder we have ceases in the script. Okay, We're ready to start working on our project. So let me close this. And instead, let me drag this folder bootstrapped the one of this created and let me remove this folder from Project the Brush. So we have bootstrap 400. This is empty folder. We just see assistant asking that downloaded and let me create one in the extra test, you know, se. So in the next lesson, we will start using both sharp. And what we're going to do is we're going to redo the site that we did earlier. This one, we're going to use bootstrap and try to make it beautiful and pull your restaurants. You. As you can see, this is not a response. Yeah, you may get Scott out. The ones this could get smaller. Another so, yeah, it will all be good with boat trip. And I was sitting in the next next video. Thank you. 17. 16 Understanding and using bootstrap rows and grids: Let's get started. Let's let me open up my text editor again. So we created index file and here. So this is our previous space. Hello world and some stuff. Let's create that. First, we need to declare the dark type. It's too, because Danielle and Inside Head six and it's quick carbon. Okay, All right, would shred. Then let's quit body. Can you? Now we need to link our CSS file. So let's create link. So we're going to think here CSS would share of those cases. Has your CS is well structured? See, assist. We should really do you starting with triplets dried out so boots or how it works is we create. The first thing we create is a container Deve that's square to do and then inside a deeply creative class code container. This is a boot stripped less. I'm not just making it up. This is the bootstrap class and using bootstrap. It's all about using their the class name, so they have the providers their class name, and we use that to achieve what we're trying to achieve, and you can always please read more about it in Would she have efficient site. However, this. This course should prepare for all that because it can be overwhelming in the beginning. So, yeah, you'll be good with me. And then later on, you can explore more. Obviously. So, yeah, the first thing you wanna do is created deep with the container. So inside this country, no, Well, good. Everything. It's the one you want first is we need to create a road for us. I'm not the deep with the class off road. Yeah, so row is like, like all the way from right to left the entire six. And that's true. So inside row, we might want many six. We might want 123 many sixes. Bootstrap Rose are rose. Must b must have total off. 12 columns, 12 colon bridge. That's what they call it. So inside the row, we can create columns. We can create one column and give it glass. Name off. Coolum. Small troll. Think like that. So this is the most basic of bootstrap. You career condemned with the container and then that that will be the main container that will hold everything. And inside this container you will create a row and you can have many rules obviously. So we create a first row and we want to have some content inside their rule. Okay, so they are content will have the full with 12. Cool. We can't have more than 12 column in one drawer again, but we can have meaning small columns that will total to 12. So if you don't want just one column off 12 you can create me. But we'll come back to that later. Okay, so this is the so Coolum small 12. It'll work beautifully for smallest screen as well. And later also, you agenda to medium in laws and also you how that works to get so to start with. Let's let's where Something here. Let's right. Hey Chuan, a little more Save it and let's try it out. Let's open this, you know, bras. And as you can see hello world because we already using bootstrap, you can see the bill were different. The foreign looks with different. This is a bootstrap, specific front and you can see a bit of our batting on the left side and all this. So we have already used boots trip here 18. 17 Using bootstrap jumbotron: Let's let's have a look at our all side. Okay, so we had the main text and then we had a bit of a description with horizontal. And let's try to require the same thing with would strip and we will add more later. I guess so. Okay, let's create a horizontal line and then let's create a bad world. It's some dummy date, dummy text. Let's see how it looks. Beautiful, beautiful. So, as you can see, Bootstrap is already taking place in it Looks already looks much better. So we created continue inside country. We created rule in Turtle Girl Deve with the class of Trump again. What if we want to send to the text we can use? Obviously, we can use style CSS our own she asses. But with would strip it's really is. All you have to do is because you want to send to this deep the content off this deep. You want to center in this school, so all you do is fixed, Singer. Even if it is not a text, you can use this class name and that will send to the content off this Dave saving and first and he can see its center. That's how bootstrap works. It's all about you using bootstrap class names to make our life not easier and building fully restaurants a beautiful way with basis. Okay, so how about giving me the background color just like this one? Let's give you the background color again. Bootstrap. For that, it's pretty easy. Bootstrap has class name. It's called Jumbotron, and what it does it gives bit of Ah, just like the name. It's jumbo and it creates a bit of a background with beer pairing Really nice, and these are also ill. So you all these most useful class names, so don't get over where? Don't don't worry. There. How are you going to remember all this glass names? Just the ones that I cover in this course will make you pretty much ready to build almost anywhere best. So once you get used to, you want to start building couple off project will be good. You would be actually confident. So, yeah, it's not much there. Um, 12 called greed. Send the text and then we applied this Jumbotron. Let's see how it looks to first. No difference. That's vagaries. I didn't spend it. Probably Jumbotron. That's right. How beautiful it looks. It's amazing, isn't it? That's the beauty of Bootstrap. So this is how we can see the tens as soon as you apply Jumbotron. Beautiful. How about making it full with, especially on the top of the base? That would look really good if we can make it full with. So we didn't do that just by attending the class name. Okay, so previously I said container, but continue. Also, we have one more option for that container fluid. Once you applied content of fluid. What it does it foods. It stretches the entire screen. So let let's try it out first. And as you can see it straits the whole screen looks beautiful now. All right, too. That's exciting, isn't it? This is beautiful. Words were bootstrap. It really, really fun to work with and makes her life a lot easier. And we can clear beautiful basis in no time. All right. More in the next lesson. Thank you. 19. 18 Responsive image with bootstrap: Let's continue working with Bootstrap. The next thing we want to do is yeah, let's have a listen. Okay, another may be heading to, and then we'll have images and where we will have subjection of the one side and image in the other. So we need to clubs, right? It's a before on the heading we created one column. What here we want in the half. Off the screen we were intimate and another half way on texts. How do you do that? Pretty is with would trip? Let's do it. Let's squared Hates to heads to get so this Deve. Let's leave it. Let's start with another Dave so you can feel free to create as men. And Dave says in it, It's pretty good. Yeah, it's a good practice. Thank you So do. And this time also, we create 12 cold, cold, small throw. So we create another deal with the 12. Cool, Great. And then this time we want to have two sixes. Two columns, right? It's great calling small six. And then let's create another one as well. Okay, so what I've done here is inside this deal with 12 corn, that is the maximum will call allowed. Okay. So instead, TRO we created six and six, so it always has to total 12. Okay, Otherwise it doesn't render properly. If you create one with six and one with, let's say three. It will be total night. So it doesn't rain the property. So I always make sure you you totally to 12. You can even you create for 44 so three dips in total 12. So that's how it works. Always make it totally 12. It's in the first day. I want to put an image. So let me bring the aim is to our folder first. Okay. We used him is it's bring this for one girl, see? And I guess one of these images we can use. We have images. All right. So bootstrap has in his class as well for responsive emits. So is responsible for that. First, obviously we just great in his day and then we give it a class name. Off Emit responsive. That's wood strapped. Last name. It remains. Theme is responsive. Now the source is Mrs Folder with name off. No save. Let me hire decide and all day. Let's call it Made it off Norway Refresh didn't dio the GOP again, spending the first. And as you can see, it's in the half. The first call, which is the column snow. Six. Beautiful Now in this sex and we can write it takes whatever it takes, and it is beautifully restaurants you don't need aware, but you must have not. Sue didn't say hideaway descendants. It just works perfectly. It sit inside this deep and just fully responsive. I had some takes. Teoh column That's great heads to heading to say this is normally that's your Her urgent lands may look beautiful. And then let's create some texts. I could save it. It's outlooks first. As you can see, we've got the title and text beautiful. 20. 19 Buttons and lists with bootstrap: As you can see, there's a slight difference because once we are about jumbled drawing, it gives a different foreign styling. And all this and then the normal one looks be different, so we can always over this one looks pretty good at the moment. That's the benefit of using the Motrin, so it makes it stand out. So that's good. So we have image. We have the text in all of this, and now let's say Let's let's imagine that it was, um, way pays for travelers into trouble side something like that. So maybe we want show something, a button that says book, Um, book it two or something like that. So how do you do that? It's pretty straightforward. With would strive. It's really easy to quit Beautiful buttons. Let me show you one. So we have a paragraph, and after this paragraph, little on the create button. So button you're always open and close the pardon. Tie with button and then inside here, let's give it a class name without classroom. Let's have a look at it to, So this is how it looks without class, any class, and this is already using boots, so other it doesn't look this good as what doesn't look good, but let's place a butcher. Plus, let's give it a class name. Off button. Always. You have to start with button and then Barton deaths. Crime Mary and they have many different class name. There they have, I think, six last names they call primary Danger that has red color. That's danger, and everyone is success. Another one. Is there quite a lot. We can have a look at them. One primary born sucks Burden in for and their stuff like that we can come back to it later . Let's let's was folks in this Baden Baden primary. Let's have a look how it looks first, I didn t. It's beautiful. It is when you hover. Would Jones is slightly and that's how it looks. Beautiful. Okay, so this far it's looking good. Let's let's continue working on this one. The next thing, let's create some lists. Would you do it because I'm working in the small screen? I'm going to collapse this six and I was going to be easy. However, you can see this era this click in this era and it collapses. So we have the men dif continue flute inside That day we were working with this insect this row Let's create another they rule and let's create do Crume Small. No. Okay, so now we want to clear some list types. Right? Some are list. Thanks. Three. What? And lets you the class name? Oh, center And yeah, this creates some lift. So, least how we do let someone ordered list you l and then the bootstrap has a class name for this one. Things least group. Thank you. And we list you called your last name off a list group I took. So Yeah, so it started with the least group and then group item. So once you get used to it after after a while, you would be comfortable with this. Let's create some. Quit some and let's see how it looks. The first. And you can see the list is rendered beautifully how good it looks. Let's make it a bit more in Christian. Let's make it. What I want to do is I don't want it to straits all the way from here to here for right to live. I want it to be somewhere in the middle. Just just here in the center. So how do you do that? Let me say so. We have a deal with the called Taking the Full of it. Well, so instead of what I can do it, I can put all these element inside another column. Let's copy that so that we get based later. And let's create some thieves. It's create column. In fact, also you easily Okay, so we have we have this 12. Great. What? I'm going to do it I'm going to use on the six. And what about the rest of six? Because we have to always make 12 right? So what we're gonna do is Pullum Small Offset three. Now, what this will do is it will take the six call and then the rest of both right and left sides. It will offset three. So on the right, three on the left. Three. It'll officer. So right. Live three and 36 Plus these 6 12 So that's how it works. So now they are content will centralize center in the middle, and it will have the offset columns three and three on both sides. So looks terrible. As you can see three here This side after 33 column, decide absurd and in the middle six column and it is taking place. That's beautiful. So this is how you can use bootstrap. It's really fun. And you can do a lot more. You're gonna be very created with this, so we'll do more with trip in the next video. Thank you. 21. 20 Building forms with bootstrap: Okay, let's continue with forms. But sir forms I one of the best features off boo trip. It's really easy to work with forms. So we're going to do is let's create some forms with Submit Button So we have this deep. Let's collapsed this diva as well and it's quick. Never dear Road. And it's quite another. Do you? I hate cool, I said to from sin Bootstrap. It's creative fun, Derek. Let's give it a class name off from From Control. That's a boot shop class name. Inside Farm. We will create a deal. Yeah, form with a class name of From Control and we create a deer and we get a last name off for me to do an inside group. Let's call Crude Level label because let's call it name. And then in the boot field, text class will be form control. So we created from group we don't need here to do. We don't need again. You just create a phone and then inside phone week were deep. The first deep will have input. Field off inferred field with the type of text, and it will have a label called name so people understand what it's about. Let's do the same. Let's copy and paste name, email, cross or clear. It's good you knew. You know, Dr email. It's called in the time sward. And finally, let's create in button. It's working important in for that. We can call it. It's You would name assuming that's how it looks. That's pretty good. So we have a form and people can kill in the name email Fassler. As you can see, we applied the name Passel so it doesn't previous like so it has a name comes name, but he and possibility comes over, and some It now looks with our. That's because Christine button button in for now. Let's try it. Yeah, that's probably okay. So this is how it looks. Looks pretty good from in bootstrap. Really easy and they're beautiful. How about the one we did here? We have radio button. We have check boxes. Let's try them out, too. Let's do that. Let's do in the same form. Let's create another deep. We don't need the input field in screwing to have them here level. And then we put in the boot here in what type six books. Beautiful. That's cute and name, So names should be in the label. This is just the input fear name. We can call it whatever you wanna call it. That's going. Take me. All right. So people take okay, so it's it's the same for ready about que Really? You may. I want radio me. So this is how easy it is to work with forms and bootstraps. And now we can give a different class name, drop buttons. We can give success and looks different. We ordered tried primary here success and we can do danger. And that looks way. And that's that's how it works. We learned how to create farms in both, so it was pretty cool, and we do more stuff in the next lesson. 22. 21 Using font awesome icons with bootstrap: exiting this. Listen, I want to show you how you can start using forint Awesome icons. They're the most popular I consider. And they really, really change the way your which looks. It's really important. And you can do be very creative with those arrogant So let's get them. And this time I'm going to use city and before boots Sir, I didn't use Syrian, but this time I will. You see the And so you know how to use that to so Cindy cells for for awesome cdn we can download you. Actually, I want to go to the side and so you So this is the site you can download and link the same way we did with boot trip or you can you cdn So let me you see the end and let's copy this room for no sin Noticias is copy. It's best to know it should be ready to use. Let's try that. Let's try. So this is our first deal? Yeah, this is the first deal. Let's put right after this tape, I want to create a deep with three quantum group just to see you. So after the first deal, it's quit and And then let's quit another deal with column So and inside this device will create three D with 4444 for it. Give smooth for and let's call it so in its Deve, let's say, Let's let's put some item for so that we can see her. Look, I think it's good. Teoh Fund. Awesome. So even novice Stone from here. What I'm going to do is good icons on top, and then I can satisfy Can't instead of looking at each and every one of them. It's eating simply shirt. Let's let's put some like Like I It's so slight and you get these absence. Let's try this. Time's up. Click in this one and you can see for to use this, we have to use this class name far foreign awesome. If a stance from an awesome for an awesome desk comes up, so that's how you can is simply copy that. And then we want to put in this deep right excellence. Put it in here and let's let's take another Arkan, another one where we want. Let's say, let's try one of these, let's say in four, Okay, in floor, there are painful. How about dress. Oh, so it was okay in full in for Let's use this one. Yeah, Corbett could. And in this second deal Yeah, let's try one more. Let's try, uh, Tres trust this. I can see what always used really handy in the great Give you now That's the first. And see, yet we've got the items. Beautiful. Now let's, uh, usar custom styling to make them look awesome. Let's make the bigger give them color, things like that. Goods do that. So we need to first minute to create our style. Sit right. We don't have ah style city it. We're all only using bootstrap. So let's let to do there. Let's do that in the next lesson. Thank you. 23. 22 Using live css editor: Okay, let's make out words. I'd look amazing using these icons, and I'll show you how you can do that first thing. Let's it's with them inside a jumbotron. Thank you. So this deep that we're working on these I comes. It's Give it a class name off Jumbotron. And let's create a custom class That's for our users. Eye gone. I comes. I got again. So this is this Dave has a class name of Jumbotron. And then we have given a different class name as well, which we will use later to customize. Save it. It's happening. Yeah, it has got the jumper trunk, but we wanted to send the background color and do better starting here. Thank you. I saw for that. What I want to do is it's always good if we can apply some CSS and sea life. See the X in, you know, taken effect life. So for that, there's a great blogging. If you're using Google problem, and I will show you that that's really useful. You saw those for live? CS is ready to crew. Yeah, this is one of the chrome extensive. Yep, there is. I had this instill just wanted to show you. That's why. Emotion that I could do it again. I just simply add to Crumb at extension. And as you can see here, this is the one. Beautiful. Okay, now what we can do is we know this Jumbotron has a class name off Aikens, right? This is the one I give the constant. Let's let's use this and let's let's try this here. Please allow access to file years. Come on, allow it. These things can be knowing sometimes. All right, that's great. Okay, so we have. Ah, I continue. Let's apply some styling. So, yeah, that's the This name Wagons were okay. And then let's let's apply some styling and see the see it happening. Real time. That's great background calling. That's right. I wouldn't call it become out. It's really good. All right, let's call it. Do you want? I want blue baby, maybe, Like maybe something like that. It's right. Take a background color. Look at that. It's beautiful, isn't it? All right, that's that's good. Thank you, actually. All right, let's try this again. Now the problem is, it's it's you know, I want a bit of ah, margin here. You know How do you do that? It's a black emergen, maybe 20 pixels. Beautiful. Let's make it 50. All right. It's good. And, as you can see by different would serve has all these world border radius these things and I want it to be completely Oh, what a tangled knot. Not Korbel like that. So you can do that. You can remove that by using border Great radius General week. So no border radius, Right? So what for Levin's with Bootstrap is that it's difficult behavior you need to overwrite sometimes. So how we can do that is using this important. I think so. As soon as you apply the important as you can see this border edges should be gone as you continue. So sometimes you energy this with wood structures. Keep in mind so they would have beautiful. Now let's make this icons bigger. Thank you 24. 23 Customizing font awesome icons: all of them starts with far. And I can I'm going to use this for the moment. But you can always give it a unique last name if you want to, you know, apply the individual because it will be easier later. Because actually, let's do it. But certainly Lazy and David a my icon, its name like them my like. All right, this is the class. Now, come on. See, so all of these items have the same class name, my eye contact. And now I'm going to apply styling to my Aiken, and they're applied to all these wagons with this class name. And later, If we create more class and we wanna have the same effect, we can simply apply this and that's it. Thank you. So let's try it. So this one we're going to copy Paste in our styles. It later. Thank you. Now let's try this my I And here let's give them a bit of a bigger size formed from size 50 big. So I think I need to save this fire first and then refreshed the space. So just so that I don't lose this level competition and the liberal press this well, first, best that in. And as you can see, as soon as a applied this es is it sensed beautiful 50 peaks and that looks good. Let's Columbia City. Once we do, this is not center, so let's let's make it center. And that's pretty easy with both Serbian, we can do it's syndrome with text. So the whole DVD's central the contents there corporate this against of it. You lose it your first. And as you can see, it's centered. As soon as I applied this tiling it is center beautiful. Okay, so the next thing is, now we're going to copy this ceases and put in our styles it so it was really easy to do it Life, right? This is great. Plug, copy this dilated and we're going to put in our own studs it. No, I think we don't have one yet. Um, where is it? Yeah, head style boots, Troubled, troubled and have our let's get out link and hetero. If let's create my style, CSS is save it. Let's create inside Syria, since my standards, you find saving in the based on that tree. All right. Already saving that ship Fris and beautiful So that's how we learn how to use fund awesome wagons. And we learn how to use our own CIA system making love us. All right, so we'll do more in the next lesson. Thank you very much. 25. 24 Bootstrap menu or navigartion bar: okay in this sex and I will show you how you can use bootstrap navigation, the many violent up. So let's go to boot trip with Bears. Official site. Yeah, and so just serves for booster navigation. And it's good to decide. And let's go to dogs. I agree. So let's use this. This navigation has everything forms drop down. So everything and we'll remove what we've done it. So this is the country court. Sits inside, never never dug. And then it has a container fluid. It has a deal with all these Agon bars with simply the hamburger. Many when the men, it gets small for mobile devices. And then we have the deep sex and off the links here and the right side of the number. All this links. Let's copy these and break it down, Kobe. And right after the bars. Doug, let's based in here Que Okay, the first thing. Let's save it and see how it looks. All right, compress. And there is it looks pretty good. We don't need this source from, so let's get rid of that. So where is that form that that form is? It is six. And here and this form of the net. This Let's remove this. Okay? And let's keep on Lee. This styling wouldn't really want on this side that some of them. So this left side drop down. Let's get rid of it. It's get rid of it. Okay? Even these links have I want I want links to be here. Let's fix that up. Okay, So what we have here is obviously we started our navigation. Yeah, now and so now this is the nap tag. Has team will take most important one for navigation. Worlds have to use this. And then this is using the nab our class, and it's the different number. We can even tend this Teoh the universe, and then in verse will look like this black default with new. Quite. It's keeping black. I guess so the next thing. So this is a showed you. This works for the mobile school. Like as you go inside. Yeah. Go smaller. As you can see, the the menu collapses and becomes Hemberger many. That's that's the agony. That that's what those I concert for these ones are Get to Let's leave them there again. Then there's another deep this Dave has honored A list gets off this one year. We don't want this one. No in this underwear left side. So let's get rid of that. So we have the order list and it has lists again. First list and second least and second list has a drug down. So inside this list has many other links to like. This is the first list. This one has one link, and then again, another on order list starts. It is a drop down menu, and then it has all of his options. I think it's David. Let's see how it looks. So we have the link. We have dropped down and then we have run it. Let's get rid of drug down as we wouldn't really want them. However, I will take some of these links copy, and then let's remove this one. I dream of this one, and let's keep it simple. It's the street. Keep some links and will make them clickable. Okay, so this is for the hamburger. Many little icons look three lines, and this is the usual. The one Renate, Let's beautiful. So these are Brandon, and then this is 123 next. So let's let's repeat. This thing is it's been a bit of a oh, women. Probably so make it small. So it fits well in the screen. So we started with the navigation bar. We give them a class name off in verse, and we have first deep again this Dave contents everything. See, it finishes it I right before the nap. So this container fluid included because it is stretching all the way from right to left. So that's there. And inside that d we have this deep this day is many for this Aiken, the collapse cycle again. So that's that. That's that's good. And then the mainly all we have is this. It's even. This is how you can live comment in Hastings. I think I didn't. So it it's pretty straightforward. Yeah, let me acting silly. This exclamation mark does this and then just as close. So in between, everything right will be three com it and it will have no effect in the cold again. This is our would travel mania. Yeah, so yeah, navigation did. And this header with icons And then mainly this is what we have here, Dave, with the collapse never collapse. And this is the i d. With the response to this. See the It's sin, this idea and this idea same index, how it works when it goes to the small screen size. That's how it works. And then we have these links another list we created. And then we have the following Slink this. Let's name them boat services. All right? He looks my Korean website. Okay, so we have to fix Bever betting here and then and then let's make it response. Okay, so we have this button, but if it click, it doesn't work, and we'll fix that. That's due to Jake. Really? So we have to link that as well. So I will show you how to do that in the next list. So I hope it is pretty straightforward to understand. So our court is only this months now. You know, it was a lot, but now it's only this month. Navigation 26. 25 Mobile hamburger menu with bootstrap: All right. So we have our menu, which looks pretty good, but the problem is, when we make it smaller, it looks good. But when we click doesn't work. So how do you fix that? For that to work. We need to include JavaScript with Haven't included yet. Mr You. So what have you is when we down boots ship? Obviously we got the days folder and insert days for Do we have boots? Trip the Js are we going to use magnified version? So we have to link to one of these and we can We need to use a day query as well. So let me hide side about. What I'm going to do is always scripts pull it right before the end of the body terror so that the pace renders pretty well. And then the JavaScript will or otherwise it will delay the learning process off the based . So I always keep it right before the end of the body attack off the scripts. So what I'm going to do is I'm going to use the include the script for boat trip. Okay, so these so this is so ingenious. Less. But Sharpton Js Leslie. Yeah, That's the and we also need a query. So how do you get that we can get that J query Jae min If I Let's take them unified words and copy and you and you can do the same for boots serving and include from Syrian. But since we have always down the real, it lets you did. But it's always easy to use from the Syrian. It's pretty good, and it's fast for production site as well. Let's let's see if it works and first own it. What let's use from Syria and so day query and boots. Are we using both from Cdn latest compiled and magnified that script Covetous Toby And you can take all this so you don't even have to We world, but let let's try this one. So we included day query from the Syrian, and we included bootstrapped JavaScript, also from the official side Syrian, and we put it right before the board detect. Now let's try if it works frizz. What was well and beautiful knowledge or experience? That's awesome. Okay, so what we do next? Let's actually let's street, this styling, the one we have you. This one also lets streets to Syrian and see how it works. You know, you move that. I found out some were already using the Syrian. That's fine. And the only local cells. It is this one hour my start everything will use from the Syrian. Let's try that. Let's take both. We don't need the team having what it's taken again. It's pretty so head sexy. Looks messy, but it's nothing to be worried. It just it links for Syrian from the official said. Ah, first all right. No. Yet everything works perfectly beautiful. Now one more thing I wanna fix is I don't like this carved carb thing here going to make it stretch. Let's let's do that. So this is obviously the nab our right, never it cast in that box. So let's start with that. So I'm sure you you comfortable with this navigation, right? The secret here is the agitated that with secret here is how this hamburger menu, this little icon, How does it represent the They actually mean, How does it know that's that thing I have to tell you. That's how it does is say, inside this deep. We have this button and all these lines for a 2nd 3rd These are just the line. So let's if you remove that, save it and go and refers as into the EEC only one. So it just the line I can't again. So these ones, they're inside this button and this button has the data Tuggle class and and other Target and what it targets is this thing Bootstrap example now about collapse woman. And that is exactly the same idea. Remember, this has Ted we used for i D and this dirt we use for plus Farsi assists. So this button with this spend bars, it's targeting the actual navigation, which is this which is entered this dude. And as you can see business example about collapse one and here this is exactly the same. So this is how it works this bottom How how that's how it knows to control this one for simplicity. Let's actually changed. Let's since this number were many. Since this, just be careful. I've made capital coffee and remember the Heston again. So let's send this to and movement fix this border radius and let's further in life. See ASUs. Little pretty Cool Border readies big, so it's Corbett this thing and let's put it inside out ceases 27. 26 Leaving comments in style sheet: And one thing I want to tell you here is you can always comment just like we come. And we know how to comment the estimate. Will you comment that this we can use comments in C assistants? Pretty is just too. Thank you. This is how you can comment again. Right down. This is for icons. So this is how you can comment. So it's easier for you to, you know, nature come back and fix things. This is for many. So these are we can leave a comment and she asses All right, So what was going to do is I was going Teoh, uh, did never border area did that school. That's your first Awesome. Actually, let's fix this to this batting this thing, I don't like it. So what's the name of this class right after the first month? Probably. We can target the nabob again. Let's take this and we can always give Mars and making that said 10 big suit. You can even give minus failure or something that if you need mine Israeli, you cannot do that. He said 10 big. So let's try 15. All right. Cool. Three to Jill Bitter orphan Marzen Bottom injera being on lease Prague's eternity p X Yeah , it's Corby's great and let's give our brand name was Brandon. Yeah, so as you can see, right after these burdens, we have the anger takes with brand neighbor. Let's call it. What you gonna call it's called it there. What? Okay, that's our brand. And it's links. Beautiful, Very beautiful For more few restaurants, see how good it is? Citizen, I love butcher again the next. Next Let's make these them. Actually, links are. So let's maybe we sense generally. And when you click, we get here because we can even make it. Go to the next place. But let's keep it. Yeah, let's let's see what we can do with this. Are you seeing the next Listen, Thank you. 28. 27 Making the menu links work: Okay, so let's make these links clickable. All right, So when you click in contact, I want to reach to this sex and contact When you click on services, maybe strike more services of things that I could Let's do that in our index file. Let me collapse this head six. So the first thing you wanna do is it's fixed this conduct from when we click on the contact form we want to get to this. So let's send this to contact fun, and then let's this contract from this whole thing is inside this room. So let's give this robe I d Let's give it an idea contact, right. So has terrific. If you do just this like this is they called deadly. So if you do that, this is good for testing when you're developing. So when you do this, that's your At first I didn't do this. We get to the same prison as going Teoh slammed distances the Europe. So we come back to the same place and nothing happens. Instead, we're going to use contact to the i d. When people click on this link, the reference is, it can be like a Saudi early. It can be some level of sets euro, us, things like that. But in our case, it does the idea of contact. So once this is clicked, it wouldn't go looking for deep with the idea of contact. And if we find here, this is we give idea of contracts of that how it works. Save it. Come here. First up is and if you click, will be taken straight to contact for Beautiful, isn't it? You can even give these takes to class. How do you do that is close Like a Saudi earlier buttons. They have button button primary, but danger button succes but info All that And they have different calls so you can use the same form it here you can say text instead of Baden primary, you would say text primary and see the primer The same Barton color. You got the same color here. You We can use this style to make it capsule Brown between hardcore did notice this simplicity One trick and I want to make sense. Beautiful excuse the horizontal line. I really like her center. Simple and elegant. Beautiful. All right. So contact form with God's 29. 28 Using google fonts and styling text: I want to make it through the big we haven't used the Google from Ordinary is good for a year. It's open about folder, the one we had. We used this booklets open with sublime. The one This is the one we used in his 200 copies. Syrian Cool. This one front family buried. It's important this. I had six, so we got this fund ready to use ballerina. No, let's go here. And that's the heads to write. Let's make hitch war heads to goods. Give them for my family. Marina. Say that. No, that's interesting. It doesn't look that great bird. Yeah, it's pretty cool. What we gonna do is let's make them. I want to make that big bigger, And we can even use inland style sometimes to really handy in case and like now we can use so easy it's bringing down its drip like so let's add in line. Instead, it's a form one says one says, Let's make it 50 pieces. Let's make nice, big, beautiful contract for 56. What about this? Let's make all his one and has to 50 exit. Okay, phone size 56. Let's give them a call as well instead of stay on it. Where's that call a pickle? Let's take some interesting car. Let's try this. This is Norway, beautiful. 30. 29 Using inspect tool, heading style and navigation links: beautiful. That's contact from. In fact, I like this. This call. See how beautiful ladies it is Not that bright this big, right? Let's see. Let's call it. It's what is the excuse name. So you can do that by going to inspect and then you normally when you have when you hover over, you can see that this content is active currently. Now this six and is active. And then what is the contact as you can hover over. You see, that's how it works. But currently we're we're in the right place. So this is the call I really like. Let's quote me that. So that's how we get these. Carlos. That's really handy. Save it breakthroughs and they should have the same. And this one doesn't some reason. Hey, Heather, work extremely. Let's keep dicks. No. Some reason well, because we applied heads one. Sometimes it happens with woods. Triplets. Even It's clear to new classes cleaning beauty. I would make it even bigger. That's good. All right, so this is our weapons. We have this men text. Yeah, we have this one we have to have ever Aiken sex and we have ordered lease on order this contact from Awesome. Okay, so we were actually, we're going to work in a link again. We did on that one. Now what else we have? We have this. Let's make it. It's making services. Six going to hear. Yeah, services. We can use this styling uppercase with blitz kits. All right, Services doesn't look that fancy, but you got the point, and let's send this. So let's This is the Robert Let's give it a D. Services called. So and now go back to the menu. Okay? Yeah, your services. First, when you make contact, we get to the contact. Many clicking services. We get to the services. And when we scroll over as you have noticed, the menu disappears. We can keep it always here, Doc. We can do that by just going to a menu. Every gaze and never in verse number Fixed fig, Stop. That's the class name. No, it always stays in top. Beautiful. All right. Contact being the contact from services with services about our world. Let's make this sex. And about so this this you'd oh, absolutely class. That's great. I d about No. All right. Bookshop. This men based go to about this about services. Contact. Forget this. Is it this lesson? We learn how to have links to our menu. And we did a bit of a starting to and we'll do more in the next list. Thank you. 31. 30 Creating tables with bootstrap: we're gonna We're going to use tables. It's really easy to use tables in Bootstrap after the contact form. This deep after this. Indeed, it's quit on this comment. Okay? It's good idea to comment. Live government it into Come back later on and you know, not to get confused to this is the men. So do you through, do you Container. Do you go small 12. That's making and great to Dio James. Fruit to head. You grew. They were heading. Hitting. What you want? Name irritating e mail contact. That's for the heading its creative body team board. Thank you. Drew. Kevin data in the room data. So row it works. Same as the butcher row. All the way for right to left and then columns. So this one is row and then heading. This is data. So name. Let's give it, Ryan. The mill is run. That their contact context? What do you Australia? Mm. What happened here? Yeah, there we have it. Yeah, it's What can we do to make it better? So there is our table. I want to be betting it since doesn't that good? And let's create some more data actually doing and Gabi. Best simple, Chris. Yet go some data. Let's give it a background background. Jumbotron. And my question is it for class ruled container? Jim, would Friess beautiful content? Yeah, that looks good. It's at a bit of a bedding and took down the trunk. Do you Do you? They will, trump. This is my last name, right? Let's try this seven. Trump my cousin took You would think so. It's really easy and beautiful to quit tables, but trip again. So we got that we got there. We get very getting other things done. We created table. It was correct. What a trip. Okay. All right. We nearly done with boots. Savages. Quite a lot of things were some cool things I want to show you. Like adding full with background images and probably I want to show you how you can apply the Grady into color. Very in Bagram. Not just a solid great and looks really amazing on. Yeah, I will see in the future license. Thank you. 32. 31 Blockquote and strong tags: I guess I website is looking really good and we have a lot off were covered a lot of things . I want to see one more things. It's called panels and they're really cool and least lists we did at NIST with the So let me show you the parents. They're really cool. And then and then we'll go from there and people that just want to show you on Sometimes you must have noticed the sun textile time. Bold. And how do you do that actually didn't cover. That s down six and two. So I keep forgetting that Let me say so. Let's go to the top in this sex. And so this is hello world this year and let's say I want to highlight some of the text and it's good for a certain an optimized isn't too not just for looks good. And it works well for the broadest search engine center. So let's when we reading the barrier or somebody we need toe highlight. So what we're gonna do is we can use the strong tap strong day. Come on, see? And let's let me strong tub and then it they and you pulled the text inside. Okay, so this makes the text board see that textbook? We cannot, in the same effect, using B, which isn't really used. I haven't really seen this tag being used. Yeah, he gives the same effect. But however strong is recommended for surgeons and optimize made is really good. And when I'm here, let me show you this. When it is, I italic text text gets italic. See that? And there's one more thing. Leave it to stronger. It is really problem. And you will always use this strong Terek. So just keep that in mind. Strong tag. And sometimes we can create block course as well. You're right. Create Blaquart. Yeah, before I forget on suit. Thank you. Okay, let's say this is the problem. But let's say I want to highlight this bit of text as a block court. Common. See, Limit created this billows and even put anything inside this blood quote again. See what happens. See, that doesn't look really good. And I think because way have centered the text but doesn't look that good, I guess the one thing stronger. Thankfully I showed you I was a bit forgetting that kid for you. let me create a new deal at the end. Uh, Steve, do you content going? Do you container, Dave? And you let go a little business. Oh, that's probably because I'm wrapping it inside. P let me rapid inside. This is deer on. This is the better. Where the battleground. This is also the paragraph. However, this is a block court, and that's it. Beautiful. See that? This woman So sometimes it really gives the dynamics that is needed to you articles, and it's really cool. All right, so this is how you can create block quotes, which is cool. So we covered strong tax and Blaquart in this one, and I'll cover. I was going to call some something else in this 10 yeah, The panels. I would call the panels in next run. Thank you. 33. 32 Working panels in bootstrap: let me quickly see how we can create panels. It's really cool. One of my favorite fees. So go to the end of our document. And it's great deep with contain a container I want to make Continue clearing, Do you? And then I will create three columns. Give calling s for and on here in this column, I will create deep with the class name of panel. No different. Yeah. Then dig panel body. Sorry. Hey. So inside this panel with a class name of default this panel out create 36 and three dips heading body and foot, I guess a deep battle getting okay, do you? No. And the body And then food. You all right? So deep panel heading. It's they It's to cool, huh? In the body. Throw something. And then here, let's create something. Martin, That's charity. Lose is cool panel. So see how it looks. It looks good. The reason doesn't look that good for this time. Is panel heading has to we Let's use history because we used styled made differently. History and Tetra. Let's get that school. That looks more realistic. All right, I guess I got the heading panel footer It's quit button button with info first, and you can see that school. So this is how you can quit panel. So this is the first panel. Let me copy this panel. This is calling small full. All right, coffee. All right. That looks beautiful. And you can you can I don't see a on the side. You know, you can do a lot of things. The one we did use before Is this in this exit, right? Using I can quickly, it really gives the dynamics for I will contact the importance and you can quickly starts in the sub text using the common F control far there is like then take these council copy and that's skipped down. The first panel, like collapsed earlier. And here in this button, you can let's bring it down so it's more readable. You can add the bottom I can before the more the first no being, because my way we would ended that class. That should come back. Beautiful. So that's how we can customize and making lost. You can use that the first for the icons, and you can use whatever guidance you don't have to returns. And this Burton this cube, Try and Mary. And this burden. What excuse? This will miss to see the difference. No, it looks pretty good. I guess so. It's a little bit of a pairing for this. David looks too close. Do did do continent fluid. And my makes it. The name doesn't conflict saving, you know, it's try to light. Let's try this. My balance. And then I added batting 50 pixel art that soon 60. So it's really good. You can see, like copy. Let us now bested here. All right, First you can see it. So this is how we can work with boots. Rabbit. Amazing. You can see we have navigation. We have the Motrin. We have images. Responsive. Everything is restaurants Beautiful. Awesome. Okay, It's not looking very good. Used this block quote. We used the strong type. I know. I keep emphasizing this somewhere. I didn't want to miss that again. Got the tables we got takes. We can write articles with a lot of years. We have panels. Awesome buttons. Okay, so we're nearly there. The next thing I'm going to do is the last thing and a cool thing. That is also how to use Grady INTs. So you're dumb assurance Look awesome. And I will also. So you know how to use the background A maze for your jumper terms full with. All right, so that's that's coming next. Thank you very much. 34. 33 Using scrollspy for highlighting current links: Hi there. Welcome back to Bootstrap. Do yet another video. And so far we did quite a lot. We have beautiful navigation. We have the images responsive. We did a bit of a Icahn box kind of thing. We have the list contact forms and there are lots more, um, components you can use. And you can always visit Bootstrap and learn more about them. But basically going to cover almost everything we did quite a lot. And some of the cool stuff I'm going to cover. And in a few upcoming videos, such as in this video, I'm going to cover how you can use scroll spite. So what is that is when we scroll like this is the services space. This is very small body. That's what it is. And this is contact. So when we're scrolling, what if we want to highlight the six and like, if we're in the services six and we want to highlight this and if we are in the contact sex and conduct link and we won't highlight this link, So how do we do that? And you know, we can do that using scroll spite, and that is super easy and butcher. That's the amazing thing. So says for a boat trip, schools by and we can go toe obviously inside. We can't even go to Dover. Three schools. They have quite a lot off useful examples. And yeah, you can always come here for reference. Pretty good place for that. And as you can see, you can you could cry it selector sex and one on Just scrub. Yeah, it goes six and big, and so and so So how do you do that? It's pretty. Let's This is the example. It's proof they tried to And what do they have here? Is this special class that I spy and with the name scrub And what does it target? This one targets the number. So we have the navigation with the class name off Naba. OK, so as long as we have this constant for the navigation and inside this navigation, we should have the links, obviously, to represent all the links that we want to have effect and that that's it. All they need is this bit of course, that I spy school and that's target. The name of the number is number. Look, let's corporatism and come back toe pays. And yeah, as you can see at the moment, it's It's repressed. Nothing's happening. Doesn't matter where we are. Nothing. Now let's try it. So we're in our index notice, Demon. All we need to do is in a body dying inside. But by the time we need to basis not a spy, scroll down the target number. So we have a number were targeting this navigation class so it automatically detects and with ever pays with ever d we're on. It works. So good Civic work first. As you can see, we are in the contact. Beautiful. All right, where in the about We're in the about when the services were in the contact and as we scroll. As you can see, it automatically does thing pretty cool, right? I see the last deep the name of for that team contact form. And we don't have any lingering and create another link for this one is real. If we want to. Let's leave it. So this is how we can implement this beautiful feature. Cool, right. Okay, let's do some more cool stuff in the next video. Thank you. 35. 34 Implementing image slider or carousel: Okay, so one more thing we're going to do with Boots. Sherman, that is adding Cariaso Castle is the image slider, which is really public these days. People you see a lot of forces have on top off the base in the landing place, the image slider, which is really cool. And it's really easy to implement that with would strip Let's go it says for boat trip, Carrie Sue and let's go to the official side Carson template from boots crap. Okay, this is how it looks. So we have the Barton we can Elsom takes some paragraphs from description and we have these icons pretty cool. So this is the carousel and background. Obviously we can have limits instead of this blank thing. So how to implement that? Sometimes all you have to do to get the things like this and this is not just a good strip on the Internet. You can see certain things in many different websites and you might want to implement the same same fees or same functionary. How do you do that? Most of the time, you can seem to do that by, you know, applying the same CS is that screams him styling whatever they have used. So how how do you do that? You can do that by just right clicking. And you see the bays. Big source. And as you can see, the the whole place is generated by this cool again. So the carousel begins here on the top. Just a navigation. Navigation. Navigation. Yeah. So after that, they have carousel. So this is what we're interested in and simply weaken this. Copy this code. Let's copy these end of cars off. Kobe is and here right after the navigation. That regulation. Let's add this carousel. I get end of God, So yeah, make me Orlandi just sick. It's quite a lot, but I'll explain it. It's pretty straightforward. So it begins with the deep. It has a deep with we give it a class name off Parisot Gerstle and then slide said the slide and data ride castle the different class name default name for this to work. And they have active state. They have the images was we're going to change. It's lived for the moment and the men heading and some description you can always override this one to shoot you need, and then they Barton with Baden primary class. And yet the multiple images are there. This is the image. This is these third image and so on, and this is the icon they used. They used the Cliff Aiken, but we're going to use fund also instead, again, really change that, and this is pretty much it. Let's start with some images, but before that, let's have a look. Let's save it and have a look in our site. How it looks. You don't see anything first. No, nothing. Probably. We need to get the CSS as well. Let's go to the top. They always have the, you know, the head six. And they have. This should have yet Carousel. Did she assist? They have. So let's let's get this entire CSS and will modify. Okay, copy. And it's good. Docs is it's based. We don't need all these things. Bond. Both sides of Castle Country. Let's living. Let's leave this one. Let's leave this room features. You are still hides. Fix to 500. That's good number. Wouldn't need the nap, but we have our own. So let's get drivers. Don't customizing that by this sex, and we just deleted and the carousel. Let's leave it. So there's a base class there. Applied some serious is was listening. Castle Item Garrison, Inner M is they have done all the hard work. Marketing content wouldn't need this one. We can get rid of it. That is for the entire place that we saw. If you want to implement some of those pictures, obviously feel free to do that features. I don't need this as well. All we need is that Care something. Let's leave it for the moment. It's repressed, and as you can see, we have the council beautiful. We need to fix this bit of abetting, otherwise it looks pretty in it. 36. 35 Adding images to slider or carousel: all right and even for the second slowed beautiful sign up today, your moral browse gallery for every sex and you can have different customized bottoms and all this stuff, which is great. Okay, that's looking good. Let's go ahead and replaced images. So we have the images here. I have Downer to some images. I will make the whole folder of either with you. So if you want a player on obviously and your source, he misses the older G p g. To use these. The next game is source. Let's did on the sore sport. And this time let's use nature. It is a beautiful lake in the park. All right, let's go to the next one. Next image. Let's use Yeah, after, uh, make base that So you feel free to customize the text. Obviously important in all the info we just did the emits beautiful. This is on top of our base, which looks beautiful. That's awesome. Okay, you can customize the text buttons and all that. So this is great. Let's fix this bit of betting here. What is the name of a class never for what is the name of our Devi's Mike Harrison we can begin to use carousel class name. Let's try to live Carousel Marzen Burton, he therapy said. That's part. That's good. Can It was adding. So in Sidhu, it's too. That's awesome. That's copy these. Let's go to CSS and it's at this Martin Carousel. Myosin bottom. Do we have gases class already here? No. Yet we have. That's and it's fixed that compete margin. Bottom 60. They already applied. So we applied left, making Terry simple as that. Awesome. But I want to make this headline different, especially in the castle, but it doesn't apart. Let's let's fix that, too. It's good to heading. Let's give it a class name. Oh, Carol. So heading. See? And let's apply the same class toe all the headings and castle hating. Okay, Carlo. Her word. Port. What? Looks very good, actually. Copy. Starting first. There we have it. It's beautiful. So this is how we can use bootstrap. As you can see you cannot you almost any layout? Any and it designed with so simplicity. It is incredible. Something heaven here. We don't need this six. And let's get through this. The feature at all the feature future. It is coming from here When we corporate this place in this, this space has all the future things. So that this is that styling is for that. So obviously Because the one thing I know just here is that the the color was bit over the region. And that was Biggers the Stansted with corporate. It had this class. It was targeting the entire body sex. And so a new dream of this. Except this is all we have. This is all our own and styling. And the one we copied from there. That's all only the castle. Once we keep in everything else until it'd character castle caps in and everything with the carousel will live. I get this. Feature it. We don't even need this. So this is the last one we created by ourselves. So just this. 123 for five. So this five castle styling you keep in the Ristic and village, I could save it the first and looks perfect. It's looking really good. And this is it for this. Listen, I would sell you a somewhat good stuff in the next one. Thank you very much. 37. 36 Creating footer section: Okay, So what side is looking awesome? Let's add food to six and has really in the foot. So this is the closing. Develop our men container inside this man content that's creates for the same as the number . It's a food. What? And then let's write copyright. And if you want to write a copyright sign, you can do and she'll be away, you could be right. Um yeah. Reserved Corporal Ridge. It's turned 17. We're on. Continue. Okay, brother, with this character is on top of your sift Enter key on the keyboard and friends and there we have it. And as you can see, the copyright the cooperate icon that looks like that. So there are some of the special characters you have to write like this. You can always 1000 good hydride cover have how dry a certain characteristic you might need to know. And then you get quickly starts improving, get getting stuff. So footer, it's corporately slits would inside deep with the class Name off Future. Yeah, based in this foot. This is for the heads Dimel market. This is for this standard we're following for certain an optimization. And this Deve in just for the the design this is for. To get the bootstrap design, However, this is the actual history markup that is necessary for the proper has stable base. So you always put footer nabbed for navigation and all that stuff. But the rest of that all the deeps there just for styling purpose. Let's let's use the Jumbotron classroom. Looks very good. Yeah, that looks beautiful. That's pretty good for Footer. Wait did quite a lot. Where else we can do with both strip just for good at this kind of stopping, Just like doing more. Let's do Let's I want to do this when I want to add a background image. Obviously we have listened, but this is a slider. But I want to show you one how to use the background full with background images. And on top of that, we will have probably services six. So I will show you that how we can do that in the next video. Thank you. 38. 37 Full width background image for a div with fixed state: Castle. It's add background image full with fixed. Bagram admits to services six and it's the first thing. It's good to our services. Do you? The one living collapse, This one. This one is Blaquart. Let me collapse this as well. And this is the table. Let me collapse this. This is the phone and this is the services there. This is the one we interested in again. Sorry, it has the idea of services like So let's use this. I d We don't need always glasses again. Use ideas Well, so let's let's use I d Could be and let's cry it light. So with the idea, you can use this with class We used dark with ideas with these has services and what do you want to do? Is in this deep with the class name off, I did name services. We want to use the background inmates so they see Assis class for using background image which is symbol as beautiful ground sumas Bigger college's beggar name is Big Gun and then we supply the u R l again. Yeah, parenthesis is and inside we give the address in double quotation marks. So let's run Nepo. No he's inside images for and there is beautiful. All right, let's that's That's like good. More images. There was. Let's try. I know it looks. It's good, Molly. No, that's try this kid. That's good. So it is taken just enough space for this content. If you have built more content, it'll straight. So this is all we want at the moment. It looks actually pretty good with this deep blue and then slowly light blue. It's good. What I'm gonna do is reduce. The Mars insert looked kind of a test. Let's do that by margin. I don't honey bees in this foot eight minus 30 or if it that's Luton Beautiful. And we can also give a thing so that when you scroll, the emits stays fixed. And when you scroll up and down, it gives kind of very nice effect, as if the content is moving whereas images not so let's does mint and let's make it fixed. Okay, so now you see No, no change. Did you see heads? Yeah. See, It's and that's it. Now, as you can see, when I'm scrolling, see, the beggar stays the same. Only the content changes. How cool is that. That's awesome. Let's make it bigger. Let's make this big height. All right. 500 peaks in. All right, that's beautiful. I want to apply some chases to the sex in Israel. So this one sits in the middle where it looks Britain it Very good. Now we're so getting the image. Very well. That's awesome. Do you the content? Let's give this City city the one we targeting. But this deep, which holds all the content. Let's give it a class name. Let's give it a class name. Off count. So it was this constant. Come on. See? Actually, let's copy this. Which other loses coffee? CS is saving, and then the one we just created is this one. This one first, and as you can see him is, is not there. Something happened there. So what I've done here, as you can see, that there's a bit of padding on top and bottom and this Texas center. So I take that using the CSS. So let me actually copy this. Save it. And without this, it looks like this as we saw it be earlier. But as soon as you applied this thesis, as you can see I applied the padding on top and bottom. You can even read like this. Wouldn't dry top right left. But we can even do this 100 pixel so it applies on top and bottom. And then the second second thing is for the right and left and said right and left. I just want to live there as it is. So this with this year says we have the central content company applied bit of padding on top and bottom and Gironde right, left. And we guard this styling, which is awesome. And the background images. There was one issue which have fixed, and I think my recording was off the time. So I just want to show you our fixed that when I moved that CS is when I was using their life, it was working fine. But as soon as a move, it didn't work. So if if I leave it just like this, let me remove this and save it before we were trying like this, right? So if you go on your first, as you can see, the maze is gone. That's because when he actually applied in CSS styles it What happens is it has to follow by domain. So in actual website, when you push your side to the life server, you will have your dominant. And then there will be a four minute. So you will have my dominant dot com slash s images slash Norway know that. But because we work locally and then this is the actual path, we don't need the index, obviously. But this is the distance enough are full of the route. So this is the one I copied and based here. So on the euro put that up to the bootstrap is the folded it and then in mazes. And then so this Just fix that up and then you should be glad to. I feel depressed. Everything is working perfectly. Are So this is it for this lesson, I'll show you one more thing in terms of design and background with images and all this stuff, I want to say one more thing that is adding the back Grady int Bagram, which is awesome. So probably will have black to slowly fading toward in the next video. Thank you very much. 39. 38 Gradient background: Okay. I'm so you're having a great time back to you, Bootstrap. And all these things you learn, you can apply any real life. And this is this is what you need to know. The Slattery got the background. All this scrolling effect now that, as you can see, the great and slowly comes from dark, black to faint and fading away like that looks really awesome. Agency Such background, you great and effect looks really fantastic. So how do you How do you think that? Let's let's use this blag and slightly faded called Looks awesome. Let me see the view based source. No, actually, let's see the inspect. And as you can see, this John Watson, I gave it a class name of body one. And this is what I used Lean agrarian too, Right? So let me just copy this Corbyn is, and then come back to my side. And you, Can you get that wedding? She is this gradient. See, this is just by Googling and the one here. They have a very good example. See, you can actually Why don't we use it? Looks pretty good, but for the table, I think black and right looks fine, so you can see all this And they have different styling. Applied solid works works well for the world projects for Firefox opera suffering all that the every encounter. Some probably, you know, come back. Hopefully all the browsers will support, but if not, days are fixed. Okay. So as you can see with goods traveled in it, we're all this. But when you're writing your own costume sees, sometimes this happens. Some browser works well, some browsers done. So what it does is that's working desk. This is for safari and everything else. This same exigency, Lini ingredient. All this everything is same. But for a specific browses the air such name on top with this is the standard. Hopefully you don't do this. It's quite a headache. Okay, this is for a safari. Work it or they used for opera. Most they use for must Mozilla Firefox. And so hopefully it added all of this. Yeah, So this Dave, it's giving a class name off row and then add another glass. Grady int I didn't know And the first in this place who's and then you play that here. Okay, Because we used Jumbotron IDs hidden in the back. Let's give this class instead here, and we'll have the table trump. Awesome. So we can use this to the table. Trump, Tim, turn. So, as you can see, we're gonna add background. Great. In Bagram, which is pretty cool. You just need to Saeko, I have a problem with this. One is going Let's choose the core, which is slightly 666 of you. Yet that works well. I went to school, I get board Radius said Jail Gordon. Now it's straight. That's awesome. Let's copy this cirrhosis best. You save it first. Beautiful. Let's make it for it. 40. 39 Pop up modal in bootstrap: I could be a starting date quickly. I want to show you one absolutely amazing thing that it is. We'll strap more doubt. I really love it. This is amazing. It's good to Why didn't you go to David? Three. Schools they have, as you can see, Greek to open model. When you click and something like that pops up cool, right? It's Let's let's use this. Tried the sub Let's go have a look at the court. So what they have here is pretty standard you. They have a tag, they have a deep. And this Dave has this button. This bottom targets the data Total model and other tiger is the more light, the same as we did earlier, with navigation and all bets off the same way. So we have a deal with model with the idea off, glass fed, and then we have the different dips with buttons one has for closing. And then we have the header. We have the body sex and and we have the bottom. It's pretty standard. So let's take this example and try it. You. Now body starts here and then this could be the entire thing. Coffee. The Scorpion paces aunts, acquirer skill you need because it's really helpful and nothing wrong with that. Everyone does the same thing because you can use, um, the sub land blogging for that without want to show you without. So, at the end of the video to so they didn't have to always go there and Cooper Union generate things kind of, let's say bootstrap three. Mortal depth And as you can see Isler to get all of it, the markup, However, I will show it next how you do this. But for the moment, let's based that in All right, said it. And it's having for us at the end. Moral example open and opens up. How cool is that? That's awesome. All right, so let's let's make it center and let's make center Hates full model Heather. Moral example. Okay, art. So let's leave it. Let's keep it on double foot. Let's keep this. It's a lot of copy place here, but I'm sure you got the point. It is necessary if you don't copy paste. There's a better way without street next. But there's no point writing land byline. It's the social order, time saving awareness and as you can see we have the model. Let's give a beautiful what does it and we can cure that bit of betting. What is the name of this mortal? This diva is called it more whatever. Books first 56. So, yeah and cool. Okay, first. And that's awesome. All right, so we can use this. We can use this to create. Let's say we can even pull this contact form inside the border so you can simply say contact us. And then when people click on the contact us, they will get this contact for there'll be possible so you can be creative and do a lot of stuff. And let's see what we will be doing in future. Once we get into Diggory, maybe we'll do some more things with this model of Maybe not. Let's see. But as you can see, this is really cool, I guess. So let's let's wrap it up. Let's grab these good strap sex and we learn quite a lot, and I hope you really enjoyed it. And then definitely you can begin. Queer Amazing were basis restaurant. See fully restaurants, spaces in both strip you want you have reached this far and practice a few few times and I'm sure you love Practicing is always fun, but it's so much fun. Are, thank you very much. And I will meet in the next six and with a query. Thank you. 41. 40 Getting ready to start with jquery: Okay, now we're ready to launch Jay Cleary. January is a most popular JavaScript library. And do you dick quickly? It's pretty straightforward. It's almost like using CSS, so you don't really need to understand JavaScript. But obviously you will learn JavaScript. But you can start with a query, and you can have a lot of fun. Do local stuff with hickory, and then that'll even have you learn javascript later on. So yeah, that was scripted. Totally. It's not a requirement for jiggery. You can go ahead and learn JavaScript later. We'll get started with Jake weary because it is straight forward and it is really easy. It's just like using CSS, and you will get the idea of how to target the in the elements, his team and elements, which will be really helpful to learn javascript later on. Okay, so day query. It all comes with Bootstrap, which we were using early, and we had jiggery bull from the Syrian as well. Let me open the file again just to copy. We'll start with first Jacob Fine, just to keep things clean so it doesn't get mixed up because we don't have Laura Continent , the bootstrap. So you just to keep it simple. But whatever you you learn in this sex and Jake, well, you can always implement Go back and implement to the boots. The base we created our area. So living drag this Just I want to corporate these Cdn link again. So has index. And here we have both strip. We need boots. Trip. Obviously we need We didn't need the front, but it made me I decided. Okay, so we have the boots trip and we have the front. Awesome. And at the end, just before the closing body, we should have the scripts. Yep, we have dessert Query. We have the bootstrap. Which Jace? Let's copy this I Let's cover the entire prison. Will, did it all the body sex copy. And I'm going to drag this day query to Sublime which empty? It has nothing. What is nothing. Let's create new file and let's name it in next. It's steam and it's best that in What we're going to do is we're going to deliver the whole thing in tow thing. Okay, Head six and is fine. Body ships and navigation we don't really need isn't Let's leaving. Let's leave the baby's like so do the entire deep. We want the entire this day with the world, this one food drink and live for the let's look for So we have the headsets and with bootstrap link Syria, we have never isn't. Let's leave it. You don't want this crew. Don't want this. Make its give you soon in the future. Okay, we have the head of foot and we have the scripts. Obviously, we have the J query. We have the JavaScript boat trip and that's it. So we will start. Let's create a knew that was screwed. Fired? Yeah, same as we had before. CSS. Let's create new five, Let's call it, but yes, se and we're writing a script here. Now let's link this and you always want to put all these scripts at the end of the the bar today, just before the end of the border tax so that the Basic Lords and then JavaScript lords so that our pays lord is fast in It doesn't house who doesn't block the loading. Sometimes it takes time for the script. Allude sirs, After Julius, save it Now this telescope is linked and we can start writing it 42. 41 Downloading plugin for sublime text: Okay, I can. Let's take it out, Jay. Quickly. Index foot, Let's get ready for the We don't really get into this. This one symbol environment begins. Do awesome stuff. Yeah, this one is fine. Really hurt. However, I don't really like this. This Let's give it one. You sick minimize collapse. This one? Yeah. All right. It's also created Eve with contain deal with the room. And even though this is a query, I think I forgot to show you one thing I wanted to see. How you can generate would strip classes with the blogging even used with sublime. Like if I want to create, Let's say, bush up from B A street. This from Tab and then I have the phone c 19 right? So this you can do all this with plug. How do you do that? Go to the sublime Many. I use third code command, Safety control City being windows something. Let mystery from the mini bar. You can always go to the common palette here and then you can say in stroke back is And as you can see, it's what? No, but sure three. Because I already have this plugging. I didn't see here. Okay, So should I remove this? Let's see you move back is just to demonstrate our dream of this one are yes. Let's remove snippets and maybe move another one just to say get them removed, Boss. No, If I try to generate Simmons before be a streak PS three from doesn't no, with me. Install. This time these beggars in slippages means the source for what? Stripped three or to complete. Let's get that ensuing here. I didn't know. So get instill backers, and then it's a boots trip. Three snippets, right? Yeah. So now that we have both you and as you can see this guy crazy dispatch, it was really cool. You can go to these documentation. You really need to go to a recommendation because there's a lot. Okay, so this is the place. And as you can see, how we can use all these sleep it. It's pretty easy, like for a CD in for head sex. And you don't need to go find our Syrian copy business to be a street accident tab in the nearly that done to clear the entire template you only have to do is based through the standard has taken five steps in the new year. All that for From I Saw the earlier B is three deaths. Font have done. So. This is how you use this problem. It's super cool, so I will. Just down. So it's here. It's back. Sometimes you need to restart your sublime text. Sometimes not. Let's see if it works the history from Deb now it works awesome. So yet this is how we can do cool stuff with the plug ins. All right. I sold you this one with. I'm sure you like. Now we have created a container in the were created. This is a very, very first video, and I saw the acquired a lot of things. 43. 42 Write your first script with hello world alert: Okay, so there was a lot of talking in the previous lessons. I couldn't show you much of our jiggery, but I'm here and I'm ready. So the first thing we're gonna do is let's see if you have everything set up. So every time you want a ride, Jake, where you begin with dollar signs and then you create a double the parenthesis and this semi colon. So everything happens here in between. So always you started the dollar sign closing and opening and closing brackets and the end with semi colon. We're gonna inside here. The first thing you want to do is right. Document What it means is this Hess demon Listen for template are that's what admits when it's a document. That's what it means. If you wanted to target, let's say a particular element. Let's a nap, then you'd Right now I think that that's how it works. That's how you target the element. His demon element with daiquiris. Okay, so let's keep it simple. It's a document. So it started the dollar sign inside the bracket. You write, the element did that you want to target, so we want to target the entire said entire document, then dot Ready? Okay. When the document is ready again, the brackets, When the document is ready, you have Twitter function, require function and function. If you're not familiar with programming, for instance are the most important part of programming and then from since always opens with Franson And then you ride this opening and closing day and you write a lot of logic inside. But for the moment, we don't need anything, so just created a new function. So function these two opening in prison brackets comes with function or it right after the funds and you create to Carly braces again. And then you hit enter. And here we didn't write a lot of stuff. Okay, so what happened here? This is the the structure again. This is the most important one and everything we want to do, we're right inside. So that was equally you always want to Lord, when the pace finished loading, you don't want to lord it before the pace finishes. That's why we always have to say when the document is ready. Execute the function. Now what do you want to execute? Let's create a simple alert alert and this is our script, funds and degree There was. I get work. When the dog man is ready, send this alert. Hello, world. Yeah, go to the pace. Because this javascript is already include it in the food should work. First up is Chris. Nothing happens. That means. But the reason it didn't work is we can't put our our javascript on top because where to put it at the end. I Because first, obviously, we need to get the secretary because Abbas could how it works. It works from top to bottom. The the order is really important in javascript. So first thing yeah, we get physical. Second thing, we get boots, trip that script and then we write on. Otherwise it doesn't work. No, we should see the alert. The first base. And as you can see, the spaces Hello? Were okay. That means we have These are working and this is the very first function you create. So let's write it. One word and it's really important. Dollar sign opening and closing parentheses. Brackets ending seven car and then what do you want? Do you want to target the whole document? Right? Document And then what? You want to do dot Ready When it happens when it's ready for the Funston Constant Knowledge Opens has opening and closing brackets. And right after that you quit to call it versus and inside the right. All the logic we write how warm again. And make sure you have these two Courtis in marks because this is just the text. If it was a function of something you wouldn't have to. But from the text a little again, that reversed again. All right, so this is the very first script that you're right and we do some more good stuff in the next video. Thank you. 44. 43 Using animations with jquery: well, let to do some more stuff with JavaScript Day query. So to begin with, I want to create some content so that we can target those contents and tryout day query. Okay, so let me create. We have continued. We have a rule and here didn't create too deep. Second, do you lets you to class them off Colon Small six. And then let's quit another do crowing smoke. Okay, we have to DZ and let's give them a title. It's too lift Red Comb. And here in its calm, let's create it's critical. Do you? Um, what we name it. Let's give it up. Last name off, jumbo truck just to get a big you know, back off. And then here I want a gruesome work. Importance butter. But Burton lets you create a default, wouldn't wouldn't default. And then that's the war. And let's create somewhere here to three cool for six. So we have six Borden's with the class name. All of them have the same class name again. Let's give them your same class name. We don't really use the part. Let's give this, uh, let's call them target. All of them will have this last name. And there's a reason why I'm doing all this Army. So based. Yeah, you can ride with me. Okay, So all these buttons, they have the same class Name, target, and let's create ideas. Well, because I really comes really handy when we working with Jake. So this is the class name. Let's create I d. And let's great idea off. Target one. Target two, Target three. Target for 35 6 Okay, six for full three. To what? So this is the Basic Templar. We wanted a career. Suddenly we can play around with Viguerie. Thank you. And I will probably make it a violent television. You can always player on and you have to type all this stuff. So let's let's sit in the squint, Chris. Okay? And we have three Borden's on the left, three parts of the right. So what do you want to do next? Okay, let's have some fun with bakery. Let's add some animation. Okay, so let's go on and get this intimate to see its animate Syrian any mate Dorsey, Asus, Cdn and let's get from you and images Scorpy. I think it's were CD in enemy school, so this time. What we want to do is we're going to target the bottles, so always write everything inside this document. Ready function. So let's target Barton. So just like a show de opening and closing Burkett's and then you died so important with the double quotation marks button. And then what? Do you want to do it to the button? You want to add class? Okay, which class we're going toe. We're going to add the animated balance class again. So this is how we can use that. We can use that because we imported the animated ceases. Okay, so we can use this and made it up the bounds so you can read more about the class names, water, the options available in all this. If you go to the and the rent, an amended seizes official site. Yeah, you can see a lot of stuff here. You can see their hips so flippant. That's how that's the effect you get. If you use rooted out downright, you'll see Like that. See Laura. Cool stuff. Thank you. Let's not get overwhelmed with that. We targeting the bottles. So button me when? When we subordinate means all of this importance we have six Martin's here, waste, sir. But add class that just like we said that really it's had class and what class we want ahead. Animated always comes because this is the the men source. And then this is the class name bounce. Save it and let's see what happens. Refresh Who did you see them bounce? How cool is that? So that's how we years the school Frandsen bound. Let's say we had we used, like regulates wrote it down. This is, since it's quite long. Let's a let's first flip. See that flip? Let's try that flip, save it and then your first. It's almost so, Yeah, it's really fun that Zika is really fun. And this will be your first step towards the programming and Jake learning JavaScript. I guess this is a really good way of starting. I Let's send this body. I don't really like them on the side center. Okay, that's awesome. All right, let's Let's go back to box. Fres. That's awesome. Okay, so we'll do most cool stuff in next video. Thank you. 45. 44 Targeting classes and ids with jquery: so we learn how to target the element. We targeted buttons, but how are targeting a certain class? Let's say we want to target target So all of these burdens have this same name Target. In fact, let's start a Jumbotron. Okay, Its target Jumbo trunk. Jim. But Trump, this is deep, and this is both of them. Have geometry class. So what if we want to target this Jumbotron class like, Let's try that out. Okay, so it's the same way dollar sign or playing in closing bracket and the same color and oh so inside here we want to target the geometry under Jumbotron is a class, so obviously you will start with door sign and jumble, same as CSS. If it was, I d. You do this sign, but this is the class of we used this side, same as seances. You said Jumbotron. And let's add a class to this one on a class. And let's let's give it a class name off animated. Let's call it sake. Save it grew and refers. Now you want you must have noticed not only bottoms, but dont maternal also bounced. Cruz is going to see it. That's it's that. So that's how you can target classes with a query. We saw how to talk class. Why don't you try? The idea is where it's what I did. Do we have I? D? Oh yeah, Target one. Let's start it. The element with the I D off this one target one I don't see. It's a real target that Darla. So we want to target I. D. So it's starting with Hess and this I did them. And what do you want to do? We want to add Kiss and we want to. Let's say Fade out so you can look at all these beautiful cool classes in the intimate of CS is like Shorty people. It's your first. And as you can see, it's faded out is gone. The first and that's gone. We targeted that elements. It's gone so you can do really fun stuff with daiquiris. Some of the items, Maybe he wanted so here and then it's really they will fare out in school. All right, so yeah, we learn how to target the element with the class name class and the I D. And we'll do more and next. Listen. Thank you 46. 45 Target same element with many selectors: it's did all of them and start first dollar. And then it started Borton. And then let's give it a class last name off. Let's see always don't forget the double court isn't marks and I am eight and amended. Let's just give animated class to all the buttons, huh? Let's see what? And first no working because we didn't supply the second argument. So yeah, so they will all be animated now on the next element. We don't need to write animated again. We get this right this second thing like so let's apply animated to all the classes. We don't see any ritual, but here they will have this class now. Bottom default. Again. Let's try this, but a default. So all of them have that. However, we just want to test it. Our works. So, Donna. And this time we're targeting sir Class with name off Barton default. Yeah, and we're going to add and the cast name already drivers, let's say bounce again. Bounce. Let's let's do some surveillance and let's do what is cool. Darla Miglin school. It's trying. Save it. And first Well, that's awesome. Well, as you can see now see this This has taken place. So now we just supply the this name and then works. So let's say this one is I d with the target one, right? This this class also has all these things already applied. However, we will do more. What do you do? More? We will do well. Let's add Burton primary because we can do that too. We don't need to just use any magic. You can use the wood strip nonsense. It seems first. And as you can see, it has got the primary. Now they look a bit hard. That's because I didn't write the bottom. That's yeah, Dendrite. But listen, it's fix this quick. Good. Several is started to button and then you say, but primarily a default first, Beautiful. 47. 46 Remove classes and adding css style using jquery: it's the same likely added new class. We can take off the existing class, too. For example, it's they we have all these bottles. They all have this class name but different. What if we want to remove this class from all of them? With decree? We can do that. Let's try. Let's start with So we taking all the buttons right on the button and then what you wanna do? We want to remove Peens and then which class we want to remove from all the buttons. We went to him, Burton default, right? Save it. That's good browser, and it's your first. And as you can see, the old Stanley has gone and with about the just apartness lee, the different classes going, this just noted, that's coming out. First it this how it looks before now. We removed these class from all of the buttons, and now it looks like this. So that's how we can remove class as well. Let's also try adding CSS styling. We can apply cirrhosis with J Crew as well. So how do you do that? Let's say let's target one of this stuff. Let's a target one. All right, let's started this. So all of this adding, removing me and all this stuff might not look really practical in this example. But this is just to give you an idea. So the same same methods you can apply go to your actual weapons and apply to various elements. So you know how to add remove, add any masons and all that stuff. So this is just an example. So what we're going to do is we're going to a couple I she assists to this deep. Let's see our dogs. So obviously we get the element I d. And then we do CSS Simmons Atlas remove plans. This time we are playing CS. It's diseases biggest. Now I remember everything should be inside the Cortes in marks. OK, so let's say color. We want to give it a color off red. So what do you do? Color and then comma and then the red. Yeah, Great. So this is how we do everything inside the court isn't box save it refers. And as you can see, the color had sense to read. So yep. You learn how to use decorate too stun at a classroom of class, add see Asus and were the most off in the next one. Thank you. 48. 47 Changing html text with jquery: Okay, let's do some more stuff. Let's delete to get rid of all this, Thank you. And then let's try. Let's say we want this bottom to have a disabled or to you again. So what that means is it's a We want to make it the same first. And as you can see, this is not applicable. If you give value of disabled, this is the pure has Tima uncrackable. So how do we do control properties like that? So it's properties using a query. It's did it. Let's get rid of it. It's Let's remove this room and let's their first unit Inspector No, let's say we want to target this Martin using Jake, we're this element. This I d this burden with this idea. We want to we want to control its property using Zachary. So we use this broke method, same as we used before. Afghans removed glass. CS is this one is broke. Yeah, to the point disabled. And then this one is a Boolean valley. This is called true or false. And this one you don't put inside Kardashian, Max, otherwise it doesn't work. So this one true and false in all the almost all the programming languages. You leave it like that. You don't do so. Tagged one This Barton with this i d property said it to false disabled December trivia. If it's a false, it will not be December 1st. Describe you said to do First it's not so that's how even or work with properties. Okay, we can also use a query to modify the dext to modify the heads. Damon content. How far? Document. Let's say we don't have any heading. Oh yeah, we have left column. It started this heads to Yeah, so has wouldn't it? It's too. And then it's heads Tamil. Now, this time not for pits has demon OK, so it's heads Demon. We want to. It's a, um let's say we want to change it to What do we call it Now it's We're calling it Left column. These are awesome. Cool. All right. It's represents a hedge one instead of his Do we make it Page one? Yeah. We have modifying the existing document. Missed this thing here. Fresh press. Now, Brolan was this this thing and you have to be very careful with Zachary's Ismael Type of will also caused the error and doesn't work. But let's see if it works. And I also had to apply better for Marzen on top because it was otherwise it was. It was hidden. So let's let's take this CSS and applied here because we really need that. And this one more thing are quickly so it now, sometimes for a small bit of CFCs, you can even put in todo head six and nine just inside this style, it simply variety style. So let's say body, we want to have, let's say, many 62 weeks Friess and again see that with energy query separate for little things. We're gonna do this so we also learn how to take the existing contract. Let's in this example. We took the heads to and then we change this. Heads to email. Let's make it first. Yet it's good. Let's leave. It has to Let's make it italic. I don't see display around. This is really cool stuff. Yeah. So this is how you can take the existing content and modified using Jake weary. Okay. I'll come with more things to do. More cool stuff to do with Diggory in the next room. Thank you 49. 48 Append and remove in jquery: okay, We didn't do a lot of cool stuff with Jake, Really? So let's say we want to take this one of these bottoms from this left column and opened it to the right column. We can do that trajectory. So let's let's try taking one of the elements from left and went to the right. We can use that using the upend method. Let's get rid of all this. Yeah, it's start first. Let's say we want tired. Which one? Let's target for 123 Let's strike three. Great, we get So the idea off target 300 issue. Yeah, dog three. Target three. What do you want to do? We want to spend to Where? What do you want? Open. We want to up end to the right. We want to up end to the right column. The problem is, both of these deaths have the same class, and nothing specifically is. So let's add this. Let's at this class. Let's give it a glass name off left and let's give you the last name off. Right, saving. So we want to take this elementary, the idea of target, which is the button, and we want append to where they happen. We want to upend, too. The element with the class. Name off, right? Let's see if it works. France. Okay, so we need to use a pinch, too. So you just happened to save it first. And it's gone. Want to for six. And then it added to the end. So see, you can use Jaques do quite a lot of interesting things. So this is one of the things let's say we want Teoh. Let's say we want to remove from here. How do you do that again? That's that's pretty straightforward. This element, right? The same element. It's this right? Okay. It's a good friend. Destroyed it, um, target three. But this time I want to remove. I don't want to Just pretend I want to completely remove it. Okay, so all I have to do is remove none of good parts. France. And as you can see, it's going from there to That's awesome, right? So, yeah, take a break into a lot of cool stuff, Zachary, and we'll do more in the next lesson. Thank you. 50. 49 Cloning and targeting the parent element in jquery: but I want to show you how we can use clone method with vigorous. Let's say I want to grown this whole sex and her first. I want to clone the whole sex and and move it to the right. How do you do that? First thing we want to clone is the left. The element with the left I d Thank you. Okay, Class. And then how do you want to do? We want to clone, right? Use this clone method and then we're gonna do we want to bend two. Sim is this before we opened it, so it moved. But now we want to close. It will stay there. And additionally club I would do and what you want, Floren, We want to close to the right. Let's see if it works first. Awesome! So this is here as it is, but it has been cloned to the right column as well. Pretty cool stuff. Right, Excellency. And other cool stuff. This is cool. We cloned it, but let's see. Let's do one more thing. We want to sell it. We can sell it the parent element as well. Okay, so this is Dave. This day has a parent and this that one has another pattern, so so you can sell it like that. What I'm talking about is, let's say, this left element This Steve is the time, and this its parent is dishonored because this is the parent. And inside this deep, this one suits. So this is the time and this is the parent. So let's say you want to target the parent, but you're using the child. So using this, you can target the parent. So how do you do that? Let's it's you know you can. So let's say we want to target the parent off left so there. And we want to say parent. So see all these cool? France's apparent to remove lone parent class CS is remote class. All that's cool stuff. Alright, parent. And what do we do with the parent? Let's say we won't detain the ceases off the better. It's a CSS. And then let's say what do you do? The background that said background called. I say, let's see if it works tress seeing it to you. Okay, first. And as you can see these deeps if their parent has been tends to win cool so that that's how you get tired of the parent. This doesn't make much sense here, but you got the point. How do you target the parent? In fact, let's why don't we target? This is the main container and we have all these things rule. But it's not really good example of a little Let's try. Let's try row and let's target. It's bad. So it becomes the whole background. That's right. No. Okay, it started row and it's bad. Cool. So we we're little deeds were little Children, and we target a parent, and we made it when pretty cool. 51. 50 Targetting child element and the nth child: because we styled the parent. We target the parent with critical. How about parent, uh, targeting the Children? It's critical, and that works similarly little. It's trying. Let's say how our parent is gonna turn it right. It's corporate is okay. I get container and this is the parent and it wants to target its Children. Okay, And let's say back on Carlo, let's say, has six. Ever since six, said Fres, nothing happened. Actually, let's let's do role. Because Parent, these row parent is the men contender we talked before. But now let's say we want to target the Children off the road with these two dips, so it looks pretty good. So let's start it. Rows and rows Children without obviously to deeps. And we won't attends the college to F six F six of six Little great God and fresh. And as you can see, the men, the parent is a student green. However, the kids, the Children they call it, is back. Yeah, it works. You, I guess we learned how to do that, too. Target the Children. That's pretty cool. But what about targeting the specific Children? Let's say let's all this bottoms have the same class, right? Target. But what? What if I want to target the little first? Second, little third tired of thes target. Because how do you do that? Let's see. First thing we need is obviously start up with this. And then So we want it. Target class, right? All the classes, targets all of them. But I want to take the turbulent. How do we do that? Using the these is you do it inside here. You do that by the color and side. That's how we do. It s o deaths I get inside and in the bracket, you specify who is number. So I want to talk about the number third. So I do that. I used to target the end side. The 3rd 1 Thank you. And then let's a little class off and mended sake. See what? It at first? Yeah. Okay, good. So this is the the important thing here first. As you can see, this is sick. This is how you can target this specific 52. 51 Target odd or even numbers in jquery and more: Let's try styling the even and odd secrets are. So let's say we have all these bottles. Let's say every even draw or every every art button will have different CSS lets. So how do you do that next? Let's try it out here. It's going out. All these. Let's remote. Yeah. So it started this. And what do you want to talkto under target? Everything with the Class Nemo Casanova Target yet go. And then it's a Let's take hard once again if you weren't even You don't symbolise that. Okay? And then class, it's the, uh I demented sleep. See what I Chris, how cool is that? Well, I like that. So that's how we can do target the ornaments or even number. So obviously you need have the properly structured pissed all the items would say the same class and then in that casing and use all these cool things. It can be used with tables. You know, it's we might not want to use this effect in terrible, but you know what I'm saying? Now you understand how you can use bakery and you can go ahead and do a lot of cool stuff because you can do a lot with Jake. Really? This is the starting point that this is the beginning off something amazing. So you'll start a car as a web developer. You too. Logical. So you'll create beautiful places and you will go on and start a further JavaScript for the J query. Uh, and you might learn some bag and suicide languages as well. So this is a very good starting point. And you have You can build your own portfolio with whatever you have learned. You can work as a front end developer. You have really good skills by now with a stimulus e Asus in bootstrap and build day query , which you can obviously expand. So yeah, it's time, Teoh. Say goodbye. But let's say goodbye in a bang again. So the last cool animation I want to show you at the end of this Siri's actually no, not discernibly. And I'll create on under six and hopefully and there I will show you how we can push you project to the life server, which is very easy. However, when you're just starting out, you get quite confused how we ended out all that stuff. That's hard. Me so also that, But yeah, it's time to say goodbye. But let's let's do on cool animation to say good back. All right, go small to stir read Goodbye Got rid 100 Goodbye. Uh, not quite yet. I can't do enough because it's just I just can't give up. Bootstrap. Take. You know this really cool stuff. Just keep want to keep doing it. Let's add a enemies tradition. Let's give the class name off goodbye, and I really hope that you will create some amazing stuff. And don't forget to say that with all of this, you can visit color dot com have, ah, Facebook place as well. Colorado Web. If he starts colored, you'll find out. So that's let's let's hang out, Corby. Saving on here Its target these goodbye. And this time I want to do is earthy, close and this time it will be animated change. Don't Okay, thank you very much. And I think I will see you in the next next video about how a monopoly radio for they took life. So that's a first. Really. That's not a ready. So fries perfect. Goodbye. Supposed to be dollar. I could Deb reverse do that? I'm gone his. That's a cool take right first. It's good. Okay, you guys, thank you very much and I'll I'll see thinking. 53. 52 Html head section: Hello. How are you doing? I'm back again. And this time I'm going to show you how you can prepare your with website that he just developed how we can prevent it to boost it to the life server. There are a couple of things we need to fix people. We go live. So let me open up the folder. Okay, So the first thing we need to fix is we need to make outside hesed Amos Semantic. Follow all the best email standard again. At the moment, there are a couple of things we need to fix and I want to take it to that is where you will get all this information. And it is always a good practice to stay up to date with the industry standard. Let me shows for heads, animal semantics, his damn out. Semantic. And as you can see, the overview, let's open air up here. Okay. So what is his Dimel? Semantic. His stimulus semantic clearly described its meaning to both the broader and developer, I guess. Let's have a look. So this is the typical layout. This is how it our base should be structured. First we have a header. Then we have a footer at the end and in between we have the main content. So in the main content we have navigation. So we have all these things already in place. But we need to. So we need to wrap our men content with article if it is a non article with the title and description and so on and on the aside. Six. And it doesn't always have to be in the side by you can be in the main sex in Israel. The first thing Let's start working from the headsets and what can be improving the head six and has the in my head six. So in the head, sex and all these elements will go. We have the title which will obviously come here on top, and then we have styles were already using the styles and meta. This is one of the important stuff without explained and then we have script with report before the end of the body tag and so on. So let's let's look at these examples as you can see, the starting in writing in the same base and this is how you connected, which we already did, and this is one of the important thing Metta character set you d if this is the standard Metadata is used by browses how to display content by surgeons and keywords in other words services. So this is one of the key things. So we have to make sure it is there in the head sex and and the description Where is the what is outpaces about when we when certain comes looking for the content, they need to get informed about our weapons. So all this valuable information will put in the head sittin. So if it is about travel, will say this is about travel. Do Norway nipple of whatever is the content relevant? Whatever keywords are relevant, you put in here the sort of description and it has to be, I think, 156 160 keywords met top made a description lens. It has to be 160 characters. Okay, More than that, the Google will not show you And what is meta meta description? It is this When it starts, you say Is this content? This is the meta description. So whatever it is written in on in your base in the head sex and as a meta description that will appear on the search engine search that Reagan. So that's really important. Yeah, so that is meta description and cured, which is not really important. This is, however, this is old practice and you can you can continue doing it. There's no harm. They say It doesn't really affect the starts Indian appearance, but it doesn't hurt, so why not? So what do you do with keywords? You just put the relevant keywords. What does your article is about? If it is about his team and see insists xml JavaScript, then you'll right then here in the keywords in the content six and and then make sure these words are repeated many times in the article. So Google off any surgeon when they come, they know that it is. It is a genuine basis, you know, just stuffing keywords on the head setting. But your actual content doesn't contain any any of them, any of those keywords, so make sure you use the relevant content again. You can also use metal name water, which is really good for issue. So it was so any sorts riddle that it is written by this author again, this is the refresh space Contin every 32nd which isn't really important. So let's use some of these meta content is a really important so in our head six and it's put them in tow. Top Willard have the title, I guess, the character said. Utf eight. It's it's would be down here. So what is the description we can say? This is about actual. It's open about pays. We said This is about travel right, traveling to Norway, and you can always write the use the first few lines as your content as your description. This isn't This doesn't make sense at the moment, we're only have the actual weapons. Obviously, you'll have the proper content. So the first few lines you should put you can't even write yourself. But it's always good practice because it looks like you're actually doing the, you know, trying to, you know, trying to fake the content. And it's relevant. It always helps to description. Yet that is the description of our face off course you will be writing. This is just the dummy data, just another erect. This is about traveling to Norway. We have great deals. Blah, blah, just few worst off 260. All right, it doesn't have to be 160. Put up 260 you can do, I'm guessing with the cures. Let's right. That's right. It's about no way. It's about travel. It's about nipple. It's about traveling to No way so on. That's how you do the keywords and make sure these cures are repeated in article as well. So it makes perfect sense and watching name. And so that looks very good. We can also define the language which language is used by outpaced. Thank you. So there's quite a lot of good information for search engines. So when they come looking for our website, they will. They will be happy to see the properly written pace with the head section, and we will work further to make our body often for search engine optimization. Let's have a look quickly on this one, so this is our pace. Let's refer S and let's look at the source school again. Basis now again. Now we have, ah, his demo with language specified as English, and then we have had sex and we have the character, said said to you, D if it This is the standard that has to be followed by always bases again. And we have the title. What is the title title is learning books, sir. Do we intend that? That says that covering too. You know it first. That's good. And you will see here really few difference and you can see it's on top. And then we have the cure. Some of the key words that describes our content. We have the main content. Obviously, you would put this replace this with real content. And we have the author name. We have the links, and yet and we have the navigation. We'll come back to the body six and all right. So yeah, we learn how to how derived bobbleheads demon and fix all the issues with headsets and to make it Brooks is ready. All right. I would see in the next Listen. Thank you 54. 53 Html body section with main articles aside and more: so we fix our headsets and properly. Now let's work with the body. Six. So inside body six. And you want the same structure as I showed you here. Like you first navigation. And then you'll have article. You can have multiple articles. All right, And then you'll have a six and and then you have a side and then food related. So let's let's implement that. Okay, so we have the hair. Second, I have collapsed it. That's that's there. And then these carry. So we can't do much with Carousel. Just make sure you have ah, on the images have the alltech. That's important, but the rest is fun. This is more of a visual thing. That's fine. And then this is the content is the first country right? This is the heading and these the paragraph. So what we do is we can wrap this inside. Are you gonna tag inside rope? Let's create article and article. This is quite sort, but in real happy or have more. Obviously. So this is the first article. Let's say this Dave closes here. So after this deep, this is our first article. Okay? This one can be another article Okay, so this Dave can being allowed. So we have two articles so far. Again? What? What do we have? Your table table might have some continents of description. In this case, we don't have much content, but it can be all right. Thank you. Yeah. And this is another article. We could we could probably have even the table and the supporting text. So all this can be inside article as long as it is related. These are the spaniels again. I think it's a good place to use six. And so we use this. Here's this deep inside these six. And but one more thing you can do is if it is related to the article you can wrap. The you can put include the sex and inside the article as well. So let's say this article is somehow related to this sex and you can for the sex and inside the article. And instead of ending the article here, let's remove that and let's would it after the sex. So our long article contains this sex and as well. So that is perfectly fine. I guess So. We come to this model which isn't really This is more of a visual thing. So let's leave it as it is and we have the foot again for so always remember, the class name doesn't really matter. This is just where the the style. So this is what matters. So we have the fortune that's good. And we have these scripts and everything, never definition about main. Take, as you can see, meant they can contain individual elements with hedge. One paragraph and then it can have multiple articles. You are to top articles as our main content. Teoh Rto first are to go second article. Then we closed, um Index. So we have the main six and which features two article and then we have This is probably a good idea to convert it to Article Israel are in our tea. I see article it's making already because it is always good practice to include sex and inside our deal so that they're somehow related. It's gonna be this one. This it's include the six and inside the article, so I said, can always be they're individually that's fine. So that's how we can use the proper history metal elements in your face. In this space, we have a lot off example content. So it's It might get bit confusing to you, but just just make clear that header navigation Did we do her? Yeah, So you can use Header inside all the articles as well. For example, if you want to put this his one inside Harry again, do their copy had a and then he can put the hatred here. So this is the man First article. We have the header and then we have the content. Obviously, you will have more than this in in real life and content can have, you know, has to insurance dough. That's been so you're going to use this hair today as well, to define more explicitly What is the So we used a lot off these personal attacks. So many thing is don't get confused with all these things. So head Sex and others have couple of meta content, metal character said, and then name, description and keywords. And Arthur Description is brilliant Border and the title. And then we have the links and all that man, and we put a couple of articles sort of eighties that is main content and intact. The article T constructor article very nicely with problem header and proper content with hedge. One has to honor the least and all that stuff. You can include more than one article in you in your main six. And and these articles can have six and as well articles we did before you. We have article and we have sex ends and then with and the article. And then we can have a side which might not directly related to the main content, however, is still there, so we can have the a sidebar. We have more article, and so So I'm sure you got a good overview off his demon semantics. And yet, as you will work on your own project with the actual content, it will make much more sense. All right, so we ready to who's our application to the life server, which is very exciting. So the next thing I'm going to do is I'm going to upload this project to the live server. Okay, So I would meet in the next lesson. Thank you. 55. 54 Push your project to the live server: Okay, so now we're going to push our project to the life server. It is awesome. Axa, let's get started. First thing, indeed is the domain name and the hosting plant. Okay, so you concerts for host ings like hosting and domain. If you don't know, have so some of them They offer even wonder hosting for first year. But the price will go higher in the next year. The one I'm using is and when I recommend, is that the prices there cheap and they're very good they're hosting is pretty fast than some of the other economic plants to And they're good support system any time you can check with their staffs and get things done. So I recommend this one, but it's totally up to you. So if you decide to go, let's an anti You're going to simply sign up and then you get the do man. You saw some of your favorite domain. Then you can buy the dominance and its energy by the German. You can buy the hosting. I want to get the domain and hosting you'll get access to your C panel. So all this information I want to get the domain and hosting you will get all this information email to you. Oh, are you can always said with these then with the the life person. So let's say I have already bought one domain, which is you fired dot io. Yeah, and I just have this heading I was displaying on the ISS yesterday. So this is my domain name. So if you want to go and access its backend, the C panel we call it you can simply w which their names. Let's see panel, and you'll get all these log in details once you get the dominant hosting and you can simply log in and with the name TV, you can host up to three websites with single hosting plant. So that's that's a pretty good reason to choose name T patch. Well, I don't have all the two website and this is the one. This is a turban I'm hosting with one single hosting plan. Okay, so once you go to the c panel, always go to the file management. This would look pretty much same with other hosting Israel. Go to the file. Man isn't And I have a lot of all the documents here always good to public that Hey, steamer. And here have lower files. The one well, you'd find you, you would go inside. Public protest, underscore testing. But since have many projects already going there. There's another for this outside. So it's clicking that and it can be inside public. That has the military. They're starting out again. So either way, I want to get into the you filed man isn't Get inside that you will get to this place. Okay, and go inside and you will see nothing that this is the one I created yesterday. Displaying are so limited it it actually we construct from first come from and this is just the default. Four relates nothing. The Egan diligent if you want. Let's get rid of it. So it's clean. We have nothing inside again. So we're going to do is we're going to upload our product. Bootstrap. This is the one we've been working. Let's compress this one. Yeah, so I have accomplished file. Now all I have to do is good to the up floor. Six two is the gyp file, and it's happening here. Okay, that's done. Now let's go back to it. And as you can see it's there. Now let's extract this extract closed. Scared Word of this confirm and we don't need this size. Also lets still in this too good. This men folder. Let's go back. Let's go back. We shouldn't have this. We should have all this country there. So what we gonna do is click here and sift personal cfpb ardently here. So all you have selected rightly and cup Move! Let's do this will move and we can move there. Men directory We could have. We could have just make deep off the entire thing. But we did the fight Anyway, Let's get rid of this from so as you can t want to get to you. File Manager, you will have your full name and our public has Daniel And you. You will operate all this content and make sure you have indexed redheads. Dima again this is the one will be rendered So you should be able to see our base alive. Let's you find that I Yeah, it is to showing the old one now It is what we wanted to see. Awesome, right? As you can see, we went life now anyone from anywhere in the world can access our place. That's great, isn't it? That's beautiful. All right. Okay, we're missing the background. Name is we can fix that and I will show you how you can fix the contact form as well. Currently, it looks great, but it doesn't actually work, so and it's it's pretty difficult to send emails using just the heads. Daemul CS is because it requires some kind of service side technology, for example, PSP or some other back in language. However, there's a street little trick without so you and your love. It's Regan. Just with a static sites like this, you can send emails and I'll show you that one in the next few years with So the rest of the country looks really good except that emit. Let's let's try to fix that. In fact, let's do that in the next video. It's been quite long are so I would see in the next video and we'll fix a couple of things . Thank you 56. 55 Fixing image links on live site: Oh, it's opposite is alive, which is absolutely amazing. Let's fix the Baghran images that isn't actually showing up here. So let's go back to our folder. And as you can see, we can click on the file. You can go into the forest as well. In this case, we're gonna go inside. This were open this folder so you can choose one of the absence. CIA. You can use the court editor and let's go back to. Actually, we might need to modify the CSS of CSS because we didn't use these for emits. So let's go to see Assis, Let's abominably style said Okay, so this is the one we used for our local development. Now we can get rid of it. We can just say him. It is said changes. Let's see if it works. Probably. We need to say it course less. Save it. I didn't open it in a new browser. You die right? And as you can see, what it means is back. Awesome. It's quick. All right, So the next thing I want to show you is how we can implement the email feature which is can be useful to create the contact forms, you know, And that is one of the fundamental thing. You know, You want that feature and almost all the way, baby. So let's see how we can do that. It's not straightforward. Just a stable ceases birthdays away. And I'll show you that beautiful little trick in the next lesson. Thank you. 57. 56 Adding email feature to our static page: Okay, So let me show you how you can do that at the email functionality to your site. For that, what we need to do a divinity go to this is from Spree. Did I and then only had to do is copy this, which is basically nothing and just all we have to do it. We need to specify the form accent. Do the this website slash s our email dot com Think it. This is perfect for aesthetic side. This is a really great fit. Otherwise you would be helpless. You can't really do this without having a service side language. So said functionality back in functionality. But this is great. And this is free up to the 1000 substance poor email every month. So obviously that should be more than enough for you, I guess. Let's And it's I think it's a pretty secure as well. So that's another good thing to use this. So let's let's try list for a strategist tradition and were further customize it again. So let's copy this and let's go toe hes okay, Index slits opening editor. And then let's put it at the right at the end of the bed just for testing just before the food at its best, isn't and let's send this to right. And now let's try. If it works, let me open it up in the window. I guess if there's our side, let's have a look at the form. I guess it there we have it. And what are these fears for? Let's have a look. He seemed to discover best with You even read months. Let's real bit. Okay, so this for the input name and this for the email again name. And even we can write this as a placeholder will customize it further leads again. So this is from name and email. Let's try that her name. Ryan Daniel email. Let's say God didn't send again the very first time it will ask you to confirm your email. We have settling to your email to prevent spend. You will have to confirm a mill before things start working. Runner colored dot com This is the one I used. This is the email I used in my code here, in the phone, in the phone. Yeah, so let's live in. Take this email quickly and I've got this from from them Thanks for using form spree. You want civil waken from form? Okay, let's confirm it. E mail. Confirm. That's great. All right, so it looks like we're ready to use this house. Let's go ahead one more time, Fres. Yeah, and let's see. Right, That's stress. Sending it again. Almost there. Please help us fight. Spend by again No worries again from submitted successfully. Wow! Region to the origin inside. That's great. Okay, so I just got a meal. Think let me open this year Take your Gmail. And here I have a good email. New submissions from before I Hey, there's someone just submitted you of form one you buy is what they had to say. And then there's the name in this reply to awesome so we can add more fields and customize it further. Let's do that in the next Listen, thank you very much. 58. 57 Adding message field to our emails: Soto to add that function in the order form. First we need we have from here and we are that this Scorpy that line here from action will be to this email and method will be post post method And then we have the label name for name takes to name input. I've name It's you to name off name and then it's we're in a bad place holder saying type name, It's you email Is he was name off E mail? Absolutely. They mate and you are too. And then we have a password. We don't really want this. We don't want these tick boxes were just testing it out. Let's get that and then submit sent. All right, save this one. And what I'm gonna do is I want to score be this form from here and let's get rid of this. We don't want this. Let's go to our phone. Here is our phone and let's remove the entire thing. And best the one with the scope from there. Save it. So save here. And then let's try one more time. Alright, Beautiful contact form email. We can put the placeholder for email as well. Actually, it's Still, if you live like this, then it appears as the subject of the email. So what we want is we want Mrs All right, save it, then. It's at the plate. All right. We should be getting email any time soon. Our looks like we've got one here. New submission, and you can see Yeah, how Your side is cool. Great. So you get the message is really awesome. So this is how you can implement email Fisher to study quips that which is incredible. 59. 58 Coclusion: Okay, thank you very much for being part of this course. So you must have learned how to build websites from scratch from nothing. You write a very first a steam. Of course you're out some fiercest. You know how to use margin sparing. You know how to use bootstrap. And you know how to make all these beautiful feet at all these beautiful features to your side. Images caress old heading operable for mating to his single standard for good issue. Using all these cool boots that effects working with images. Icahn's working with the Google forms Bagger image with such effect fixed effect contact fronts. Which is great because you can do it easily with static files. I study sites. But we did that, too. And we used learn how to use the Grady and as well we have the tables. We covered almost everything in need. In real life, there is always more to learn. And that's the beauty of what development. You never stop learning. But that doesn't mean that you never You're always learning any. You're always doing incredible things. Incredible new things. And this is how you can write the articles used the block courts. We cover almost everything you would use in real life. We have the beautiful Baden she can customize with the default bootstraps. But just pretending Niclas name Can you learn how to use the mortals? And he can customize it further to you need to have foot. So not just this one. We also dived into take query before learning any type of script. Going to Zika is kind of doesn't get that easy, but we did that easily because we use some of the basics we learned in CSS and it's pretty much same. Same will you do with a query off course, if you want to be more powerful in using decorated than you would obviously go long. JavaScript. But you saw the potential and you can get started with bakery as well. So it has been, I think, really great starting for you. You can you are. Now you can call itself a Web developer. You know how to develop works. That's the fully functioning the working where sets the life server. And from here you can always go ahead and do more great things. Long, great features. Learn some other programming languages, maybe learn javascript you can do bagging with javascript as well with gorgeous and all that. So, yeah, just get comfortable with this, and then you have a bright future ahead of you. OK, so all the best in any problems, you always feel free. Dio posted problems in the in the Q and a six, and or you can even contact me. You know, there's no problem. I'm always happy to help you guys, so thank you very much for being part of this course. And hopefully I will make more useful courses for you guys. Leave your feedback. Leavis is I hope I'll get good fit bag. So yeah, thank you very much. And, um, yeah, it's been a great journey. Will teaching you. Thank you.