I'm going to post this in the chair. Where? Code car. No you might have to log in, you might have to make an account. Yeah I think you'll have to make an account or use get hub. Just see if actually it works okay. It looks like it's working for the most part right now. Um Just let me know if there's any any problems with it but this should the how we're able for you guys to follow along. You can put that just browser tab um unauthorized. It should just ask you to sign in to code casts. Unauthorized cast. Mhm. Oh boy. Um I'll just make it public. Try try it now. I changed it to public so working out okay cool. Yeah that was it was private I guess I would have had to like add you guys in here somehow individually which doesn't really make sense. Um So okay hopefully that is good. I'm going to start recording so I'm going to make a new file right off the bat and it's gonna be called a new folder called CSS um Xbox. Actually I guess I'll just keep it with the underscore to, it's the other ones. CSS for Xbox. Mr recording. Okay so um flex box is something that we use for layout so um the arrangement of the visual elements on the page obviously. Um So you can see this is looks like a very early kind of website. Um but you can see that they have um kind of like a sidebar going on here. Um They have some line breaks and you know it's organized um does not the greatest looking page but still has some leo elements to it. Um Here you can see this is just a cluster um very very all over the place. Um You can see like certain images are like going over content and stuff like that, that's usually what you're going to try and avoid um because this just looks messy, right? I would I would almost take this page over that one to be honest. Um But then you start seeing our more modern clean layout pages similar to this. Um So how about how do we like actually organized like this? Right? Like here's another one. Um That's like the news, it looks like uh if you ever look at like on your iphone and stuff like your news usually kind of looks like this one. Um And then here is like a nice nice clean web page, right? It's just like a two tone, you know, nice big icon and then there are the name of their company is nice and big. You know they have their dock little dock button there to uh probably like view code or something and then we have read it right here, you know, so all this stuff here had to be arranged, right? So they have like their knave bar. Then they have like each post and then each post will have different elements. So like this would be the content and then obviously the image image for the post. Um co cast is not live. Well I haven't done anything in code cast yet so um that's probably why. Unless can you guys see the flex box? Oh it's not. Mhm. Hold on here. Wonder why it's not showing. Um Let me just check. Sorry guys. Yeah why is it not showing? Um Well what if I make um file in here? Flutes? Um leo she no there we go. Okay so it doesn't uh doesn't update when I just make a new folder because like there's nothing in the folder but um now we can see that it's updated with the float layout. So I am live and it is working thankfully. Okay. Um Okay so okay that's good. So this is like okay this is what we call a wireframe so you'll kind of see this in the boot camp. Um This is like the wire frame, this is like the um layout that they want a page to have. So you can see here this would be like the main image for the post. This would be the content, this would be like the person's avatar right? Like their profile picture and then obviously the tweet author right? So this is like for twitter right? And um so and then they have like their knave bar at the top little search bar and then they have a side bar here where they can like find different people to follow and stuff. So this is a wire frame and this is how um you're gonna know how to style a page right? So um like often on small teams you're a developer designer and more meaning that you're going to have to go look at that wire frame and try and emulate um and get it to look the way uh that the like the client or the um company that you're working for wants it. Right? So that's why like wire frames are um important because like a lot of times people will have something that they're looking for, they're like hey I want my website to look like this or I want this specific page to look like this and then you have to try and get it as close to that as possible, right? So um every element on the page of a rectangular box. Um This is uh this is some J. Query um stuff. Um We're gonna be uh we're gonna be getting into this um Actually this isn't J. Query but we will be getting into this like um some J. Query I think is the next class before before the christmas break. So right here this is just a select all so we can like select everything and give it a border. Um So it's just write a CSS selector right? We just put the selector before the curly braces and then we have the property and then we give it the values right? And you can see if we use that on this page? Um This um gives a border to every single element. Right? Um So that that's pretty cool. Um Obviously you usually wouldn't do that, you wouldn't want to do every single element, but just to see that it can be done is pretty cool. Um So you think of pages as boxes, within boxes and you guys might have seen this before when we go to inspect and we go all the way down and when we're on a certain element this will show different values within uh the margin border padding and then the actual element. Right? So that's what this is right here and I think I said that this inspecting is like really helpful. You guys can like do a lot of like studying and stuff. You got the console here to test javascript, you've got all the elements here to look at different elements and like see the syntax of different elements and then uh and then you go all the styling down in here for CSS so it's it's really nice. Um So we've already kind of gone over like display properties and stuff like that, so this is kind of like review. Um but as you can see there's one that's called flex here and in line flex and that's what we're gonna be focusing on today and we remember what this does, so we can like completely take away everything on our web page if we want um display block. Right? So certain elements are block elements by default and certain elements are in line by default. Um Can anybody give me an example of a block element? Yeah, So Dave would be one. What about in line? Yeah, so span would be another one as well. So certain ones default to certain things but remember we can use like in line block um right there there's a lot uh that we can use here in line block. Um there's there's tons whatever you need your element to do, you can pretty much um customize it to get it to do that. Right? So we have this little um this for you guys, I'll paste it in the chat. This is a nice little tool to help you um see has a bunch of different tags and it's all about um block level elements obviously. So once again M D N. A great resource. Um use it as much as you can in line. Right. Same thing. Um Taste that for you guys as well and we've kind of seen that before already. In line block. We've seen examples of that before as well. Um so input button, text area and select default to in line block. So there are certain ones that do you take an in line block uh value, like property or attribute as um their default. So it isn't just like block or in line that elements always default to um sometimes will be in line block as well and we've seen some float um, stuff as well. So, um, uh for the people that just joined, I'm going to um post this link again. So um for anyone that just joined recently, I'm going to post that podcast link again. So this is what I'm using um instead of live share today so that you guys can follow along and copy and paste if, if need, if need be. Okay. So, um, hopefully it works properly for the whole time, but we're gonna make some, make some code here. This is going to be slight review so we can do a header, that's the header tag, we're in the body right now and we can make a div um class equals. And then I'm just going to copy this down a couple of times. We can go like this anna Yes. Okay. And like this sidebar and then we'll make a, your tag. Okay. Oh, we got that going, I'm just going to go live on this page so we can take a look at it. So, so far we have header, banner content, sidebar and footer, but it's not really behaving the way that we want. Um, so we're gonna go into the head tech and open up the style. Okay. And we're going to start remember writing some CSS here. Oh yes. Oh, this isn't too good because now what we've done is like the whole body um, is white. So it's actually, you can see our content is still there, but it's white. Right? So, but we're going to change it. Other footer background color, brown position. Thank you. That's pretty important with, We'll say 100 ow. And I ate, we'll say eight Vh oops remember, can't forget those semicolons there. Oh, we got a header in our footer now. But um, we can see our other content is missing, right? Because what fixed is doing is it's fixing it to the page, but they're only taking the amount of the page is only taking the amount that these actually need. And since we've given them this height and with the pages only, um displaying the height and the width of this and we can see that um, our other stuff is gone, which we don't want now we're starting two, get a little closer to what we want and now we know that the foot is always going to stay on the bottom and the header is always going to stay on the top. That's what we've done right here and we can go def the ground color or no till and, and we're going to go with 95 ft of you. I mm five V h See we're getting a little something here, If it's a margin, we'll say zero auto and margin talk eight aah oh we got something, it's looking a little bit better, but we have to keep going, remember that's only one div right? We have banner content and sidebar so remember we're using dot and then the class name, that's how we're selecting here. So we're going to float this one. Some with 62. Meet five VW Hi six V. H. And what what is this meaning VW and Vh what are those doing? View the view port. So meaning the whole view ports and then the value that we're giving it is percentage based. Okay so this is the protect the percentage of the view portrait with and this is a percentage of the view ports, height. Okay, margin us i in so okay sweet. Now let's go sidebar. We'll float that. Right. You guys can already see what we're about to do here. Bye Love servers. Nice with 30 W I 60 V. H. And margin hop five VW and margin. Right. 2.5 VW. You can see here we've done a nice basic layout. Um This is kind of like something you would see on a regular website. You know, you'd have like a banner up here. Maybe this would be like an advertisement. Then you'd have like the actual content of your page, a sidebar. Usually this would be like flipped sidebar would probably be here for you to like scroll through and find other content on the website. They usually have a footer that like um you know, has a bunch of different links of like their partners or whatever and then the header is usually a knave bar for you to navigate through the website. Um so that's a nice basic little layout that we just did there and we didn't have to do too much CSS to get that, but you can see how, when we're um really being specific here and using good values that we can adjust a web page um like perfectly like this and get everything nice and organized. So that was one um one little demo there, let's uh we can get rid of that now and dispose of that poor and we'll make a new hopes, not there, make a new one and we'll call this one fax camels, it's normal and once again we're going to bank tab, flex demo and now we're going to get into how did uh do kind of the similar thing but with flex so float like I said before um isn't used as much anymore because flex is here now, so with flex it makes everything a little bit easier. These things will just like flexes just like built in now, so um I'm going to uh div memory of class equals and I'm going to need quite a few of these. Okay, Yeah, so I think we have nine altogether and this one is going to be painter. Oh we're going to open these up actually and then this one is going to be um extraction pro reverse and we need another one, so I'm just gonna take this mhm paste here. And just to call them here. And just to poem reverse here. This one is gonna be different now so this is going to be a P tag justify. Okay okay and then this one is going to be oops happy and this one is going to be space queen. Don't worry we're going to go through all of these go here hopes don't need that. I'm just going to be space around here. This can be space evenly. Then we have one last one we're gonna call this flex item property order. So we've got those we need to do all of our classes now for this so that we can start actually using them. So um we did container row here. So our next one is going to be container ro reverse and after that can be container home. Yeah um you know all um verse here, we'll call this container A C. And there pana. You see it's between and uh round hoops down and cleaner, juicy space evenly. And then this one it's just going to be a container is order works a little bit differently. Um Now we have to make some gifts. So we're going to have flex items. So what I'm gonna make a div and it's going to be class equals right it's not capital flex item and I'm gonna go like this flex item um one we're just going to copy this down. This will be too This will be three and we can pretty much just copy and paste this. This is all we need for all all of our flex items. So we're going to go into here and paste that in into each container. One is going to be a little bit, the end one is going to be a little bit different. Um So we're just going to make that adjustment right here. This this won't make sense right now obviously because we can't see anything but um we'll see after once we actually do the styling why why the order is different. Okay so we have Whole, but Oh did I forget one looks like you forgot. Okay you go so we got all that. It was quite a lot of tags and we're gonna style this out now I guess I should go through these a little bit. So we just did that and it was an easy way to use float. But it took a lot of effort to manage the white space between the elements. So now we're gonna think inside the flex box um Y flex box. Now this is how we're going to use flex or flex box. Um We have to change the display to flex. So the element whose display is set to flex is named flex container and it's Children are named flex items. So the CSS properties are split between the container and its items. Um So we have these are some flex container properties, flex direction, flex wrap justify content and align items. There's a bunch of properties that we can use in effect and then items will have their own um properties so we can use order flex grow flex, shrink, flex basis aligned self etcetera. That's why in this um last example down here. That's why we didn't need to make this a certain this will be a flex box but we didn't have we're not going to have to give the container a certain are certain property value. We're actually going to give it to the actual flex items. Right? That's why that's why order order is for flex items. So we can actually change the order of the items through the actual item and not using the container. So we're going to see once we build this out more this will be something little different. Right let's just finish this off. So we're going to go dot oops I need to be on the page. There we go. A flex item, background color and we're gonna go that's all. Order two pixels and it's a solid line and we'll um give it some color this time we'll give it some padding high pixel. So what happens if I just do this? I just give padding one value. What what happens when I do that? How does it add the padding exactly. So if we just give one value it's going to affect all sides. Okay And then there's the different syntax if we give it to values then um one will be for like top and bottom and one will be for left and right. And then if we do all four um we can do it in one line and affect each side differently if we give it four values. So um those just things you wanna kind of remember along the way um we're going to go live on this page now and as you can see we've got some um things popping up now. Uh we already got some color and stuff on our flex items. So that's good. And we're gonna do our p tags here on size will go 24 pixels and we'll give it some margin bottom zero pixels. Now our container, we're going to give a border to two pixels. Solid wow. No. Can you guys see that the main container is holding our items right? We can see the black border but then each of our flex items has that blue violet border around them. So this is a really good visualization of what is actually happening on the page when we're using all of these when we're using flex box. And um it's good just to see the elements separately like this because we have a div holding three dives right? So this is the parent div the container and then we have these three thieves inside of it, these three right here. And these are the flex items. So this is the flex container. Right? And the flex items. So we're doing this to really put emphasis on mm hmm. What is actually like happening there. So, one thing we need to do though, play flex so you can see everything's changed now. Mhm. And the reason for that is because now we've made all of these containers here. Every single container, right? Remember it's got the container class. So every container is now abiding by display flex and the flex display right off the bat has its own excuse me, default um, default properties. So you could see before they were one underneath the other now they're side by side in line. Right? So they've changed, right? Obviously. Um these ones aren't right yet because we haven't actually changed the proper ones here. But you can see that when we set it to flex, it's pretty much defaulting to row. Okay, so flex direction row. Well, this looks like a row of items. Right? So that's pretty much what it's defaulting to. Right. Another thing here, trauma. Mhm. So, this is just explaining that what we're seeing here. The default is the the row. So the Y axis. All right. So why access are, sorry X axis is from left to right and why axis is top to bottom. Right. Um, so he falters row hopes was supposed to be up in here. All Children will line up along the main axis. So whatever the flex direction property is, the Children will line up along that main axis. That has been set. That's why the default axis is why? So the default is roe, I mean X. Sorry, I keep saying that. I don't know why the default is X. And the, so the default is row. That's why we can see them all lining up um left to right and the main access, main axis is X. So that's why they're all lined up like this. But then we can obviously change that, but so we've just done what we need to do there now we're going to start getting onto these containers. So up container r ro, you can see dot container dot ro. Well, what do we have here? Class is a container Space Row. So two classes here. Right. So when we're selecting here, we're being specific and saying it's the dot container that has the dot ro as well. Right? So it has to have both of those classes and what we're going to do extraction bro. And you can see nothing's changed because the default is roe. So now Montana. Oh, roll reverse and we can see now that row reverse, they're still in a row, but you can see they're completely reversed. Okay, so where it goes, 1, 2, 3 from the left. Now it's going 123 from the right, right, So completely reverses are elements. Okay? Yes. And now we can see column, remember in the very beginning, that's how they were looking. It was defaulting. The elements were like defaulting to a column type view, right? So um but now we can get them back to that view by using this flex direction property and container dot uh call reverse and call them reverse. And once again you can see call him, it goes 123 and then call them reverse. We're going 123 from the bottom now, right? And this might not seem uh like super important or anything but it's actually pretty helpful sometimes sometimes there's a list that you want to display but your list um might be like kind of time sensitive, let's say. So you want the last post to be um at the top. Right? So the one that's been recently posted, you want at the top? Well what is the last post here? It would be flex item three, right? This would be the one posted, 1st, 2nd and then third. But if we want to see the last post at the top of our list, right? Kind of like um like twitter right? It would be the last thing you posted. This would be kind of one way to do. It is if you align your your elements in reverse right, then it's going to show what was just posted at the top. Okay, so don't don't sleep on these. Like they're super. They are like simple in what they're doing, but they are actually helpful. So write a quick note here and we are going to justify content center so we can see the justified content is right where we want it. Um This is perfect. Right Okay this is allowing us to get perfectly centered elements and we didn't have to do any like CSS spacing with any margins or borders or anything like that. We literally just made the container a display flex and then we just use justify content. So um that that's really nice to be able to do that really easily. Um Actually I'll write the notes after we're gonna take a little bit of a break here in a second but I'll just um write these out so we can see what they're doing first and then I'll write the notes during break to save us some time. I hope that space between so you could say it's given them the most amount of space between each element. Uh huh. It's one. Mhm. And and you see space um around. Yeah and it's wrong and now you can see it's done them out with a nice um predetermined spacing around each one. Okay so it's since it's space around each item it's leaving a little bit of space here and a little bit of space here but still keeping them evenly from each other. Okay so this this is a nice one as well and our container the J. C. Space even the and then that is just slightly different. You can see that. Now each one is a complete even space between each other but from the edge of our flex container as well. Yeah. Um So what we're gonna do we're gonna take a 10 minute break right now Come back at 7:05 and I'm just gonna write some extra notes here for you guys to go over when you when you study. Okay. Okay guys. Um so we can see a bunch of different um properties and what not hear that um flex box has been able to do for us. Only one we haven't done is our flex item property. Um But not to confuse you guys too much because we've done all of our container stuff here right? Um but in order to use order um we need to affect just the flex items. Right? So um in order to do this I'm just gonna write um in line for these. So right after here we're just going to go style equals and then we're gonna go order Colin and we're going to go um three one two mm hmm. And as you can see it's arranged them the way we we want and that's why this kind of makes sense now. So this is the first item this is flex item one right? The first div second div Um and then 3rd. Dave. Oh my goodness. Um But now we've made um the first one become the third on the page. The 3rd is the second and the second is now the first and you've seen that this is how we did it with order. Now the reason this works is because these are still kill these elements our Children of a flex container. Okay. And that that's the important part that these are in a flex display, right? Because right here display flex for every container on the page. Right? So in every container it's a flex display and we've just been using the container to um to do things like justify content and the flex direction. But right here we were able to actually change the order of them by just doing it directly to the flex item and using the order property. So uh flex containers and flex items have different attributes or properties that we can give them. Right. So this is a cool little thing to like set things in a certain order. Although not as useful, like you could just like switch the dibs or whatever you wanted to do right? Um But it's just handy to know that it's there so that's pretty much all for this page, wrote a bunch of notes there for you guys and once again like a lot of this stuff is online to Go over and they can give different examples and stuff as well either on MDN or W three schools so um don't don't hesitate to check those out. So well Get rid of that one and we can dispose of that poor and um we need to do to flex layout now. So we're going to make a new one called flex leo. Html. No we have that. We're going to bank up Call this one flex layout and we're going to do so I'm not sure if we're going to do Actually we might do this one but in the body we're gonna go def and we're going to open that up. So B class equals container man another DEv B as equals cleaner child header in here on their DEV class equals will copy that down a logo item. Nav item was nav menu logo right now we will go we'll make a new dish as equals most container I o man all this the main box Now we're gonna just copy that down but we're not going to actually Is that and we're going to call this one flex row. Make a couple more dips in here us equals copy those down. Large item um item. Small item and it's going to be here lunchbox. All box. Yes. Well okay looking good so far. Take another. Div open that up, go inside here. Class equals container child X bro. And and I think we can just actually copy this straight into it. It looks the same right so that should be all of our body stuff but now we need to do some styling so we're going to go into the head tag style, open that up. We'll go body. Let's open this up first. We live on this page and we have that nothing special so far. But um, let's give it zero margin and then Montana display flex very important. If we want to use flex box, we need to have this. So don't forget that flex direction going to go call him and merchant buffed two ZW and margin right to VW. So we got our containers and we've kind of set those up. We can't really see anything too much yet because we haven't really affected the Children. Oh okay. Bucks justify content. We're not doing center, go space queen And we're gonna use the flex property of one. It looks kind of silly right now. But what has happened is it's kind of split these up. Right? So, um, we're looking here at the top, we want logo over here and then the nav menu all the way on the right. So it's actually kind of proper so far. It's just, these ones are not not where we want them yet, but that's all good flex row. We're going to give it a flex of three. Now you can see where slowly organizing them, make sure they have the display flex and margin left. We're gonna go zero and margin, right is gonna be zero. We're going to justify content this around. It needs to be on a new line. Yeah, that's looking good. Now we're going to go the item and domains And we're going to go flex three now you can really see um now you can really see what's actually happening here. So we've almost got it, you can you can see the layout now. Right? We've like pretty much got the lay Oh it's just going to make more sense when we actually put in background color. So um someone have a question. Oh it looked weird there for a second, right? Um because they were like overlapping with each other and we didn't have any margin between um the containers. Right? So now we have some margin so we're kind of splitting them up a little bit better. Um and remember we're just going through if we look here, remember we're just selecting things from here, container child or the main here header, right, logo right here, so we already know what we're doing, we're affecting Our logo one right up here. Okay. And we'll just go max width, um 15% Nav acts with well 40%. And so just with these couple of things right? We were giving them a max width so we know that It's only going to take 15% and then this one Is only going to take 40%. Right? And this this is refute like when we use percentages it's usually referring to the full view ports and you can even see like we scale it. Right, That's still 40%. Like the middle would be somewhere like right around here. 50%. Right? So it is scaling percentage wise of the view ports so that that's working and we can start affecting items bo 60 and then we'll goes um uh huh And border radius three pixels and we've essentially completed this. Although the font isn't exactly the same but um layout wise we've completed this we would just need to make the font size bigger but that's not really um We're not going to nit pick uh tonight we're just gonna look for these layouts so you can see border radius. So the border of the element when you use border radius you can see it's rounding the edges. So they used to be sharp like boxes and if we use border radius by a certain amount of pixels it will round these edges out for us. So you know you could do like four if you wanted to I don't think it's going to I don't think it can. Um Yeah like that that's even more wonder like 10. Yeah. So then even more so however you want to do it um Right, you know here they don't go too crazy with it. Yeah so the stars to select every element. So every element we've given a border radius to and since um only these have background color to them. Right? That's why we're seeing it on them, not on like something else like border radius isn't going to affect like a font, right? Border radius is for like the border of like a a box element like this, right? So um yeah, so if you if you want to do body background color, you could do that. Um But once again uh there can always be like certain behaviors that um might kind of change what you're looking to do, right? So but this is just to show you the actual way we can lay out web pages really nicely. I'm sure you guys this is like pretty basic, right? Um You know like a knave bar at the top? They have a logo of their company and then they'll have like home about uh and then like products here, whatever, right? But um this would be like kind of a basic thing and then they could like show all their content on their main page like this. Or if this was like a product page, it could have the main description and then it could have like, I don't know, attachments for whatever you're buying, like extras here and like bundles or whatever, right? So this this is like a nice easy way to lay things out. Um And you'll see like flex box makes it like lot easier because with flow we're doing like a lot of different, you see like we're doing a lot of different like CSS stuff here and positioning and giving tons of margin and stuff, but when we do this. Yes, we had to do um quite a bit, but we actually got like a more complicated layout um in doing this many lines of CSS. So um but as you can see like here, like when we're like separating them out and just giving them their width and stuff, it was super easy, right? Because they're already arranged the way we want to. So really here we were just like kind of um saying how big we want them. And this is doing all the heavy lifting for us right here. Right? So the space between and the space around and then the flex direction. Call them here. So, um that's what's doing the really heavy lifting of like organizing this page, styling is always CSS. So html is just the think of html is a skeleton. Okay, So this is the html, right? These are all our dev's right. And they have classes and whatnot. How we affect how we give flesh to these skeletons and make them look pretty right. With CSS is we use the class or an ide we use classes here and we selected those classes in our CSS. So all inside this style tag is all CSS right. You can see that like even if we can tell right away if I make a comment here, did the comment now, if I go down here and I make a comment in here. See the comment. That's how you know that you're writing in a different section. Okay? So whenever Yeah, exactly, that's how most of the time we've been writing it right? Um like just right here we did in line. Right? So this was in line CSS is the lower refresher for you guys? This was the in line CSS. So we're in the html section where we write our html and our dives right? And our elements here. And I used the style attribute and the order property and then that's the value I gave it. So this was in line CSS right here and then this is um the internal, so when we open up a style tag in the head, this is the internal way to write CSS. Okay, when we open up this style tag in the head now we can write all CSS here. Okay? Or we can make a dot CSS file and link it to our html file, which would be external CSS. Okay. So mostly it is done um with an external um style sheet. So you would just have like a dot styles dot CSS. Um If we even look in here, didn't we have Yeah, so normally you would have a styles dot CSS file and you would just link it to the pages that you need. Um But for the sake of making it easier for you guys to actually see what's happening to the elements on each page. That's why I'm writing it on the same page like this. So you can actually um see all the styling that we're giving to these elements. And it'll kind of make it easier for you to study, right? Because you can see all the styling here and then you can see all the elements here. But most normally you won't be um writing it like this, you'll be linking it with a different file usually. But this is this is for the sake of studying. Yeah. Um uh What line? Sorry were you talking about this file or this file? Okay. The layout file, Yeah. So this we can even like search it up real quick. So get Um get used to uh like searching this stuff up because I do this all the time, right? If I'm not like 100% sure on something, it's easy to just quickly search it up and and look at it right? Um I know it's to do with the spacing, but like let's just be I want to tell you guys the exact um things. So let all flexible items be the same length regardless of its content. Okay, so that's how we're matching. Uh huh. Certain boxes. So uh we can see in our flex rose that's how we're keeping all the content. Um The same, right? This one flex row here, that's how we're keeping all the sizing the same, right? And then same with um this bottom row here because these are flex rose, right? If we look here our flex row and then we look here flex row and then it's affecting these gifts. So it's three dives right? The large box and then the two small boxes. So these ones the flex is three, right? And it knows that it's going to keep them all the same, right? All the same along the road no matter how big the element is. So this element is bigger than these but it's lining them all up perfectly. Right? And then we actually we used it again. Uh huh. Yeah. So header, right? Our flex one and we can see that it's kept them the same. So they are lining up perfectly even though they're different widths, right? We only change their width though. Um Yeah see we only change their with so um here it's like not as big of a deal, but um if you were changing other things it's a way to get them to line up and stay the same size, right? So um the flex property is shorthand for these. So these were like used um if you're like trying to be even more specific. So flex growth flex shrink and uh flex basis I'm not as 100% sure what that one does but um like obviously grow and shrink they're gonna make one element a little bit bigger or one a little bit smaller. Right? And um you can see if the elements not a flexible item. The flex property has no effect. Right? So the flex property sets the flexible length on flexible items so we can use this to quickly like kind of size things evenly. Um And also like, it just helps with the layout as well. So because we'd be floating them all up and doing stuff like that. And like float as you guys seen before. Acts kind of weirdly where like once you float something, something will be like hiding underneath it. And you might not even know by looking at the page. The only way you would be able to tell is that if you actually like seen it in the code or if you like inspected and we're like, hey, there is actually supposed to be another div here or whatever, right? So that's why float is kind of um you don't want to use float. You want to use flex now. It's just a more clean and easy way to um do layouts. So um that's why yeah, that's why we're telling you because um you never know like if you get hired by a company and they have like a really old code base or whatever, then you never know if they're going to still be using float. They might um you know, like I showed you guys arrow functions and stuff, like they might not even be using arrow functions. Um they might just be using regular functions, you know what I mean? So um that's why I said before, like don't get hung up on like I'm going to do everything this way or I'm gonna only do arrow functions or I'm only gonna use flex box like Yes you should mainly focus on flex box but it doesn't hurt to know what float is and how it works as well. It's only going to help at the end of the day, there's a lot of stuff to know right? So um the more and more you kind of just keep practicing and keep seeing code like this, it's going to help you in the long run when you can just be like oh they're using float on this. Um you and you might be able to just um change it over to flex box right? Like since you know the difference of like what float is doing and then you know how to do the same thing with flex box, you might be able to update the code base um to flex box now or whatever but like I said they might not want to pay someone just to update something to new um to like the new way of writing things like with flex box or whatever right? So you might have to just work with floats who knows? But if you're working on a startup then obviously they're gonna be like using um the more newer kind of syntax and stuff like that so um it all depends right. Um one thing I would say is um just like just get used to reading all of this stuff and like this looks like a lot, right? It looks like a lot here. But really like you can just go and be methodical with it and really like look at what this is doing. Okay. We have our dot container instantly. I know dot container. I'm looking for a class. Okay. Class container. Okay, so this whole div and we can see it's closing right down here. So this div container is holding all of our dives on the page. And when we look in that container, we can see that every element on the page is being uh is inside of a flex box. And so that's why we can use all the flex box properties. Okay. So really just be methodical with stuff, especially when you're studying and like when you see something like this be like, oh, I can't really remember what this does. Don't be afraid to search stuff up like this. Okay. No, no, I'm not giving you guys like industry standard stuff right now. This is this is just like a good way to like think of it, right? Like I I'm not like 100% sure what like all these different companies are calling. Um They're flex box containers and stuff like that, right? They might use something completely different. Who knows? Right? They might uh like yeah, it could be anything right. Don't get too worried about like class names because class names. This can be anything. You can, you can call this cool box thing. Right? It doesn't matter as long as it matches up when we're styling it. Right? So don't, don't get hung up on like class names or anything like that. Just know that the class name here is how we're linking it to the CSS and all of the properties that we're trying to give that element. Okay. Yeah. So we got one more here. We're just gonna x this away. This one's pretty cool. So you can see we're going to use flex to build a pyramid like this. So you can, you can already see like look at this thing. Right. If you had to do this with flow, it probably be a nightmare. I don't even know how I would go about doing it. Um, but with flex it's going to make it like quite a bit easier. So we're going to go flex pyramid but html Yeah. And cut Yes, Mermaid. So what are we going to have here? We're going to have to give and right, this is going to be another div here and it's going to be ups uh huh We're here. This can call roe. This is going to be called actually we can do a bunch of these. So let's delete this for now. It's really, we're going to have 1, 2, 3 4 rows. Okay. So we got four now four rows and we're going to have to give plus equals um red circle and I'm just going to go like this and copy this and we're going to go, you hear three here or here? Here. We're going to go orange. Remember to do that. I just double clicked and had one highlighted, then controlled the each time will select the next one down is exactly the same. Hello? Yes, we have all of our diff circles, so red, orange, yellow and green. So now all we need to do is some flex box CSS and we're going to use flex box so we're gonna go um got red. I'll call it red man make it easy controlled the orange care controlled the yellow here will be it's an easy we'll go live on this page so we can see we're not getting anything yet. I wonder why. Why aren't we getting anything yet? We've given them color now. It is linked. You can see um dot red dot orange, dot yellow dot green. Right? So dot red, dot orange dot yellow dot green. So they are linked by class. Does anybody know wild? Guess? Um we do need to do that. Let's take a look. What was that? Sorry, kind of quiet. Yeah, so these dips are empty right now. So there is actually like no content. Um what we need to do so we can see we gave the row display flex now and justify content center but still not working. Right. Well the thing is we need to give its size, right? If we give these a certain size right? There is no like default size for a div because if there's like literally nothing in our div and we say that it's red, orange, yellow or green, it doesn't really matter because we haven't specified size for that um, for that dip. So now this is where the magic is going to happen because they're all circles. Right? We can see here we, they all have a class of circle and this is how we are going to start seeing elements. So obviously that doesn't look too great. But what, what do we need to do? What can anyone take a guess exactly. So that looks good. Right? It's kind of like what we want, but we want circles right in a hard border radius and the bottom ones look kind of silly because they're squished. But we can see now that we have a perfect pyramid of our circles and that was all because of flex box. And you see, we didn't even have to barely do too much. We wrote more for the DEV's than we did um, for styling, right? We literally just gave them colors and made sure that they were remember, um, justify content center. So no matter how, remember how many each one's row, right? So each container, that's holding our div circles, right? Is a row and is its own flex box, right? Because we gave it to display flex. So each one of these dips here, boom boom boom. Each one of those is a flex its own flex box. And since we justify content center, no matter how much content is in these, it's always going to center them evenly. That's why are red goes directly in the center because it's a solo. But then once we have to then there the middle is right in between the two when we have three. Once again, It's the middle is directly in the middle of the 3rd 1. And then once we have four, it's directly in the middle again because they're even right. So it's like this once again has done all the heavy lifting for us. Just literally just this has done all of the heavy lifting for us. This is just how we get our circles to look a certain way. Right? And this is just the color. Right? But this is literally all we had to do to make this nice even pyramid. So that's just it is a really good example of how powerful flex boxes. So exactly. So remember in the class, if this is separated by space here, That means these are two separate classes. Okay, so green circle, so whenever we affect circle, these devices are going to be affected and whenever we affect green right here they're going to be affected. So Exactly, because it's just referring to these ones right here. So the dark green, Yeah, we can do whatever we want, we could um make it blue and it will change them. Excuse me. But we have to remember that this is the way we were calling it. We're calling it dog green because green circle is just kind of easy for us to remember and it's easy for you guys to study. Right? So that's why we just called it green. Right? So um but once again this part, what doesn't matter? This could be like, this could been like um autumn Rowe circles, right? We could have called it that but we have to make sure to change the class here to um bottom row circles. Right? But we don't have to because we already have the circle class here. Right? So since we already have the circle class here and it's denoting how the actual size of each circle. So really here, we we only need to have another class just to separate their colors because when we look here, that's the only thing that's separating them is just every line, There's one extra circle and it changes colors. So that's all there is to it, Right? So when we look here, one extra circle, each line, right? We did that just by adding another div and then we just change the color by giving each one a different class and setting its background color to that. But just remember this is doing this is doing work for us right now. So let's get on to Bootstrap though because this is where you're gonna this, these were kind of fun exercises, but um, Bootstrap is where we're going to kind of see more website related stuff. So does anybody like kind of know what bootstrap is? Front end framework? So, um, yeah, it's, it is kind of like that. So we're make sure you click in here and we're gonna make a new folder museum because CSS Bootstrap actually we won't call CSS, we'll just call it quits truck. It is its own thing. All right. So we have that and we are going to um, we actually need bootstrapped on men file. So, um, what I'm going to do, so we're going to go to with straw and when you, when we type in here we'll get Bootstrap right away. And here's the Bootstrap library, you can see it's a front end framework. So front end framework means it's for the front end, right, visual stuff and framework is just like, it's it's a thing that we add into our project to like use all of the things that Bootstrap gives us. Right. So it's a collection of 1000 scripts with a consistent ap application program interface. You guys have probably heard aPI lots before, but just didn't really, I know what it was. So application program interface. So this um is how we're going to insert Bootstrap into our project and um, we're going to we're going to see what it does for us. So the api for many front end frameworks is CSS class based. So um for front End Frameworks it's using CSS right? Class based CSS um within their A P I and then we can use styles and stuff and pre made elements, essentially. So when we put classes on tags, they'll acquire the styles and scripts um from Bootstrap, so we go to get bootstrap dot com and you can see right here, I'll just copy him, paste it into the chair and we need to get a Cdn. Okay. And we have this little thing right here, so if I go to download, we can see here while we can just open this one up, open link in new window. Yeah. Oh, not a new window right here. Okay, so this is a way to quickly add bootstrap, um we can just link, right, we've already seen this before, when we link our own CSS file to our page, but if we want we can actually link a bootstrap one. Right? So you can see here this is C D N I think stands for content delivery network, I'm pretty sure. Um so the Cdn for bootstrap is this link right here and that will allow us to use all the bootstrap stuff within um the file that we're doing, it will like lift it from this U R L and essentially deliver it to us with this Cdn. Um so I'm going to go in, we're going to go in here and we're gonna make a new file called demo. All right. Html And we're going to thank cab, what do we have here? We're going to call this strap, wow. And what do we have to do? We have to link it? Right, Oh, in here. This is how we're going to install it with the CBN, right? We can see right here. So I'm just going to take this go all the way or has a copy button right here. Should have seen that and we're just going to paste that in two word wrap here. So it looks kind of messy here because I had the word wrap. So this link is a little little bundled up right now but you can still see it's a link tag and we have our H ref and it's pointing to the C. D. N. Four. We can see right here, Bootstrap and we can see here bootstrap dot min dot CSS So we're going to see that in a second. Um So um where can we get the actual um Oh all this. Yeah, don't don't worry about that. Um So if we go here and we download the Bootstrap compiled CSS and Js okay, so we download this one right here and then um if we go in, let me see my downloads, I should have, okay, we have it right here and I have an old one here, but let's um but uh extract here. I hope so. I keep clicking the Wrong one. Okay, so we have our bootstrapped on men and we can go into the CSS folder. Right? So there's a Js and CSS folder. So we go the CSS folder and then we see all of these things here and This is once again the important one bootstrap dot min dot CSS. You can see here that that is the link file that they gave us when we're using the Cdn via Js deliver. Right? So they have this one here and um we can also do it through the source, Right? So if we wanted to do it through the source file, we need to actually download the compiled CSS and Js. So now when we look here, we have our bootstrapped on men right here. Right? So if I open this up and I'm going to copy this and go into here and we're going to try and paste if I can let's try and p I can't pieced, it's going to be bad. Okay, There we go. So, I've dragged in the bootstrap dot min dot CSS here. Right? So I can get rid of that now, and I'm just going to drag it into our bootstrap folder and you can see that this is a massive file. Might even slow down your computer if you're trying to open this file because there's quite a bit there. and what you can see here, it looks like a mess, right? It looks very hard to read. And the reason for that is because it's compiled. So there's a thing um when we compile it, it makes the file like as small as it can possibly be, but with still having all the scripts and whatnot. So we've compiled it compiles it down and it pretty much writes everything in one complete line. So this file isn't meant for us to understand. Okay, you can even look through and you can start to see things, right? Look display in line block. We got a width here, uh knave bar, we got display flex important. See so you can see there is a bunch of things in here that you might recognize, but since it's compiled, it's written in one line. So like this whole thing is wrapped right? It's all written in one line to save space and the computer can read this fine. Right? The computer has no problem reading this. Which is good for us because we don't want to have to like, we don't want to have to look through this anyways, we just want to know how to use bootstrap. Right? So I'm just gonna click that away because we don't actually I need that, but if we want to, we'll make a link tag and it is a scout. Yeah, yeah, yeah. So just this one, it's just this one right here and then um no. Okay so let me just explain the difference really quickly here the this is for when we're trying to host the file on our machine. Okay. The C. D. N. Is grabbing it from the internet. So you know remember when we were doing um image you are else and we were able to um uh we had a U. R. L. With an image and it was pointing to an image on the internet and we were able to display it on our website, right? But we didn't actually have the image on our computer, we were literally just grabbing it from the internet, that's what the Cdn is doing. So when we load this, what the computer does is when it's loading this page now it has to download this in first and then it can apply all the styles and stuff to our body um from here. Okay, so this is not like on our machine, right? Because this is from the internet, it's it's a Cdn content delivery network. So um this Js deliver dot net or whatever is delivering bootstrap dot men into our file. Okay? So but here when we have our bootstrap dot min file here that we downloaded from the site, when we have it right there, we can now we're going to access it from here from this actual file. Okay, so right here, I'm going to go God slash Bootstrap Hoffman. But CSS and you can see its underlying and this is now pointing to this file within our bootstrap folder. Okay, so these Are the two ways right here to get bootstrap on into our project. Okay, well I'm just putting both in the one, but you would obviously only need to do one. Okay, so you've seen all the, all the styling was all in this CSS file. It's min ified. Right? So that's what Deokman means. It's mystified means it's compiled so it's like a one liner so it's not going to be easy to read. Um I'm pretty sure like if you got the source files, um then it might be an easier to read format, but then the file is also going to be like way bigger. Um so this is what we want. We're either going to do it like this. If we do this though, we have to make sure we have our booster abdomen dot CSS file here. But if we don't have this on hand, we can still get it um from the CBN and just link like this. So this is how we're inserting bootstrap into our ah our follow here and on the on actual bootstrap page. This, this is the cool thing about it is that um right here, you can see we on this side bar here. Um we can go to like components and components are essentially the same as like like different elements we can get. So you can see we have a bunch of things we have drop downs, we have close button, carousel card buttons, badge alerts, um, Nav bars, so we can click in the Nav bars, right? And it's gonna tell us kind of what CS, basic CSS styling they're using here, right? And it actually shows you how, like you can style your own, like, so if you just create your own Nav bar, you can get bootstrap styling because now that we have bootstrapped linked in here, right? We now have bootstrap classes, Right? So remember in the um here, so put classes on tags and they will acquire the styles and scripts. So that's really uh that's really important because um this, it's exactly what we're doing, exactly what we're doing is in this file here, there's tons of CSS classes and pre done styles for those classes. So when we use the bootstrap classes within here, now it's automatically going to be styled by this file. Okay, so all we have to do is put classes in, but it's almost even easier than that because I can go right here, see this. So bootstrap gives us a whole bunch just right off the bat. So you see these different Nav bars here, we got a whole bunch of Nav bars here, Right? So I can just go like this, we'll just lift the code from this knave bar and we're going to put it in our body, right? So we just put in this massive, massive Nav bar here so let's go live and we can see that we now have Bootstrap Nav bar, you can see it has the same um the same attributes and styling that um is like it's defined in here in this file, right either in this file. But think of the um yeah think of uh think of this when we're using a Cdn so when we're using this Cdn just think of it as we're grabbing this file from the internet. Okay so these are the two ways we do it this way we're just grabbing this file from the internet and loading it into our page first and then this way we have to have the source file which is right here and then we point to it with the link tag and then once we have it loaded in now we can use anything from Bootstrap in our page. So we can see here search, right? We can see when we click on it, it highlights. So that's that's another thing. Once we click on it it's highlighting when we hover over this it goes solid. Right? Um We don't have the drop down yet because that's actually um javascript and there's actually nothing to drop down either because we haven't like specified anything actually. I think they have basic drop down items. Oh yeah so they do have a basic drop down menu here. The reason why it's not working is because we don't actually have the javascript. So if we um looked in here um and we looked in our bootstrap there's a Js folder as well. So there would be another file in here that we would link as well and then all of the javascript mannerisms that Bootstrap requires. Um then we would be able to see the drop down and stuff like that but we're not gonna get into that too much. We just wanna see um kind of the basic like a basic thing that we can do here. So I'm going to add a couple more things. We can go we can grab a form. This is just to show you guys right um why am I Oh because they're in here. Okay let's go to forms and we got a cool little email address and password one. So let's grab that lift that code and make sure we go under the nav the kind of make that a little more readable, That's better. So we're going to go under the nav and we're going to paste in that form. Now you can see we have a form now we can check the box, submit doesn't do anything obviously because we haven't specified anything but we have a cool little form and let's uh let's put in something else. Let's get some buttons going. So we got a bunch of buttons here so let's grab this copy these and then underneath form we're gonna put in buttons Mhm. Now we got a bunch of cool buttons underneath, it's kind of right beside it, it's because we haven't, it does a bunch of styling for you but it's not going to do everything perfect, right? So you can see like we put buttons right underneath our form, our form has a button at the end of it you see? But then our for our buttons are starting like right underneath. Um But that's okay, this is just for you guys to see, right? So there's a link button and then just these regular buttons, this could be like hey you're going to delete something, this can be like hey you made your account nice. Um So Bootstrap was made by twitter, so um twitter actually made this whole like library and you can tell that like twitter kind of looks has like similar looks to this. Um And Bootstrap is like very, very popular, it's like a really well known library and like a lot of websites kind of looked the same for a long time because Bootstrap was so popular so people were building all of their websites um with Bootstrap um So one thing I do want to show you that we need, we can also um if we want the Js to work right, we can grab this script here, so The CSS uses this one, right? And that's how we get all of the styling but if we want the actual um if we want the actual um so this is a bundle I think, I'm not sure we need actually. Yeah, Okay, so right here we can copy this one and we can just go in at the bottom here, the script in. So now um we're loading in a script and we're loading in, you can see bootstrap dot bundle dot min dot Js. So it's a mystified Js file and um our javascript is working now so you can see our drop down menu is working now because we added in um we added in this little Js so remember the Js is doing work behind the scenes, right, Javascript is doing work behind the scenes to make things uh do what they're supposed to do. So we can see our drop down is working now because our javascript is now imported from this source. Once again, we use the Cdn to deliver our bootstrap dot bundle dot min dot Js um file. So once again, this here is this is the same as doing, it is like importing a file like this, but instead of a bunch of CSS it's a bunch of Js right? We can tell because it's dot Js okay. And we can even go in here and look and we go into the Js and we see bootstrap dot bundle dot Js Or we don't want the map one, it would be this one. Bootstrap dot bundle dot min dot Js. So this is the one that we would use if we wanted to um link it straight in the same way we did this one. Okay, I'm not going to do that right now because uh it's not like I think you guys kind of get um get the difference, does anybody not understand the difference between Cdn and I'm doing it straight from here? Yeah. Yeah, so for the for the most part, you want to do it this way? Um just because like now, you know that like the bootstrap dot min dot CSS is loaded in from your own project. So if if the bootstrap a website got like messed up, say say hackers got to bootstrap, I don't know why they would, but let's just make believe for a second that hackers um shut down Bootstrap, right, well if they did that then this C D N might not work. Right? Um It depends, this is actually from Js deliver dot net so they probably have their own kind of uh they probably have it downloaded on their server. So let's say if J is delivered dot net went down okay, because that is the site that is delivering our Cdn to us. So if it went down then this would all stop working. If we didn't have this one, right? If we didn't have this line here and this file here and we just used the Cdn, it could potentially, if something happened with this U. R. L. And it was down then our website would look like crap. Okay, so that's why usually you want to link like this because it's going to ensure that you have um it's going to ensure that you have the file that you need and it's within your own project. Okay, so like this this folder is our project, right? And if we have the bootstrap dot min dot CSS file um we're good to go, we already have it downloaded, so we have all the bootstrap styling that we need and and we're just good to go. So if there was one way that you had to do, you would most likely do it this way. Um And there's there's a couple other ones that are like you can see here there's a both bootstrap dot min and um bundle dot Js and bootstrap bando dot min dot Js um include Popper for our tool tips and pop overs. So um I think poppers just straight up included because before, so many of our components require the use of javascript to function specifically. They require our own javascript plug ins and Popper place one of the following scripts near the end of your pages right before the closing body tag to enable them, which we did and include every bootstrap javascript plug in and dependency with one of our two bundles, Both bootstrap dot bundle dot Js and bootstrap dot bundle dot min Js include Popper for our tool tips, so I remember before um popper wasn't included, so that was like a separate um thing that we had to link but they change that, which is nice. So now um it's all in this right here, so all of the javascript and popper is inside this one thing here, so that's nice. You can see here if you decide to go with separate script solution, Popper must come first. Um so you can see here there's a separate script um for popper and then the bootstrap dot min dot Js one, but since it can come since it comes in a bundle now there's no point you you can just do this one. Right? So um that's why that's what I would recommend, but then I think if we go in here again, that's a look. Yeah, so they don't have a popper, a separate popper download anymore. It doesn't look like it doesn't look like they have a separate popper download. So um it's just included um in this bundle, so that's that's perfect. It's even easier now to get it into your project, you literally only need this is all we need this one here or this a man uh this one here or we can grab the actual um grab the actual Js bundle, right? So this one, so we could just grab this actual bundle and put it into our bootstrap folder and then link it the same way we did this and then all of our Js and CSS for Bootstrap would be in our file. I'm not gonna do that for now, just because we're going, we went a little over on time. We should have a little bit of a break. Um, I just want to look one second here. Um, doesn't look like it. Why is it not updating for anybody? Okay, I'll restart it.