CSS Layout: Flexbox & Grid Basics

welcome back to the bootcamp series congratulations on making it to part three i think this video should be a lot of fun because now at this point you and i speak the same language or i should say languages we both speak the basics of html and css meaning at this point it's going to be less about the technology and syntax and more about designing something that actually looks good so in our previous video we learned the basics of css and this allowed us to add color and control the font size so on and so forth but we still had a very 1990s looking layout where it was just single column and every element took up the full available width instead we want multiple pieces of content to be able to sit side by side together so here's a sneak peek preview of the finished product of what we're going to build together i think we can all agree this looks a lot better than the page i created in the previous lesson anyways without further ado let's jump into the action so we just saw the finished product but now it's time to build it together so let's start from scratch i want you to follow along with me from the codepen website let's start coding or create a new pen okay so we have a completely empty canvas let's get started let me look at the reference design so let's focus on this dark purple area up top first essentially it contains our logo text in the left corner and then a few navigation links in the right corner so let's write the html for that so i will start with a heading level one that says our logo and then below that i'll have an unordered list with those few navigation links so ul for unordered list inside it i'll have each one be a list item and let's see the three links were home about and portfolio now in html to create a link that you can click on to go to a new page you use the a element which stands for anchor so a tab the href value is where you would go if you actually clicked on the link we're not going to actually set up any separate pages so i'm just going to have a placeholder hashtag value okay but then in between the opening and closing a tags that's where you include the actual text that you click on so let's say home and then i'm just going to copy and paste that line for the two other links so they were about and portfolio okay so down here we see that we have the raw content now let's start worrying about the actual design so for example we noticed that the top header area should have a dark purple background color or in other words we don't just want the entire page to be dark purple we just want that top section with both the logo text and the links to be purple now in order to group these two things together right the logo and the list i'm going to introduce you to a new element type in html so check this out up at the very top of our html i want you to type div so d i v and then hit tab so we now have an empty div element div stands for divisions you can think of it as a section of the page and now we can drop down right so we have an opening tag and closing tag and now we can nest other content inside it so what i'm going to do is just select both the heading level 1 and the unordered list and just cut that into my clipboard and then just paste it to live inside the div now in terms of staying organized you can see the indentation got messed up when i pasted that so to fix that you can just click this arrow here and click format html so now notice it properly indented the list to show that it is nested or that it lives inside the div anyways the reason we created this div is now we can give it the dark purple background color let me show you what i mean so on that opening div tag we can give it a class so class equals quotes we can make up any name we want but why don't we call it header okay and then in our css column we just want to target that class of header so to target a class you begin with a dot or period and then the matching name so dot header curly brackets and let's say background dash color colon and now i want you to type this color value in with me and then in just a moment i can show you where it came from but let's say hashtag 28 35 93 and then end the line with a semicolon now if we take a look at the preview notice the entire page is not the dark purple but just sort of this area that has both our header and our navigation links now really quick before we move on and adjust the layout of this content i did want to show you where i got this color from so we already learned that you can google for color picker and choose any color you want but sometimes you could use a little bit of inspiration or help choosing an exact color so in a new tab if you search for material design colors you should be able to find this page it should be the first result and then if you scroll down towards the very bottom of this page you'll see all of these different colors that you can choose from so in particular for this design i chose this indigo color and then it gives me all of these different shades or variations of that color and here are their hexadecimal color codes so i just chose different shades of this color for our design so that's where the colors came from in case you were wondering okay let's get back to the task at hand right we're trying to make this content look like this so first let's make both our logo and our links white so we can actually read them against this dark purple background and then let's worry about having them sit side by side so within our css within this header rule we can just add a new line and say color colon and then you could just say white or the hexadecimal color code is hashtag and then six fs now since this particular color code is just repeating you actually don't need the final three f's you can just say hashtag fff okay so that changed the color of our header and the bullets for the bolded list but the actual links are still blue to change the color of a link you need to target them specifically instead of targeting their parent and expecting it to trickle down so why don't we go ahead and give our unordered list a class so on the ul tag let's say class equals navigation or let's just say nav for short okay then let's create a new rule and say dot nav space and then a curly brackets now this is a new type of selector that we did not see in the previous lesson this is called a descendant selector so first of all this dot nav that's a class selector we're familiar with that but then we added a space and now essentially we're just saying we want to select any a elements that live inside or are nested inside an element with a class of nav okay but inside this rule we can just say color hashtag fff next we don't want the links to be underlined right if we look at the reference design these links do not have underlines so when you're selecting an a element you can just say text dash decoration colon none okay next let's remove the bulleted icons so to do that i'm going to create a new rule say dot nav right that's our overall unordered list element and then just say curly brackets and then say list dash style colon none okay and while we're at it in this rule i also don't want this margin or indentation on the list so within this same rule i can just say margin colon zero and padding colon zero okay now this is starting to look a little better but we still have the situation where each piece of content is sitting on its own line so this is where we get to the interesting part of the lesson right if we look at the reference design we want the navigation links to sit on the same line as our logo element so how can we make that happen well remember we created a div with a class of header and both of those two elements live within that div so check this out up at the top of our css when we are selecting the header div or just any element that has a class of header after our background color and color but still in those curly brackets let's add a new declaration and let's say display colon flex semicolon aha this is what we wanted the header and list are now sitting side by side so essentially when you tell a parent element to use display flex it's going to try to align all of its direct children elements to be on a single line now that is what we want right them on a single line but we don't want the navigation link to be right up against the header instead we'd want the navigation link to sit on the right edge so check this out on our parent element here right after display flex we can just say justify dash content colon and then give it a value of space dash between semicolon perfect so now any of the remaining available space will be placed in between the direct children so for example if we had a third direct child of that header element so if i had a paragraph here that just said hey well you can see it's placed in the middle so the parent is distributing the remaining space evenly between our different pieces of content so we don't actually want that paragraph let me get rid of that okay next we don't want the navigation links to sit one by one instead we want those to sit side by side as well so check this out in our css we already have a rule where we're targeting the navigation ul right the unordered list element so within that rule we can just say display colon flex perfect this works because if we look at the ul well all of its direct children are the list item elements so it's going to attempt to align them all on a single line next notice that the header is taller than the links so the header appears to be centered but the links are up in the top corner so instead we'd want the links to be vertically centered within the parent element to do this we just go back up to our header rule right because that's the overall parent element that's aligning both the header and the list and right after this justify content declaration we can just say align dash items colon center perfect essentially this property controls the alignment along the primary axis so horizontal by default and then this property controls things along the secondary axis so by default that's vertical now when we set the display value to flex this is a topic in css known as flexbox and these are flexbox related properties now flexbox is an incredibly deep topic and you could create a 20 part video series just on flexbox but i want to keep this particular lesson moving forward so that's all we're going to cover on flexbox in this video however remember when i said you could create a 20 part series just on flexbox well the brilliant wes boss has already done exactly that so in the description of this video you'll find a link to some of my favorite videos on youtube where you can learn more about flexbox and flexbox related properties i've also created an entire video on youtube just dedicated to flexbox so if you're super interested in aligning content be sure to check those links out anyways let's keep moving forward with our design so next i want to get rid of this awkward white border or edge we see around the content right if we look at the finished product the dark purple header sits flush against the edges of the web browser so to fix that in our case up in the css up at the very top let's just create a new rule where we target the overall body element which is sort of the page as a whole and just tell it to have margin zero cool so now our purple header sits flush against the browser edge next why don't we add a bit of horizontal padding to our purple header so that our content doesn't sit up against the very far horizontal edges so within our header rule let's just add a new declaration say padding colon and let's say 45px semicolon now i think that looks good horizontally but that's way too much extra padding vertically so we have a few different ways we could handle this instead of applying padding in all four directions top right bottom and left we could just say padding dash left 45 pixels and padding dash right 45 pixels right and that does the job or there's also something called shorthand in css where we could say padding colon and then just work in a clockwise direction so on the top we don't want any and then going in clockwise motion the next corner would be the right edge so 45 pixels on the bottom 0 and on the left 45px right so clockwise top right bottom left or better yet we could just say padding 0 45 px so when you provide just two values the first is used for the vertical top and bottom and this is used for the horizontal values okay next why don't we add a bit of horizontal spacing in between the different nav links so i'd probably write a new css rule that targets any list item inside of our list so down at the bottom here i'd create a new rule say dot nav look inside it for any list items curly brackets and i'd probably just say margin dash left 20px cool next let's use a custom font instead of this browser default times new roman so in a new tab if you visit fonts.google.com the font that i'm going to search for is named source sans pro here it is so i'm just going to click on that out of all of the different weights and styles i will choose the regular 400 and then i'll choose italic and then instead of semi-bold i'll jump down and choose the bold 700 and i don't need the bold italic because how often will i really use that and the fewer font styles you include the quicker the download will be for our visitors so just regular italic and bold then i can click embed okay then i'm going to select this bit of html that it gives me copy that into my clipboard back in codepen up at the very top of our html area just paste it in okay now i want to use that custom font globally on my page so within my body rule in css i'll just say font dash family quotes source sans pro comma sans serif cool i think that looks a lot better next let's add a hover effect for when you mouse over one of these navigation links if we look at the reference design you can see that they turn purple a very light purple and they sort of rotate a tiny bit clockwise so to make that happen let's start with the color change so to begin let's find the css rule for those a elements so we already have a rule for nav space a right below that let's make a new rule let's say dot nav space a and this is the important part colon hover and then curly brackets so the colon hover attached to the a is our way of saying only apply these styles when this element is being hovered so now we can just say color colon let's go with hashtag c5cae9 let's test this out perfect let's also animate or transition them a bit so they rotate a little bit clockwise when you hover so in this same hover rule let's add a new declaration and say transform colon rotate and then a pair of parentheses and let's just say 6 degrees so 6 d e g be sure to end the line with a semicolon now i believe on its own that won't do anything and that's because we need to tell the base rule so just the nav a rule we need to tell them to be a block level element so display block now if we try to hover over cool you can see they rotate however we don't just want them to go from not rotated at all to fully rotated in one millisecond instead we would want it to gradually sort of transition or animate so on this rule where we just said display block for the nav a not the hover rule but just the base a rule let's say transition colon and let's just transition all properties over the course of 0.3 seconds and instead of the animation occurring at a linear rate let's say ease out so it sort of gradually slows down towards the end of the animation so now if we test this out cool i think that looks nice at this point our dark purple header area is complete so let's change gears and look at the reference design and now let's start working on this area so right away i noticed that it uses a light purple background color and so we don't want the entire body of our document to be this purple color so what i'm getting at is we're going to want a div element to store the headline paragraph and this button link right and that way the overall div element can have this light purple background color let me show you what i have in mind so let's jump back into our html okay and after our unordered list navigation and even after this closing div tag for our purple header so below that let's just add a brand new div so div and then tab on our keyboard and let's give it a class of so class equals quotes we could name it anything but why don't we name it hero okay now inside the div let's have a heading level one so h1 tab and say welcome to our site below that let's have a paragraph so p tab and why don't we just say lorem and then hit tab for a bit of placeholder text and then below that p let's have a link so you can just hit a and then tab for the href value let's just say hashtag or placeholder inside the opening and closing a tags let's say learn more okay let's take a look at the preview so there's the raw content now it's our job to turn this into this so let's start with the light purple background color let's write a new bit of css so down at the bottom of my css i'll create a brand new rule and target so dot hero right i want to select that new div curly brackets let's say background dash color colon hashtag c5 ca e9 semicolon okay and while we're at it let's also give this div a bit of vertical and horizontal padding right so that way the content doesn't sit up against the edge so right after background color let's just say padding colon let's give it 60 pixels vertically and 45 pixels horizontally okay so that gives us this and i just zoomed out a lot to simulate viewing this on a large desktop monitor i did this because i want to bring your attention to a very important point so let's take our paragraph for example well the human eye does not want to read this many words per line it's very fatiguing on your eyes to have to scan this far across without a break where you get to drop down to a new line this is why if we look at the reference design i did not let this content just span the full available width of the screen instead you'll notice i'm centering it horizontally in the middle so let me show you how we can set that up now our first instinct might be to go into our hero rule and just say width 600px right and you'll notice that does restrict the content to be 600 pixels wide so now the human eye can read this text a bit easier however we absolutely do want the light purple background to take up the full space we just don't want the interior content to take up the full space so let me show you what i would do in our html within our hero div i would just select the h1 the p and the a so all of the content inside the div let's temporarily cut that into our clipboard so we can get it back in just a moment okay and then directly inside the hero div let's just have a second div so div tab and let's give it a class of so class equals quotes let's call it hero dash inner you could name it anything that's just what i'm calling it okay and then in between those opening and closing div tags just paste in your clipboard okay so now let me show you what we can do so we don't want to restrict the hero to a certain width so back in our css let's get rid of this width 600 pixels on the hero cool so now the light purple takes up the full width just like we want and now let's just create a new rule so brand new rule dot hero dash inner curly brackets and this is where we can say width let's go with 760px cool so i just zoomed out again so now we have the best of both worlds right the light purple takes up the full width but our actual content is in that inner nested wrapper or inner div and it just takes up a reasonable amount of space so the human eye can actually read one of these lines of text and then it wraps down to a new line however if you remember in the reference design this content here should be horizontally centered within its parent container well to achieve that we can just use flexbox so check this out on our hero rule not hero inner but just hero let's say display flex okay now that on its own won't do anything but if we also say justify dash content colon center well that gives us exactly what we want now before we begin styling this content right we want to make the learn more button look like this and also make a few adjustments to the text here before we get to that i do want to point out something very important when it comes to mobile devices like phones or small tablets and that is so if i zoom back into a normal ratio well we set the inner width to be 700 760 pixels however what if someone's device is not even wide enough to display 760 pixels so if i zoom in super far in my browser to simulate a small device like a smartphone notice that we see a horizontal scroll bar now as a web designer i would say 95 percent of the time we want to avoid horizontal scroll bars at all cost the reason this is occurring is because the device size is less than 760 pixels so when we gave that inner div that width well it's now forcing horizontal scrolling let me show you how we can fix this right because we absolutely don't want users on smartphones to have to scroll horizontally to look at our content so what we can do on our hero inner instead of giving it a width of that amount we can just change this property to be max dash width so big picture we just change this from width to max width so that gives us the same effect on screens that are large enough to actually display pixels however if i zoom in again to simulate a tiny device notice we don't have the horizontal scroll bar so this lets the content squish down to be whatever size it needs to be to fit in a tiny viewport so this is great but by saying max width we're saying that even on a super large desktop monitor you're not allowed to be larger than 760 pixels okay moving forward let's begin styling this actual text content here let's start with the heading so in the reference design notice that headline is not bold so back in our code in the css i'll just add a new rule down at the very bottom so i'll begin by selecting our hero div and then i want to look inside it for any heading level ones currently brackets and let's just say font weight normal right we don't want it to be bold let's give it a custom size so font dash size for rem semicolon and i don't want there to be a ton of space vertically between it and the text below so i'll just say margin zero okay looking good let's focus on this paragraph text here so in our css i'll add a brand new rule so dot hero and then look inside that for any paragraph elements curly brackets i will increase the font size a little bit so font dash size now one rem is the standard or default size so if i want to increase it just a little bit i can say maybe 1.18 rem okay looks good however what if i want to increase the spacing in between each line of text right so within the paragraph as it wraps down to new lines how do we control the vertical spacing well we can just say line dash height and i'll give it a value of 1.6 cool so now you can see there's a bit more spacing in between each line and i think it makes it easier for the human eye to read a large block of text this way i will point out that line height is a bit unique in the sense that we do not need a unit of measurement after the number so it's not 1.6 pixels or rem it's just 1.6 so you could set it to anything you want instead of 1.6 i could say 2.5 and notice now the text is very spaced out i think 1.6 is a nice happy medium okay next let's focus on the learn more link now in the reference design we want that to sort of look like a button instead of just a bit of plain blue text that's underlined so first let's ask ourselves how would we want to select that element in our css i wouldn't just want to select any link inside the header because what if we had a link in this paragraph of text so instead i'd want to give this maybe a specific class so in our html here's that learn more link let's just give it a class of so class equals quotes maybe just button you can choose any name you want you just need to remember it okay now over in our css let's create a brand new rule that targets dot button currently brackets so if we look at the reference design let's start by giving it a dark purple background color so inside button background dash color colon hashtag 3949ab okay instead of the text being blue let's make it white so color colon fff let's remove the underline of the text so text decoration colon none let's give it a bit of padding so the background color expands a bit beyond just the text edge so padding colon let's say 12 pixels vertically and maybe 20 pixels horizontally okay let's round the edges so instead of just a harsh rectangle they're curved or rounded a little bit so we can say border dash radius colon let's try 8 pixels cool i think that looks nice why don't we bump up the font size just a little bit so it matches this paragraph text so you can say font size 1.18 rem okay and finally i'm noticing that there should be more of a vertical gap between the paragraph and our button now by default paragraphs in html do have margin vertically however the reason we're not seeing it here is because a elements or link elements by default are inline level elements instead of block level elements essentially a block level element is just something that takes up the full available space and is regarded as something that should sit on a new line by default however a link is not like that right because you would maybe want a link in the middle of a paragraph block of text and you wouldn't want that link to cause a line break so that's why the paragraph is not able to successfully have its margin bottom push down before this link element begins however in our css for that link button if we just say display block well notice now we do have a bit of a vertical gap between the paragraph and the link but because this is now a block level element it tries to take up the full available width so to get around this we can say display inline dash block this is great in situations where you want an element to respond to the vertical margin of its neighbors but you don't want it to take up the full available width it's sort of a hybrid between inline and block okay at this point we've completed this light purple area let's look at the reference design so at this point let's change gears and start working on this area if i scroll down to the very bottom you'll see that the footer area has a white background and this area actually has a super super light purple background also if i zoom out to simulate a larger desktop monitor notice that we don't want the content to be spread out across the full width which might be hard for the human eye to scan across on a large large monitor instead we want to center it in this middle maybe 1200 pixels at the max but we do want the full width of this area to have that light purple background color so let's get started back in our html and code pen down below all of our other html let's create a brand new div so div hit tab let's give it a class class equals quotes you could name it anything but let's name it features and then inside it let's have another div and its job will be to limit the maximum width so div tab let's give this a class of so class equals quotes features dash inner okay now inside that div let's start adding multiple features so if we look at the reference design i'm just considering each one of these a feature so each one is just a div that has both a heading and then a paragraph so back in our html inside this inners div let's just say div hit tab let's give this a class of maybe featured dash item and then inside it let's have a heading level three so h3 tab and say cool feature number one and then below that let's have a paragraph inside the p tag just say lorem okay and then let's just copy and paste and duplicate this featured item div right because if we look at the reference design we want nine of them right one two three so on and so forth so i'll just select the div with the class of featured item here's the closing copy that into my clipboard and then below it just hit paste below that hit paste and then we can change the numbers here so cool feature number one this should be cool feature number two and cool feature number three for good measure let's add another one just so we have at least four featured items so it would be after this innermost div there should still be these two closing divs for the two wrappers and then right here just paste in one final one and let's say cool feature number four okay so now if we look at our preview area here is that raw content so now let's add the super light purple background color to the entire area then we want to center all of it sort of in this middle area and then finally we want to set up a three column layout for the features right as opposed to the default behavior of each div just taking up the full available width let's get started so first let's begin with the light purple background color for this entire area so at the very bottom of my css code i'll create a brand new rule and say dot features curly brackets let's say background dash color colon hashtag e8e semicolon cool there we can see the light purple taking up the full available space let's give that div a bit of padding so i'll say padding maybe 60 pixels vertically and 45 pixels horizontally okay next now let's focus on that inner div so that instead of this content taking up the full space even on a wide monitor instead maybe we'd only wanted to take up sort of this middle area right about here so in our css let's create a new rule and target dot features dash inner curly brackets let's say max width let's go with 1200 pixels okay now that on its own does restrict this area but we would want this to be centered horizontally instead of left aligned now we did see earlier that you can use flexbox to center something horizontally however in this case since it's just a simple layout of one item that we want to center i'll show you a really simple way so we don't even need to worry about the parent item we can just target the exact item that we want to be centered right after max width we can just say margin zero auto so this is the vertical value this is the horizontal value and if you give both the left margin and right margin a value of auto that will horizontally center it cool so now even on a super wide monitor it's only going to take up sort of this middle portion of the screen but it's flexible and it won't cause horizontal scrolling on small devices at this point let's get to the truly interesting point of this entire lesson and let's learn how to set up sort of this three column layout that we see in the reference design now to achieve this three column layout we absolutely could use flexbox if we wanted to however i think there's an even better tool for the job and it's something in css called grid so check this out back in our code pen we're going to focus on this div with the class of features inner because it is the direct parent of all of the elements that we want to align as columns so do this with me within our css within the rule for features inner let's add a new declaration that says display colon grid okay now that on its own doesn't do anything but check this out if we also say a new declaration grid template columns and those words are separated by dashes so it's grid dash template dash columns colon and let's just say 300px and then a space and then 200px semicolon well take a look at what's going on so essentially our first item is taking up 300 pixels of width and then our second item is taking up 200 pixels of width now in our grid template code here for columns we only listed two values so then our third and fourth items they just start over right so the third item takes up the 300 pixels and then this one takes up to 200 pixels if this doesn't make sense yet that's okay instead of this value of 300 px and 200 px what if we said 33 percent space 33 space 33 percent well now all of the direct children they're each going to take up 33 percent of the width 33 33 and then the fourth item since we only listed three columns here right the three values represent three columns our fourth item or fourth div it just starts in that first slot for each row if we wanted all four of them to sit on a single line we could say 25 and just spell that out four times there we have it okay so the idea is you can get really creative and you can achieve any sort of column layout you want if you say 25 percent space 75 percent well it's going to use whatever split or ratio you describe and then your next set of items are just going to be automatically placed into that grid for each row now in our case if we look at the reference design we want a three column layout so our first instinct might be to go with the 33 percent 33 and 33 percent however that doesn't leave any space for margin in between each column right because we're already taking up 99 of the width so for example if we add another declaration of grid dash column dash gap colon and let's say 45 pixels well that does indeed give us a 45 pixel gap in between each column but notice now i have the dreaded horizontal scroll bar you might not see that horizontal scroll bar if you're on a large desktop monitor but if you zoom in your browser by pressing control plus or command plus you can simulate a smaller screen and you'll see the horizontal scroll bar it's because our columns alone were already taking up 99 of the available width and then we tried to add in this 45 pixel gap and two instances of that so that's 45 plus 45 that's 90 pixels so we just went over our budget you could say of a hundred percent of the available width that's why we created this horizontal scrolling situation which we want to avoid at all costs now luckily for us there is a magical unit of measurement besides pixels or percentages that's going to save the day here so check this out for our grid template columns value let's get rid of the 33 33 33 value and instead i want you to say one fr and then a space one fr and even just with two of them you can see that it's going to evenly distribute the space so if we wanted a three column we would just include one more one fr so fr is a fraction unit and essentially one is sort of the baseline or equal width value it means that it's going to take up one equal part of the available space so for example if we gave this first one a value of 2fr you can see that now it's going to take up twice as much space as these other ones right or if we set this to 3fr now this one is three times as wide or if we set the first one to 0.5 or you actually don't need the zero just 0.5 it's taking up half of the space of the others now the reason this fraction unit is so cool is the browser is going to do the math for us and automatically account for our column gaps so on and so forth so we don't need to do any of that awkward math of saying if we want three columns each one should be 33.3333 percent right we can just use the fraction unit so this is great we have our three column layout but let's not forget about smartphones and small tablets that don't have much horizontal space to work with what i'm getting at is we absolutely do not want a three column layout for smaller screens so for example if we look at the reference design notice that as i resize my browser window to be a bit more narrow well it collapses down to a two column layout and then eventually even just a single column layout so again at this full width simulating a desktop monitor or a large laptop there's three per row two pero one per row whereas if we look at our code pen if i zoom in to simulate maybe a smartphone or something that doesn't have much horizontal space to work with notice how awful this looks there's just not enough space for us to awkwardly try to force a three-column layout you can only fit like one word per column the idea is that we want our layout to be flexible so that for larger screens maybe we fit three per row for medium sized screens maybe we fit two per row and then for tiny screens we just have one feature per row now a few years ago in order to create an adaptive or responsive layout like this we would have needed to use something called media queries in css however nowadays thanks to grid we don't even need media queries to set this up so check this out for our grid template columns let's get rid of this 1fr 1fr 1fr value and instead say repeat and then a pair of parentheses and then we give this two values so first you say how many times you want to repeat something so let's say 4 comma and then the second value is the width so maybe 25 right so this is the exact same thing as before when we said 25 25 25 25 so repeat is just going to take this value and repeat it this many times so if instead of 25 if we put this to 1fr and then change the 4 to 3 well that gives us the exact same layout we had just a moment ago however we don't actually need to specifically spell out a number here so instead of three for how many times we want to repeat it we can just say auto dash fit now in combination with one fr it's only going to place one item per row because that one item is getting the full available space but check this out if instead of one fr we said 200 pixels well it's just going to place as many items at that size as it can fit so if we bumped this up to 400 pixels it's smart enough to realize well at 400 pixels we can only fit two per row right or if we bump this up to 800 pixels it's smart enough to realize you can only fit one so this is where things get truly interesting instead of spelling out an exact value let's get rid of the 800px and instead say min max and then a pair of parentheses and now we give this two values we give it the smallest or minimum width we want them to be so for example let's say the smallest we ever want them to be is 300 pixels comma the largest we ever want them to be is just one fr right full screen space so if i zoom out to resemble a normal desktop monitor well this inner area has a max width of 1200 pixels and since there's a 45 pixel gap here and a 45 pixel gap here that means there's only room for three columns per row and now if i start to resize my window to be a bit narrower notice that right around here it snaps to a two column layout instead of three this is because right at that threshold so right here down to here the browser is detecting that there's no longer enough space for each column to have a minimum width of 300 pixels right the browser is detecting that now once we get down to this size well it could no longer fit three per row if each one is required to have a minimum width of 300 pixels so now we have a two column layout and then if you resize the window to be even smaller so now this is resembling a smartphone and now it can figure out that you couldn't even fit two per row because there's just not enough space if each one has to be at least 300 pixels wide okay and this means that we have now created the column layout from our reference design now before we finish up with a few minor details like the sizing and coloring of this text i do want to include a few closing words on the topic of grid in css so really quick if we want to control the spacing in between rows well just like grid column gap we can say grid row gap let's say 45px okay there you can see that taking effect now in this particular video that's all we're going to learn about css grid now grid is an incredibly rich and complex topic and we have only covered maybe one or two percent of what you can do with it now as we've seen in this lesson even with just this very basic understanding of grid we can create very useful layouts however if you want to learn more about grid and if this is the sort of thing that interests you and you're really enjoying css and you could see yourself wanting to focus on web design and the way things look visually then i highly recommend learning more about grid and right now i want to share with you some of the best and some of my favorite grid videos on youtube so i'll include links to these in the description for this video but i'll just tell you right now so number one is rachel andrew rachel's youtube channel is filled with tons of lessons on css grid okay and the number two is a youtube channel named layoutland which is created by jen simmons everything i've learned about css grid i've learned from these two channels and between the two of them they definitely cover both the technical code syntax aspect and sort of the creative or big picture perspective of what's even possible with css grid okay but in this boot camp series i don't want to focus too much on the design aspect of things so for now let's keep things rolling forward let's go ahead and finish up the text styling for these columns and then let's also if we look at the reference design add the small footer down at the bottom once we do that then we can talk about what we're going to cover in our next video so let's focus on this text styling in my css i'd create a brand new rule so dot featured item look inside it to style the heading level 3 and i would just say color hashtag 28 35 93 semicolon let's say font size 1.5 rem let's say font weight normal let's get rid of any margin okay looking good now let's focus on the paragraphs so i'd create a new rule say dot featured item look inside it for any p elements curly brackets let's get rid of any margin so it can sit a bit closer to the headline let's bump up the default line height to maybe 1.6 i almost forgot the semicolon at the end there new line let's say color should be a very dark gray so hashtag 333 okay let me zoom out a bit i think that looks a lot better now you might remember that in the reference design there were nine cool features instead of just the four we have here so off camera right now i won't bore you with that but let me copy and paste and add five more okay so now i have nine of the featured item divs just a few more closing details let's go ahead and add the footer from the reference design so it's just this little area down here so in our html down at the very bottom i'll just create a new div so div tab and actually a quick tip i probably should have showed you earlier in the lesson if you want to create an element so i just deleted that real quick if you want to create an element in codepen with a class you can actually just say div dot and then the name of the class and then hit tab on your keyboard and that automatically creates it with the class and i believe div is sort of assumed to be the default item so if you just say dot footer hit tab yep that's all you need okay inside the footer let's create a paragraph and let's include the copyright symbol so that's ampersand so you hold down shift and then push seven so ampersand copy semicolon space and then 2020 fictional company okay so there we see it down in the preview now let's style it a bit so in the css i'll just create a new rule dot footer curly brackets let's align it in the middle now because this div already takes up the full available space and we're just trying to align a piece of text instead of trying to align a block level element like another div with text you can actually just say text align colon center but remember that only works for text not any children div elements or any other children block level elements okay finally let's say padding 20 pixels vertically we don't need any horizontally okay let's make it a light gray so color hashtag 999 and then finally let's decrease the font size a little bit so font size if one rem is sort of the standard we could say 0.9 rem semicolon perfect at this point we have successfully recreated the reference design but really quick before we bring the lesson to a close i do want to circle back to our dark purple header because if you view this on a very tiny screen like a smartphone well you can see there might not be enough horizontal space for the navigation links and the logo or header so if i zoom in even further you can see it's getting cut off right there's just not enough horizontal space so what we can do is tell that flexbox area that it's okay to wrap down to a second line if the content won't fit on a single line so to achieve that in our css in the rule for our header class we can just add a new declaration and say flex dash wrap and just give it a value of wrap right it's okay to drop down to a second line if you need to so now if i zoom back in again to emulate a tiny device you can see that once there's no longer enough space to fit on a single row it just drops down now obviously you could fine tune this styling even further and if you are very interested in tweaking and perfecting your layout for different screen sizes you will want to learn about media queries independently from this video okay but big picture that brings the technical aspect of this lesson to a close we successfully recreated our reference design now let's talk about where we go from here first i have to address the fact that in the very first video in this bootcamp series i said that i'd try to keep the lessons anywhere from 10 to 30 minutes by the third video we've already completely destroyed that rule but oh well anyways where do we go from here well css is such a deep topic that we could spend weeks or even months trying to become an expert at css but that's not the point of this boot camp series because yes some of you watching this series may be interested in web design and the more graphical or visual aspect of things but i know that a good portion of you watching this are going to be more interested in the programming and servers and database aspects of the series so here's where we go next we're not going to worry about becoming an expert at css our next goal is just to learn how to get out of codepen so codepen is great for experimenting but eventually you need to start working with real files on your computer because imagine if you really like the webpage that you just created in codepen and now you want to publish it on a real domain like yourname.com well in order to do that you would need to stop using codepen and actually learn how to push files up to a web host or a free service like github so before we jump into the programming chapter i want to close out this design chapter by showing you how to publish a website live up onto the web not in codepen just a regular normal website where the full screen is just your actual web page and you'll have a domain or address that you can share with your friends and family because before we dig into programming and servers and databases i think it's very important to be able to celebrate and at this point with your knowledge of html and css you're absolutely capable of creating a simple website with a few different pages and i think actually having it online somewhere where you can share it is going to feel like a big victory worth celebrating so in our very next lesson we're going to learn about text editors which allow us to create files on our computer instead of being so reliant on codepen i hope you're enjoying the bootcamp series so far if you are i'd really appreciate it if you could share a link with your friends and family anyways take care and i'll catch you in the next video you

Channel: LearnWebCode

Views: 82,720

Keywords:

Id: DJq6R2b0FoE

Length: 55min 51sec (3351 seconds)

Published: Mon Aug 17 2020