Now, before we get started with Flex Box, let's do just a bit of basic maintenance.
First of all, I created a folder on my desktop called Flex Box, and this is where everything will
happen.
I would create two files.
One would be a indexed thought e-mail
and a style DOCSIS.
Now for a text editor, I'm using visuals to the code, obviously, you can use whatever code editor
or text editor you wish, for example, Brackett's or Adam or whatever you wish.
It does not matter for discourse, but I will use visuals to the code or also known as the US code,
because for me is the best text editor, Orrego editor out there.
Also, I have a separate, complete course on visual still.
Of course, if you want to get into it, try it out.
OK, so let's get into our e-mail and let's start with the boilerplate.
I am going to use Emet here and then we're going to call this for the title Fleck's Box.
Now, down here, I'm also going to use Emet.
I'm going to create a each one which will have a title of Fleck's box.
And then after this, we're going to create a section tag.
With an idea of I.D., I will replace that later on because it will have to do this and this will include
then.
H-2.
Which will have a text within it of properties
of the parent, actually properties of the dot, dot, dot, because they're going to replace this flux
container.
And after this age, too, I'm going to have a div.
So just a general div.
But this will have a class of Fleck's bonks, the hash container.
OK, and this.
Main container will contain our items, so let's say that this will contain.
Another class of flex box on this core item, and I need this six times, so I'm going to do.
A pope, a open parenthesis here and actually the close and here I'm going to open our parenthesis and
going to multiply this time six.
I think I will see what will result from this.
Now, I also need here and know I'm going to do this later on, and I think that's basically it.
So let me multiply after I age to.
No, including the S. So here needed to open parentheses and after this I need to close by the single
to multiply this as to solicit enter and well, there's our entire container.
Now, as I said, I'm going to press this ID, the first song with parent and the second one will be
children,
OK?
And right here in the tooth for the titles, I'm going to have parents actually and the copy this to
be a parent.
And this would be children.
No Gebek.
And back again, control and control, C, control V, there we go now, right in here, I want to create
I turn right and I'm going to go pull down.
Ult and go on.
Here, here, here, here, here, here, here, here, here, here and here.
Let's type in.
I come.
And Dash, and now we're going to type in one, two, three, four, but it's not like five and six,
of course, and here is the same.
So one, two, three.
Four and five and six, five and six, dammit, I'm asleep, let's said tape and uphill.
We also need to include our style.
So before our title we're going to create a link tag.
And within here we're going to include our styles.
DOCSIS Keys.
Everything is linked up now.
Next up.
Papa, papa, papa, let me do a bit of general styling, so first I'm going to do a star.
So this is basically a reset.
I'm going to reset all my margins to zero.
Actually, I need to open this up so you can also see what has happened.
So let's open this up with lights over.
And so was just an extension of Visual Studio Code.
So we're going to have it here.
I'm just going to drop it on the right side of Visual Studio.
So let's make you, first of all, smaller.
I'm going to drag you here.
So let's resize you and let me also resize you.
Oh, let me make this large.
Yeah.
So I can talk you in here.
All right, and I think we need to zoom this in a bit.
Well, let me finish up the styling.
So margin zero.
What will this do if I hit save this, reset all of my margins to zero and I also need padding zero
so we won't have any unnecessary padding.
So this is saved and this is safe.
The next thing I'm going to use a box sizing on board the box
and also for any type of lifestyle, I'm going to choose none.
And also list and also text decoration and those who choose none.
So I don't want any tax decoration and a list.
Titles now for the body tag is targeted by the tank and it's to a fun family of lotion sans serif.
I see that we have everything set up here.
Let's do just a quick check of.
Background, color.
Read as if this is working class or something is not working here.
This is my mistake, OK?
Yep.
Let's go back.
Next up, I'm going to change the font size to 16 pixels
and the max width of my page.
Should be nine hundred fifty pixels.
So I want this to have only nine of the pixels and also I'm going to choose the margins to be oral and
this will push my content wide in the center of the page.
So we could zoom this in a bit.
Also, let me sit on this in.
So we're going to hit control and plus a few times on the fifty.
Now, within my body, I'm going to select my H1 and I'm just going to tell you right from the start,
I'm going to be very specific form where what is or even if I will select a class that is specifically
only one time in the entire page, I'm still going to specify that hate that the class is actually within
a detec or somewhere else.
Okay.
I want to be very specific for for each of everyone to have a perfect understanding of what I'm doing.
Okay, so let's do it.
Takes a line to the sentence.
Let's push to text each one in the center of the page.
OK, we have that one done and let's change the font size to 80 pixels.
The font weight.
To Boulder.
And I'm going to give this a bit of a margin, so from the top and bottom to rim and from the left and
right, zero.
So if you only specifying two values, the first two will be top and bottom.
And the second I saw the first value will be for top and bottom and the second will be for left and
right.
If I would do four values, then it would be top left, top, right and bottom.
So it's like like a clock.
OK, next up, I'm going to give it a background color, so let's say A, B, C.
And go back on color.
I'm going to go with the hexadecimal number of hash free, free, free cake, unless we are going to
change the color of the text to orange
now within our body.
I'm going to select all of my H twos.
And I was called up a bit and I'm going to change the margins to one room, so give them a bit of a
margin, top to bottom, left and right, the one room.
And also I'm going to align the tax supported tax to the center of the page.
OK, so because these are also titles now, a couple of things I want to do for our parent idea of parent.
So this one and the idea of children.
So first of all, let's start with the parent and we need the hash for the I.D. Selecter.
And now within the within the idea of parent, I'm going to select the flex box container
and also the flex and for it from this, the flex box item
Gilliss say the next me.
Let me check if this is correct.
So textbook.
Eitam Yep.
There we go.
So what do I want to do with this?
I want to increase the font size to 24 pixels, you know, to give them margin one.
Ram, let me close this one up here.
So font size four to pixels
and margin one ran all of them all around, also padding one ram all around.
And of course, let's change the background color.
So I have a bit of a difference here to background color to orange.
OK, let's also give them a tax shadow of one pixel, one pixel
and a hexadecimal number of hash RIFIFI And there we go.
So we have this one, Don, and this one, Don.
OK, now, next up, I'm going to also stand our contain itself a bit soulless compris spend IDM Flexibles
container.
And within here, I'm going to give you the background color of hexadecimal.
Free, free, free.
A book, Shadow.
Well, zero pixels, zero PSM pixels and two pixels for the spread.
Is it safe actually practice or to lift a bit?
Yes.
So there's a container.
And also, we have this bombshell all around it.
OK, so the last thing I want to do is give it a height of three hundred pixels for the campaign itself.
Unless it's safe, so it is limited now to three other pixels and within here, I'm going to then type
in a comment display, it will change the display.
And I also want to tell our other container down here.
So I'm going to copy our parent.
Change the idea to children, and I said save.
And also copy the items within the parent element, you know, to do the same thing for the children.
This was copy the idea and replace it in here.
This looks awful, but don't worry, as soon as we're going to go into our next video, we'll change
everything.
So let me just copy this comment of this playing between here and.
There we go.
That's it.
OK, so that's it for basic styling and yet seeing the next one.