WEBVTT

00:02.340 --> 00:03.640
Hello and welcome to this video.

00:03.630 --> 00:09.090
So today we are going to use nesting in as you say.

00:09.120 --> 00:17.180
So basically when you nest something in issuances you basically have a parent element which for some

00:17.190 --> 00:24.090
could be they fear with the class of container.

00:24.090 --> 00:35.600
And then inside our container we will have a paragraph so what we can do here is we can stamp both these

00:35.600 --> 00:41.740
elements by going into our file here.

00:41.780 --> 00:51.190
Then we can go in and say container with hundred percent maybe just 1000 whenever you want it to be.

00:51.230 --> 00:53.800
And then imagine go out.

00:55.370 --> 00:55.640
All right.

00:55.640 --> 00:57.300
So this is our parent element.

00:57.740 --> 01:01.370
So we have to parent element here with just the container.

01:01.490 --> 01:08.690
In this case then we can go inside the container and we can add the Patrick.

01:09.650 --> 01:19.040
So basically what we are doing here is we are going in taking a paragraph putting it inside here.

01:19.190 --> 01:23.840
And then be able to start everything inside the container class.

01:23.840 --> 01:25.190
That is a paragraph.

01:25.340 --> 01:27.370
It won't start anything outside of it.

01:27.370 --> 01:31.700
So if we have for example a paragraph here

01:34.700 --> 01:35.810
this won't be stymied.

01:35.840 --> 01:38.210
So this won't get pink kind of we are going to give it.

01:39.740 --> 01:48.790
So if we just go into our console now we can one says watch.

01:48.800 --> 01:50.650
Then we can see this

02:04.040 --> 02:08.660
and if we then go into our documents here

02:11.720 --> 02:21.760
then we go into our project open with Google Chrome you can see we have this element here that's gonna

02:21.760 --> 02:25.870
to be style because we missed it inside our container class.

02:25.880 --> 02:30.580
Why is this one will have no impact at all.

02:31.040 --> 02:37.400
And we can go into our code and we can see that this will be within just as you normally will go added

02:37.450 --> 02:38.420
in sources.

02:39.110 --> 02:49.070
But because of the structure in here we are able to have four simple navigation bar class and then sale

02:49.070 --> 02:56.450
all of the child elements in there which will make it much more structure so we can for simple add a

02:56.450 --> 03:03.950
file called navigation bodied SPSS and then everything would just be inside the parent element which

03:03.950 --> 03:08.490
will have an impact on our structure and our code.

03:09.110 --> 03:18.380
So that's why this is important and we can even extend this even more by a symbol saying after all we

03:18.380 --> 03:31.400
can see how the reducing color blue If we then go in and freshen up Roger we don't even have to write

03:31.400 --> 03:32.120
paragraph.

03:32.140 --> 03:33.440
However we can't do that.

03:34.250 --> 03:43.530
However it's easier to just if we have one long name like container and then say hover.

03:43.570 --> 03:45.610
That's a lot much wide.

03:45.620 --> 03:49.220
So I said we can just use the other way around it.

03:49.530 --> 03:57.110
By doing this because this will simplify the text which will again have a positive impact on how you

03:57.800 --> 04:00.560
stylistic structure code and style code.

04:00.590 --> 04:07.580
So the whole point of says is to make things more organized and more structured in your code.

04:07.700 --> 04:18.250
So your syntax looks more easy to use and that's why we can use this in such a good way So to extent

04:18.250 --> 04:22.010
is a little bit more just to give you some more samples of it.

04:22.010 --> 04:23.840
We can also go in and add

04:27.180 --> 04:34.680
this class with M notation by navigation Justin Don Regan at this one.

04:37.040 --> 04:39.200
And if we just moved this

04:44.720 --> 04:48.380
then we can go in and say you all

04:53.090 --> 04:55.690
and then we can say class

04:58.560 --> 05:04.120
and container here then we can go in and same.

05:04.150 --> 05:06.140
And I and I.

05:06.670 --> 05:09.190
This is just this very simple navigation bar.

05:09.220 --> 05:13.110
I mean we're not going to extend it any further than this.

05:13.120 --> 05:21.190
So it's not going to have any fancy functions so that is just to show you how much more organized this

05:21.190 --> 05:22.640
would be compared to sucess.

05:22.630 --> 05:25.940
All you have after you have written this code of.

05:26.350 --> 05:30.970
So we can call this half class

05:35.000 --> 05:39.550
Neff item in record it home.

05:39.880 --> 05:40.240
All right.

05:41.120 --> 05:53.760
So inside here we condensing navigation in code with a 100 percent search background.

05:55.100 --> 06:10.990
And we can do an attic in deep inside the container that if I turn anchor time you can use a color.

06:16.330 --> 06:20.140
And as you can see here we have our more structure here.

06:20.170 --> 06:29.290
And if we didn't go into our successful A you can see here that if we begin to write a lot more code

06:29.290 --> 06:36.430
of this so if we even do it a bit more code just to show you how long it will be.

06:36.850 --> 06:38.410
We will have a lot more

06:41.400 --> 06:47.370
organize code because this will look way more messy if we had wide office in the normal way.

06:48.420 --> 06:52.140
So if we didn't go in and same

07:03.120 --> 07:08.790
code left in here you can then see that this looks more organized.

07:08.790 --> 07:17.310
Again this output we're getting I would just be structured this way because it makes more sense from

07:17.310 --> 07:21.340
a lack of perspective in the way you will roll your code yourself.

07:21.450 --> 07:28.600
But this is a way to structure and organize your code in a more efficient way.
