11. Flexbox refresher and setting up some HTML - Responsive CSS Tutorial

Key Takeaways

all right so let's get into responsive layout basics using flexbox before we actually start making the light which we will be doing in this video just a refresher on flexbox so elements normally have a display a block or a display of inline as their default from the browser so display block would be are things like our divs or header our footer or main are each one all the way to h6 our paragraphs our lists and list items are also included in that and we have our inline elements like are a strong M and span so those ones stay in the flow with the items that are around them we are going to be using dibs for our columns and we can't you know because divs are blocked they are going a hundred percent of the width but they're also even if we change that even if we say they're ten percent width they're still gonna stack one on top of each other we can change this behavior by setting the display property to flex on the parent element when we do that it changes the behavior of all of its direct children so if we have something that looks like this so this is say a section of content and then inside that section we have for dibs like this if we set display flex on that parent section the items inside of it will turn into columns automatically so they'll switch and they won't stack they'll also no longer be 100% width they're gonna shrink to fit the content that's inside of them on the horizontal axis so it's very very different but it's also very easy to do so we're gonna practice with this layout here it's not the most beautiful layout but it's going to bring us into being able to do some fantastic stuff because if you see here we are looking at how we can do this for a big screen but we're also going to get to the point where we can make this work on a small screen as well we want it to work on both there's a lot of interesting things that are in this layout so we have content that's stretching the full size here we have three columns here we have two columns these two have different colored backgrounds on them this one is bigger than those two and this one's even bigger than that so how can we do this how can we set it all up to be the right sizes and they get spacing between them and get all these different things that we need in here so we're gonna be doing all of this not in this video but over the course of the next few videos but we're gonna sort of set the stage with the HTML in this one we're gonna be ignoring the mobile layout for the moment we're gonna focus on how we're gonna set up our columns and organize it the this is the most important thing now is how is this content organized the hardest thing to do with the layout is when you look at it just breaking it down in how you're going to organize it where do you need it if where are all the different pieces going to fall it's not super easy at the very beginning the very first thing is all of this is being held in the middle of the screen with a certain size on it in the last module we had three containers because we needed backgrounds that were full size in this situation we don't need that so we can have one single container for all of the content on our page and that container is now this light pink background but what we also need is we need to create some columns so I'm going to put a div of columns here and I'm gonna have a div of columns here that's going to have these so once we have those columns in place then we need to create individual the individual columns so I have this here is one columns and then another you'll also see these often and there's a popular framework called bootstrap that will say row so that's a row of content with three columns inside of it so we have our you know we've a row of content or my columns container I'm gonna call it columns because it's my columns container and then inside my columns container I have three individual columns and then over here I have this big one that's net display flex and then it's gonna have two of them inside of it so this is sort of the structure of my site when I'm breaking it down visually the reason I know that I need to have these green boxes and the for each individual column is because if not if we didn't have those and I just put my all my h2s and my paragraphs directly in the columns parent then all each individual paragraph and each h2 would become its own column they would each break off into their own things they wouldn't keep they wouldn't stay organized so when we look at something like that we have to visualize where each individual column is so we can organize it properly and in this case this is how I'm gonna be organizing it so I'm gonna leave this here and I'm gonna see if you can go ahead and do it I've already set up the file I've linked to a style sheet that has nothing in it I've given you all the text so just organizing it look at this picture and go based on what you see here so go ahead and do it if you don't want to copy and paste all the text at least make the structure like you've seen me do in previous videos where you're putting in all the elements and then I'm gonna go through and do it as well and I'll bring the text in so if you don't want to bother copying the text back and forth you don't have to but if you want to go through the full length by all means go for it I'm only gonna do that in this video in the next one we're gonna start applying the CSS to it but if you want to jump ahead and just try and do the whole thing on your own go for it in the next video though I am sharing the colors the exact colors that I'm going to be using and the font sizes but if you just want to estimate and try your best to get it to work based on what you've learned so far go for it by all means but if you're not too sure on the Flex box thing it's been a little while you can wait for me so let's jump into it right now so here in my body as I said I'm gonna start with a div with a class of container which is just going to hold all of my content now we could in this case actually set a width on the body and I tend to try and avoid doing stuff like that because all of a sudden the somebody wants to come in and add like a new section to your site that's actually full width and then you go oh man I have to change so much content have to change on my markup so I like having a container or a wrapper that's going to contain all of my content and not touch the width on my body personal preference there but I like thinking ahead and thinking things are always changing so I don't want to run into any problems in the long run in my container I need my h1 and I need my image so that's gonna have an SRC on it and an alt on it and then we can come down and start doing the rest of it need our two parent column containers so that was what I said I would call columns so div class equals columns close div and we're gonna have two of those so you can copy and paste that or just write it all out depending on how fast you can type and there we go we have the basic structure now inside of this column I'm going to have three actual columns so I'm going to do a div class equals just Co l cuz it's faster right and we can close that div and I'm going to take that and we need three of them inside of here and I'm gonna take that same thing here and I'm gonna have two of them over there so that is sort of the basic like actual structure of my site right now the different pieces are in place obviously I need to put the content inside of those columns but from a structural point of view this is all of my layout stuff like this is my main layout items that I put into place now it's just adding the content to those to the layout parts of my markup so let's go through and do that really quickly so here it would be an h2 followed by a paragraph I'd have the same thing in the next one except in this case we actually end up with two paragraphs and then my last one we just have a single paragraph all in its own which is the exact same thing we have here and we can copy this one and bring it down there because that is what we have we have h2 paragraph this is an h2 with two paragraphs this is just one big long paragraph and h2 with a paragraph and then our individual paragraph there so now we not only have the structure of it but we have all of the content elements in place we just have to place the content actually in there I'm not going to do that in this video when you start the next video all the content will already be there all of the colors and font sizes will be on a slide in that video so if you want to jump to there now you'll be able to try and do all the styling and all of the content will already be in place for you