 What's up team welcome back it's your biggest fan the real Casadero and in this episode I'm gonna be showing you how to lay out a web page Using floats and flex box Also, you're going to learn to allow the page using some of the semantic HTML tags That will make it easier for you to optimize web pages for search engine traffic team This is something that a lot of people overlook, but I feel like it's very important I don't talk a lot about SEO in this particular video But what you're gonna see some tags that you don't see a lot You see a lot of divs and IDs and classes But what we're gonna be using is we're gonna be using the header the footer the content and the article team So if you want to learn to build a web page, this is the video for you But you have to promise that once you finish this course You're gonna go out and build something and then come back here and in the comments below Leave what you've built leave us a link so other people can check it out team. So let's get to it What's up team welcome back it is your biggest fan the real Casadero and in this session We are going to be coding a basic HTML layout and what we're gonna put inside of this layout is we're gonna put three of the cities that we would like to visit Once we have reached the point where we are able to code for fun and profit You will be able to code for fun and profit after you finish this section right here team This is where you go out and you start building stuff And now you will be building and learning you can build your own stuff build as many websites as you want team Right based on all kinds of stuff you can go out to the internet You can look at you can look for examples and you can build can build whatever you want team So what we're gonna do is we're going to get Started so this is this is what we're gonna be building and we're gonna see how to build this using a couple different layouts And we're gonna be using some CSS We're gonna be using some CSS you haven't seen before and I know we haven't gotten to the CSS section But HTML and CSS are so intertwined that in order to be able to build anything useful Right in there order to be able to build a web page that that people want to look at or there's that halfway decent We we we want to use CSS To give us at least some baseline styling team So you right now you know enough CSS to make the colors you want to make the look you want to make the feel you want But when we get deep into CSS inside of CSS alchemy You are going to be taken down the rabbit hole team You're gonna see how all of this stuff works how all of this stuff goes together And then we're gonna top it all off with some JavaScript But right now Right now for you to be able to go out and build your thing Right and get outside of your head and start exercising these skills and build that confidence We got to build some stuff So we're gonna minimize this and we're gonna get started so we're gonna hit the windows key We're gonna hit pwsh to open up the power shell and I'm gonna be moving quick team. So if The training wheels come off right now. All right team. We've been through a lot together You've learned a lot now it's time to build So I'm gonna be moving quick if you get lost if you get stuck if you fall behind what you want to want it What you want to do is pause the video go back and Figure out where you messed up team or if there's some stuff here You don't remember that means that you ran through the modules and you didn't practice the stuff You didn't exercise right you didn't write out why these things do the thing do what they do You didn't try to go teach this stuff to somebody else So you haven't you haven't taken in all the information team and that's fine That's that's fine, right? That's the way it goes right, but that's why you signed up for this thing That's why you're that's why you're in the code 365 startup lab. So you can learn this stuff. All right team And so you can come back to it anytime you want and pick it up and just carry on and continue to learn But you got to learn you got to build and if you can I Encourage you to teach someone teach your kids teach your wife teach your husband teach your church group Teach your AA meeting teach whoever it is that you need to teach because here's the deal team Why you are giving them value why you're teaching them? Why you are showing them the way why you're showing them how they can go out and take advantage of the 21st century? You are really being selfish because by having to explain this stuff to other people in a way that they can understand and Comprehend and actually be able to use that means you will have to develop a Understanding for yourself. You're gonna have to understand how all of this stuff works how all of this stuff is put together team All right. I've talked enough. So let's roll All right So what I'm gonna do is I'm gonna show you guys now how to get over to your desktop Because I have found the desktop to be a fantastic working space now You don't want to keep every you don't want to keep everything on your desktop I need to clean this up. This over here is a mess. This is a mess. I need to clean that up But what the desktop does is it allows us to go grab the folders that we're working on quickly So I got a few different projects that I have going on here And like this here and this This up here. Where is it at? There's another there's another link. I don't need these. I don't need that one So I'm gonna hit control. I don't need that one and we control them and hit delete So that's how you get rid of stuff from your desktop team And if you don't have any stuff on your desktop, this is not the video for you You got to go out to the google's you have to look up. How do I display icons on my desktop? Well, no, you don't have to do that. You can just go view and you can go show desktop icons and that'll hide everything whenever you whenever you want to be like You want to focus team you want to focus so we can go back here and we can go view and we can go show Icons and then we can change the size of those we want so we can go view we can go large icon make them really big Or we can go view And we can go small icon make them really small Same and you can't see you guys probably can't see though. So I'm going to go view And I'm going to change these back to medium size. All right So we're going to go right over to the desktop and to do that. We just type cd tilde forward slash dsk and hit tab And what this tilde denotes when we type it when we type the cd and we put this tilde This says our root directory and we're saying inside of our root directory. We want to go to the desktop folder Now typically on a linux system, the root directory is going to be all the way down as far as you can go So if we do like a cd tilde I mean not cd tilde, but The cd tilde it puts us in our home directory on windows So if we do there, it just puts us in our user directory the current Profile that we are logged onto the computer as at the moment and then of course inside of this folder You have what's called a desktop folder. So if we do a cd vsk, right that puts us in the desktop So I'm going to clear this out team and what we're going to do is we're going to make a new folder So we're going to do an mk dir and this is going to make a new directory for us to store all of our files. We're going to call this html layouts la y o u t s And we're going to put a a Quotation mark and then we're going to go hit hold the I'm going to hold the the control key and we're going to hit the left arrow key to go back to the beginning of this word And we're going to add another one here. We're going to hit enter uh, I messed up We got to put our exclamation point here to tell powershell that this is a string and we want to name our file this whole thing minus the exclamation points just this right here, so we'll go enter And now we've got this folder. We're going to move into that folder by doing a cd html Now we're inside of that, uh, well now we don't want to be in a layout footage folder Go cd dot dot and we'll go clear and now we'll do cd html Layouts now we're inside of the layouts folder. We'll clear this out And we'll do a new dash item and we'll call this index dot html and That should be it team. So now that we've created our our file what we're going to do is we're going to do a code dot and open up visual studio code Now if we click on this main window hit control w this will close that out now if we hit the control Tilt the key This will bring up our console at the bottom. So what we can do is we can do the exact same thing that we did out in powershell So in here, we're going to do a cd There and then we're going to go over to our desktop now we're in our desktop and we're going to go into our Well, we'll clear this we're going to go into our html folder. So we'll go cd html Layouts bam now we're inside of this folder and now anything that we need to do on the terminal We can just do all inside a visual studio code team So we're going to do is we're going to open up our index dot html and right up here We're going to put an exclamation point and hit tab Let's try this again exclamation point tab. This will give us our basic document in here. We're going to put html Layouts Using html layout using flipped And if you don't know what float is cool, you're going to learn about it. It's a css property We can use to move stuff around on the page There's a few different ways we can there's a few different ways that we can lay out pages One of the ways we used to do it before floats came along is we would actually set up a grid So if we go back and we look at our our basic document here, right? We would literally set up a grid and that grid would have one header row at the top and then we have two cells In in our second row and then we'd have one cell in our third row and then we would size Each of these cells like we would scale up the whole grid to the size of the web page And then we would go in and style all this stuff But we would have a very rigid web page and what what that means Is that the web page it wouldn't resize when we resize the browser And so if you remember back in the day when the first iPhones came out one of the cool features was that you could click You could double tap on an area of a web page and it would zoom into that area How we were able to double tap and zoom in on an area Is because these are all broken down into their own sections. We've got a header. We got a nav We got a article and then we got a footer So we double click The the browser on the iPhone will say hey, right? We're going to look at this particular section whatever's encapsulated in this piece of html and that's how that zoom feature worked and Because things were laid out like that, right? At least in modern web websites So there were some websites that you went to and they just displayed all crazy That's because they weren't using semantic markup. And so that's why this is so important team We're going to use semantic markup to make our website look the way we wanted to look But also so it can be found by search engines and also Also, so we can grab those elements and style them up and be able to use them Programmatically throughout any kind of application we build and this makes it easier for the browser to understand what it is We're trying to accomplish as well and there may be some instances where to help us out Now we'll tell you this team all of this stuff is massively complicated It looks simple here because we're doing it But there's a lot of stuff that happens when we build a web page and we click a link we do all this stuff Right, so you are standing on the shoulders of giants now less come back down to earth and get to work So we're going to minimize this And we're going to go down here into this area going to type in clear And we are going to do a get status and this is going to show us that we have Oh, we have an initialize our get repo So what we're going to do is we're going to initialize our get repo now So we're going to do a get init and this is going to create a get repository for us to track all of our files team So we can do a get status now It's going to tell us that we have one file that is not being tracked. So we're going to add that file So first we're going to do a clear. We're going to do a get add all And this dot means just all files In this directory in the directory that we're in so it's going to add all of those files now What we do a get status is going to tell us That we have one file that is ready to be committed now if we're cool, right? We want to track all these files We're cool with the public seeing these files and we want them to see our index.html That's the only way they're going to see it on the internet We could commit this so we can do a get commit dash m and we're just going to say initial Commit and we'll hit enter and now we've got our file committed and if we do a clear And do a get status We can see that we have nothing to commit So what we're going to do now that we have our baseline here is we are actually going to we're going to create another branch So we're going to do a get check out dash v to create another branch in this branch We're going to use to add Additional code and we can add this additional code across any of the files that we have in here right now We only have one but if we make more files we can add those and track those And what will happen is those will be tracked on a completely separate branch And we can switch back and forth between the two branches So if we make a mistake we can come back to our master branch and then we could just make another branch and start over again Or we can make another branch and we can pull in all that code from the previous branch and we can work from there Or we can merge that branch back into master And that'll be like our current version of our working code and then we can deploy that master off to the internet And we can come back and we can make another branch and we can start working on something new team All right. So we're going to check out our branch. We're going to call this We're going to call this base. We're going to go zero zero dash initial And we'll go underscore HTML because we can't have spaces in our branch names and get help So we'll hit enter and now we've switched over to this branch and if we do a get status get s t a T us and if we go back to the the beginning We're going to put a semicolon and then we'll just type clear So this is going to clear this out before it shows us the status And so now we can see our working tree is clean team So we have made our commit and we are ready to go in and start writing some html All right team. So what we're going to do is we're going to head down here into our body And we are going to get to work team So the first thing we're going to do inside of our body is we are going to make a header section So we go h e a let's go in here h e a d e r And inside of our header, we're going to have an h2 and we're going to call this the city for the cities that we want to visit And inside of well not inside of but underneath our header We're going to have a section and inside of that section We're going to have a nav and inside of that nav We're going to have a ul and inside of that ul we're going to have Three li so one and then if we hold alt and shift and hit down down We can duplicate those and we're just going to make some cities here team. So we're going to go london And we're going to go talk y'all And we're going to go Shinjin, I don't know how to spell shinjin. Let me let me figure that out All right team. So shinjin shin shinjin Is a city in china and this is like the tech mecca. That's just that's just some extra information for you Right, so if you got anything you want to build or you want to go see some dope tech Go to shinjin. That's where that's where like all of the technology most of the technology in the world is made All right team. So we've got our three We've got our navigation here So what we're going to do is we're going to step outside of this navigation and we're going to make a r to kill And inside of this article, we're going to put an h1 And we're just going to put i'm going to move shinjin to the top of our list and we're going to go Let's move this back down And what we'll do is we'll do a shift tab to make that fall in line whenever with everything else So basically if you hit tab You can tab and then if you shift tab you can untab stuff and you can do this on multiple things Like so say for instance, right? All this stuff was over here like this for whatever reason and we wanted to be back over here We can just grab all of this we go shift tab And then we can bring it back. All right team So if you go down to here into this article h1, we're going to put our city So we're just going to double click this and we're going to copy and we're going to paste this right here Now when you get into the actual java script of things where you're making stuff a java script team You will be able to make stuff and then go grab some data from one place and then put it in another place So you're gonna have to type the same stuff over and over again Or like you're making it so you can update one thing and everything else will be updated as well team We're not at that point yet, but we're going to get there. All right, so let's drive on So right down here underneath our h1 what we're going to add is going to add a p And then we're going to add some lorm ipsum text and lorm ipsum text is just filler text So we're going to type lorm and want to type 30 hit tab and this is going to give us 30 words of just random characters We'll save that and now we're going to go view toggle word wrap to wrap everything back up so it all fits On one screen so we can see everything All right, so now that we've got our article and we've got our Paragraph team what we can do is get in here and we can make another paragraph So you just grab this and what some people do is they'll take this p tag and they'll just put it They'll hit enter so now it looks a little more neat and they'll do the same thing with their h1s too It just depends on you. It's all about your preference team. Whatever whatever way makes you feel good When you type your code Or whatever standard your employer wants to use when they have you writing code for them That's the standard you just use team But you can do this any way you want. There's no right or wrong way So we're going to grab this paragraph. I'm going to hit control shift No alt shift and we're going to hit down and we're going to duplicate this and if we hit save Now we got two paragraphs and we're at a point where we can probably just go take a look at our webpage So we just drag this off to one side here and we'll click there And now we'll hit our go live button and this is going to bring up our browser in our local And our local web browser this is going to open a web server and then open this page in our local web browser Now because we ran out of room we'll hit control b to get rid of that sidebar And I noticed that we're missing something here. So right down here underneath our section We'll take that space out. We'll go enter We're going to add a footer tab and in that footer we're going to put a h2 And the h2 is going to be Footer just to denote that we have a footer down here At the bottom of the screen. So now we've got our base html team What we're going to do is we're going to go down here and we do a get status And as you can see we've modified this html file. So what we can do is we can do a get add Well, actually, let's do a get branch. Make sure we're on the right branch. All right cool We're on our initial html branch. This is where our initial html is going to be so we'll clear this out and we'll do a get add add Dot and then we can do a get So what we're going to do is we're going to group this all into one command so we can do get add all files and then we can do a get commit dash m get commit dash m and now we can add our commit message and we can say initial html Content for layout All right, we'll well, we don't hit save but we hit enter is going to save that and now we've got this whole new branch Now check this out team if we clear this out and do a get check out Master our master branch has nothing on it because that's our baseline So now what we can do is we can just work In these different versions now, let's say we want our initial html on this line We can do a now on this on our master branch So maybe we can deploy it to the internet or or do whatever it is We want to do team we can clear out this page. We can clear this out. We can do a get branch And now we can do get merge and we can merge in this initial html So we'll just double click right click and then Space and right click again hit enter and now this brings all of our code into our master branch team And if we go over here and we refresh now our master branch looks just like our initial html So now what we're going to do team is we are going to Everything is saved what we're going to do is we're going to make another branch And that branch is going to be for our styling in our layout team So what we're going to do is we're going to get into that So team what we're going to do is we're going to head right up in here into our head section And we're just going to add some spaces And we'll tab and we'll add a style Element and what this is going to do is this is going to enable us to add styles right inside of our css without having to put this in another file But If you wanted to style multiple web pages at the same time What we would do team is we would move this out into his own file something like a main Dot css or whatever we want to call it css dot css any kind of name we want You can put that in the css file and then we could use a link attribute. So you just type link go down to css uh-oh z k and then For href we would just specify where our style sheet is but we don't have one so we're not going to use it So we'll hit control shift k to delete that line And we'll just hit control shift enter to add another line above that And then we'll go down here in the styles and with a tab and now we're ready to roll team So the first thing we're going to do Is we're going to Grab all of the elements on our page and we are and so that's what this This asterisk means that means everything. So we're going to grab everything on our page. We're going to give the box sizing of a border box And what the border box is going to do is whenever we have a A border around something Like typically like say for instance this box was like I don't know 100 pixels wide When we add a border like if we add a five pixel border, this box will become 105 pixels wide, which would jack up our layout But by adding a border box What it does is it just takes that border and it puts it inside of that box we specified So we if we specify that this is going to be 100 pixels wide and then we add a border of five pixels Then the box is going to stay 100 pixels wide is just going to lose five pixels of space on the inside for the border So that's why we add border box to keep our to keep our sort of to keep our spacing in check team The next thing we're going to do is we're going to go down here And we're going to add a body element. So we're just going to go here and we're going to type actually Who up here shift tab to get rid of that red line right there and now we can come back down here And we can do a body And we're going to set our font Family and we're going to set that to aerial Helvetica sand serif and if we hit save it's going to take all of this fancy stuff off of our text Uh-oh not there go back to visual studio code and hit save and now our text changes team So what we can do now is we can go down and we can add some style to our header So we'll just go right underneath our body a couple more spaces. We'll put we'll just add an extra space right there And now we've got a little space for us to work inside of and what we'll do is we'll say Control forward slash and we're going to add a comment and it's going to say style the Header Well, we can make this lowercase. I guess control enter to add a new line underneath that and then we're just going to grab That header header element that we created and we're going to say background Color and we're going to set our background color for that too 666 And this is going to give us like a gray type of color So we'll say save and now our background has turned gray But that's not good enough. We need some padding We're going to set our padding to 30 pixels and we're going to put 30 pixels of padding around all the sides of our header So save so now we got this big padding and we're going to do a text dash A line and we're going to center this text And then we're going to make this text the color white So we just go here on this line control enter and we'll go color Is going to be white Save and now our text is white and let's make this bigger so people can see it and we will go uh, do do do do Control oh, so this is this is the regular size and then i'm going to control shift i to take off my browser tools Actually, we'll close that and so now we've got this whole page and we're going to make our font size font Size is going to be 35 pixels 35 px and save and boom Now that is big. So what we can do Is we'll get rid of this line right here and we'll just go down a little more And we'll add our next styling and this right here. This styling is going to create two columns for our navigation and our Article which is right here team. So we'll go down here and we'll just go We'll add a comment here and we can say create two columns Two columns that floats next to each other ea ch Other control enter to add a line underneath that and we're just going to type nav And In for our nav, we're just going to say flip We're going to float our nav up to the left and we'll hit save and now Everything sort of moves a little bit and it looks real crappy So we can fix that we can go with w id th and we're going to add a width of 30 percent to our nav Which means that our nav is always going to take up 30 percent of the viewport width And if we go underneath our width team And add a height of 300 pixels What we're going to do is we're going to make this 300 pixels high Which is taller than everything else on the page. So everything else just sort of floats up right next to this So if we pretend this is a container of water at the top We have our header it takes up 100 of the width of the page because it's a block level element And then now we have our Our unordered list item, which would typically be that way. But what we did is we set it to float and we gave it a width so What the browser does is it sets the width to 30 percent of whatever the viewport width is at the moment And then when we say float it just pushes it All the way up to the top of the page as far as it can go And it can't go any further than this block level element right here team And everything else just sort of flows in and falls behind that So after we set our height team what we're going to do is we're going to say background Color and we're going to set our background color to Let's see hashtag ccc. This will give us a lighter shade of gray And so now We've got this light shade of gray on our navigation team and actually what we're going to do up here In our now what we're going to do team is we're going to go underneath this nav Pro z pro z. All right, we go underneath this nav. We'll say nav u l So what we're saying is say we're saying hey navigation element We want to target your unordered list. So whatever unordered list is inside of navigation. That's what we're going to be targeting team So what we're going to do is we're going to give this a list style type of none So we go nav u l we go list style type and we'll set that to none And this is going to remove those disks and then underneath that we can say padding is going to be zero safe and now Everything gets pushed off to the uh to the right side of this screen. Well, I mean well to the left side team So what we're going to do now is we're going to go down here underneath our nav And let's just grab these we'll shift tab To get rid of those red lines And now we're down here and we will Grab another element team and what we're going to do is we're going to grab our article element So we right here. We just go article And we add some curly brackets and inside of there. We're going to go float FL oat We're going to float this to the left We'll save and now it just falls to the bottom of the screen because it doesn't Have a way to wrap up around here because we floated it to the left and now it's trying to float to the left But there's something in the way. So what we can do now As we can say padding and we're going to set that to 20 pixels And this is going to give us some padding around our our article and then we can set our width w id th To 70 So we set our other width to 30 percent. We set this to 70 together that equal 100 percent So now everything is going to be side by side team. So let's take a look at this again Show shift z save and now you see what happens to your team. So we'll Control shift z z z bring that width back At our semicolon and save and so now everything has been floated up team But what we're going to do now since we have our width we're going to set another background color on our On our article and that background color is going to be we'll set this to Hashtag f1 f1 f1. This is going to give us a lighter shade of gray And now we have that there team and what we can also do Is we'll give this a height Of 300 pixels. So now it's the same height as the other one And now because the footer has nowhere to float to it just sits right here at the bottom of the page team So what we're going to do is we're going to go down underneath article and we're going to clear these floats So what happens is the footer doesn't go all over the place where we do stuff like this Right, we want this footer to just drop down to the bottom of the page. All right. So what we're going to do as we'll go right over here and Instead of article, we're going to go grab our section element Well, actually we're going to grab the space behind our section element So we'll do a control forward slash to make a comment. Let's get rid of that and make this right So we'll do a control forward slash make a comment right there and we're going to say clear Loops after the column clu mms Control enter and then we will go section and then we'll say after the section element Which contains our nav in our in our article So after the section element What we're going to do is we're going to make we're going to we're going to create some content. So we go content And we'll set our content to just be nothing And we'll save that and now we get a little bit of change for nothing major no big deal And you know this padding up here is driving me nuts So if we go back up to the nav and let's just go padding and we'll go like a 20 pixels And we'll save and now we've got a little space around our navigation. So let's go back down here to our content I mean our section after and so we've got our content right there. Let's set our display to table All right, and so now we've got this table display Control z to get rid of that stuff and Underneath our display. We're going to say clear folks vlt h bam And so now we have we have cleared everything. So what's going to happen is After our section, we're going to create this content is going to be blank We're going to set it to display table. So it's like a It's like a block level element and then we're going to say clear both Which means don't let anything go around this that we just created. So everything that comes after The this content After that comes after the section is going to Bump up against that section. All right team. So we can save that and now we have That handle so the next thing we're going to do Is we're going to go down under underneath here and after our section to clear our floats We're going to style our footer team. So we'll just grab this element and we'll go We'll grab we'll do a we'll add a comment and we'll go Style the footer control enter and then we'll go f o o t e r and we'll add some curly brackets in there And these curly brackets are going to be background color And we're going to set this one to 777 save so we get a darker shade of gray Which is pretty much like the shade of gray we have at the top And we're going to set the padding to 10 pixels 10 px. So this is going to add some space around everything And then underneath that we're going to say text dash align and center Now our text is going to be centered and we can go control enter and we can give it a color of white And so now we have our footer set team and we've got a pretty decent looking webpage right here, but still when we do this Right, you see how this stuff just drops down to the bottom. We've got to fix that team So what we're going to do is we're going to go over here into our footer and start if you guys can't hear me clear enough And we're going to go right underneath that footer and what we're going to do is we're going to add a media query Which will give us the ability To control what this looks like when the window gets smaller than a certain size So right underneath here we're going to have our line. We're going to hit tab We're going to go add media We're going to add some parentheses and inside of those parentheses. We're going to say we want the max width of these elements that we select to be 600 pixels and now we're going to go and we're going to select those elements So we're going to say we want the nav and we want the article And inside of there we're going to say we want the width W ID th we're going to set this to 100 percent We'll save and nothing happens right now and we are going to set our height To auto a u to save and so now what's going to happen is when is when we resize this Everything stacks up on top of one another So check this out team if we go if we go into our browser We hit control shift eyes. It's going to bring up our browser tools. We hit this mobile device deal right here And when we resize this if we watch we can barely see it But if you watch these if you watch right up here, you can see we're at 762 pixels and we can go down down down and check this out if we just change this to 600 enter everything stacks Because the max width is 600 pixels. So anything before 600 pixels We're going to get a width of 100 percent on our nav, which is here in our article, which is there And they're going to be given a height of auto so they maintain their backgrounds And we're good to go team But if we go here and we change this to 601 and hit enter Now everything lines up the way we said it before team So this is how we add some responsive styling When we're laying out a page like this and we can go up here hit this x And then we can hit that x again and that's going to close out all that other stuff and now we're back to Our regular page layout now We have this white border around here and you guys are probably like hey, man I don't want this white border and you might remember this from earlier or a different tutorial that I did online on youtube over at the real castadero or something But in case you didn't what we can do is we can go in here We can say padding and we want to make that padding zero And that's not going to do anything for us right as you can see it doesn't change What this does is it just removes the padding From inside of all elements and then we're adding that padding back But what we also can do is we can go in here. We can say margin And what's going to happen is the margin Around everything is going to be removed and when we want the margin back We're going to have to add it ourselves so we can go margin zero save and now that border goes away because On I believe the body element. So if we grab these two and shift And alt and just move these down control s Because that padding and that margin is on the body and like I said, we don't even need padding So we can save and like that padding. It's not even necessary So we can just control shift k and save and get rid of that And now we have a decent web page that's laid out fairly well team So if we scroll underneath 600 pixels, we get this page right here So imagine right you can make this any color any style you want you can do anything you want team And you can have a web page layout just like this now. This is a basic basic layout what we're going to do Is we are going to everything has been saved. So let's go back over here Let's clear this out inside of our visual studio code and do a get status Uh-oh, let's clear Get status And now we have this file That has all these changes, but we haven't made any commits yet. So let's clear this again We'll do a get branch to see our branches and we're on our initial html branch So we can do a get check out dash b and we can move all of our work over to a different branch And that branch we're going to give this branch a name of We'll go zero one and we'll say initial Underscore css and we'll save and now We've created these new branches. We switch to it and we can check that by typing clear semicolon and then Get branch to show our branches again branch. So now we've got this other branch right here initial css And we've got our initial css branch now what we're going to do is we're going to recreate this style using flexbox So what we're going to do Is we're going to make another branch so we can just go up like this and we can check out this branch This is going to be branch number zero two And we'll give it a dash And we'll say, um, this is styling underscore width underscore floats float s And now we've made another branch for floats. So if we do a Just scroll up a couple times and do a clear and a get branch. We can see we're now on this float So what we're going to do is we're going to make another branch called flexbox with flex underscore box Flex or maybe it's maybe a spell like this flex box. I don't know All right, so we'll hit enter and now we got this other branch with flex box on it And if we do a clear and do a get branch What we have here is We got our master branch that contains all our master code We've got our initial styling Which was our initial c we got our initial html Which is here our initial css which is there and then we've got our styling with floats which is here And we got our styling with flex box, but we named this wrong. It's got a zero two. This should be a zero three So we're going to go Do this and we're going to do a get branch v r a m c h dash m We're going to change this to a three and that's going to change that name to a three. So if we do a clear get branch Now you see we've got one zero one two three So what we're going to do now is we're going to go in and we're going to redo our styling So it is in flex box team All right teams So what we're going to do is we're going to go up into your to our styles We're going to scroll right up to the top and we're going to leave our box sizing border box We're going to leave our body because we just set our font family and our margin And then we get down here into our header We're going to leave our header the same team and then we get into our nav And this is where we are going to start to do things a little different So what we'll do is we'll grab all of this We'll go down To the end of our of our styles I've selected something wrong. So let's go back up here at the top We'll grab all of this right here. We'll actually after our header. We'll grab all of this down here Scroll down We'll take out that media query too. So everything all the way to styles and then now boom here. We are team So underneath our header what we're going to do is we're going to say We'll add a comment and we'll go container for flex Boxes All right, and then we'll do control enter and we will say section And now we're going to grab the section and we're going to say display We need some uh some curly brackets in there. So we'll grab this and we'll put this in there control shift k to get rid of that and now We can We don't want to do that. We're going to say display Dash web kit And we're going to say flex And it tells us exactly what's going on here. So if we go down here to web pick web web kit flex It says the element lays out is content using flow layout block and inline using flow layout Using flow layout block and inline layout, right? So it's going to take whatever styling we have on our on our Well, actually what we're going to do. Yeah, it's going to take the styling that we have initially the element lays out is content using flow layout And that's just saying that that everything is going to flow kind of the way it did in floats, but Floats you have to go in you have to clear float you have to do all this stuff with flex box You don't have to do that and it's got some different styling that we can use so we're going to set this to web kit So it's going to be w e b k i t dash flex Actually, let's go back web Kit and we're going to set this to web kit flex and we'll save and everything just blows up, right? It was a completely completely destroyed team So let let me go back here and let's see we got web kit dash flex and then underneath that we're going to say display Flex and what this is going to do this is going to tell all the other browsers that don't need to know about What we're saying is say hey, but browsers that support flex you're just going to display flex And if you don't support port flex, we're saying hey use this Method in order to display flex team, right? And so what we're going to do now is we're going to go down underneath that and we're going to add a Another comment and we're going to say style the Navigation bar All right, so now we're down inside of our navigation bar team And this is where we are going to start utilizing our flex powers for good. So we'll go over here We'll indent and then we'll say hey nav We want to style you like this and we're going to say web Dash kit no not web dash kit but web kit And our web kit we're going to set to flex so f l e x Ah, come on It should just be flex all right and save and let's get rid of this, right? This geez team. I apologize. I must be getting I must be getting tired or something. All right, so we're going to set this to one And then underneath that we're going to say hey team for microsoft, right? This is Uh edge browser or whatever whatever microsoft browser does not come not support flex flex box We're saying hey for microsoft Right use this method because they don't understand this uh this command that's built in and then we're going to say background Dash color well actually well, yeah, we'll we'll go background color and then we can say uh asterix And we'll set this to uh ccc and we'll go save And now we've got this styling here and we've only we're only using one um One section of the flex box and what we'll do and we'll talk more about that later But what we're going to do is underneath our nav We're going to go grab actually before we do that. We've set our background color. Let's give it some padding pa d d i and g And our padding we're going to go 20 pixels Save and now we've got a little padding around there. So we'll go here underneath our nav and we're going to style our lists Inside of that nav. So we're going to go style that u l So let's add a comment and we'll say style s t y l e style the list inside Inside the menu Bam control enter to go to the next line. I'm going to say nav u l and then we're going to add some curly brackets team We're going to go list dash style type. We're going to set that to none. It's going to go. Uh-oh control z go control enter to make a line underneath that we're going to set our padding to uh zero Save so now we've taken away that we've taken away the bullet points And we've removed that padding just from the u l items. So now things are lined up a little bit better Now what we're going to do team is we're going to go and we're going to style our content So we'll go down here and we'll say hey, we'll just add another comment in there. We're going to say style uh the style of the Content team control enter and underneath there what we're going to do is we're going to do what we said We're going to style our content. So we're going to go r to go and now we've got our Our Our Well, this is yes. Yes. So our article is right here. So we're going to style this all up team my bad I got a little confused. So We got our curly braces inside of our curly braces is going to go web kit And we're going to set this to is going to be flex And so what is it web kit web kit flex? Oh, and we're going to set this to A three safe and now check this out team the article only takes up three of these pieces So what happens when we say hey, yo team? We want to use one here and we want to use three here The browser knows because we gave it this code it says hey, we're going to break this into four pieces And we're going to use one piece for the nav and we're going to use the other three pieces For these other three parts team. We could do this for five and it would just change the size of that nav So if we went in here and did that save now the nav gets a little smaller, but this is or we could go we could say uh Here let's put a five save All right, and so that's how small it gets or we can say we want the three save well on web kit flex web kit flex. Yeah three we could go four Or we could go five and it's what it's doing is just adding more space. We go two Right, so whatever we want to do right team, but we're going to set this for three and then Underneath there where we have that set. We're going to do the same thing for microsoft so go mx ms I'm sorry team ms flex and we're going to set this to three And that's not going to do anything because we're just saying hey and microsoft browsers do that And the reason why this works in this browser is because mozilla uses web kit. Ha ha team Okay, so we're going to go down here or fire fire fox uses fire fox uses uh Uh Uses the web kit code And so if we go onto the internet, we just type web kit We can learn all about what web kit is and if we go here to web kit.org It will tell us a fast open source web browser engine, right? And so fire fox is using an open source engine All right, so we can close this and we can go back and inside of our article team We're going to say flex and this is where we just specify a regular old flex So what we're doing here basically is we're making our page backwards compatible In all modern browsers, it's going to display flex, but in older browsers It's going to have to look at these special criteria and then it will display based on those team All right, so now we've got our flex. Let's set our background Color and we'll set our background color to hashtag f1 f1 f1 And now we've got this sort of lighter gray color there And notice we didn't have to do anything. We had to do we didn't have to do no clears or nothing, right? It things are just sort of Coming together team and so we've got our background color Let's go padding and we'll give this a padding of 10 pixels on all sides make things look a little neater Boom, there we go team now. We can go underneath our article element and we can style out our footer So let's do that right now team. So let's go down here. Let's grab the footer element Add some curly brackets and we're going to go background Color and we're going to set this background color to 777 save and now we've got our footer back And underneath there what we're going to do underneath our background color. We're going to set our padding to 10 pixels to px and save And notice I didn't put a space there. We don't have to put a space But it just makes things look a little better if we do completely your preference or the preference of whoever you're working for team Right, so we got our padding. We're going to do a text. We don't want to do a text emphasis We're going to do a text align a l i g in and we're going to center that text We're going to do a control enter and we're going to say the color is going to be white and Save and now we've got our footer in the center of our page team and we just styled this whole thing in flexbox In less time than it took us to do it in the other thing Now check this out We can't go all the way down and do this crazy stuff because flexbox keep us keeps everything from just falling on top of Each other and looking all nuts, but we still want this stuff to stack up when we're in a mobile device, right? We don't this doesn't look good, man So we're just going to bring this back out. We'll just Drag this back out to the side of the window And then we'll go down here And inside of here, we're going to add our media query again team. So what we'll do is we'll go Enter our cursor right there and we're going to go At media to add our media query going to add some parentheses right there and inside of these parentheses. We're going to say max dash w id th We're going to set that for 600 Pixels it's going to do the same thing that it did before Then we'll just put some attributes in here team and we're going to say Just for this section. That's all we're worried about And I think I messed this up right so we don't need this piece right here fam We don't need that and no we do need that. What's going on? Yeah, we're good. We just got to add some stuff in here. So we're going to go web Dash well, we're going to go web kit web kit dash flex and Well, it's going to be flex direction. So we'll go web kit flex direction Direction And we're going to give it a column So we're changing the direction of flex box And this is going to work for hold on. Let's see web kit section Yeah, so I spelled column wrong All right, there we go. That looks better. Now we go down here. We're at another line and we'll say flex Dash direction and our flex direction is going to be column and we'll save And what this does is it's got when we change the flex direction It's going to say hey display everything at 600 pixels. We're just going to move this into a column layout So when we get under 600 pixels and again how to check this out, we can just we can just do this team We'll grab this window. It's on the side. We'll hit windows up a couple times make this full screen control shift i to bring up our browser tools and we can just drag these out a little bit and we'll grab this mobile device right here And we'll set this for 601 pixels and this is what it looks like until we get to 600 pixels 600 And then boom everything stacks up adjusts of the way it did before team so we can go back You can close all this stuff And now we have two complete layouts and what we can do is we can go back over here to visual studio code And we can do a get Status and look at what's going on here team. We've got a modified index dot html But we are on our flex box branch. So we'll just do a get commit dash m And we can say Uh, actually not a get commit dash m. We'll do a get add all And then let's clear this out and we'll do a get commit dash m and that get commit what we're going to do is we're going to say that, uh, You know flex box styling so we'll go Styling with flex box Bam and we'll go enter and now we'll do a clear and we'll do a get status And now everything's committed. So when we do a get branch We can see we're on our flex box branch and everything style with flex box now We can switch back over to float. So check this out team. We're just going to go grab this We're going to copy it And we're going to we copy by right clicking and we're going to go get Check out We'll just paste that and hit enter. Oh, what's going on here team styling with floats Actually what we can do is we'll go, uh We can merge in our initial css to this. So we'll do a get merge and we'll go initial CSS enter already up to date What branch are we on let's see clear get branch styling with floats Get check out And we'll double click that right click right click enter And now we've checked out our initial css. Maybe we clone this from master Right, maybe so let's see get check out Master What's going on here? What's the deal team? All right, so let's Oh, I think I think the page was an auto refreshing right so what we'll do Let's do a get branch And let's do a get check out with floats So we'll copy that we'll do a get check out We'll just paste that in and hit enter What have I done wrong? Let's do this So we just came so well, hold on clear get branch And now we're on our styling with floats Our initial css. Let's let's refresh this real quick and let's go back to our initial css All right, so get check out Paste enter And we'll refresh this and our css isn't there. What's going on man clear get status I think I I believe that the problem is is that I didn't make commits before I made these new branches So I apologize team. I'm gonna clear this out clear And let's do a get branch All right, so let's go back to our Initial html. So we'll copy that and we'll do a get Check out Refresh that over here. All right. So here's our initial html No styling and the first styling that we have is with this flex box. So if you do a get Check out the initial styling with flex box enter and now we switch. We got our flex box styling But we don't have our float styling team. I messed up. I messed up get check out And let's go check out these floats yet. All right, bam enter to see flex box flex box Yeah, kind of messed that all up team, but anyway You have seen exactly how to do it. You've seen how to create a layout using floats in flex box And here's the deal to be honest, right? I don't I don't believe You need to use floats anymore because as you can see flex box has browser support. So what we can do is we can go browser support su ppor t This should bring up a web page that shows us some browser support. Can I use there we go? This is the website I was looking for and so up here we can go flex box and as you can see A gap property for flex box css flex box layout module and these are all the browsers is It will work on right so we don't have to worry about floats too much But if we're making stuff for older browsers, right? What we want to do is we go We'll come over here to can i use calm Conduct a search for what we want to try and see what browsers it supports So if we're writing stuff specifically for like an older version of ie All right ie 6 through 9 not going to work team and then it tells us what we need to do to make it work So flex box right here is not supported. It tells us when it was released Um, and then it'll walk us through the the things that we need to um, actually it doesn't say it up here Justified content. Let's see Global oh and then it actually gives us the usage too so 0.22 percent So not a lot of people are using internet explorer 6 through 9 based on what these guys see from people going out And searching on the internet. So we're at about 94.69 percent adoption rate for flex box team But again, you should be able to use these um those poly fields that we talked about like when we go down here And we got the web kit and we got the microsoft. That's just sort of that that should fix that issue team so we can Uh, oh, I didn't mean to do that How do we let's go control oath to open this back up? BAM now we got our now we got our file back But we can go over here We can close this and that is how you do basic layout and styling using flex box CSS and floats team. All right team. That was it. It is me your biggest fan the real castadero I want to thank you for hanging out with me here team And if you like that content, you're gonna hit that like button So youtube knows to show this to other aspiring Developers and coders that want to learn to code for fun and profit team And if you want to support this channel head over to the code 365 start-up lab Dot com where you can sign up to get courses that go in depth on html CSS and javascript and how to build your own Websites and web applications for fun and profit team I look forward to seeing you there and I look forward to seeing you in the next video until next time team Keep building keep learning keep teaching. Let's get out here and code for fun and profit