CSS Full Course - Includes Flexbox and CSS Grid Tutorials

CSS Full Course - Includes Flexbox and CSS Grid Tutorials

SUBTITLE'S INFO:

Language: English

Type: Robot

Number of phrases: 1685

Number of words: 12679

Number of symbols: 52612

DOWNLOAD SUBTITLES:

DOWNLOAD AUDIO AND VIDEO:

SUBTITLES:

Subtitles generated by robot
00:00
hello my name is beau Carnes and I'm with freak ok org this is a complete CSS course or cascading style sheets CSS is something you use to style websites or style HTML so before you watch this course you should have some familiarity with HTML you can learn HTML through the free HTML curriculum at freak ok org or you can check out the video course that I link to in the description this whole
00:31
CSS course follows along with the CSS curriculum at freak ok org so when you hear me talk about challenges or completing challenges I'm talking about the challenges as part of that curriculum however it's a standalone video so you don't have to go through the curriculum to get value out of this course but if you want to you can go through that curriculum as well I have the link to the free code camp org CSS curriculum in the description after you finish this course you may want to try out some CSS projects so I
01:04
have a link to a playlist with a bunch of CSS projects you can do a write in the description and then after you master CSS and HTML it may be good to try out JavaScript so I have a link to a JavaScript course also in the description so let's get started in this challenge we're going to talk about inline styles inline styles are where you style something right on the element that you want to effect so if I
01:38
put my mouse on this P tag here I can add a style to the PP AK by just using style and then we're gonna put what the style is going to be and we're gonna put color blue so that would just make the color that text blue but for this challenge we're not going to style the P tag we're gonna style the h2 so I'm going to undo that and now I'm going to add the style to this h2 tag and I'm
02:10
going to make the style where the color is going to be thread just like that and let's open up the browser and see what that looks like okay you can see that the text the title here is red [Music] in the last challenge we talked about inline styles that's what this is here now we're going to talk about a different way to add styles using a
02:43
style block and you can see we use color red there are actually hundreds of CSS properties like color we're going to eventually get to those but not quite yet I'm going to show you the style block so to make a style block just at the beginning I can add the the tag style and then we just need a closing style block and now I can add all my Styles between these two style tags so
03:16
let me give you an example if I wanted to style all the paragraph tags I can put a P and then I'm going to put a curly brace and inside these two curly braces I'm going to put color red now this is going to style all the paragraphs every time you see a P tag like here here and all the P tags are gonna now be red if we look in the browser we can see what that's going to
03:46
look like so you can see look this paragraph is red this paragraph is red all the P tags have now changed the text to read so for this challenge we're going to take out the inline style here and I'm going to add some style to this block up here instead of styling P tags we're gonna sell the h2 tags and I'm going to make them all blue so I'm
04:19
going to put color blue now let me open up the browser and we'll see what that looks like if i refresh and you can see the h2 is now blue in the last challenge we learned about styling tags like this all eight two tags are blue in this challenge we're talking about styling classes classes are reusable styles that can be added to HTML elements so to show that you're
04:54
styling a class you would put a dot in front of it so I'm going to change the state's h2 to dot blue text and if you add this dot blue text this is only going to style elements that have a class of blue text so for instance for this paragraph I'm going to add a class and I'm going to put in blue text now you can see I put a period up here but you don't put a period down here the
05:25
period just means it's a class when you're looking at your CSS your Styles so if I open this in my browser and refresh it we can see that this is now blue right here we're gonna change this up instead of making us a blue text it's now going to say red text and this color is going to become red I'm not going to need this anymore because instead of putting the class on the paragraph I'm going to put the clasp on this h2 tag
05:56
it's going to be class red text and then if I show that in the browser and refresh you can see the title is red what's great about classes is that they allow you to use the same CSS styles on multiple HTML elements so friends and see how this has class read text I can hand write X a class read text to any element to make it read and that's what we're gonna do in this challenge
06:33
so on the first P element right here right up here I'm gonna add class equals read text and when I open up the little browser here you'll see that the title is red and the first paragraph is red just by adding the class to both elements there are hundreds of different CSS properties we've only talked about color so far but another one is font size
07:09
that's pretty self-explanatory it's going to change the font size of an element so for instance I can put font size 30 pixels and now everything that has the red text class will also be font size 30 so if I look in here you can see that this paragraph is a lot bigger now we're going to change the font size of paragraphs so I'll just remove what I had here and I'm going to add another style so right down here it's going to
07:41
be P and the font size is going to be 16 pixels so I'm gonna put 16 px and now if I show the browser here we'll see that all the paragraphs are 16 pixels that we've just increased everything to 16 pixels for the paragraphs you can set which font an element should use by using the font family property now you can use a type or style of font
08:22
like serif sans serif or mono space or you can put in the exact font so in this challenge we're gonna make all the P elements mono space so right here I'm going to put font family and then mono space and if we just show this in the browser and refresh you can see now we have these this mono space font here just like that you can import fonts from different
08:58
websites a free library of web fonts that you can use is google fonts they have a lot of great fonts and that's what we're going to do in this challenge we're gonna see how to import google fonts so if I just paste in some code up here this code comes directly from the Google Fonts website and you can see it's the font family lobster so I'm just about to show you how to use that right in our code here so what I'm going to do is for the h2 element I'm going to at h2 here
09:31
and I'm at a font family of lobster now that's all I really have to do for this challenge if I wanted to I could add a backup font that would be used just in case the the Google font didn't load like this I do a comma and then I can put a generic font that's going to be used if the specific font doesn't load but we're not going to do that for this I'm just going to open the browser and see if it works and you can see we have
10:07
the lobster font right here there are some default fonts available in all browsers like mono space serif and sans-serif you can see we're using the mono space font right here so when one font isn't available you can tell the browser to degrade or default to another font like one of these default fonts like the monospace font for example let's say we had the font family in the font family we had held that Helvetica so if I add Helvetica
10:42
right here and I can actually just make a list of fonts right here so in font family when you have a list here first it tries the first font but if that one's not available it will go to the next font so when you're making a list of font family font so you always want the last one to be a generic font so you know that if the browser can't get the first font or the second fine it can always get the the default font at the end here so for this example for this
11:13
challenge we're gonna do that for the h2 tag so in this h2 tag we have lobster let me delete Helvetica here and I'm gonna make the default font mono space now right now if I open up the browser you're not gonna see anything different you're gonna see a lobster here but if I comment out the link to the Google Fonts and now I'm going to refresh this and
11:44
you can see it's defaulted to the Mono space just like that see so it couldn't find Lobster so it defaulted to the mono space font CSS has a property called width that controls an element's width this can apply to almost any type of element like an image or a div or a paragraph and we're going to create a style that can make a larger image so I'm going to create this called larger image now that's only going to apply to an element
12:19
with the class larger image and I'll put width to be 500 pixels so if we have anything with the class larger image it will make it larger so I'm going to actually add that to this image here I'm going to put class equals larger image so if we look in the browser here we should see that the image is very big right now for this challenge we're going
12:52
to make a smaller image so I'm just going to actually just change this to smaller and instead of 500 pixels we're gonna make this 100 pixels and I have to apply the smaller image class down here so if I open the little browser and refresh now it's just a tiny little cat a cute little cat right there on our page CSS borders have properties like style color and width let me show you an
13:27
example I'm going to actually make a change to the h2 style here I'm going to paste in some code you'll see border color red border width five pixels border-style:solid so when i refresh the page here you'll see this red border around the h2 tag I'm going to delete this for right now because for this challenge we're actually going to make a thick green border so I'll just put it right up at the top for now here and I
13:58
am going to make a new class called thick green border and I'm just going to actually paste in that same code from before but the border color is now going to be green and the border width can be 10 pixels and the border style will still be solid here so now I'm going to have to apply it to the image so right
14:31
now there's the class smaller image but you can have two classes here I just put a space and then I'm going to put thick mean order so as long you just have a space in between classes you can have two classes so if i refresh here you'll see the thick green border right around there you can see so far we have very sharp corners around this image there's a border radius property that we can use
15:07
to make that a little route more rounded I'm going to add a new thing called border radius and I'm going to set the value to 10 pixels so if i refresh now you can see we have rounded corners here in addition to pixels so you can also specify the border radius using a percentage so instead of border radius 10 pixels I'm gonna change this to 50% and if i refresh my page here you can
15:42
see it makes a circle you can set an element's background color with a property called background color so here's an example let's set the background color of the h2 element background color and I'm going to change this to blue so if I open up my browser we'll see that the background is blue I'm gonna make a new class and the new class is going to be called
16:16
silver background silver background and you guessed it it's going to have a silver background so I'm going to put background color silver now remember I also have to apply it somewhere I have to make something use that class so for this div an upper class equals silver background now if i refresh here you can see we have a silver background here we
16:49
don't need this background color blue so I'll take that off here and refresh it one more time and that's how it's supposed to look we've talked about styling specific elements like this and then we've also talked about styling classes you can also style based on ID and ideas similar to a class except each element is only going to have one ID classes you can put on a lot of different elements so let me show you how to apply an ID to an
17:23
element if I just go down to this form here and I'm just going to put IB equals cat photo form and just like that it's not going to change the appearance at all because we haven't styled it yet but now we can use the ID to add CSS styles or we can reference it in JavaScript in the last section we learned about IDs now we're going to learn about styling IDs I'll use this h2 as an example and
17:57
an ID of heading meter styling IDs it's similar to when you're styling classes but we are going to use in a hash mark instead of a period so I'm gonna put heading here let me format this little better so you can see normally for the class that start with a period for an ID it's gonna start with a hash mark so I am going to put color green now I want
18:29
to show you something so you can see that this h2 has a class of red text and a heading an ID of heading so we have the red text and the heading so is it going to be red or is it going to be green well let's open the browser and find out here you can see it is green because CSS puts a higher priority to IDs than classes and as a reminder you should only have one ID per element we
19:00
already have the ID down here on the form idea of camp photo form and so now I'm going to change this instead of heading it's gonna say cat photo form and then for color we're gonna instead of color green it's going to be background color green and now I'm just going to Reese refresh that and if I go down here to the form you can see it's
19:31
green in the background you may have already noticed this but all HTML elements are essentially little rectangles there are three properties that control the space around each element which is padding margin and border we already talked about border which you can see on here the padding is the space around the text you can see that the panning around this red text is a little more than the padding around the blue text the margin is the space outside of the border that surrounds the
20:06
padding so in this task we are going to change the padding we're going to change the padding on the blue box to match that of the red box so if we look down here the padding on the blue box is 10 depending on the the red box is 20 so we're just going to change this to 20 and then if i refresh my page here you can see that these boxes are the same size an element's margin controls the amount
20:41
of space between an element's border and the surrounding elements you can see that there's greater margin on this red box than the blue box so in this task we're going to make sure that they're both the same so I'm going to change the margin of the blue box to match that of the red box so you can see the margin is 20 on the red box so I'm just going to set the blue box will also be 20 and then if i refresh my page you can see that they're the same the reason why this red box is so big
21:16
right here is because it has negative margin we're gonna make sure the blue box is just as big as the red box by giving the blue box negative margin as well so I'm going to set this to negative 15 so now the red box and the blue box are both at negative 15 and if i refresh the page now they're both the same as you can see in this red box each side can have different amounts of padding that's this code here padding top padding right padding bottom padding
21:52
left we are going to use different padding's for the different sides of the blue box so I'm just going to copy this code right here and then paste it down here and now what we have to do for the challenge is set the top and left to 40 so let's do 40 here and top and left are already 40 and then the bottom and right to 20 that's just the same as already is so let me refresh and we're done
22:29
we already learned that you can set each side of padding separately you can also do the same thing for margin you can see for this red box it has different margin on each side we have margin top right bottom left we're gonna do the same thing for the blue box and I'm just gonna copy this margin from the red box and paste it in for the blue box and now I'm just going to refresh my page because we're done
23:04
previously we learned about padding top padding right padding bottom and padding left there is an easier way to do the same thing and it's called clockwise notation if I if we look at this browser here and see the red box there's actually a different padding on each side so if you look at this padding here see how these four numbers well the first number is the top then the right then the bottom then the left so we're
23:35
gonna do the same thing in the blue box I'm going to start off by copying this padding from the red box I'll paste it into the blue box and this time the padding top and left have to be 40 so this one has to be 40 and then the last one that's the left and the bottom and right after be 20 those are the two middle numbers so if I change those and refresh we'll see that that they're both kind of the same they're a little
24:08
different because this one has the 21st and 40 and then this one has the 40 than 20 and that's it we already learned about clockwise notation for padding now we're going to learn about it for margin it's basically the same you can see this red box has a different margin on each side so here's the code here it's clockwise notation there's four numbers the first is the top right bottom and then left so you can do all in one line instead of having
24:43
four different lines we're going to do the same thing for the blue box so I'm just going to start by copying this line and to solve this challenge we're just going to flip these two numbers around because the 40 has to be this has to be top and the 20 is going to be on the right so if i refresh my page here you can see that it has changed we now know how to style classes so this is an example of silent classes with a dot before the class here and then you
25:17
can put the styles for the class and then use style IDs with the hash mark instead of a dot here will be a hash mark now we're gonna learn how to use attribute selectors to style elements now this is a selector that matches and styles elements with a specific attribute value I'm going to show you an example how to style something with a type radio' so we can style it everything with type radio' so let me add that right up top here so what you
25:48
put brackets around and we're gonna do that so we're gonna put the attribute which is type and then we're going to put the value which is radio so type equals radio and we're gonna that's how we're gonna select what we're styling so here I'm just going to set the margin to 20 pixels so if we open up the browser here now let me scroll down and we can
26:20
see that there is a margin around these radio buttons of 20 pixels so now we're gonna use the type attribute selector to try to give the checkboxes a top margin of 10 pixels and a bottom margin of 15 pixels so all I'm gonna do is so let's go and look at the checkbox in the color says type checkbox so we're gonna use the same thing up here instead of type radio' it's going to be type checkbox' and then for the margin the top is going
26:53
to be 10 and the bottom is gonna be 15 so what I'm gonna do is do top if we do the the clock one so the first number is top the second number is right and this can put zero pixels and then the third number is bottom I'm going to put 15 pixels and then the fourth number is the left which is zero pixels so if I just refresh my page here and the checkboxes are styled
27:31
so far we've been setting margins and padding's using pixels pxc this example negative 25 px or pixels these are absolute types of lengths so absolute types of lengths include like in4 inch or mm millimeters these are all tied to physical units of length but there's also relative units of length such as e/m and REM and these are relative to another length value for example e/m is
28:03
based on the size of an element's font and if you use it to set the font size property itself it's relative to the parents font size now we'll talk about this a little more on the responsive web design principle section but for now we're gonna try setting some padding using an e/m or M value so that's what I'm going to show you now we're gonna set the the class of the the red box here we're gonna set the padding to an e/m value so I'm gonna put padding and
28:34
it's just like how you would put pixels but instead of doing px you just put the M so this is going to be relative depending on other things on the page if I show the browser here now you'll see this extra padding here around the red box every HTML page has a body element now usually it'll be a more explicit you'll see the the body tag round the page but even if you don't see the body tag on the page like in these examples it's
29:08
still there it's just hidden so we can prove this by actually just styling the body element so that's all we're gonna do here I'm going to add a body here or a body style and we're just gonna set the background color to black and now if i refresh my page you can see it turns black this the whole page turns black here so we've seen that all pages have a body element now CSS that stands for
29:41
cascading style sheets cascading means anything that you apply to an upper element goes down to any lower elements or any elements that are inside other elements so anything that you apply to the body element will cascade or get be inherited to all the other elements on the page so let's see how that first I'm going to create an h1 element and inside the h1 element I'm going to say hello
30:12
world and now I'm going to style the body element so we already have black out color black I'm also gonna put color green and I'm for the font family I'll put it as mono space now let's open up the browser and see what that looks like okay look we have green mono spaced font I didn't apply to the h1 tag I
30:47
applied to the body and then everything else got that same style sometimes your HTML elements will receive multiple styles that conflict with one another if you see on here this h1 here this body will apply it will cascade down to the h1 to make the color green but what if there is something else to make this a different color what would happen so what I'm gonna do is make a new class it's gonna be called pink text
31:21
and I am going to make the color pink and now I will apply the class to this h1 tag so pink text so what do you think is going to happen it has the color green from here but also has the color pink from here well let's open up the browser and find out and it's pink the way it works is it uses which every one is more specific since this has the
31:55
class pink text and it doesn't start with body or anything the pink text is more specific than the body because body is further up so whatever one is closest to the actual text is which style it will use so we saw that this color pink overrides the color green because pink text is more specific than body what can we do to overwrite this pink text here what if I made another class like this I'm going to just copy that and then paste it here
32:31
but instead of being pink text it's going to be blue and the color is going to be blue now I'm going to add another class here remember to add two classes you just put a space in between classes I'm going to put blue text here so now what's going to happen is going to be pink or blue I'm just going to give you one tip here that the order of the class is here doesn't matter it doesn't matter whether pink text or blue text comes first so let's see what color the text is going to be and you can see it's
33:03
going to be blue so the order that does matter is the order that the Styles declared in so if I just take this blue text here I'm going to cut this and now I'm going to just paste it right up here and now if i refresh the page you'll see that it's pink because it just depends on what order this comes in here so we saw they could override styles by making things more specific pink text the class overrides just styling the body and then we saw you could override
33:38
styles by putting things lowering in the styling section so this blue text overrides pink text because it's lower now there's another way to override styles and that's with IDs so I'm gonna add an ID to this h1 here it's gonna be ID equals and we're gonna have an ID name called orange text and now I'm gonna put the ID style right above the pink text because when you're styling IDs it doesn't matter the order doesn't
34:10
matter if it's above or below the other styles because IDs are even more specific let me show you what I mean so remember in starting with a dial gonna start with a hash sign or pound sign and I'm going to put orange text and here we're gonna put color orange and now I'm going to show the browser here and we'll refresh and you can see it's orange text
34:41
because IDs are specific you are only supposed to have one ID per page so orange text should only be on this element whereas classes you would put on multiple elements IDs you only apply to one element so IDs are more specific than classes and here's another way to override class declarations with inline Styles inline styles are gonna be more specific than all these other ways of styling text I'm gonna go right into this element here input style equals and then I'm just
35:18
going to change the color to white you can write this just as you would write your CSS above but right in line now I'm going to open up the browser here and then you should be able to see that text is white so that's even more specific you've learned many ways to override CSS and get even more and more specific starting at the body then pink text and blue text and orange text we've learned many ways but now I'm about to tell you about the most powerful method of all
35:54
how you can show something is super important let me show you that now if you remember this pink text has been overridden many times but now we're going to show that this is very important I'm going to use the exclamation point and then the word important so using this exclamation point important after a style means it's the most important style you should definitely apply this style so let's see what that looks like and now it is pink
36:23
hello world is now pink so far we've been coloring things using the actual color names like for instance black or orange or green or blue but there's a way to get even more specific using hex codes hex codes are six hexadecimal digits that represent colors so you can represent any color on the spectrum using a hex code so I'm going to change this instead of black I'm going to put the hexadecimal for black which is just zero zero zero zero zero
37:00
zero so the first two zeros are the red the second two zeros are the green and the third two zeros are blue but since it's black it's just zero for every single one so let's see what that looks like in the browser and it's still black [Music] hex codes can be used to create over 16 million different colors and that's what we're going to do here we're gonna put in the right hex codes for these colors so the hex for red is going to be they're always going to start with the
37:35
hash marker pound key and I'm just gonna put ff0000 and then for a green we're gonna do the hash mark and it's going to be 0 0 FF 0 0 and then for Dodger blue text now I don't have these memorize I'm actually just reading them off Mohs you're not it's gonna be hard to memorize 16 million different combinations for colors so usually you're gonna look these up somewhere there's a lot of websites and a lot of other resources to find the appropriate hex codes for different colors so for
38:06
the orange text it's gonna be FFA 5 0 0 and let's open up the browser and see what this looks like if i refresh this and now we see all the different colors some hex codes can be shortened remember they're usually six digits long but sometimes the hex codes have three sets of two of the same digits for instance red text the hex code is normally ff0000 you can see that the first two digits are F the second two
38:42
digits are 0 and the third two digits are 0 so whenever there's 3 sets of 2 we can shorten this by just doing one number one digit for each so f 0 is 0 so this F will be expanded to FF this would be expanded to 0 0 and this would be expanded to 0 0 for future for future text we can do F 0 F for the cyan text we can do 0 FF and then then for the
39:12
green text we can do 0 F 0 so let's open the browser and see if we got those colors and it worked besides using hex values to represent colors you can also represent colors using RGB values so that would be like this instead of this hex value you would put RGB and then there's going to be three numbers each number is going to be between 0 and 255 I'll just use 255 3 times here and then if we show this in
39:45
the browser 255 255 255 is white but for this challenge we're going to change change it to black so black is just going to be zero zero zero zero zero zero for black and if i refresh we'll see that it's changed to black you can make just as many colors using RGB as you can make with hex so I'm going to make all these colors with RGB instead of hex so for the red text it's
40:20
just going to be RGB and then the first number is always red and then we have the green and then we have the blue so for red it's all red no green no blue you can kind of mix to decide how much you want to beat color color with RGB and you can really do the same thing with hex as well so for orchid text let's do RGB and this is going to be 2 18 1 12 and then 2 1 4 I don't actually
40:53
have all these memorize I'm just reading them off here and to make this even easier I'm going to do some copying and pasting so we're going to have the Sienna text and the blue text Sienna is going to be 160 and then 1 1 Oh 82 and then we're going to do 45 and then for blue this is going to be an
41:24
easy one because we just have 0 0 255 and now let's look at the browser to see what that's going to look like there are our colors look at this sweet penguin created only with CSS and HTML we're not going to go into exactly how to create this you can look at the code to find out yourself but this is all about showing CSS variables so here right here our CSS variables so the penguin skin black belly gray B yellow you can see they're
42:02
used here like here background we have the VAR and then here the parentheses two dashes penguin - skin and gray so this would be the backup color right here but this would be we would try to use this variable if we can't use this variable we go to the backup but right now I'm going to show you how just changing these variable colors will change everything every time those variables are used so I'm going to change this black to gray I'm gonna change this gray
42:34
to white and I'm gonna change the yellow to orange and then if I just refresh here you can see our pin 1 is a completely different color now is it was super easy we only had to change in one spot and it changed everywhere in the code in the last challenge we were introduced to variables now we'll go over them some more and learn about them in more detail so to create a variable we're gonna do it right here so we're gonna create a penguin skin variable so they always
43:10
start with two dashes and then we just do we put the name here which is going to be penguin skin now we're going to be able to use this variable anywhere throughout the code this is just going to be gray so now anywhere we use this penguin skin variable it's gonna be replaced with gray in the code so in the last challenge we created this variable penguin skin gray now we're going to use it so to use a variable you
43:44
just put var and in parentheses you put the variable name let me show you here for this background I'm going to put var and then parentheses and then I'm just gonna put it - desc penguin skin and then that's the variable we're gonna use the same variable in multiple places so I'm just gonna copy this and we'll paste it here and then I'll paste it here and then if i refresh it's great oh there's
44:13
a wing let's see we have to replace one more spot okay let's replace there and refresh and now everything that supposed to be gray is now gray so now we had to replace all these spots this time but from now on whenever we want to change the color of the penguin skin we only have to change in one spot that's the great thing about variable variables can have fallback values attached these are used if for some reason the variable won't work it could
44:49
be because someone is using an older browser that doesn't use CSS variables or maybe just a variable name is spelled wrong so that's what's happening here CSS pinguin that spelled wrong but to show that that's just to show these fallback values so what I'm going to do is just add the word black here and then here I can add the word black and now let's just refresh this and you can see it's using the fallback value because it
45:20
cannot find the pinguin skin because it spelled wrong here variables are available inside the element in which you create it so we have these variables here the reason why they work in the other parts of the penguin is because everything is within the penguin element like the right cheek left cheek belly these are all within the penguin element sometimes in order to make variables available anywhere in a document you can declare the variables
45:55
inside a root element you can think of the root element as a container for your entire HTML document in the same way that an HTML element is a container for the body element so anytime you create a variable within the root element they're gonna be available throughout the whole page so that's what we're gonna do here so I'm gonna make a variable named penguin belly and then this is going to be pink so we can already see that it's used in these spots here so you can when
46:27
belly is used here pin when bellies use here so it's using these two different places and but just making it here within the root we're gonna be able to use it everywhere else so let me refresh the page and you can see that it's pink in both places so variables are cleared with Andrew to apply to the whole page but you can overwrite those within a specific element so down here I'm going to overwrite penguin belly so penguin belly and this is now going to be white so if
47:04
i refresh the page it's white now Media queries can be used to change variables media queries make different CSS apply depending on the size of the screen so here's a media query for max width 300 pixels so we can make variables that only apply when the max width is 350 pixels so let's try changing the size so now the penguin size will be 200 pixels and we're also
47:42
gonna try changing the skin so penguin skin with this media query will be black so now when you change the size of the browser I'll let me refresh again it will change the variables [Music] time to create our first CSS grid you can turn any HTML element into a grid container by setting its display property to grid so we have this HTML
48:19
element container and then here is the CSS for that we are going to set the display property property to grid and this will give us the ability to use the other properties associated with CSS grid so I'm just gonna put display red and we're done so it doesn't do anything quite yet because we haven't updated any of the other properties yet but we'll do that in later challenges now we need to start defining the
48:54
structure of the grid we'll start with adding some columns using grid template columns so I'm going to do that now and show you how to solve this challenge I'm going to type in grid template columns and after grid template columns we're gonna put the width of each column so the number the number of numbers we put here are the number of columns we're gonna have three columns so we're gonna
49:26
have three numbers and all of them are going to be 100 pixels wide so I just have to put 100 pixels three times and now if i refresh the page here you'll see that we have three columns so here we have grid template columns which we already learned about which sets the number of columns now we want to set the exact number of rows right now the rows are just determined automatically but if we know exactly how
50:00
many rows we want we can use grid template rows so to solve this challenge we just have to add grid template rows and then just like grid template columns the number of numbers are the number of rows and each number is how tall each one will be so I'm gonna put 50 pixels 50 pixels so we'll have two rows or each
50:30
50 pixels high so if i refresh that it looks pretty similar because that was very close to what the default was but we just solved it you can use CSS grid units to change the size of columns and rows you can use pixels and M's but you can also use things like F R which sets the column or row to a fraction of the the available space see this how we have five different columns and they're all different sizes well we have this code
51:05
here so you can see the first column is auto that's the one here and that sets the column to the size of the space so it just is just big enough for that one to fit in there and then the second column is 50 so this column with the two is 50 pixels wide with the three we have 10% so this three is ten percent of the available section from the whole container this is three percent of the whole container and now we have the two
51:37
F are on one fr that's columns four and five so the last two columns the remaining space is divided into three sections because two plus one is three two of the sections are allocated to the fourth column and one to the fifth column we're gonna make a grid with three columns instead of all five of these we're going to specify three of them so the first one is going to be one fr and then we're gonna have 100 pixels
52:10
and then two fr so let's see what that looks like when i refresh the page here so we can see we have three columns the middle column is always staying at 100 pixels no matter how wide but the first and third column will change because of the fr units here you can see here in these columns there's no gap between the columns these are split up right against each other sometimes you want to gap between the
52:45
columns so you use grid column gap I'm gonna show you how to do that right now and show you how to solve this challenge so it's gonna be grid column gap and then we set how many pixels we want in between each column in this case we're going to put 20 pixels so if i refresh here we should see space in between each column in the last challenge we learned about grid column gap you probably won't be surprised to learn that there's also a
53:21
grid row gap so it works just the same but grid row gap and it'll make a gap between the rows this case will put five pixels if i refresh here you can see that there is a space in between the rows here the grid gap property is a shorthand property for using the grid row gap and grid column gap properties all at once if you just put one number it will put
53:54
the same gap on the rows and columns if you use two numbers the first number will be rows the second number will be columns so I'm going to just do the two numbers here so I'm going to do grid gap and then the first number is going to be 10 pixels for the rows and the second number is gonna be 20 pixels for the columns if i refresh this here we can see that there's the ten pixels in between and then there's the 20 pixels for the columns here
54:28
the grid column property is used to set how many columns a grid item will take up now here's a 3x3 grid and there's these hypothetical lines that you don't see but they exist in between the grids and they're numbered one you can see in this example for a 3x3 grids there's 4 lines 1 2 3 4 so for the grid column property to set how many columns and item is
54:59
going to take up you're gonna specify the beginning line and the ending line so if you wanted to take up two columns the first two columns you would specify line 1 and then line 3 because it would start at line 1 and it would end at line 3 let me show you what that would look like so for instance if we were going to set this item 5 to set to take up the first two columns it would be like this grid column and then we would put 1/3
55:33
because it would start at the first line and end at the third line for this challenge though we are going to make the grid take up the final two columns so it's gonna start at 2 and in that 4 so if we refresh that we should see that this fifth element starts at 2 and then it ends at 4 just like that we learned how to make grid items consume multiple columns we can also do the same thing with rows
56:08
it's basically the same thing so in sort of grid column is gonna be grid row and then for this challenge we have to make it take up the last two rows so the same as before I'm going to put 2/4 because if you look on the diagram the last two rows are these two rows and it's going to start the two line and end at the four line so let's refresh the page here and you'll see that's taking up the last
56:39
two rows of this section here in CSS grid each box is considered a cell so each of these colored boxes on screen are considered different cells if we use justify self we can justify and align the content within the cells by default the property is a value of stretch which will make the content fill the whole width of the cell but for this challenge we're going to try a different a different property so I'll do justify
57:15
self and instead of setting it to stretch which is the default I'm going to set it to Center we can also do start or end but if we set the center you'll see that this has been centered within the cell just like that in the last challenge we used justify self which aligns horizontally now we're going to align an item vertically using align self it works pretty much the same way so I'm going to put a line self and
57:52
then I'm going to set this to end so now if we refresh you'll see that this aligns vertically to the bottom of the cell if you want all your items in your grid to share the same alignment you can use justify items on the parent container it uses all the same values that we saw before so we'll put justify items and then I'll just set this to be Center if we refresh
58:27
we'll see everything has been centered [Music] we saw that justified items aligns all items horizontally aligned items aligns all items vertically again you put on the parent container so put a line items and I'll set this to end to set so all of them align at the end of each cell so we see they all go to the bottom which is the end here we've created an area template the
59:04
cells have been grouped together using a custom name you'll see when you look at the rows and columns there's three columns and 3 rows or nine cells total and that's how many words you'll see here so each set of three words in quotation marks is a row so that's the first row second row third row and you can see each word corresponds to a cell in this layout here so you can see the first three are now designated headers
59:37
and then we have an advert and then to contents and then the last three are the footer cells you can use a period to designate an empty salma grid and that's what we'll do for this challenge so instead of the word advert here I'm just going to put a period and that designates it as an empty cell we saw how to define our template areas here in the last challenge now we'll learn how to place items in a specific
01:00:10
spot in the grid area so if we want to set item 5 to be in a specific spot we'll use the grid area property so a grid area and then we just put one of our custom names that we defined below for instance if we set this to header and I refresh here you'll see the number 5 has popped out of its normal location and fills up the entire header it fills up the entire header because there are 3 items in the header and there's only
01:00:43
only item 5 is set to header so it fills up the whole header for this challenge however we're going to put it in the footer so I'll just change this name to footer and if we refresh again you'll see that the item 5 takes up the entire footer you can create grid areas without a template you'll notice here that we no longer have our template code here but I'm going to show you how to create a grid area so st. before we throw a grid area but instead of saying the template
01:01:17
name I'm going to put some numbers I'll do 1 / 1 / 2 / 4 now these use the same type of numbers that we talked about before if you look at this chart here it's almost like setting coordinates on a graph the first two numbers are the start coordinate and the last two numbers are the end coordinate so the first two numbers would be the horizontal line to start with in the vertical line to start with so for one one it would start in this top corner
01:01:47
here and then you'll see that the second two numbers are 2 4 so 2 4 means it's going to end at the second horizontal line here's 2 and then here's 4 it's gonna end at the 4th vertical line so 1 1 2 4 would start at this point and end at this point so that would just take up the entire top row so let's see what that looks like I'll refresh and we'll see that the 5 takes up the entire top row now we'll make some slight changes
01:02:20
to this to solve the challenge so the numbers we're going to use our 3 1 or 4 so if you look on here 3 1 would be right here four four would be right here so now I should take up the bottom row let's refresh and you'll see five takes up the bottom row if you want to repeat the same size row or column many times you can use the repeat function if you see right here we
01:02:54
have the same size row repeated three times one F R 1 F R 1 F R we can use the repeat function to repeat that three times here's another way you can use the repeat function let me put it in here so to use the repeat function you start with the word repeat and then in parenthesis we're gonna pass in something first the number of times you want to repeat so in this case I'm gonna pass in the number two you could use 75 50 100 however many times you want this
01:03:24
to repeat now we could put one size to repeat the same size over and over or we can put in any number of sizes so I'm going to put one fr and then 50 pixels so it's going to repeat that two times and then you can even add other sizes afterwards so I'm going to put 20 pixels let me show you how this would be calculated I'm going to copy this and just paste it in here now normally you would never have grid template rows
01:03:55
twice in a row I'm just using this as an example so when this calculates out it would look like this I'll copy this because it's going to be on there two times and now you'll see one fr 50 pixels 1 if R 50 pixels 20 pixels so this with the repeat function would calculate out to this let's back up a little bit I'm gonna undo some of the things I put in here to go back to what the code look like initially and now we're actually going
01:04:25
to make a change to the grid template columns see how it says 1 fr 3 times let's use the repeat function to do the same thing so I'm going to do repeat and then it pass in 3 and then 1 fr so now if i refresh we should see no changes it looks exactly the same because this is equivalent to what we already had you can also set the size of a row or column using the min/max function the
01:05:00
min/max function takes two arguments the first number is the smallest size that the row or column can be and then the second number is the largest size a row or column can be so let me show you how this works and show you how to solve this challenge I'm gonna replace this second number and the repeat function with the min/max function which will pass in two arguments first will be 90 pixels that will be the minimum amount that the wrote that this column can be and then the second number is going to
01:05:32
be 1fr which would be the max amount that the column can be so if I just refresh the page here you can see how it changes depending on the size of the the frame here we saw already that in the repeat function the first argument you pass in is the number of times you want this to repeat so this is going to repeat three times you can also use autofill so if you use autofill it's going to
01:06:06
automatically insert as many rows or columns of your desired size as possible depending on the size of the container so let's see what happens I'm going to refresh the page here and then we'll see that this changes depending on the size of the container you can see the difference between container one and container to container two at the bottom has just repeating three and then the top one has repeat autofill so you can see how they behave differently
01:06:36
depending on the size we talked about autofill this one right here now we're going to talk about autofit it's very similar I think the best way to show you the difference would be to actually show you what what effect it has on this browser here so this first one is set to autofill for this challenge we have to set the second one to auto sit so I'm going to put auto fit and now let's just refresh the browser and we'll can see how they're very very similar but not quite you can
01:07:11
see they work very similar but you see that auto fit always make sure that they fit the entire length of the container while auto sill doesn't necessarily needed to fit the entire length of the container they still keep repeating as much as you need to but it's just whether it's gonna stretch or not Media queries can be used along with template areas to make responsive layouts let's look at the page right now see when I change the size it will
01:07:45
change how things are laid out on the screen with the header that advert the content so you can see how that works here here is the default the default one is right here with and the default would be then the smaller size however we also have this media query when the min width is 300 pixels so when it's over 300 pixels we're going to change the template so you'll see here there's just four areas header advert content footer here each row has the advert on the side
01:08:18
and then either has the header the content or footer you can see that when you change the size of the the window size let's do one more to solve this challenge when the min width is 400 pixels we want the header to be along the all the top so I'm gonna put header I know the change word advert the header and we want the footer to be long the full bottom admin with 400 pixels so I'm going to put footer here and now if i refresh we'll see that
01:08:49
there's three different sizes we can do so here you can see the header on the top and bottom and the advert in the middle now the average stretches all the way from the top to bottom and then the third size would be everything right on top of each other you can have grids within grids this item three right here corresponds to the paragraph one and two on the page so we're gonna change item three into a
01:09:20
grid so I'll do a display bread now I'll set the grid template columns to set what the columns are going to be and we'll use auto and then 1fr so let's see what happens if i refresh you'll see that this it now takes up the whole space here and there's a grid within the grid [Music] flexbox is used to position CSS elements
01:09:55
in a flexible way so we're going to be talking about flexbox in this section to use flex on an element we're going to have to set the display to flex that's what I'll do here display flex so now we've set this boxing painter to display flex and you can see it now sets the boxes right next to each other on the page throughout this section we will be using flex to style this tweet so to get ready
01:10:29
we're gonna have to add display flex to a lot of the elements so let's add it to the header display flex when you're using flexbox you have to use display flex on a lot of different things so I'm just going to copy this and we have on the header we have it on the profile name we have it on the follow button we have on this h3 h4 we have it on the footer and we have on the stats so now we have flex box everywhere we want to have it and you can see it's already
01:11:00
made some changes to what our page looks like after we add display flex to an element it becomes a flex container and this makes it possible to align any children of the element into rows or columns using the Flex Direction property the default to flex Direction is row but you can also set it to column or row reverse or column reverse so for this challenge we are going to set this box container
01:11:33
element to have a flex direction so it will put flex direction and it will I'll set it to row reverse now let's update the page and see what happens and you can see everything has been reversed now we'll apply the flex direction property to create rows in our tweet so the both the header and the footer have child elements that could be arranged as rows so that's what we're gonna do I'm
01:12:09
gonna use flex direction here in the header direction and then set this to row now I'll just copy this and then I'm going to paste it down at the footer so now they both have flex direction row if i refresh you'll see that nothing has changed that's because row is the default setting for Flex direction but we'll be making more changes in future challenges we saw how to use flex direction to
01:12:44
create rows now we'll do it to create columns it's pretty straightforward we'll just set flex direction to column and now we should see a change when we refresh see Row is the default so when we set flex direction to column it updates to columns you can see in this tweet that the name Quincey Larson and his Twitter handle appear right next to each other these would look good stacked on top of each
01:13:16
other this is the perfect time to use flex direction column so let's go down to the profile name section here because the name and the twitter handle are all wrapped in the profile name class so let's add flex direction and then set it to column now let's refresh and see what that looks like okay much better you can align elements using the justify content property this diagram represents
01:13:52
a flex container and this is a row remember they're either going to be in rows or columns and this represents a row with two items you can see the first item here and the second item here now there are several options for how to space the Flex items along the line that is the main axis you can see the main axis goes straight through like this if there is a column the main axis will go up and down instead of left and right but one of the most commonly used ways
01:14:23
to space the Flex items is justify Content Center which aligns all the Flex items to the center inside the Flex container also there's a flex start which will align the items to the start of the Flex container over on the left side here for a row this pushes the ions to the left of the container but a comma for a column is gonna push the items to the top and then flex end is over on the right side it pushes the things to the
01:14:53
right space between will align items to the center of the main axis and there will be extra space placed between the items now the first and last ions are pushed to the very edge of the Flex container space around it's similar to space between but the first and last items are not locked to the edges of the container and the space is distributed around all the items so let's see this in practice for this challenge we're
01:15:24
just going to try one of these so I am going to put the property justify content here and then I'm going to set it to Center so let's see what happens on our page see now everything's centered and how its justified now I would recommend trying some of the other options on your own now we're going to use the justify content property in the tweet in bed so I'll show you how to do that challenge
01:15:58
right now in this profile class here for the style we're going to put justify content here and we can set this to any of the options from the last challenge I'm going to use flex in but you can use something else and still passed the challenge now as i refresh the page look at this name here it's just going to move down very slightly so you're going to look closely to see the difference so if i refresh here it goes to the bottom
01:16:30
of this row here the align items property is similar to the justify content property the justify content property aligns along this main axis right here but the the align items property aligned along the cross axis and these axes are opposite if you're using a column instead of a row where the cross axis would be back and forth left and right for a column and the main axis would be up-and-down for a column
01:17:06
but this diagram shows a row and the different values for align items are pretty much the same as they are for justified content you have the flex star flex in center stretch and baseline so the stretch and baseline are the different ones the stretch will stretch the items to fill the Flex container and baseline will align the items to their baselines so let's see an example of this in our code here we are going to
01:17:37
add something to our box container here so I'm going to put a line items and then I'll set it to Center and we should be able to see what that does here so let me refresh the page you see these have been aligned to the center of our page here now we'll use the align items property in the tweet embed so to solve this challenge we're just going to apply it to two different sections here in this
01:18:12
follow button class will put align items and then we'll set to center and I'm just going to copy this line because we're going to use the same line below right in the h3 and h4 and now if i refresh the page you'll see that things are aligned in the center now it doesn't show up too much because you can see this is just moved down slightly the movement was very slight but it is aligned now by default a flex container will fit all
01:18:48
flex items together you can see here that all these colored boxes are in one row here but if you use the Flex wrap property it tells CSS to wrap items so it just means the extra ions move to a new row or column so I'm going to show you how to solve this challenge here by adding Flex wrap and I'm going to set this to ramp another setting you can use is wrap reverse you can see now it wraps
01:19:19
to the next line the Flex rink property applies to flex items instead of a flex container it allows an item to shrink if the Flex container is too small so I'm going to apply the Flex shrink property to both of these items here box 1 and box 2 like this this will solve this the challenge here it's going to set you always have to set a number so I'm going to set this one to one and then I'll set the next one could too so these numbers shrink in
01:19:53
relation to each other so if the second one is 2 that means that this box 2 will be 2 times as small as box 1 that has a shrink value of 1 so let's refresh and see what happens you can see that the red box is 2 times as small as the blue box the Flex Grill property is basically the opposite of the Flex shrink property the Flex shrink property controls the size of the items when the container shrinks but the Flex grow property controls the
01:20:28
size of the items when the parent can that when the parent container expands right now the website doesn't know how to render this HTML here and the CSS because we need to add a flex grill property so let's do this the box 1 and box 2 so we'll do Flex grow and then output a 1 just like Flex rink you're gonna put a number and now instead of this being 2 times smaller I'm going to put 2 again for box 2 instead of it
01:20:59
being 2 times smaller it's gonna be 2 times bigger so I'm gonna set this to 2 and now this should know how to render if i refresh and you can see box 2 is 2 times larger because we added flex grow the flex basis property specifies the initial size of the item before CSS makes adjustments with Flex shrink or flex grow so we're gonna see how that works here we're going to set a specific size with pixels m's or percentages or
01:21:32
Auto so let's add that to box 1 in box 2 I'm going to put Flex ASIS and you can see you can even see box 1 our box 2 until we add this so the first one's gonna be 10 a.m. and then I'll do Flex basis and this one will do 20 EMS and if i refresh we should see it on here okay so now it works the flex property
01:22:07
is a shortcut to set the Flex Gro Flex rink and flex basis properties all at once let me show you an example with the default property settings so the default property settings of Flex are 0 1 Auto so the first number is the Flex trow number the second number is the Flex drink number and then we have the Flex basis here so for this challenge we're gonna go off of the default and I
01:22:38
am going to set the first flex row to two and then I'll set the Flex rink to two and I'll set the Flex basis to 150 pixels now this wings similar for box two I'm going to also set the Flex property so it's going to be 1 1 and then 150
01:23:09
pixels so let me show that in the browser and see what that's like now we can change the size and you can see when it's small the red box is bigger but when the browser gets bigger the blue box is bigger so because of how we set the properties at the at the 300 pixels lines it's going to change which one's getting bigger and which one's getting smaller the order property can be used to
01:23:44
rearrange items by default they just appear in the order that they're there so the blue box box one appears first and then the red box box to appear second but we can change that what's the order property so for order I'm going to put this first box to have the order of two and then I'm going to set the second box to have an order of one so we should see the red and blue flip pick places when I press refresh and that's what we see the aligned self property will align
01:24:21
each item individually we already talked about the a line items property which you set on the parent container when you set and align items on the parent container every item within that container is aligned in the same way but if we use align self we use it on the individual item and we can set each one differently it will override any value set by the aligned items property so for this challenge let's set some align items or
01:24:52
align self for these items so I'll do align itself and then you can use any value that you can also use in the O line items property in this case I'm going to put Center for this one and then down here align self I'll put flex and another odd option we flex start so let's refresh and then we can see here that this blue box is
01:25:23
centered and then this red box is the end or goes to the bottom of the row here well thanks for watching the CSS course don't forget to subscribe and remember use your code for good

DOWNLOAD SUBTITLES: