CSS 201: Intermediate CSS. Create beautiful websites from scratch.

1. CSS 201: Intermediate CSS. Create beautiful websites from scratch.: Welcome to CSS at 200 one intermediate CSS. In this course, we'll be tackling bigger and more complicated pieces of CSS. That means you should already have a basic understanding of CSS already. In this course, we're going to stretch our minds a little bit more and look at things like outline versus borders. Offsetting elements were specialized positioning, looking at advanced selectors, exploring pseudo-selectors, pseudo elements, gradients, transitions, animations. Hi, I'm Caleb telling. I teach over 300 thousand students how to code worldwide and have been making websites for well over 20 years. I have worked with folks like the Arctic Research Foundation, nasa, and Mozilla, along with two top tier web development firms across the globe. Once again, my name is Caleb telling and welcome to CSS 201. 2. The display property: If you took CSS one-to-one, you should already know 3D display types, inline, inline, block and block. In this video, let's go ahead and demo the difference between all three of them because this is vital to know for the rest of this course. So I have my editor open here. And I went to File Open, and then I opened a folder called Less Than files. And I'm gonna create a new file in here called index.html. And in here, let's do HTML colon five, hit tab, and it creates her page for us. And let's call this working document CSS 201. Now, there are three different display types in here. And what I'm gonna do is I'm gonna create a div and mic actually create three divs and show you the differences between them. So div, this is the first copy that line. This is the second copy that line. And all I'm doing here and VS Code is control C, control V. And it seems to copy the whole line down one for me. And then this is the third. Now I'm gonna go over to my browser and I'm gonna go to File Open. And I'm gonna open up index.html. And okay, we see a boring, boring, boring, boring page. But what we can do here is just demo this quickly. And again, this is super vital to know. So we have three divs here. Let's go ahead and create a new selector. Lets go ahead and all I did there was right-click, inspect and clicked on one of these dibs. It doesn't matter which one and click this little button over here that says new style rule. I'm gonna make this bigger as well. Click this button. It's going to automatically give me a div. And we could change the display type. Now we can't change this one because that one comes default with her brows, but we can overwrite it and we can say display block is what it currently is. Let's give this a border though, border one pixel solid red. And this is what display block looks like. And this is in vast contrast to display inline, where all the elements are side-by-side. And then we can do inline block, which doesn't really look like it did a whole lot. It is moving it down Justice and just a touch there. And what inline block allows us to do is padding ten pixels. And we could do margin five pixels if we wanted to five pixels. Now we can do a margin, we can add a margin, we can add a padding with a block element as well. And we can toggle these on and off if we wanted to. Now, one thing to note is in line looks a little bit different from inline-block. So we can do inline, inline block and just moving this up and down. I'm just toggling this with my up and down arrow keys. And so this is inline, this is inline-block. And it's important to notice those differences because we're going to be using inline block a lot in this course. And this is block. We're also going to be using this. So these are the three display types that we're going to get started with in this course. And it is absolutely vital that you know these because we're going to be working with things like flexbox, Flex Box, and grid. And those are not easy to sort of wrap our heads around, so we need to be pretty familiar with that and we covered that in CSS one-to-one. If you're in that course, definitely feel free to go back to the display less than NCSS one-to-one, where we cover this a little more in depth. 3. IMPORTANT: The box model: Okay, let's take a look at the box model. This is something we didn't cover in CSS 101, which I really wanted to, but I think it was slightly to advance. So the box model is this idea that you have a box and you can have padding and margin, and it depends on your browser's rules on how to calculate the width of that element. So if we create a div here and this is called div class box, and that's all we're going to do. I'm going to save that. Come on over to this page and I already pre-opening this before I recorded this lesson. So if I go to inspect, I'm going to see that in my body I have box and I can add a class here for dot box. And let's add some styling. So border one pixel, solid red. Let's give this a height of 300 pixels, a width of 300 pixels. And let's change that border instead of one pixel. Let's do like five pixels. And now when I come down here, when I scroll all the way down, we can see that it's 300 by 300. Ok, cool. Now if I wanted to, I could add a padding here, and I could say padding 30 pixels. And you notice how when I toggle this on and off, it makes my box bigger. And that's not necessarily what I want because when I add padding 30 pixels, this box is no longer 300 pixels. It's 370 pixels wide. It has five pixels on either side for 105 on the left, five on the rate, 300 pixels on the inside, and then 30 pixels of padding on the left and the right. So if we add this up, we have five, thirty, three hundred thirty over here and another five. And if we scroll on down, we can actually see all these numbers here. Border of five padding 30 inside of 300. Now, sometimes that's what we want, but for the most part, that's not what we want. What we want is to say make the whole thing 300 pixels wide or 300 pixels tall. And that includes the padding. So by default, the box model, what we're looking at here are box model here does not include having padding, does not include having margin. So what we can say is box sizing and by default it's content box, but we want border box and you can see that it makes it bigger or smaller here. And we're changing the default behavior of a browser. Typically we want border-box. What border-box does, it says Add that border at that padding and make sure all of that together is a width of 300. And so now when I hover over this, we can see that that box is a little bit smaller. And when I scroll on down, none of these digits actually change. But the box itself is smaller. It saying the entire thing is 300 pixels. That's the difference between border-box and content box. Now what I would like you to do is give this a shot. Create a 300 by 300 box on your page. It does not need to look good. Add some padding to it, and then change the box sizing and just notice what the differences and this is really, really important for us moving through this course because we're going to be using content box a lot. 4. Outlines: Borders around borders: Okay, let's take a look at outline. Outline is the border that goes around everything. It's honestly the border around a border. You can add an outline and you can tell it to have an offset. We use the outline offset to give some space between the element and your outline will demonstrate that in just a second. But basically outline is like having two borders. And it's really nice for visual improvement. Now most of the time it will ends are actually super important for accessibility. So whenever you hover over an element or when you tab over, like when you use a keyboard and hit tab over and over on your page, sometimes a button will have like a yellow outline around it or a red outline or a black outline. And it's not the border, it's just this outline and it tells screen readers and people with visually impaired handicaps, people who can't see very well what is actually selected. It also for those keyboard warriors out there who like to use a keyboard instead of a mouse. It helps them a lot and there's a lot of them out there. So it's really, really important. So what I'm gonna do here is I'm going to save this as a new file called Outline. And what I want here is I still have this box. And what I would like to do is add an outline around it. So if I go here and this is just leaving off from the last lesson, I'm using the exact same file. It's okay because I'm just in the editor here in the inspector will and our developer tools. I can add an outline. And let's make this just a wee bit smaller. I can add an outline. And it's a lot like a border. So I can say five pixels, solid black. And you can see that it's actually on the outside of all of it. Now if we look down at her box model, it doesn't even show up in here. We have an inside, we have a padding, we have a border. We have margin on the outside, but it doesn't actually really show us anything about the outline. And so that's the difference between a border and an outline of borders actually calculated. An outline is not. And you can see this. It doesn't actually make our box move at all ages, literally adds an outline around it. Now, there's a way to add an offset. We can say outline dash offset, and we can give this a pixel value as well. So let's say not for, let's give us a ten pixel offset. And we're going to want to add some margin in here. So let's do margin 30 pixels. And what this offset does is it just moves that outline outwards. Now what I would like you to do for this particular lesson is create an element and give it a border, then give it an outline. It doesn't really matter what your color is. You can just give it some sort of outline. I just did something boring, five pixels solid black, and then add an offset to it to demonstrate that this can be moved outwards. 5. How to add shadows to text: Tech shadow is a lot like a box shadow. The only difference really here is that a box shadow can have like an inside shadow called an inset and text does not. Alright, so what I'm going to start doing here is I'm gonna write in internal CSS, not external CSS, not Inline CS but CSS but internal CSS. So that when you download these project files, you can actually have access to all this CSS. So I have a box in here, Cuckoo, cuckoo. And let's go ahead and add some text in here. And this text is going to say hello world. And when I load this up in my browser, it just says hello world. We can make this significantly bigger. We can change the font size if we wanted to little bit later, which actually maybe we'll do as well, just so that we can really dive into CSS. So let's select that box by our class. And we learned about this selector and CSS 101. And so all this is saying is select this element by this className gives us a font size of maybe like 40 pixels. Let's save and refresh. There we go. That's bigger. And now what we can do is we can add a text shadow. So text shadow. And this takes an x, a y, a blur value and the color. So let's go ahead and change that x value. We want to move this to the right, let's say ten pixels. Then the y-value is also going to be ten pixels. That's going to move it downwards. A blur, let's say it's not going to blur at all. So it's going to be an exact copy, exact outline of our text. And the color here is going to be read just something obnoxious that we can really see what's going on. Now we have a text, a text shadow that moves us down ten pixels and moves it to the right ten pixels. And if we wanted something a little more elegant, we could do something like two pixels. And by the way, to select this, all I did was selects my ten pixels or it's now two pixels, but I selected that ten pixels. And if you go to Selection, add next occurrence for me, command D, And it's going to be different for you probably I can imagine. You can just type in two places at the same time, which is really, really useful. Because a good shortcut to remember, skip ahead and save that, refresh, and that looks a little bit better. Now, we can also add a blur value, this blur value currently a 0, which is the same as not having it whatsoever. By default is not blurring at all. Let's go ahead and add a blur value of five pixels. And all this is going to do is say for every pixel that's back there, every red pixel blurred out five pixels. And so we have a nice little blurred. They're actually looks like this is coming off of the page a little bit. Now what we can do is we can actually change the body background color. So you body background color is going to be black. It's going to be the same color as our text. And let's go ahead and refresh this. And now it looks a little spooky. Now I'm recording this around Halloween, so this is really, really well, this is applicable because this is kinda spooky. But we can't see that text anymore, which is really nice. We could also try to, instead of doing that, we could do a color RGBA. And it doesn't really matter what color we fill its color. Let's fill it with black, but let's also make it completely see-through with a 0 alpha in there. And now we just have the blurred text. So that is text shadow would, I would like you to do is write some text on your page. And it could just say hello world. And then add a tech shadow, add your X axis, your y-axis, or your horizontal in your vertical alignment at a blur and then add a color. You don't have to do the RGBA, we learned about that and CSS 101 as well. So if you need to go back to CSS one-to-one end, quickly learned what RGB is. But really it's just a color mode is saying red, green, blue, alpha, alpha is your transparency. So we said 000, that's black and make it completely see-through. 6. Forcing a minimum width on an element: Alright, so this is minimum width. We are going to be talking about what that is now in CSS 101, we learned about maximum width, we learned about regular width. If you don't know about max-width, honestly, it's the exact same as minimum width. However, it's the opposite. So it same, same but different. Now, maximum width says a, an element can only have a maximum width. And it will try to go from the smallest size to that maximum width before breaking your text onto a new line, minimum width is sort of the same but opposite. So I can select this box here, and I can give this a border for pixels solid blue. And let's go in here and throw some lorem ipsum in your lower arm. And then VS Code, I just hit tab. And that's because I have django template selected here. This should be an HTML. Let's undo that. Lower them. Tab. There we go. And when I load up this page, we can see all of this text and this is actually sort of a bad example. I'm going to just delete everything except this one line so that we have this width in here. Let's go ahead and delete all of that. Save and refresh. Okay, so now this is not actually going to do anything because this is a block element. And remember that first lesson I said block elements display is really, really important. Let's go ahead and trim this. We want to make us not take up the entire width. So we can say display inline block, and this will allow us to use the width element with it. However, it is also going to take up a minimum width here, which is really nice. So this element here is 365 pixels wide. So we want a minimum width of something just a little bit bigger. Let's give this a min width. And let's say that minimum width has to be 450 pixels. And so what this is going to do is sort of move this out to somewhere over here. I'll pretty good game. Yeah, it was a pretty good guess. So it's gonna move it over here. And if I write more text, it's going to then expand. And we can actually see this by going in here. And I'm just gonna copy this line a couple of times. And you can see that it expanded all the way over. So it has that minimum width. And all I'm doing here is undoing and redoing. But it has that minimum width, so it doesn't matter if there's extra space or not, it's going to take up that minimum width. And then once it has more content, possibly too much content. What is going to do is then move this to be a 100% width. Now we can, we can marry this with max-width as well. So we can say the max width can only be somewhere out here. So let's go ahead and combine these. We can say a max width of, let's say 500 pixels. Refresh. It looks like nothing changed. But what this is going to do is say somewhere about here probably is the maximum width. So before this blue border was taking up this tyre width, this one no longer well, so I'm gonna double click in here and paste that a few times. And we can see that it only takes up, up to here now. And our box elements, if we go down here, 450 pixels wide, is what it is by default. Up here it's 508 pixels and that's because it's taking up four pixels on either side. So 500 pixels on the inside, 400 pixels, four pixels on either side rather. And we can change that box sizing. And let's do border-box. And you can actually see it's making that little eight pixel difference border-box. And if we go back over here, we can see the whole element is 500 pixels. So now we're already using the display stuff that we learned from our display lesson. We're also learning and using box-sizing from the box sizing or the box model lesson. So this is min-width. The idea again here is just that it's going to be a minimum width. And if you have more content, it can grow to be larger. 7. Introduction to CSS positions: Positioning is how we move elements around a page. There are a few ways to do this. We can do absolute positions. We can write a relative position, a fixed position or sticky position. There's also another one called static, which everything is by default. But the idea is that if you want to make a pixel perfect website, something that really matches the design, sometimes you're going to have to move elements around. And in the next few lessons we are going to be talking about relative positioning, absolute positioning, fixed positioning and sticky positioning. And this is what's going to make your site start and search really act more like an app, especially when it comes to sticky positioning. But it's also going to help you move things around so that we can create new dynamic components that can layer on top of each other. 8. Relative positioning: Relative positioning is the idea of taking an element and moving it from one place where it naturally sits on your page to another place. Just slightly off so it takes your position where you're sitting or standing right now. And it's like moving you one inch to the left or one inch to the right. So I have a new document here for relative positioning. And what we want to do is create a box and then just sort of move it a little bit. So let's go ahead and grab that box class. Let's give it a width. 300 pixels, height, 300 pixels, border ten pixels, solid black. And when I open this up in the browser, it's just a regular box. We've seen this a few times already throughout this course. So what I want to do here now is I can say position. And there's a bunch of them here. But let's go position relative and it looks like nothing has changed. And that's actually right, nothing should have changed. But now we can use top, left, right, or bottom. Selectors are not selectors but properties. So we can say move this from the top, moving downwards. Let's move this down at ten pixels. Okay, so that wasn't very much smooth, IS down 30 pixels. And let's move this to the left or from the left, 30 pixels as well. And when we toggle these on and off, we can actually see that this is in fact moving. It's moving the entire element for us. And so again, what relative positioning does is it says, okay, so this is where your element sits by default on your page. But let's change our position to relative. So relative to where it usually cysts sets, from the top, move it down 30 pixels from the left, move it to the right, 30 pixels. So let's say instead of top, we can say bottom. And you can see that actually moved it out of my viewport. Viewport being this big white section here. And we can toggle it on and off as well. And instead of left, we can say right. And this does the exact opposite. And let's toggle these on and off as well. And so that's relative positioning. Now where this comes in really, really handy is when you have to move something just slightly off of where it naturally sets. Maybe you are already using your padding, you're already using your margin. You're using negative padding or negative margin. And you need to sort of move this away just a little bit just to make it perfect. This is where relative positioning really comes into play. Now, relative positioning has another sort of superpower. And that's when it comes to child elements that use position absolute, which we're going to talk about next. 9. Absolute positioning: Absolute positioning lets us move an element based on its parent element. But the trick here is that the parent element has to be positioned relative. So taking over from that last lesson, what I have here is just a regular box. And if I go back to my editor here, let's go ahead and change his position to not absolute but relative. And that's this box in here. And let's make some space to work. And this really does nothing from the last lesson. Now where this gets powerful, where absolute positioning comes in is let's say I have a second box. So let's do second dash box. And this is an Emmett abbreviation. So if you're just joining this course now you haven't taken CSS 101 or HTML one-to-one or HTML2 01, where I talk about em at abbreviations. All I'm doing here is writing a little bit of CSS and as soon as you see this M it abbreviation, you can hit tab and it creates a div for you by default with a class of second box, just like writing CSS and then you just hit tab. And let's say this needs to be in the top rate. So let's go back to our page here and refresh. And this just says Top right. Now we can add some styling to this, and let's say it needs to be a box in the top right quadrant. What we can do is now select this box and we can say second box, position, absolute. Let's also give us a border. Border of three pixels, solid blue, just so we know where we're working. And what do we do? Position absolute literally nothing changes. It just added a border around here. I'm gonna zoom in even more here. Now what I would like to do is for this to move into this top right quadrant as if I was making a graph with an x and y axis and it has a negative x and a negative y axis. What I can do is because this is position absolute. I can now say, let's stick this to the top. And that's gonna say 0. It's already there by default. But in case you were element isn't what this is going to do is move this to the top of the page. And as an example, let's do bottom. So bottom zeros gonna say that position absolute around this relative element is going to stick to the bottom. And then we could say right, 0. And now that moves it to the bottom right. Now to move as backup, all we have to do is change that bottom to top. And so we set position absolute top is 0, right? 0. And all this is going to do is move this to the top right. Now that is what we wanted, but we wanted to take up like this full quadrant here. So what we can do is we can say a width of 50%. And let's try a height of 50%. And now we have a box in that top right quadrant. And that's what position absolute allows us to do. It allows us to do something like this. Now, this is sort of an ugly example, but if we wanted to, we could give this a background of black. And let's go ahead and get rid of this border. And now it looks like we've carved out a chunk of this. Now if we want to get even fancier, were often not going to be working with borders all the time. So let's go ahead and get rid of this black border on our parent element to the box, the relative element. Let's go ahead and get rid of that. And now we've moved this box somewhere where it doesn't live naturally. So there's this 300 by 300 box. You can see it here. And we've said out of that 300 by 300 box take 50% of the width, 50% of the height for a 150 by 150, move it to the top right. Now I'm just going to quickly undo that and I'm gonna show you what happens when I take position relative away from the parent element. So I'm working on the box here. And if I get rid of position relative, it goes straight to the entire page. It takes up 50% of the page's width and it takes up 50% of the pages height or the viewport, actually not the entire page, but just the view port here, which could very well be the same thing depending on your page. So yeah, if you ever want an element to sort of be absolutely positioned, you have to make sure your parent element is using position relative. No, it's not doing any harm. You'll notice that when I toggle this on and off, that box on the left here doesn't change whatsoever. It just changes the behavior of its child elements. And this is a really important concept to understand in CSS. Because when we get to the end of this course, we're going to be working with a lot of child elements. 10. Fixed positioning (like headers): Let's take a look at fixed, fixed positioning. That's a hard one to say with a microphone, fixed positioning, fixed positioning sticks and elements to a certain part of your viewport. And it lets you slide down the page as the page moves down. It was actually a terrible example. You know, when you're on a website and there's a header and Scott like navigation and a logo and stuff. And as you slide down the page, it slides down the page with you. This is fixed positioning. Now I just reset my page, have a style and a box. Let's select this box and add some styling. So this box, let's say is going to have a border, one pixel solid red. And a background color of, let's make this look a little more elegant. F5, E5.5. And let's not do border one pixel solid red. Let's do border bottom. Two pixels, solid, CCC. And you can see those colors show up here. So it's an off-white end, a light grey. And let's just change this now. Okay, there's no content in there, but let's add some content. Say this is a header. And okay, and that's zoom that in the opposite direction that I'm going. And okay, so this doesn't look great. Let's actually clean this up a little bit. Let's get rid of that body margin. Let's do this. Body. There's a padding I can't ever remember. Let's do margin 0. Let's just reset this and padding 0. So these corners of this header actually touch the sides, perfect. And in that header, let's go ahead and give this a padding of 40 pixels. Nope, that's far too obnoxious for this demonstration. See 20 pixels. Okay, that's not looking too bad. We can live with that. Now. Let's say we wanna scroll down the page now I don't have enough content to scroll down the page here. But what I can do is say that body needs have a minimum height or a fixed height of, let's say, 3 thousand pixels. And all this is going to do is let me scroll all the way down as if I had more content. Now, what if I wanted to scroll down and we wanted this to stay with me? We can do that. And always say here is position fixed? Now this might be a little bit Jackie, depending on the browser you're using, depending on the version of the browser you're using. And you can actually see it is little bit jackie, This is sort of like an inline element and inline block element and it didn't take up the entire width. Well, we need to do is set a value, top, right, bottom, or left value. And what we can do is we can say, stick this to the top of the page, make it stick to the left of the page like it currently is. But also give this a width of a 100% of the page. And I'll just move that up a bit. And there we go. Now I'm scrolling down the page and you can actually see my sidebar over here as I scroll it staying sticky. Now this is a very bad example. A better example would be if I have a paragraph in here and I throw some Lorem. And I just copied this over and over and over and over and over and over and over and over again. And so we're going to be able to see that this page can actually scroll. So I save that refresh. And at the top of my page, I've got my lorem ipsum, but as I scroll down, it now stays with me. This is fixed positioning. This makes it sort of sticky to the top of the page. Now, sticky positioning is a different type of positioning. We're going to talk, we're going to tackle that one next. However, fixed positioning is really, really nice because it's going to layer on top of your entire page. So you know, when you're on a website and it got it has that annoying little thing at the bottom right. And it's like messages for support or whatever. And it's online. 50% of all websites these days, it's kinda irritating To be honest, but it sticks with you no matter where you are on the page and layers on top of everything. That's what position fixed does for you. Know, what I would like you to do is give this a shot. Create a fixed header, like what I have. Throw a bunch of content in here. You're going to need enough so that your page can actually scroll and then scroll down your page and make sure that it just layers on top of everything. 11. Sticky positioning (like modern headers): Sticky positioning is relatively new to CSS. It allows us to have a header to stick to its parent element. So in the last lesson, we looked at fixed positioning, where it was fixed to the entire page, your entire viewport actually. And we just made a header that scrolled all the way down the page with us. And it looked a lot like this. Actually looked exactly like this because this is what we wrote. Now sticky can do essentially the same thing, so fixed. And we can say this is sticky. And you can see as I scroll up and down the page, it stays with me as well. However, the difference between sticky and fixed is fixed is going to be here no matter what. And even if I scroll down the page where there's no extra content, It's going to stay there. Whereas with sticky, it's going to be sticky to its parent element. So let's go ahead and create an example here. We have this box, and let's select that box. And let's do display sticky. Okay, so I just wrote a bunch of stuff here from that last lesson. I give the body a margin of 0, padding of 0, default height of 3 thousand. Actually we don't need that either. And the box is positioned sticky background color is the same as last lesson. Border bottom as a little bit of padding. Let's go ahead and get rid of that one. And when I refresh the page, we just have this bar here. Now let's go ahead and throw this inside of a parent element. So we have this box and we can have a paragraph with low RAM in your copy paste, paste, paste, paste, paste. And if I zoom this in, we're gonna see that it's no longer sticky. And so yeah, it's not sticky, but we can make the sticky. This actually requires another property here. So because it's position sticky, it also needs to have top right, bottom left, usually it's just top. We get this a top property here, gonna say 0. And that just tells it where to be sticky, otherwise it doesn't know. And so now when I scroll down the page, it stays sticky. Now, that's part one of two. The second part is to make it sticky only for this particular section where there's all this stuff in here. So let's go ahead and add a style on your style to have a background color of red and a color of white. Refresh a page. And we're going to see, oh, I forgot to make that sticky by adding top 0. So stick to the top. There we go. So now it's sticky. Let's add another section underneath this blue and this change that header as well. So let's go ahead and basically copy this entire thing. And I just collapsed that with a little arrow here. And let's go underneath. And this one's going to be background color of blue. And the change what's in here. So let's say section two of our box. Now we're using, we're reusing CSS. And in the top one here, let's do section one. Okay, let's go back up to the top of the page. Refresh. Oh, we can't see that color very well. Colours equal to black. That's better. So this is section one, and as I scroll down, it's going to stay there. And section two gets bumped out of the way. And then their Section two. And as I scroll up, section one comes back into play. I really like this part. That's really nice. That used to be really hard for us to do, but it comes default with CSS3 these days, which is really, really nice. So that is what sticky is now in summary, you need position sticky, you need a top value. So we've got a top value of 0. And all we did here was we have a parent element. I have some in line CSS here. Not the greatest way to do things, but it really drove the whole example home. So we have a parent's container here. And then inside of it we have position sticky. And it's going to be sticky around all of this content because it's sticky to its parent element. Now what I would like you to do is give this a shot because this is really important for making websites look and act really, really nice on mobile devices, which is part of responsive web development. And that's part of more advanced CSS. So knowing position sticky is going to be very, very helpful for you. So please give this a shot if you get stuck, don't forget, you can always ask questions and the learning to code Facebook group. 12. Controlling overflowing text: Overflow is when you can construct an element's width and height. But then you sort of run the risk of your contents or a lake overflowing to the outside of it. In this lesson, I'm going to provide an example and how you can sort of create like a scroll bar inside of your boxes. Now we have a few different options. We can choose to hide the overflow. We can let the users scroll either left and right, up and down or just up and down. More often not we really just want the user to scroll inside of a box up and down. So let's go ahead and add some content to this box. Now I just have this regular box we've been working with this throughout the rest of this course are up until this part of the course anyways, that's, that's some lorem ipsum in here. And let's add another line and another line. And let's just make this really long. And the idea here is that this box is supposed to be 300 pixels wide by 300 pixels tall. And this is going to be more content than that box can contain. So if I refresh this page and zoom in, woo, it's actually not quite enough. Let's go ahead and copy this just a couple more times. Here we go. And the idea here is if I zoom out, we have this box and art content is breaking out of it. Now the reason this happens is because we have set a width and a height. We said specifically with this one, the height of this box is 300 pixels and it needs to be 300 pixels because maybe that's what our designers set or designer said. It has to be 300 pixels, cannot be any bigger. It's not allowed to grow, otherwise it's going to look a little weird. So what we can do is add this little scroll bar to the right side here. And we do this quite easily. So on our box class, all we have to do is say overflow. And let's change this to an HTML document. Again, I read a lot of Django, so my HTML files automatically default to a Django template. Your should automatically default to HTML by default, as soon as you have the dot HTML extension in your file name. So overflow, we have a few different options here. And this is really great. I'll play did was move my mouse there and it says syntax, visible, hidden clip, scroll auto. Let's do, let's do hidden first. And so if we wanted to hide that content, hidden will hide that extra content. There's actually more content down here. And we can actually see when I hover over this text, that this text takes up that entire section, but it's being hidden. We can also say visible. And that's just the default. That's what we saw originally. And then we can do auto. And this is the one you're going to want more often than not is to scroll back here, flip back your overflow auto. And when I refresh, it allows me to scroll up and down just like that. Now this is going to be really important if you're creating an area Lake, a product feature list. You don't want it to take up the entire page and make your user scroll forever. And they can choose on a mobile device to just scroll within this box. Or if you have a frequently asked questions section, same thing. You don't want to take up the entire page. If there's like a 100 questions, you might just want it to take up like 300 pixels and they can scroll through the answers in here. So that is overflowing. Go ahead and give this a shot. Remember you need to set a height I, you need to have more content than what your elements can currently hold with that height and then set the overflow to auto. And that will just give you this little bar like that. 13. Centering block elements in the middle of the page: To horizontally the center an element. We need to use the block elements so that they can reserve the entire width of its sort of section. And it tries to reserve like the entire width. I guess I'll demonstrate this in just a second. And then we can use margin-left auto, margin-right auto. And so all I have here is a block, and I don't want this to be inline block, I want this to be block, which is the default. So I don't actually need that for a div. And so I've got four pixels, solid blue, minWidth and max width. Let's just change that to a width and a height. I copied the wrong file. And that's okay. It's easy enough to change. So with the 400 pixels and a height of 400 pixels. And when I open this out in this element or this page in my browser, we can see that I have this box now let's say I wanted it to be right in the center. What I can do is I can say down here, and I'll make this a bit bigger. Margin left auto. And that's going to automatically apply all of the margin again. So we actually moved it to the right. That's kind of cool. But if we wanted it to be in the center, we do margin, right? Auto. And this balances it on either side. And a shortcut you're often going to see me do is something like margin. Let's say the top is going to be 50 pixels and left and right are going to be auto. This is top, this is right, this is bottom. This is left. And so we can toggle these off because they're not being used whatsoever. And now we have margin all the way around and our element is centered. Now why this is important? Because eventually you're going to need to be able to center an element based on its margin, not just the text, you want to center it based on its margin. So it's always centered. Now it's at this point you're probably wondering, wow, OK, this is cool. We're doing all these things, but it doesn't really look very nice. And the problem with learning CSS, as you need to learn these smaller components, these little tips and tricks. Before we can actually start making something really beautiful, we need to know how all these small components work together. And so this is how we center something in the center of our page. And let's just do, do, do, do. There we go. It's in the center of our page using margins. Go ahead and give that a shot when you're ready. Let's head on over to the next lesson. 14. Advanced CSS selectors: Alright, let's take a look at advanced selectors. We have a few different selectors we can work with. We actually there's a ton of selectors in CSS, but we're going to be working with descendant selectors, child selectors at Jason selectors and general sibling selectors. So let's go ahead and create a bunch of boxes here. And I'm gonna put this in a parent with an ID called parent. And let's just move that up. And let's create all these boxes. And let's style these boxes as well. So we have dot box and we're gonna give this a height of 20 pixels and a border of one pixel, solid blue. That's just going to create a bunch of these stacked on top of each other. And this is what we see on our page. This is not the nicest thing ever, but this is a selector lesson. We don't need it to look good. We don't need it to do too much other than select what we currently want it to select. So what we could do is as a general descendant selector, we just use a space and we learned about this and CSS 101. So we could say parent, that's the parent ID and it's going to match this. And then all of the box children in here. And we do this with a space. And so when I save this, go back here and I refresh, we were going to see that nothing changes and that's expected. But all we're saying is if there was a box outside of this and it's due this box, this isn't a blue bordered box. We can see that this box, even if we right-click and inspect, has the class of box, but it's not being styled. And so that's a descendant selector. Likewise, we can also do just child selectors. So instead of explicitly, explicitly saying descendant selector, we can say child's dielectric use the greater than sign. So this is your parent, your child selector, and this is your child. And in fact, we can actually see that when we go here in VS Code, it uses the same symbol here. So we have div dot box, that's our class and our element. And then we have that greater than sign that goes to our parent. And that's going to do the exact same thing as a descendant selector. And when I refresh, you see nothing changes. Now we can do this thing where we select adjacent selectors. So we can now say parent. And then I want to select all of the boxes plus more boxes. And we can say background color is equal to red. And so this one here is our adjacent selector. And it's just going to select elements that are, I guess adjacent to it. And so it doesn't select that first one, but it selects the next one and the next one, and the next one, the next one all the way down. And so that is an adjacent to select or it's not going just like the first one, it's going to select the next ones. And then we have this general sibling selector. So we can select everything in our parent, select our boxes, and then we have this tilde. And so on my keyboard, it's right beside the number one at the top left of my keyboard. It might be different depending on if you have an international keyboard. But a generic English keyboard is right beside the number one and it's this tilde. It's my guest that's a tilde. I can actually remember, it's a squiggly line anyways. And then we can say dot box. And let's change the background color of this background color. But note not Background attachment, background color to black. And this isn't going to work because I spelt parent supposed to be Perrin, save, refresh, and it selects all the similar ones. And the idea here is that in my inspect tool, in our developer tools, it's going to select that first one. And then it says, oh, actually plus all the other ones down the road. So it's kinda two different ways of doing the same thing. Now what I would like you to do is go ahead and give this a shot. One thing you're going to want to be careful of is I am selecting the parent than the child box to style all of these with a blue element. He notice how this box down here is not being selected whatsoever. But I can also do is go ahead and get rid of parent. And when I refresh, you can see that my blue box or my non bordered box now has a blue border, but it doesn't have any of the black background. Or if I comment this out, there are now read. So I'm just gonna undo that. But one thing to be careful of is this thing called specificity. So if you're saying select the parent ID and then select the child elements here, called box, and give it a height of 20 pixels and a border of one pixel, solid blue. Then your next selector to select these exact same boxes needs to be exactly this specific. Otherwise, watch this. And this is a crash course on specificity and how it can be a nightmare in CSS. So that background is now black. But if I go ahead and get rid of this, it's going to effectively ignore this because this is more specific. Refresh the page. It ignored the black background and it went with the specific ones so it matches it saying select the parent ID, then the box classes, parent ID, box classes, there's no parent idea just saying any box with another box beside it. So go ahead and give this a shot, play around with this. Feel free to experiment with specificity as well. If you get a little bit lost with specificity, honestly, you don't need to know it right now, but if you're a keener and you really want to know about specificity, you can always go and Google that a little bit as well. That could be some additional supplementary homework if you're really feeling like you want to learn CSS at a 150% 15. Introduction to pseudo selectors: Pseudo-classes are a way to link states. We can control the CSS styling when you hover over an element. We learned about that in CSS one-to-one. And that is a pseudo selector or pseudo-class, I believe it's actually called. But with other pseudo selectors. And we can also select elements that should not have a particular class. Or we can even select the exact element on a page using the nth child selector. So in the next lesson we're going to take a look at hover nth child and the not selector. 16. Pseudo selectors: getting started: Pseudo-selectors. Let's talk about not nth-child and hover. So a couple of lessons ago we made all of these boxes. Let's go ahead and mostly get rid of this. And what I load up this page, it's just a bunch of blue lines. So it's just a bunch of divs and we can see all of these divs in here. And so I've got a parent element. It has an idea called Parents, and we know it's the parent. And a bunch of boxes. Now a pseudo-selector, we'll use the just a regular colon to use or to activate the selector. There is a lot of them. But in this lesson we're really only going to work on not nth-child and hover. And it looks like this dot box colon and then your pseudo-class name. So this one is called hover, and we can change this background color to gray if we wanted to. And let's zoom in here. And when I hover over these, it changes the background color. No, it doesn't just have to be the background color. We can change, we can change the border color, we can change the font size, we can change the font family. We can change literally everything works the exact same way. But all we're saying here is select all the classes of box. So all of these in here. And then when you put your mouse over it, when you hover over it, what is it going to do? That is a pseudo-selector. Now we learned about this and CSS one-to-one real quick. Let's go ahead and use something a little more advanced. So we can now say box. Let's use the not and actually see there's a lot of them in here. We're not going to go through all of these. There are just so many, and frankly most of them on earned, typically used, but they are supported. So let's do a box colon nought. And then what we do in here is we give it another selector. What should it not be selecting? So don't select me. Let's go ahead and copy that and throw that into like, I don't know, the third one. And let's finish this off. Do a background color of blue. So these should all now have a blue border, a blue background when you hover over it, they're all going to turn gray. However, the box not don't select me, that's this one, is not going to have a blue background color. So let's go ahead and refresh and you can see it selects this one right in the middle. Now one thing to keep in mind here is that CSS, like most programming languages, works from the top to the bottom. So we said, give it a background color of gray when we hover. But then we said, if the box is not, don't select me, class doesn't have this one. Then change the background color to blue. And when we go back here, we're going to see that nothing is actually happening except this one. In order to fix this, we just select that and just move it above. Save, refresh. And now it works for us the way we want it to work. Beautiful, beauty, beauty BAD. Okay, let's say we wanted to select a particular one. Now, there's going to be a time in the future at some point when you're working on a website that you have, all of this HTML and you're not going to be able to edit that HTML. Maybe you're working with a framework like Django and you need to be able to just work with straight HTML. This is very, very important. This is one of the key skills in CSS, is you need to be able to not to touch your HTML and still select what you need to select. So let's go ahead and select like this box here. Let's say select name. And let's change that color to white. On all boxes, color is going to be white so we can read it. There we go. We want this one to be selected and then we don't want any of the other ones to be selected. Now the problem is, this one is the same as this one is the same as this one is same as this one. And the bottom three, they're all identical. They all live inside of the parent that there's nothing unique about them. How do we select this? We can slap this with the nth child selector. And so what we can say is select all over boxes, then do nth child. And it takes curly brace, curly braces but parentheses. And this nth child takes a number. And so which one do we want this like 12345. So we throw the number five in there. And let's change this background color. It's already blue. That's not going to do anything that changes background color to yellow. And let's change this color to black. The text color to black. And when we refresh our page, it selects just this one. So we know that there are a set amount of boxes. And we said, oh, we just need to select this one, but we can't touch the HTML. We can say skip 1234, select number five with the nth child selector and then apply our styling. Now this is really important because this gets into advanced selectors and this is going to help you out immensely in the future at some point when you're working with a designer, most likely. So when you're working with your web designer, web designer is going to say, here's a bunch of stuff you might be working with a back-end dev, back in depth says, okay, we're going to make this work in Django and it's gonna have a bunch of checkboxes, for example. But we want the third one, the third item in the check box to have a border around it so it really sticks out. So people are more likely to click that one. We can do that with. And the child. We can make sure that when you hover over something, things change. We can make sure that you don't select certain elements. You can select all of them, except certain ones. 17. Introduction to pseudo elements: Pseudo elements are similar in syntax to pseudo-classes are selectors. What we learned in that last lesson. The difference is how it acts. So it looks very similar, but it is slightly different. So in this particular lesson, we're going to be using to Colin's. So we could select a box used to Colin's and then whatever the selector is called or not in this lesson, but in the next couple of lessons, we're going to be learning about these pseudo-selectors. You're not pseudo-selectors, and these are actually pseudo elements. So what we did before was a pseudo class or a pseudo-selector of Hover. This time we're going to say select the box and then we could do before or dot box colon, colon after. And this is going to do different things for us. Now. Before and after is what we're going to be learning about first, these are really, really interesting elements. Because what it does is, and we'll go more in depth about this in the particular lessons. But it's actually going to create elements is going to do certain things that HTML should be doing. So CSS is sort of stepping over its, its boundary here and getting into the world of HTML. Now another difference is these don't really have actions. Whereas like hover is, you know, you're hovering over something, you're actually doing something. It's going to take some sort of hover events. You put your mouse over it and it can change. Whereas like before and after, these aren't really designed to do that, although you can absolutely do that. But these are going to be basically adding HTML elements to your page. So let's go ahead and jump into before and after. 18. The before and after pseudo elements: Before and after pseudo elements are lot like inline HTML elements. But we don't have to write any HTML for these. So we can target certain things on our page. And we can basically had more HTML or at least add fake HTML and then add a bunch of styling to it so we don't actually have to modify our HTML at all. So a good example of this is a box. And if I go back to my browser, this is what the box looks like. It's centered page that has a black border. It's just a 300 by 300 pixel box. Now, what we can say is select that box and then before we can do all sorts of stuff to it. So the first thing you're going to want to do is you're going to want some, to add some content. This eases the contents property and typically we just add an, an empty space in there. And that just tells the browser, Hey, look, there's supposed to be an element in here. And you know, like when you write an empty div, it doesn't show up on your page. Same thing, but we're going to add a space and that makes sure it does show up on the page. Then we can do a display. So we can say display block. And then we can give a border of ten pixels, solid red. And let's see what this looks like so far, this is not going to be perfect, but it's going to be pretty close. And at this point, actually, as soon as I refresh this page, we're going to see yep. So we have something in there that's cool and we can actually go into our inspect element here and select it. We can do all sorts of stuff with it. We can now actually edit this CSS right into our developer tools. Let's go ahead and give this a width of 100%. Let see what this does. And at this point we're just going to experiment. You can see that it gives it a width of a 100% bulging out because of the borders, the black borders. That is, let's say we want to give it a height and a 100%. Let's see if this is honored as well. Okay, not bad, not bad. Let's say we wanted to move this. So let's get into some positioning. Let's do position relative on the entire box itself. But then in the before pseudo element, this fake element that doesn't actually exist on the page. There's no HTML here. We can edit the HTML. We can say, let's move this. So let's move this to the top right. And so we can say position absolute. And we know that this is going to work because it's parent. Selector is using position relative. Its parent element is using position relative. We do position absolute. Let's do top minus ten pixels, and let's do left minus ten pixels. And we're going to see this sort of bumps up here. Oh, actually that's because we have borders in there. Yep. And ten pixels, solid red border. So we just overlapped it. Let's go ahead and do 30 instead. There we go. Now you can actually see that this before is on top of the black border. And a better example of this is if I do background color is equal to black on the box, not the pseudo element. Before. We can see that the red is outlined on top of it. Now if we wanted to change how we absolutely could, we could do. And this is part of positioning. We could say zed index minus one. And that layers it behind. Now, likewise, we can do the same thing but with after. So every element can have a before and after. We can do. Box colon, colon after. And we're going to select this box, but we're going to create an after element instead of a Before element. Let's go ahead and copy. Most of this stuff is going to be very, very similar. And we could actually group these selectors together if we wanted to. Let's change this from solid red into solid blue. And instead of top, Let's do bottom and right. And let's see how this turns out for us. And it's not going to be exactly what you expect, but it's going to, it's going to show something and we can adjust from there. Okay, cool, cool. So we have these on these before and after elements and they're behind. Let's go ahead and get rid of that set index. Or we can make it a positive is at index. I've like one or let say ten. And that's just layers on top. So now we have this nice little erring. What happens if we get rid of bottom? And right? Ok. So right after the element, it's going to be right inside. You can actually see that there's this border here, this blackboard or that ten pixel border. It's right on the inside. What if we said top and left are the same as the before? It moves it exactly where we expect it to go. So now as one more example, let's go ahead and get rid of this top-left. Let's go and get rid of this top-left. And these are going to be the exact same. We can't actually see these anymore, but we can select them. So we have a before, and we can say before is going to be top minus 30 pixels and left. And I'll just move that up in the video here. Minus 30 pixels. Okay? And we can select the after and we can do the same thing, but different bottom. Minus 30 pixels, right? Minus 30 pixels. And that just gives us this nice little layering effect. Now let's look at a real-world example. This is really, really cool, but this is not really a real-world example. So what I'm gonna do is I'm going to create an HR in here, just a horizontal rule. And I'm going to create a new link. So an, a element not gonna go anywhere and give this a border. Let's go ahead and put some lorem in here as well. And throw this right in the center. And so that undid my stuff up there, that's totally okay. And when I zoom in here, I'm gonna zoom in real, real good here. Let me zoom in at 200%. Let's say we want to give us a border. Let's get rid of this default styling and let's give this a proper border. And when you hover over it, it's, the border gets bigger. So what we can do is we can select R, a element, say text decoration. None. Let's do just nothing in there. Let's change the color to black. And let's see what this looks like. Ok, cool. It fits in. You see it's a link, fits in. We didn't tell it to link until we hover over it. What we can do now is we can say, Hey, element, before. Let's do content with a space. Width is equal to a 100%. Height is equal to, let say, four pixels. This gives us a background color. And I'll just move that up into the center of the video. The background color is going to be blue. And let see what this looks like. Nothing yet. Why is that? Well, we need to give us a position. So let's do on our main element here, position relative. And then on the before, let's do position absolute. Bottom 0, left, 0 has a width of a 100%. So this should now show up for us. There we go. So that doesn't actually look very good at all. And that's not really the point here. The point is to show you that we can give this a border. Now this is no different than border bottom. What did we say here? Four pixels, solid blue. But now on hover, we can start to match, mix-and-match these. We can say a hover before. And let's change that height to 14 pixels. Give that a refresh. And look at that. Now it covers the text. We can't actually see the text in there anymore. And instead what we can do is say, always be below the text, be underneath it like we're, like we're layering a piece of paper on top of another piece of paper. So we can say index is going to be minus one. By default, all zed indexes or Z indexes are at 0. We're gonna say, throw this just behind this text. And now bam, well, we still can't really see that's, let's change that from blue to yellow. There we go. That's looking a little better. That's still very hard to see in the video. Let's do red. That's a lot better. And so now we have this pseudo element using a hover state, and we're actually modifying this element itself. So if we go in here and expand our a, we can see that there's a before. And another cool thing we can do is we can click that dot-dot-dot, that ellipsis. And we can do for state hover. And that hovers this state for us as if we put our mouse over it permanently. And then we can click this before and we can see what's going on in here. Including the a selector using a hover pseudo-class using a before pseudo element. Now what I would like you to do is give this a shot. This is very, very important because this is part of advanced CSS. We are getting into the meaty parts of CSS. So give this a shot. Try creating a link, try creating boxes with before and after elements. 19. Changing the first letter and first line using pseudo elements: With the pseudo elements selector, we can target the first letter of an element. We can also target the first line of an element. So let's go ahead and create a paragraph in here with a bunch of Lorem. And we're gonna put a lot of warm in here. And it's all going to be in a single paragraph. And I'm gonna put on multiple lines, just keep my code clean, but it's going to look like one paragraph on the page. So go here. Okay, too small. Let's zoom in. And let's say this is like we were writing a website or recoding a website for a newspaper or some sort of magazine. And we want that first letter to be huge. We can target that. We can say in our styling here, target the P element. And we can do first letter. And then we can do font size of, let's do something big. Let's do like 50 pixels. And this is going to make this l just the very first l, not the other ones, just this very first one. Really big. Let's go ahead. Okay, looks alright, it's bigger. But we want the text to sort of wrap around it. And we know we can do wraparound things with float, float left. And this is very, very important to know, but it's also something we've learnt and CSS 101. So if you're not familiar with float, you might want to get familiar with float. It's very useful in certain cases like this. And so that L is still a little too big. But what we can do is we can select this p, go down to the bottom. Nope, it's not in there because it's not an element. Sudo and there we go. First letter element. Let's go ahead and change the font size. Just a justice to I don't know. Let's just keep making this smaller till looks decent. Yeah, something like that. And then we can also add a margin of Lake 50 pixels. If we wanted it to really stick out, we can add a margin of five pixels to make it a little more smooth-looking. And I'll just move this up. And this is the first letter selector. So let's go ahead and add that margin in there as well. Margin five pixels. Now we can also select the first line, and it's not going to be necessarily, this line of code is going to be this line. And that's going to depend on your browser. So we're getting into something a little more responsive here. And so let's go ahead and say P. First line. And let's do font-weight of bold. Save, refresh, and now it's bowled. Now the nice thing about this is it's always going to be that first line. You can see it's just the first four letters here. That's really hard to see. I apologize about that. But if I do this, it's always that first line. No matter how much text there is, it's always that first line. So that is your first letter and your first-line pseudo element selectors or pseudo selector. And honestly you're not going to use this too often, but it is good to know that it is possible to do so. I'm not going to give you homework for this one, but just tuck this in your back pocket, save it for later. Know that this is completely possible in case you're ever working with a client who has an article style website like a magazine or a newspaper. 20. Highlighting text with selection: Using selection, we can tell our browser what text should look like when the user selects it. So like when you hover over and then you click and drag LED, you can see that changes mine in VS code a little bit. We can change that in the browser as well. So let's open this up in chrome. Opening it in Chrome. We have lorem ipsum, nothing major here. And when we select, it's just the default browser. So, you know, honestly there's nothing wrong with that. But if you wanted to make it a little more interesting, especially if you have an article, website like Medium, where I believe if you hover over it, it changes the background color to green and the color to white. So let's actually go and do that exact example. So what we can do here is we can say, and this doesn't even need a particular element. We can just say, anytime you do any sort of selection, change that background color to green, and change the color to white. And now when I save and we're gonna see this is what it was before. Refresh. This is what it is now. And that is selection. I personally like that. I like that when I'm on a page and I want to copy some texts that I know exactly where I'm, I'm selecting this. It tells me that the front end developer who made this website actually put the thought in time and effort into doing this. 21. How to add smooth transitions: Let's take a look at transitions. Transitions let us smoothly make adjustments. So like, you know, when you hover over an element and you move it up like ten pixels will currently it looks a little junkie. It's very abrupt. And instead with a transition, we can make it be smooth so it's smoothly moves up and we can tell it to listen for a certain type of change such as like a width or a margin or position, any sort of thing. We can really transition a lot of things here. But in this example, we should transition you link. So let's make a link into a button. So let's do a button. And it's going to be nothing in it. And this is going to say, click me. And so let's target this link. And this give it a background color of fff. So it's gonna be white. It's already going to look white, but let's give it a white anyways, we can transition that later. We can say display is inline block, and we can say padding on the top and bottom is going to be five pixels. And on the right and left is going to be 15 pixels. It's also give this a color and explicit color. And this is going to help with our transitions. So colors not actually going to be white is going to be black 000. And let's just see what this looks like. Yeah. Okay. Now, not quite text-decoration. None. And let's give it a border. Border is one pixel, solid black. And let's go ahead and make this bigger. Zoom, zoom, zoom, zoom in, in. I'm at 500%, so this is the button. And when you hover over it and nothing happens, let's add a hover. We can say a hover. And so when we hover over this, let's change the background color to be black. Or we could do a hex color 000. And let's change the color to be white or fff. Let's go ahead and save that. And okay, so we have a hover state. It's a little jackie. Not really great for epileptics To be honest, but we can make this a lot smoother by saying transition. And what do we want to transition here? We could transition everything and we could say take 0.2 seconds to do it. So we say transition all as the first parameter. That's what we want it to transition. Second parameter is how long it should take. And when we refresh the page, you can see it fades in and fades out. Now, that's a lot better. Now we could actually make this significantly more accurate. And honestly, this is not super performant because your browsers now looking for every single change, it's going to look for display padding, colored text, declaration, border, and background color on the hover state. Maybe we don't want that. Maybe we only ever wanted to change the background color. We can say change that background color. Instead of all we change it to background color, matches this exact property name up here. And it's going to take 0.2 seconds. Now this is going to change. That background color is going to fade and we can actually kind of hard to see. So let's do like 2.2 seconds. And you can see this background color when I refresh the page up here, this background color is going to take a little while to fade in, but that color is going to be instant. C. That looks kinda cool. I guess if you like that kind of effect. Also say comma. And I like to put this on another line, color. Let's, let's change that transition length to something really long. Let's say like five seconds. And when I go up here, hit refresh. Come on down. Fading in and out. So nice and slow. Now typically your transitions are not that slow. Typically your transitions are like 0.2 seconds and this one could be 0.5 seconds. Let's go ahead and refresh something like that. And so that just makes it a little nicer. Now we can also change things like padding. But watch this when I say hover, padding with change at padding from five pixels and 15 pixels. Let's change that to double. So top and bottom are going to be ten pixels. Left and right are going to be 30 pixels. This is going to look a little Yankee c that we don't really want that we want it to be nice and smooth. So what we can say here is comma, comma comma community and padding. And we could say 0.4 seconds or because it's so much bigger, we can actually make this like 1 second like that. Now that's again, not the nicest example ever, but it is a good example. And this is really good for lake. When you have a site like let's go to rocket man, don't learn wag tail.com. And you can kind of see that this hover has a little bit of an effect there. Or if you were to hover over this, this is called a card. You could change the background color. You can make it fade in, fade out. You can make this move. You could do all sorts of stuff with a transition so it doesn't look so junkie. So that is a transition. What I would like you to do for this lesson is to create a link, make it a button, just like what I did, and then change the background color when you hover, you don't need to do all the other ones, but just change the background color when you hover and make sure you add that transition to your main elements, not your pseudo selector, not your pseudo-class. Your main element. 22. How to add gradient backgrounds: Okay, let's talk about gradients. There are two primary types of gradients. There is linear and radial. A linear gradient goes from side to side. Any radial gradients sort of emerges from the centre. Now, we're only going to work with linear because it looks a lot better. And honestly, I don't think I've ever seen a case where a radial gradient actually looks good. But if you wanted to, if you wanted to learn a little bit beyond what I'm going to teach you in the scope of this course, you can look up radial gradients and we're probably going to see an example of it anyways. But we're going to be working with linear gradients just because for the most part they look better, at least, at least during this decade in web design, it looks good. Maybe old styles will come back and it'll look good to have radial sort of gradients but linears, whereas at these days, so let's go ahead and add a box, and it's due box. And in this box we're going to have some sort of gradients. So let's not call it box, let's call it gradient. And in our CSS we can do gradients, select that element and we could say the background back ground image is going to be a linear gradient. And this is going to take a direction. So a direction, color one, color two. And so this actually isn't going to do anything. I'm gonna leave this here just for a second. Just leave that on the screen and let's do a height of 500 pixels. And we don't need to set a width because it's a block element. But you know, for good measure that's the width, 100%. And so there's linear gradient here. What does that direction going to be? Let's say the direction is going to be two, right? So it's gonna go from left to right. It's going to start off with the color of black, and then it's going to go into yellow. And so let's go ahead and load up this page in Google Chrome. And now we have this nice little gradient. Now what's cool about this is, this is going from left to right, but we don't need to tell it left to right. We can give it and angle. We can say something like 45 DEG four degrees. And that changes, it, changes it from black in this corner to yellow in this corner instead of left to right, it's from corner to corner. Now I'm gonna be honest here, most people actually don't memorize this. This is a real keener thing. People don't use gradients enough to always be memorable. And it's also sort of hard to figure out exactly what kind of angle you want. So usually we use some sort of CSS Gradient tool. And so what I'm gonna do is just hop on over to Google and I'm gonna type in CSS gradient generator. And so there's CSS gradient dot IO, Mozilla. This is a popular one. This one has been popular for a number of years now. But I mean, it's just like that first one because I have in other courses given this one a enough attention, let's go with CSS gradient dot IO. And so the idea here is you have a gradient and we can do, we can do radial here. So let's go ahead and grab this. And I just drag that down and that got rid of it. And so let's do radial. And this is what radio looks like. It starts from the inside and goes to the outside. So there is a case where it looks okay. In this case it looks alright. Now what we were doing was overhear this color was black and then this color over here. And we just select that one is white. And so that's radial, that's linear. And we can change the angle and stuff by going down here, changing this angle like that. There's no angle when it comes to radial though. And now the nice thing about this is typically these will give you exactly the CSS you're looking for. And so this is actually really nice. This is telling us this is a radial gradient. It's a circle. Linear is going to be 0 degrees. Let's go ahead and change that to like 68 degrees RGB 000, that's black RGBA, that has the alpha in here, that's a one, so it's completely visible. And 0% and then again, RGBA to 555255 to 55, that's white. A 100% transparency or maybe that's the wrong wording. Either way, you can completely see it and it's gonna go to a 100%. So it starts at 0 and goes to 100. And we can change that. That's what that 0 100% means. Let's, you can see that that number is changing there. And what this looks like is we can make this nice and tight if we wanted to, something like that. And then you can have text on the left. You could have an image on the right if you wanted to, if you wanted to make this one see-through. Just like that. And you can have an image, a background image just like that. So most of us don't actually remember all of this just because we use it so infrequently. They are nice to have. But usually we just use some sort of tool that's going to help us. Now, what's really nice is we can do this. Go in here, click right in the middle, and let's make this green. And we can do all sorts of stuff with this, and we don't have to figure it out through code. There are tools that help us do that. I would suggest using a tool for something like this. What I would like you to do is go ahead and Google CSS, gradient generator used this tool, use another tool, doesn't really matter. They all sort of do the same thing. Just experiment, and then look at the code that it gives you. Copy that code, and then put it into your page. You can change the entire gradient background of your body elements. Don't forget to give it a height of a 100% if you select the body element or a class or a div element like what I did. And I selected the gradient and then I just applied it to there. So just go ahead and give that a shot is really, really fun. It adds a nice little spice here website as well. 23. How to layer backgrounds and gradients together: Tagging along from that last lesson, we can create a background image so it appears darker without actually having to do very much work. And now there are a couple of different ways to achieve this. One is using a filter which we haven't learned yet. Or another is using a gradient to layer on top. And in this lesson we're going to use the gradient on top. Just because sometimes you want a gradient on top and you're going to see this all over the place. Once you see this, you can see it like all over Facebook. You can see it all over Twitter. There's gradients everywhere and they're nice and elegant as well. So first things first, let's go ahead and select the body element. And I'm gonna give this no, not just body. I mean, it's like the body and the HTML elements. I'm going to give this height of a 100% and let's get rid of the margin and the padding. And then I want to select just the body element. And in here what I can do is I can say the background image is going to be a linear gradient. Let's give us like a 180 degrees. And let's say this is going to go from black to black, but different, different opacity. So RGBA is 000, and then the alpha is going to be 0. And that's going to start at 0%. And then it's going to go to RGBA 000, that's black again, and that's going to go to while we can say 0. So that's actually not going to do anything, that's not going to gradient at all. But we can say 0.6 to begin with 60% see-through black and then two. And this is just so hard to read. Let's go ahead and put this on new lines, something like this. There we go. And this is actually sort of getting into programming because that's what these parentheses means. It means this is a function. We'll talk about that in JavaScript. Once we're done with CSS, we'll learn more about that in JavaScript. But what we're saying here is we've got a linear gradient, a 180 degrees, start with black, it's 60%, see-through, go to 80% and it's going to end at a 100% down the road. So let's just see what this looks like in Google Chrome. Okay, so that's a nice little gradient. Let's go ahead and actually make this a little more. Yeah, there we go. So the later on the top, darker on the bottom. Now if we wanted to add an image to this, we absolutely could. But first we need an image. So let's go to an Splash.com and let's take a look at this image. Rock, get this one. And I'm going to right-click and copy image address. And I'm going to hotlink straight to this to that image. And what we can do here is comma. And let's, let's maybe actually put this back on its original line there. And I like making these line up, so it looks nice. And then we could say URL, like a regular background-image. Paste that URL in there, semicolon. And let's go ahead and take a look at this. That looks pretty good. Now let's go ahead and delete this linear gradient. Let's just cut that out for a sec. This is what the image looks like normally with a linear gradient on top of it. What it looks like now. Now the nice thing about this is we can add some text. But before we do that, let's go ahead and add colors is going to be white. Font size is going to be something huge, like 90 pixels. And text align is going to be Center. And so in our body, we can now say, this is a rocket. Save this as a rocket. And so this text is a little more visible versus this. If I go ahead and just delete that, you know, it's, it's not bad, we can still see it. Let's, let's even do this. Let's do padding. Top 200 pixels. Note let's go further, and that's go 500 pixels. So we can't even see all of that now. That's just the nature of this image. And we can't necessarily change the image all the time. But what we can do is we can throw that linear gradients back in here. And now we can read it perfectly fine. Now, a case in point is if you took the CSS one, oh, one class. If you've got a rocket man duller and wait till.com, that's exactly what's going on here. It's even the exact same image. Now I would like you to give that a shot. Don't forget you have access to this file. Also, you can ask questions in the learning to code Facebook group if you ever have questions or you're curious about something, or you just want to get feedback. 24. How to use custom web fonts: We can load custom web fonts into our site. So the wave fonts work is it will try to access the font on your computer. And we've seen this sort of before in CSS 101, where it's like font-family and then it has like the first font and then like some sort of fall back. And most people have like Arial. And then it's going to say something like a serif font and Serif font. And so it's going to try this one. If it doesn't exist, it's going to try this one. And if it doesn't exist and it's going to let you computer choose. But let's say this one doesn't exist. How do we make it exist? Now a nice thing we can do is basically import it from somewhere else. So we can go to fonts dot google.com. And let's go ahead and just grab a cool-looking font that we can find something that really sticks out that's going to be a little bit different. None of these are pretty wild. There's that one to this one, specific O. And so I just click that, select this dial. And I can add different font variations if I wanted to. I'm not going to, I'm just going to embed up here. And we can import either through, directly through our CSS, which is pretty cool, or through our HTML. I'm gonna do the HTML way. So take all of that copy. I apologize, that's small to see, but if you follow along, it'll be easier on your computer to see it. And then above our style, just paste that in there. Now we don't know what this name is yet. We think its specific o, but could be lowercase. Uppercase could have a different name. We, we never know. So what we do is go back here and it says CSS rules to apply font families, font-family Pacifica or cursive. Let's go ahead and change that. And what I'm gonna do is I'm gonna comment that out and we're gonna see some Lorem Ipsum, Lorem Ipsum. And let's go ahead and change that font size again to something bigger, something like 45 pixels. And this is what we see. This is our standard font. If I uncomment Pacific, oh, it changes it. Now, here's the thing is if I don't add this line in here, if I just cut that out of my code. It goes to cursive. This is what my computer uses when it's told to use cursive. So it's saying, Hey, Caleb's computer use Pacifica, but if it doesn't have Pacifica use cursive, well, Pacific o doesn't exist. And so what we said, make it exist in this HTML element is going to say, hey, go in here, download this file called Pacifica. In that file, we know it's called Pacific o. So we can now have access to it and use it. Just like that. What I would like you to do is give this a shot, go to fonts dot google.com, pick a font that's free. They do have some on here that are paid. Do not pay for a font At this point, please. Just find a free font like Robodog. Robodog is a good one. You can choose all different styles if you wanted. These are different font weights as well. So we get today like us, like that's like that's like that's like that. And we can use these different font families in here. Go ahead and give that a shot. Try using a custom font. 25. What are transformations?: Okay, let's talk about transformations. A transformation is a way that we can rotate, skew scale, or move in element away from its natural spot. Now in this example, I just have a regular box on my page. And when I just open this up to regular box, In fact, let's, let's add a margin to this. Let's do margin 50 pixels and auto. And that's going to center a line that for me. Now, let's go ahead and go through some of these transformations. Now it transformations aren't hard. We can mix and match them if we wanted to. But let's just go one at a time. So let's first start with translate to this one is interesting. Translate, I think personally is not the proper name. The property is called transform transform. And the key, or the full declaration is going to be transformed translate, and then it takes parentheses. And we can move this on the x axis and y axis. So we can say move us on the x-axis, a 100 pixels, on the y-axis, a 100 pixels. And when we go back to our page, refresh, we can see it actually moved. So that's what Translate does. It just moves it, it translates where it naturally sits on the page. We've done this with position, relative position, absolute position, fixed position, sticky. We've done all sorts of movements like that. We can also use margin on the top and the left to sort of push the element around, but translate as another way to do this, which is really, really nice. Let's take a look at the next one. So I'm going to comment this out. And I'm going to comment this using proper CSS. We can also do rotate. Let's see what Rotate does. So we want to do transform, transform, rotate. Let's do 45 degrees DEF for degrees. And that just rotates it for us. And we can do any sort of degrees we wanted to. We could do like rotate it 68 degrees or 91 degrees, which is sort of the same as rotating it one degree or ten degrees. We can rotate this as much as we want. If you do rotated perfectly 90, it's gonna look like nothing happened just because this is a square. So that's 90 degrees, that 0 degrees, 90 degrees. And then just because again, the way the geometry works. So if you ever like, oh, I don't know if it's actually working. Try try changing it from like 90 or a 180 or 270. Try changing it to like 200 and no, not 370. Let's do like 310 degrees and this goes in a circle as well. So the maximum number of degrees is 360 degrees. Next we have trends form. And I love this one is called Scale. And so we can scale this. Basically zoom in on this one element and we can, we can say scale in 200% or scaling to, and this is going to make it bigger. Or if I scale in 1.1.3. So still bigger, but not as big as two. And let's comment that out. So there's no scaling. This is how big it naturally is that scaling. And lastly, we're going to have skew. So we can do transform skew and we have x and y. We can say skew on the x and y, or we can say just skew X if we wanted to. Let's do skew X and Y takes two values. So let's do 20 degrees, and let's also do another 20 degrees. So that's going to scale on the x and y. And it looks skewed. And the nice thing about this is it's going to skew your text to. So if I do lorem in here, excuse my text. And if I wanted to as just an example, we could comment that out. And we can say trends form. Let's see you askew as an example of skew X just 20 degrees. And we're not going to skew the y at all. And that's what that looks like. So it skews it along the x axis left and right. Y is going to skew it along the up and down axis like that. So that's the transformation. You're not going to use these too much until you get into really elegant is really insane designs which I would like you to get into eventually. So just type this in your back pocket and know that you can transform things like this. Should you ever need to? 26. How to make animations using CSS: Okay, let's take a look at animations. Animations Let us move things in a smooth and controlled way. It's a lot like a transition, but we don't necessarily need some sort of event to trigger it. Like, you know, when you hover over a link and that transition sort of changes. Well, that's because you hover your mouse over it. But what if we just wanted something to move on the page without some sort of trigger, we can do that with an animation. And the nice thing about that is we can tell the animation to start right away. We can give it some sort of delay. We can do all sorts of stuff with animations. For example, we could make things wiggle, we can make things rotate and we can make things jump out or bounce if we wanted to. Or really anything that we can do with CSS we can animate. So what I'm going to do here is I have a box. And let's go ahead and just show this box and let's do border radius 50%. And this is going to be a box, but it's also going to be a circle. It's going to display as a circle. So here we go. I've got this circle. Nothing fancy. It's completely static. So first things first, when we're creating an animation, we need to give it an animation name. So let's go ahead and create a new animation. We use the at symbol, key frames and then a name. So I'm going to call this slide me. And it's going to take a from, and it's gonna take a2. Now, I want to make sure that this is movable. So let's say this position of this element is going to be absolute, absolute. It's going to be at the top of my page and the top left of my page. And when I refresh the page, it just hugs that top that top wall here and that left wall there. So what I can now say is from top is equal to 0. And let's say left is equal to 0. And where I want it to go is left is 100%. So let's just move it left all the way across the page. And when I refresh this page, nothing's going to happen because we created an animation, but we didn't set the animation to be applicable to our element. So what we do in our element is we say animation name is equal to slide me and this is case-sensitive. So I've got a capital M in there. Make sure you have capital M in yours if you're using capital M. So it has to be the exact same. When we save this and refresh. We actually saw that it doesn't work. Let's go ahead and give this an animation duration. It doesn't know how long to, to slide four. Let's say it's going to slide for four seconds. Now let's go back. And as soon as we give it a duration is going to move all the way across the page and then off of it, and then it starts over. Now if we wanted to do this forever, an animation, iteration, count, iteration count, nailed it. And we would say infinity, infinite. And it's going to go to the end and start again and start again just like that. Now if we wanted to move to the left and then come back, we can give it an animation direction and animation direction. And we can say all turn eight. Hold on. I'll refresh us and it will go to the left and then it's going to slide. It went all the way left and then it's going to slide back left and it's going to move back right and then slide left. Now that is a simple animation. We can make these significantly more complicated if we wanted to. We could just comment this out entirely and let's create a new animation. So I commented that out and it's like it doesn't even exist. So we can do keyframes, slide me. So this is going to be the exact same name as this one here. Just happens to be that this one is commented out. And then we can say something like at 0%, do something, then add 50%, do something else, and then add a 100%. Nope, not there. Then at a 100%, do something else. So at 0%, what do we want this to do? We want this to be at the top, 0, left, 0 at 50%. Let's change the background color to blue, and let's actually set the background color to black. By default. Background color is equal to black. And then at a 100%, let's change the background color again, background color is equal to yellow. And let's go ahead and see what this looks like. Oh, actually we need a 100% to be left, 100%. And so what this is going to do is say at 0%, This is where the CSS should be applied to. This kind of CSR should be applied at 0%, at 50% of whatever that animation is, that animation duration is four seconds. So at 50% or two seconds change the background color to blue and should be completely blue at that point. And it's going to try to be nice and smooth. And then at a 100%, at four seconds, that background color is going to be fully yellow and the position is going to be left 100%. Let's go ahead and give this a shot and let see what this looks like. Just like that and then goes from yellow to blue to black. Now what I would like you to do is I want you to create an animation that does something like this. However, I want you to make a box or circle or something. You can even animate an image if you wanted to just make a little div with an image in it, I want you to make yours go from the top left to the top right, to the bottom right, to the bottom left, and then back up to the top left. So I want yours to go all the way around the frame of your page. Don't forget, you're going to need to use position absolute for this position absolute. You're going to want to set the initial state on your element before you get into the key frames. So this says top is 0, left is 0, even though I'm re-declaring it here, that is ALK and it's nice and explicit. And then you want to give it an animation name that needs to match your keyframes name down here. Give it a duration, otherwise is not going to work. And then for your task, for this, you're going to be using for percentages. So 02550%, 70 or 75% rather. And then maybe possibly a 100% of middle leave that up to you, see how that works out for you. Go ahead and give that a shot if you get stuck, don't forget, you can ask questions and the learning to code Facebook group we're here to help. 27. Flexbox: the new kind of page layout: Okay, let's talk about table layouts are not table layouts by page layouts. So up until this point, you've probably been using display inline-block. You've probably been using tables or floating to move your elements across your page. But there is a better way. There's two better ways to do this actually in the first one is flexbox. So I'm gonna teach you flexbox. It's important that you get familiar with flexbox. I'm gonna teach you the, the basis of flexbox. And then I want you to go and maybe explore flexbox a little bit further. Now, the thing with flex and what we're going to be learning after grid is these are very big CSS modules and you do not need to know all of it. Eat like you don't need to memorize all of it honestly. You need to remember sort of like how certain things work. But then you just need to be able to Google your answers later. Because honestly, I've been writing CSS for a long time and I still don't remember every single way to apply flexbox off the top of my head. And that's just the nature of the beast. There's a lot to learn in CSS and there's no possible way you can learn all of it and remember all of it. You just need to be able to remember how to get your answers. And again, that's about 50% of web development these days is knowing how to find your answers. So let's talk about flexbox. Flexbox is a layout module that makes it easier to design flexible, responsive layout structures without using float or positions or tables and things like that. So let's go ahead and create a div. And I'm going to call this the nominal, call this a container. And in here let's say I have two elements and I want them side-by-side. So I've got a div here and call this left and I've got a div here. Recall this, right? And when I boot this up in my page, and this is just from the last lesson there. It says Left and Right. Now what if we want them actually to be left and right? While we can float them, we can position them, we can do all sorts of things, but there's a better way. And that's flexbox. So the nice thing about this is it's quite simple to get started and it can get really, really harried down the line because there's a lot to learn, but to get started is really easy. So let's go ahead and select our container. And we're gonna say display. This as a new display type is flax. Let's save that, refresh our page, and now it's left and right. And let's go ahead and select those containers, container elements or container items. And let's give this a border. One pixel, solid red. Cool. Okay, so we have something that sit side-by-side. Let's go ahead and make. Each of these items. Could be, let's say 50%. So we say flex basis and we want this to be 50%. Now this is flexible so we don't use the word width because width is implying a hard coded value. Flex basis is going to say start at 50%. But you know what if the right column takes up more space and left column, left column is allowed to shrink, or vice versa. The right column is allowed to shrink or right column is allowed to grow. So what we can do here is we can say class is equal to, right? And then we can say, you know, if there's, let's get fancy with our selectors here, container div dot, right? We can say that this flex basis needs to be seventy-five percent. Let's go ahead and refresh our page and we see that it now takes up 75%. And that left was actually shrunken down a little bit. And we can do a really drastic example here of saying like 95% And it's shrinking as much as it possibly can here. Now we can say that, hey, by the way, these are not allowed to shrink, These are not allowed to grow either. So we can say flex shrink is equal to 0 and flex grow is also 0. And what this is going to say is this flex basis, this left column will always be at least 50%. And now what you don't see is I can scroll over here, is that right is 90% of the viewport width. It just happens to be going on to the part of the page that we can't see by default. Now I'm gonna get rid of that right in there. Just because I think I was gonna make this a little too complicated, but that was a fun little example. And now we can't scroll left and right, and we have 50% here and 50% there. Now what happens if we wanted to add another container we could, or another item, we could say this one should be center. So we've got left to center and then way over here we have write. And again, this is taking up 50% of my viewport, 50% of my viewport, and then write just taking up 50% of my viewport for a total width of a 150%. And this can get really, really frustrating. There's a way around this. On our container. We can say flex wrap, wrap the page. So what this is going to do is say, this is 50%, this is 50%. If anything goes over a 100%, just bump it down onto a new line. And these actually do go onto their own lines because this is 50% plus one pixel on either side. Let's go ahead and change everything on our page to box sizing border box so that our boxes also include the width of the border. And boom, we're working with layouts now. Now we can just keep adding elements to, we can just keep adding them and they'll just keep stacking the way we want them to stack just like this. Now, we can change that flex basis. Let's change that flex basis to something like 20%. And now we have ten cells, all sort of side-by-side and nice and tight together. And they are flexible. Meaning we no longer need to use tables. We no longer need to use floating or position absolute with relative and things like that. We can use flexbox to put things side by side. Now, this is not the greatest example. A better example is going to be if we do this, let's create in our container div, and this is going to be called navigation. So let's give this a class of navigation. And we're gonna create another one called content. Content in here. And so what I can say is, let's keep the box-sizing. Let's keep our container to be display flex, flex rap, so it wraps onto a new line if we want it to. Let's go ahead and get rid of this stuff in here except the border. And we're going to effectively restart. Okay. So we don't have a flex basis or a flexbox width is a way you can think of it. We need to set that width now. Now, we don't want to necessarily set the flex basis on both of these. This is selecting the container and both devs, we wanna select it on the navigation and content. So let's go ahead and type Navigation. Let's give this a flex basis. And 20%. And is it allowed to grow flex, grow? No. Is it allowed to shrink though? Flex shrink, yeah. We're gonna say is allowed to shrink if it needs to. Okay, so that's 20% of my viewport width. That's this entire white section that we're looking at here. And for content, let's do dot content. Flex basis is equal to 80%, the remainder of 100% minus 20%. And let's do the same thing here where we say flex, grow, and shrink. But the content is more important. So is it allowed to grow? Yeah, is allowed to shrink. Let's say no. Now we have some content in there and we can get rid of all that in there and we can do all sorts of stuff. We can say H1, HelloWorld paragraph with a lower them. We could do another H2 and other heading, Hello world again. And we could do another paragraph with some lorem in there. And boom, we have navigation, we have content, we have a page layout. We can, even if we wanted to put a header in here, we can do dot header. And let's go ahead and style R-dot header. That's say dot header. Flex basis is a 100%. Can it grow? No, we don't want it to be more than a 100%. Can it shrink, flex, shrink? No, it needs to be a 100% all the time. Let's say the header nice have a background color of fff. Nope. Let's do CCS, CCC. And let's say the color needs to be five-by-five. Border bottom, two pixels, solid black. Okay, that almost worked. We just need some actual content in there. So header. Think of that. Okay, that looks kinda terrible. I can't live with that in good consciousness. So let's do background color is equal to five f five of five colors going to be black padding. It's going to be 20 pixels. There we go. And if we go ahead and get rid of that border, and because it's the only thing in there, we can get rid of all of it, but let's just comment that out so you can access this code later if you wanted to. We have some sort of table layout or not a table a o, but in CSS 101, we did this with a table in CSS 201. Please don't use tables anymore. We don't need tables for layouts. We can now use flack. And this is the way you should be creating page layouts in the future. Flex or grid will talk about grid in the next lesson. Now what I would like you to do is spend probably 20 minutes, maybe even more. You're going to want to set display flex on a parent element. So we have our parent element. All the child elements will be flex items. That's what they're called flex items. So we've gotten navigation content and header item. And then I want you to set the flex basis of them. See if you can get flex rap to work. Flex grow and shrink, mess around with that. So you see if you can get that to work for you or not work for you and get a feel for how it's supposed to work. And I want you to, before moving onto grid, create something that looks a little bit like this. Now he doesn't need to look beautiful. We're focusing on the layout here, where we have a left column here. We have a right column here, and we have a row on the top called header. Go ahead and give that a shot. Remember if you get stuck, ask questions down below, ask questions in the learning to code Facebook group. There are a lot of us who know a lot about flexbox, we can help you had a moment's clades. 28. Grid: the promised land of page layouts : Grid is an even better way to create a page layout. It's more advanced and flexbox and it's specifically designed to be good at making page layouts. So while flexbox has its purpose like being able to vertically align things, which is nice, we didn't cover that. That's something you might wanna go and google on your own time though as a little extra homework. Grid is not designed to do that. Grid has literally for a template layout. So when it comes to grid, there are a few things we need to know. There are columns, rows and gutters. And these gutters, we call them gaps. In frameworks like Bootstrap, you're gonna see them called gutter. We don't call them gutters technically, and CSS are called gaps. So we've got columns, rows and gaps between the columns and rows. And like an HTML table, we can make each cell spend one or more columns or rows. So let's dive into this. So let's go ahead and create our first grid. Let's create an ID in here and I gotta change from Django template back to HTML. Let's go ahead and create a container element called grid. And it has an ID of grid. And let's give this an item, and let's just call this one. And I just made nine items in here. Now, if we refresh our page, we're gonna see one through nine on their own lines. This is completely expected because currently this is not using a grid, this is using basic default display block, and these are all divs. So what we can do here is we can select our grid and we can say grid display and a new display type here we can say grid. And this is just going to turn it into a grid. So if we take a look now, nothing happens. We need to say this has a grid template, grid, template columns. And how many columns that we want? Well, we have nine sections, so let's do three by three. So let's do auto, auto, auto. So these are columns, and this is going to be column 123. Let's go ahead and see what this does. Okay, we're getting somewhere there all side by side. That's really nice. Let's go ahead and select every item in here. Let's do item. And let's give this a border, one pixel solid red. And this just allows us to see what we're working with here. Now let's say we want to create some sort of gaps between these. We can do this with a grid column gap or grid row gap. A grid column gap is going to look like this. So grid column gap, and that's going to be, let's say 20 pixels. And so it creates a little gap between our columns. Or we could do grid row gap. And that creates spacing between r rows. And we can actually have both at the same time. So column gap and roll gap of 20 pixels. And now we have a nice-looking grid here. But this is not that great for page templates. To page templates usually have some sort of header, some sort of navigation, Some sort of footers. Let's go ahead and create that. Let's create item one. Let's make it span through 123 and then we'll get rid of 23. And this is a lot like working with the table, but it's using CSS. So what I'm gonna do here is I'm going to copy all those. Copy. Paste and just give these item names in here. So these are all going to share the styling of 11 pixel solid red border. Let's select item one. Item one. And we can say the grid column is going to start at item number one and it's going to end grid column and at item number three. And so what we're saying here is start at column one right over here, 23. And it's going to take over all of this. And I actually do that wrong. It should be starts at one here, two there, three there, and then for there, let's change that to four. And item one is now going to be a header and it displaced, it dislodged number 23. So if we wanted to, we could get rid of those if we wanted to. We don't need to. Let's go ahead and actually get rid of 23. So item 23. There we go. Now let's merge a 69 together. And we can do that with grid row start and grid row end. And we want to work with item six here. So let's do item six, grid row start. Where is this gonna start? 1234. So let's say this starts at two. And it's due grid, row end and 1234, let's do four. And occasionally I actually get these mixed up. Yeah, there we go. Did that, right. And so now we dislodge the ones that were just after it. So let's go ahead and try to touch this up. Now, sometimes when you're learning this, it's a little bit of a guesswork, but we now have row six. Alright, so we've got 1456. Let's go ahead and get rid of I don't know. Let's just get rid of nine. And let's get rid of nine. Ok, that's nice. Let's go ahead and merge 45 together. So we want Item 45 together. So let's do item for and we're merging columns the other. So we want to do grid columns start. And this is one over here to over here, 34. So we went two to four. And we can do this. Okay, that works. Now let's do the same with 57 because and let's see what happens when we do 57. We can do the same thing, item five, and this is just applying the same sort of styling. And now we can see that this is all dislodge. Its, it's looking pretty good. Lets go ahead and merge 78 together. And let's get rid of eight. And so we want seven to look like item number one up here. And we can actually start to reuse things. Because item one and item seven are going to have the exact same layout in the sense that I want item seven here to take up the whole width. And item one is going to take up the whole width. So we might as well reuse this styling. We have something to work with here. We have a header up here, we have a footer down here, we have perfect spacing. We have a navigation section or maybe an advertisement section. We've got some content for the top content, maybe like a summary section and the content of the page. And so that's how you make a page layout using Grid. And so grid gets vastly more complex than this as well. But this is a really, really good start to learning how to use Grid. Now when you're creating a page in the future, try to use Grid as your page layout module. You can use flexbox, you can't in technically use tables and floats, display inline-block. You can do all sorts of stuff, but try to use Grid from now on. Or if you don't want to use grid, you can always use flexbox. Both are completely acceptable from here on out. But what I would like you to do is I want you to try and create a layout like this. Now what I want you to do is make your brain sweat. Don't reference my code, although you have access to it. Don't reference my code. I want you to try and remember how to do this. And if you don't remember, I want you to go and get some practice googling how to do this. Remember, just the terms are what you need to know. Go ahead and give that a shot. If you get really stuck or you want to join a community, you can always join the learning to code Facebook group. We are here to help. 29. Your final project: Your final project is going to be find a really nice website design and replicate it as much as you possibly can. You're going to run into a plethora of hurdles. It's going to be really hard, is going to be really good practice. I would say just do the best that you possibly can and just have some fun with it. If if you can't make it perfect, that's totally fine. So what I would like you to do, open up your favorite browser, go to Pinterest.com and just type in web design or web design inspiration, web design layout, anything like that. Let's do web design inspiration. And create a nice looking site. You know all the pieces and don't forget to break things down into smaller components. Don't try to look at a page and they'll go, I don't know how to do all that, break it down into small components. So a good one would be like this one. And this is a Squarespace website template apparently. But what you can do is you now know how to make this navigation up here. You know how to make things Center, you know how to select the center element for your logo. You know how to make a hero. You Nobel padding and margin. So you have this section covered already. Down here. We have like a little card. You have that section covered already. So just styled. It doesn't need to be functional. It doesn't need to be an actual carousel and slide and everything. But you do want to make sure that it does have like a background color that the layouts nice. You can try adding and arrows and things like that. This section here also use a grid. This is a really good candidate for grid, and then you just use background images. So you can go ahead and get started with something like that. If you don't wanna do that particular site, that's totally okay. You don't need to find that one either. You can go and, you know, if you're feeling really spicy, you can try to do something like this with all the angles. You can use. Transform to skew things, to rotate, things to use like this section here would actually be a square and then it would just be rotated a little bit and so that it meets right in the middle. Yeah. Give that a shot. Don't forget to break things down like this could be flexbox. This would be flexbox, not necessarily grid but flexbox. And this one we just have a margin top of an extra like 50 pixels. So what I would like you to do is go ahead and give this a shot and just try to break it down piece by piece. Don't don't try to tackle all of it all at once. Maybe tonight you tried to do like the navigation and tomorrow you tried to do with the hero section and the next day you try to do the next section. Take your time with it, have some fun with it, and really try to get into the nitty-gritty of CSS. Everything you've learned in this course is applicable to these style of designs. These designs are pretty wild actually. And to be totally honest, this is a very, very advanced design. So maybe, you know, if you're not feeling comfortable, don't start with that one. But you can start with something like this. This is a really good one. It has your navigation, has a header, it's got a button in there. It's got different font sizes, different font types. You've got different styles in here. So this could be flexbox as well, or floating or position relative or position absolute. You can try anything like that. I would say try one of these. If you want to start with something easier, I would say go to rocket man, don't learn wag tilde.com and just try to recreate this site. The justice page, not all, not all the pages on here, just this page. So you've got navigation in here. It's nice and simple. You've got background image, gradient on top. You've got a button, and you've got different texts, you've got different fonts, so custom web fonts. And here we have flexbox, we have two cards side-by-side. In here we would have two cards side-by-side, but this one's using position relative and position absolute to sort of bump it over in just a little bit. So it's layered on top using a zed index. Same thing with this, just the opposite way instead of moving left and the second is moving right. And in here we could use Grid or flexbox. I would suggest flexbox for this one. And then you can use Grid down here. Go ahead and give that a shot. I know it's a lot to take in, but honestly and I cannot stress this enough. Start small, start with just the navigation. Start with just the header. Take your time on it. Google a lot, ask a lot of questions. I'm here for you. The learning to code Facebook, a community. They're all here for you. Go ahead and give this a shot and feel free to share your progress along the way. Oh, and one last thing, because you're on skill share, you have your skill share Project section. So if you go into your projects and click the green button that says Create New Project. I believe that's what it says. You can share your project so you can share screenshots and you share your code, how you can do all sorts of things in there. So make sure you share it in there. But most of all, most importantly, have some fun with this. 30. Summary: Alright, you have finished CSS 201. This is intermediate CSS and actually this is intermediate to slightly advanced CSS to be completely honest. But, you know, great job completing this whole course. This is a lot of content to take in. I hope you have learned something fun. I hope you've got some hands on experience. I hope you've been coding along with me through the lessons. But let's talk about your next steps. Your next steps are going to be creating a beautiful website using CSS and HTML. I want you to try to challenge yourself and make a website look as beautiful as you possibly can. Feel free to get inspiration from places like Pinterest as well. Because honestly that's the whole reason CSS exists. Css purely to make your website look beautiful. Now once you're done with CSS, you can go and learn JavaScript, but please don't learn JavaScript until you are quite familiar and quite happy with your CSS skills. Javascript is a very different game to play. But once you are ready for JavaScript, I have several courses on JavaScript as well. So just check out my profile on this platform for all my different courses. And lastly, if you need or if you would like any extra support, please come join the learning to code Facebook group where you can ask questions about anything CSS related. Last but not least, I would like to say thank you for taking my CSS course. I know there are other courses out there and I appreciate you taking my course. Once again, my name is Caleb Colleen, and I have proudly been your instructor throat CSS at 201, and I hope to see you in another one of my courses. Have fun coding and I'll see you around.