Okay guys, um I actually can't remember when I said to take a break but no worries. If you're not quite back yet, I'm going to post a new link in chat for the code cast? Hopefully it's working properly again. Um All I've done is made a grid dot html file and we're just going to start working in here. I'm actually going to just lift this, put it in our grid file here, um you know, in heads and on. So we're gonna make if class container and then inside of here another div as equals bro. And then give class equals column three. Open that up one of three Holmes and we're going to go this because each one remember parent and child is uh it's going to take certain properties from the parent. Okay, So in certain areas we don't want um things to be affected a certain way. Right? But if we want all things to be affected a certain way, we can wrap it in this big container div. Okay, But then we can segregate all of our elements into different um different containers or dives you see? So then we have a row here and then We have our three dives inside of it. So we're controlling one row of three dives here. Right? So that's one but we can also I just copy this down, we can do other stuff. So this this is going to be a prime example and this one will be we live on this. So we have one of three columns and one of three columns but you can see that they have been arranged differently using these classes. And what are these classes from? They're from bootstrap. We've linked our bootstrap here and we're using the bootstrap grid. So if we open this up, yes, and I'll piece that didn't care and this tells us about how to use the grid system. Okay, so those are media queries. We've seen those before, and here's some of the class prefixes for our grid options and you can see we're using some here. Okay, so the grid is a way we can space things the way we want. So you see how um all we did was used classes we didn't even need to use um like these classes right here. They're using like flex box. So um like when we give these things a certain class, just remember remember that file here. It has a bunch of classes in it. And um the stylings within those class selections will be like display flex and flex direction and justify content and stuff like that. So when we style with bootstrap, once we like start learning these classes, we can actually affect the things we want, right? We didn't even have to do any styling. We just had to know that what class names we give it is what's going to um put it into a different uh like a different way. Right? So if I just go here, this is going to like kind of make it easier. So let's go because I know I'll oh my God style and we'll just grab all order black solid impact. So uh huh Oh whoops is there we go. This is supposed to be more Excellent one pixel. So this is now showing exactly how we got a different layout. Oh you guys can see remember remember the justify content, right, justify content. The each one of these is using a different styling of that. So when you set up different classes, these different classes are going to have um different ways. They're displaying the content. So you can see these ones are actually bigger. So you see these ones have more height, you can see All these ones have more height. So when we go 12 here um actually that's that's should be the width I think. Um but uh I hope it's because I'm not seeing it properly. So yeah, we can see here um we have the one when we stretch it out one smaller. So the first one, so when we stretch it all the way out full, The 1st 1 smaller with right? And we can see that here. This one is smaller than those ones. Okay, But here those they're all the same so we can see that it's it's made the content. It's angled them in a certain way and organize them properly. This one is made each of them. This looks like um this looks like center, right? This top one looks like justify content center, right? Because it has a middle one like this. And then the two side ones are even middle one is bigger though. And we we set that though, right? We set the middle one to be bigger and then these two to be smaller. And then because of that, because this is using um I'm pretty sure kicked the class container for flex box means it's display flex. And then when we give a class of roe, it means flex direction row. So like we're just using classes here, right? But if we go back and we look at our bootstrap stuff, right? We um can see container, right? We can see that bootstrap is using a lot of these types of things. These classes are referring to it. So when we go into like flex box again and we see display flex, right? We're selecting a container and its display flex. So when we go in here and we look container is referring to some class selection in our bootstrap dot min dot CSS right? It's looking for a class called container in here and there's something in here that's probably a flex box container that has that same display set to flex. And then this class row probably has the flex direction set to row. And then we can see here the column probably has um like it probably has some type of justify content um thing, like a center or something like that. Right? Um We can actually see here. This one's even so this one might be a what is it space evenly and then this one might be um what was that other one? Uh That one might be center or it's either um yeah, it's so this one's a little bit different but you have to remember that it's it's doing it based off of these dimensions, we gave it right? So since we made like um like when we stretch it all the way out and give it the full view now we can see that this one is actually smaller than these ones, but when we go smaller, see how it evens them out automatically. That's bootstrap and flex box just working for us. Right? So you can see how bootstrap, like even like on a phone you can see look now it's changed it again in order to display it properly. So for whatever device that you're using. So if you're on your phone it's going to display it like this. Right? But when you're on a computer and a big view ports, it will display it the way it's actually supposed to it's actually supposed to look like this, right? Because We can see that this one Is smaller than these two. Okay, so but bootstrap is smart in that when we go smaller it knows to just organize them in a nice way. So that's why I said like Bootstrap is very powerful because it takes a lot of like the guessing work and stuff out of styling like you won't have to be like how is my website going to look on a phone? Right? You know that bootstrap is going to kind of like work its magic and like make it look at least decent. You know what I mean? So um this you're not going to memorize every single class. Like I'm not going to click into that file again too um destroy code casts. But um like this file there's so many classes, right? So there is so many different things like this containers rows columns like there is so so many of these. Right? But you'll start to kind of get the hang of it. Like this is a big container. It's holding Both of these rows, right? one row turo one two. And you can see the containers outline to write because we put everything to have a black border, right? So we can see the outline border at the very edge. That's the big container. It's holding both of our rose. And then we can see are two rows both have outlines on them. And then each element has its own outline on it. So we can actually just break it down and see each one the full container. Each row and then each column of the row right? Because these like kind of go downwards now right? But they have different um different properties, right? So you can see when we add on the extra attributes here, when we shrink it, it goes to this but this one when we shrink it, it doesn't do that, it just takes up um uh more space in one box instead of single lining them. So each one has different behaviors and stuff. But I don't like worry too much about each behavior. This is more to show you guys that um Bootstrap has like a million different classes and each way you use a class can determine the styling of your website. It's really, really powerful. Bootstrap is like very very widely used. Okay. Um we're just going to click off that that was just kind of a basic example for you guys. We just got a couple couple last ones um might go slightly over today. Um So we're going to do a scroll Spy right now. So I'm going to go in here, we're going to make a new one. It's Cool Spy. Uh html Once again we're going to uh scrolls by and we're going to go back, we're going to once again we can't forget this but now we have Bootstrap in our project and I'm actually just going to um have a Nav Bar thing here, I'm just going to paste it in so you guys can paste this in from code cast. Uh huh. So I just paste it in a Nav bar here, we're going to go live and we got a cool little basic knave bar has a drop down but our drop down as an active because we haven't put our Js in And we have two links. We're going to make a DEV and we're going to go better. Yes I course scroll and Vada SPS target equals I have a bar. Mhm. Example who? Uh Yes half sir equals zero index because zero I need to word wrap because it's doing that thing again. Okay so we got that set up in H. Four and this is going to be Uh huh. We're going to make an I. D. Equals huh And then let's copy this a couple times actually now let's the P. Tag and inside we're going to go laura um 20 I guess. Huh ugly. That's better. Now we're going to go like this we're just going to copy this down but we're going to change these. So This one is going to be M. D. O. This one is going to be um one you can just get rid of the hat there and we have who? Uh huh. And then we or that um we will put our scripts back in though to have the scripts in here and now where's my scripts, grab our script? Remember we put that in right before the closing body tag So now we have our script in and we can see we have this cool um thing and we have a scroll spy now and it's kind of I guess I should have done bigger laura. Um Okay uh let's go like this laura. Um 40. Okay. Think that should be better. So there's actually some scrolling so now you can see our scrolls by when we click on at fat, it brings us right to at fat. When we click on at M. D. O. It brings us right to our M. D. O. One. Um And our one it'll bring us down to the one. The reason why it doesn't go straight to the top is because three is the very end, right? But I think you guys kind of get the picture of what scroll Spy is doing. Um It brings us right to the content on the page. This is actually pretty helpful. You know like when you have a big library or something of a lot of information and someone just wants to skip through to a certain part. Um So you would have like a drop down and you can go straight there to that information. Excuse me. So that thing's pretty handy actually. I'm sure you guys have seen this on websites before when there's like a big long page. Ah It's perfect to like just go straight to that information really quick and you see the javascript since we linked in that javascript, see how it like moves down like it is scrolls nicely like smoothly and fluidly. That that's because of the javascript. Like you could have it where it just like jumps Right where like if I click three it just goes boom like that. But like the bootstrap javascript is making it so it's like scrolls down nicely, right? So um like bootstrap super powerful um it just makes your website look good and like the ease of use for the user it's like actually cool to like move around on it you know feels fluid, feels like a well made website right? So that's scroll Spy, that's pretty simple. Um But you just have to um we just have to enter this really um we have to make sure that we just put our little scroll Spy data right in here and then we know that um this div holding all of this information is going to be part of a scrolling. Uh like a scrolling uh like kind of program right? Like we can go to each one so all of these they're in a div held by um this uh this div this scroll Spy div. Right? And so since we gave them an I. D. Right? That's why it works because ID at fat. So we gave this at fat an I. D. And now it knows to scroll to that div right? It knows to scroll to that information right? Because if I click on this now it's linked to this header. See so the header H. four We give it an idea of fat right? And so now when we click on this at Fat right now it's a link, right? So when we click on it, it scrolls us straight to this header and the I. D. Is how we linked it to this little button in the nav bar. Okay, so the little button here, Right? We have we have well this is in the drop down but we have the button here and see how we we linked it. What what does this stand for? Someone tell me what was that? Yeah, it's a hashtag but what does this mean exactly? So if you remember in CSS how do we select an ID? We use the hash symbol before the I. D. Name. Just the same way when we'd use a class, we use the dot and then the class name. So we can see here That for this H4, we've given it the id of fact. So this side is how we can link something to this H four tag. Okay. And we can see right here, we've set this right here to be an a tag. An anchor tag, which is the same as a link. Right? So it's now a link. But where does it go? Right, where where does our link lead? Well this this is where our link would lead but it's just hash fat. Right? So it just knows that it's pointing towards this ID this H four and that's why when we click on this a tag. Right? So this is the content at fat, we can see and it's a knave link, that's why it looks nice and styled by Bootstrap. Right? And that's why it's clickable. And then this H ref, the hash fat, that is what links it To this h. four here because this H4 has the i. d. of fat. It's not linked because of this. This is the content of the tag. So this is the content of the a tag. This is the content of the H four Tag, same thing. Right? But one is a link that a treff leads to this. I'd so hash fat an I. D. Fat, that's how they're linked. And then the scroll spy is why it can scroll down to it and it knows That the idea is how it knows which one. Right? When I go Mdbo, it knows because M. D. O. Is right here, a treff hash MD Oh we go down ID M. D. O. Is this H. Four. So when we click here it knows to go down to this H four. Okay, so we're we're almost at the end, I'm just going to quickly show you um the last one, we're going to make one new file and it's going to be mm carousel. Hmm and cab carousel. Once again we're going to lift this link just put it right in there also, it's going to grab the script right off the bat, right at the bottom. Uh Mhm. Right, right before the end, body tag. So we got our scripts and I'm just going to lift um I'm just gonna lift one. This is from the bootstrap website, I'm just gonna click off that and disable that and this is kind of funny. Um This shows every bootstrap site ever, so um I'll show you guys in a second, but I got this code, don't worry, I got this code now, it looks like a lot, but I just lifted this code. Um This is just a carousel from bootstrap but um what I've done is I've added a couple images as the carousel items. Okay, so um let's go live on this. So we got some images here and we can see we have a cool carousel now of three items. So we got ego, we got some coins and we got a bush here. So that's a carousel and you can see it's sizing with the with the web page, bootstraps doing that automatically and this looks like pretty complicated, but really it's pretty simple, we lift all this is, is I lifted if we go here. So to bootstrap, open this up, go to um we just get started and then I can go to components and we can see carousel. So all I did was I went here and I lifted Um one of these carousel um blocks one of these carousel. Div blocks here. So I lifted one of these and all I changed here was right here, you see here, Image Source, Image. Source, Image Source. Okay, so that's literally all I did is I lifted a carousel pre made carousel from Bootstrap, right? You can see this is how it's working and it has the buttons. So what does our carousel actually have? It's got three slides, 123, and it's got a button on each side to navigate through the slides. So really, if we look at this, we can see this is our full carousel, like the container of the carousel, and then this is the inner meaning um where we're holding our content and then you can see here, carousel item, Carousel item, Carousel item. So that's three carousel items right here. And so all I did for ours was I just gave them an image. Right, so right here, I just gave them each an image. That's all I did. That's all I changed. And it gave us a carousel with those three images. Okay, And here we can see, well we know exactly what these are there. It's two buttons, this is just two buttons and they have a bunch of um, a bunch of attributes and classes, right? That link it to this carousel and make it so that one button slides through them and one slides backwards. Right? So once you guys get the hang of like seeing this. I know it's a lot of code to like copy and paste in and it's like, whoa, this is a little bit to take in, but once you start breaking it down and actually seeing that it's not that complicated, right? So we just have one big div that's holding everything right? This whole thing, one Big Dave is holding it so that one knows that look, it's a carousel slide, meaning it's sliding, that's how we're getting that animation, because Bootstrap also has animations, right? That's how it's sliding over like that, and being very smooth. Right? Then we have our inner, which is right here are actual items, are actual carousel items, right? One div, second div, third div for our carousel items. And then we have two buttons, one right here, You can see when I hover over it. It lights up. So the button actually is the full length of this. So you see my cursor actually changes like all the way up here and down here. So it's like there's a line like right here, see, so I can actually just click here and do it or click here and do it. You can see that, it highlights Right to go the next one or back. So this while it looks like a lot of code and kind of complicated with all these different classes and stuff. Just remember these classes are pre made from the Bootstrap library in here. These are just pre made classes that make this look nice and look cool, right? And that, that's really, all it's doing is it's pre styling stuff and making stuff look cool for us and um like all we have to do, like if you like really wanna like you just grab stuff from bootstrap dot com and you just slap it into your site and use it and your site will look like a lot of other um bootstrap websites. Right? Every bootstrap site ever. So um let's take a look. No, I guess that link is dead now. But um there's other themes so you can re skin how bootstrap looks. So you don't have to just use these basic carousel czar, basic forms and stuff all the time. Here's a different example. So this one has a little thing underneath that tells you which slide you're on, right? So if like we have a picture here but we don't know what picture were on. So this one would actually tell us which one were on, see the changes down here. So there's all of these right in Bootstrap, but then there's also like different themes that we can use to like spice things up and make them not look like exactly like twitter or whatever, right? So um hopefully this class was a little more fun for you guys. Um you get to kind of see see some cooler objects and elements and uh in a website. So yeah, this one that's why I say usually this one's a little more a little more fun you can it's not it's not too deep to understand just like remember like all this stuff, you're not going to remember every single class in bootstrap because like I'm just gonna stop um stop the recording real quick, we're pretty much done. But just remember that um we're not going to uh remember every single class of bootstrap. You think you're going to remember all this, like, you'd be a literal robot if you remembered every class in bootstrap or whatever. So um this this is like you're going to get used to seeing these like kind of over time and learning like, hey, I kind of like um this class, the D block or whatever, or you're gonna know like, oh this is how we set the width to 100 really quick, Right? So you could see that like in CSS we would change with 100%. Right, well this looks like um it's taking 100 width because you'd see when we drag, see how it's staying at a 100% width of the view ports. Right? So right there we already know that W-100 is probably uh easy class to make the width of um this dev 100 VW right, Or 100% width. So there's a bunch of classes in bootstrap that makes CSS styling easier and quicker. So like just giving a W-100 class is way easier than way easier than having to go in and style, find this div right go dot carousel dash item. Um comma Active and or dot Active, sorry. And um and then give it a width of 100% right, when we can just do this, like that's so much easier. So Bootstrap super, super powerful. And this is how you're gonna be styling the majority of your websites. Okay. And Bootstrap isn't the only one. There's a lot of different ones. There's tailwind and like um I can't even remember the other ones. There's one by google um what's it called? I can't even remember off the top of my head, sorry, but there's a bunch of different libraries that are just for styling um like you can even Oh yeah, material design. So material design is another one. Um and it like, again, it's a library and you can style all of your page, It's probably got a file just like this and you can style your whole page with that now. I wouldn't go crazy and start like looking into all these different libraries right off the bat. I would get used to using bootstrap because that's what you're going to use in the actual bootcamp. Okay, so um I would just kind of stick the boot strap right now and get good with Bootstrap and then once you've kind of not mastered the library, but you're very comfortable with the library and what it can do then you can start moving on to other libraries and stuff. Okay. So that's all for today's class. Um hopefully uh was a little more fun today. Um and then I think we just have one more class which is J. Query before the break. And then you guys got Christmas holidays and then we'll have our final class on, I think it's January eight and that's the fire base class. And that's when we will um actually make our first miniature kind of app and you guys are going to see how it kind of all comes together. Um, so, uh yeah, that one will be cool. The next class we're doing J query though. So next class is actually pretty fun to, we get to do um you get to see a lot of different ways we can affect elements and stuff and select elements on pages. Um, so J. Query should be, should be kind of a fun class as well. So having to have a good night goes. Um yeah, um, should be 18. Yeah, so 18th and then um 8th. So we're taking these two weeks off because it's christmas and then New Year's. Yeah, you're welcome. Have a good night, yep. Thank you. Take care guys. See you on saturday, proper proper bounds. Okay, so jeg nash here lucky. Yeah, the yeah J. T. Yeah, are here abraham here kitty here. I'm saying us here, we'll be the reason thomas thomas absent. Mm hmm. Just going to say absent because um you gotta, you gotta listen. You got to say you were here. Mm hmm. That's on okay.