WEBVTT 00:00.960 --> 00:01.560 Hey guys. 00:01.560 --> 00:02.000 All right. 00:02.040 --> 00:10.410 It is awesome to have you back and welcome to this new newest section of where we've been looking at 00:10.410 --> 00:17.220 bone's lectures this is will be the place this will be the place where I will add all the bondage lectures 00:18.040 --> 00:23.430 in the upcoming weeks so make sure that you check out these Preedy aft. 00:23.430 --> 00:26.880 All right so the first bonds lecture and I have prepared for you. 00:27.390 --> 00:29.640 It's called inspect element. 00:29.640 --> 00:31.960 Now what is inspect element. 00:32.070 --> 00:42.520 Well open up your finished website and open up the index that HTL There goes to the Web site and what 00:42.520 --> 00:49.510 I want you to do now is the following during your web development career you will face challenges you 00:49.510 --> 00:52.280 will face problems you will face. 00:52.390 --> 01:00.640 We are behaving elements ADHD male and sometimes bracket's would not be able to help. 01:00.790 --> 01:04.510 Maybe you would change a code editor in the future. 01:04.600 --> 01:06.790 Maybe at the workplace you are at. 01:06.820 --> 01:08.640 They will be using some different one. 01:08.660 --> 01:10.260 It doesn't matter. 01:10.870 --> 01:15.840 You need to have one skill and that is inspect element. 01:15.850 --> 01:20.520 This is particularly for the Google Chrome inspect elements for other browsers as well. 01:20.530 --> 01:22.160 But let's get to it. 01:22.170 --> 01:25.240 What is inspect element and what is the point of it. 01:25.360 --> 01:34.270 Well inspect element is just a and developers to developers console tool that helps determine what Web 01:34.340 --> 01:35.320 sites show. 01:35.380 --> 01:37.070 So let me explain here. 01:37.120 --> 01:41.810 If I click on right click anywhere on the screen I'll see. 01:41.810 --> 01:48.550 Last option is called inspect and if I click that you will be prompted with something like this. 01:48.820 --> 01:56.730 And what is this so from here on the right hand side you can see the whole website in your code. 01:56.740 --> 02:04.360 You can see the all of our code is here and when we hover over different things they get highlighted. 02:04.360 --> 02:07.580 This is extremely helpful for the following reasons. 02:07.720 --> 02:15.280 If your question is when you should use the inspect element for testing maybe for debugging you need 02:15.280 --> 02:18.930 to use the inspect element all the time. 02:19.420 --> 02:25.990 So you might be thinking now why is this guy telling me this now that I finished a course and didn't 02:25.990 --> 02:32.200 mention these earlier so I could be using inspect element to help me along my way. 02:32.290 --> 02:38.860 Well that is a legit question but my answer would be beginners shouldn't use inspect element. 02:38.860 --> 02:40.530 They get lost there. 02:40.540 --> 02:48.310 They are not familiar with the environment it can be pretty confusing for beginners but once you've 02:48.310 --> 02:51.740 finished this course I consider you are no longer a beginner. 02:51.790 --> 02:54.840 So as of now you can understand what these classes are. 02:54.850 --> 03:00.750 You can understand what they do because you have written the code and now this is all yours. 03:00.940 --> 03:06.160 And after this lesson you will be even more familiar with using inspect elements so in your next future 03:06.160 --> 03:08.740 projects I suggest you use this. 03:08.750 --> 03:11.270 Any time you're facing an error a problem. 03:11.270 --> 03:15.580 Weird behavior anytime you want to test something etc. etc.. 03:15.790 --> 03:23.680 So the perfect thing we expect element is that we can added things wife to see how they look and it 03:23.680 --> 03:25.500 won't affect anything. 03:25.600 --> 03:28.440 For example it's not take his website hours. 03:28.450 --> 03:30.840 Let's take for example Facebook dot com. 03:32.250 --> 03:38.400 So this is the homescreen and if I do inspect element here this is available on all web sites and if 03:38.400 --> 03:44.430 I click this I can hear I can select a an element in the page to inspect it. 03:44.460 --> 03:49.650 This would be let's say that this div we are selecting is if we do we are looking mean. 03:49.650 --> 03:55.890 What's cool about this is that you can edit Web sites on the fly and you can edit your website on the 03:55.890 --> 04:01.560 fly if you don't like something if you want something to be changed and changes are going live. 04:01.570 --> 04:12.280 So for example I'm going to do just like this and I'm going to zoom inside the inspect element so you 04:12.280 --> 04:13.630 can see better. 04:13.630 --> 04:22.170 And if I click on it I can hear likely the div from earlier this is does dif read a weird looking name. 04:22.450 --> 04:32.420 And if we see these other window those are CSSA styles we can see the elements tiles for this div. 04:32.440 --> 04:36.210 And from here we can edit out as much as we want. 04:36.210 --> 04:44.820 So for example we can increase the margin on the right and we can see the website is going crazy. 04:44.920 --> 04:50.350 We can basically do anything we want here. 04:50.350 --> 04:55.750 All right so the list is pretty endless of what we can do if we go back to our Web site. 04:56.030 --> 04:58.420 We can try and test things life. 04:58.420 --> 05:04.990 So for example if I hover over disk drive here we can see a blue in a green box blue box is the content 05:05.170 --> 05:10.930 itself and to the green box indicates the paddock. 05:10.930 --> 05:13.870 So whenever you see a green box it indicates panning. 05:14.080 --> 05:17.710 And whenever you see an orange box is in indicates the margins. 05:17.710 --> 05:23.660 So for example including this div here and let's say that I do not want this much padding. 05:23.940 --> 05:24.430 All right. 05:24.430 --> 05:34.180 So if I click on the fountain here and I can use the arrow keys to change to panic or I can completely 05:34.420 --> 05:36.680 shut the padding off. 05:37.050 --> 05:45.310 It's the same thing with float there with it basically you can edit out the whole the CSSA that you 05:45.310 --> 05:46.880 have written inside brackets. 05:46.900 --> 05:48.380 And this is life. 05:48.380 --> 05:51.750 So it's not getting saved anywhere. 05:51.770 --> 05:53.320 It's just for testing purposes. 05:53.330 --> 06:00.860 And once you've designed it in these Web sites indeed inspect element here it is ready to be copy and 06:00.860 --> 06:02.270 paste it to your brackets. 06:02.270 --> 06:06.750 That is a good practice because everything we edit here. 06:06.780 --> 06:15.110 So if I add here margin bottom of 30 pixels the margin is being at it like if I hold shift and then 06:15.110 --> 06:19.750 click on up and down to increase and decrease the margin of partem. 06:19.760 --> 06:29.260 So anything we do here once we refresh do absolute control shift and are those changes are gone and 06:29.280 --> 06:31.550 more and are not here anymore. 06:32.000 --> 06:38.030 So basically you can feel free to do anything you want with respect element. 06:38.030 --> 06:44.990 Go explore it play with it's features you'll see there is a very nifty tool and a very useful tool and 06:44.990 --> 06:52.280 it is a must have skill and must use tools or any web designer slash developer. 06:52.280 --> 06:53.480 Thank you guys for watching. 06:53.480 --> 06:59.690 This was the first of the bonus lecture series that we will be going through through the next weeks 07:00.020 --> 07:04.130 and stay tuned for a new balance lecture so I'll see you there.