Hey guys.
All right.
It is awesome to have you back and welcome to this new newest section of where we've been looking at
bone's lectures this is will be the place this will be the place where I will add all the bondage lectures
in the upcoming weeks so make sure that you check out these Preedy aft.
All right so the first bonds lecture and I have prepared for you.
It's called inspect element.
Now what is inspect element.
Well open up your finished website and open up the index that HTL There goes to the Web site and what
I want you to do now is the following during your web development career you will face challenges you
will face problems you will face.
We are behaving elements ADHD male and sometimes bracket's would not be able to help.
Maybe you would change a code editor in the future.
Maybe at the workplace you are at.
They will be using some different one.
It doesn't matter.
You need to have one skill and that is inspect element.
This is particularly for the Google Chrome inspect elements for other browsers as well.
But let's get to it.
What is inspect element and what is the point of it.
Well inspect element is just a and developers to developers console tool that helps determine what Web
sites show.
So let me explain here.
If I click on right click anywhere on the screen I'll see.
Last option is called inspect and if I click that you will be prompted with something like this.
And what is this so from here on the right hand side you can see the whole website in your code.
You can see the all of our code is here and when we hover over different things they get highlighted.
This is extremely helpful for the following reasons.
If your question is when you should use the inspect element for testing maybe for debugging you need
to use the inspect element all the time.
So you might be thinking now why is this guy telling me this now that I finished a course and didn't
mention these earlier so I could be using inspect element to help me along my way.
Well that is a legit question but my answer would be beginners shouldn't use inspect element.
They get lost there.
They are not familiar with the environment it can be pretty confusing for beginners but once you've
finished this course I consider you are no longer a beginner.
So as of now you can understand what these classes are.
You can understand what they do because you have written the code and now this is all yours.
And after this lesson you will be even more familiar with using inspect elements so in your next future
projects I suggest you use this.
Any time you're facing an error a problem.
Weird behavior anytime you want to test something etc. etc..
So the perfect thing we expect element is that we can added things wife to see how they look and it
won't affect anything.
For example it's not take his website hours.
Let's take for example Facebook dot com.
So this is the homescreen and if I do inspect element here this is available on all web sites and if
I click this I can hear I can select a an element in the page to inspect it.
This would be let's say that this div we are selecting is if we do we are looking mean.
What's cool about this is that you can edit Web sites on the fly and you can edit your website on the
fly if you don't like something if you want something to be changed and changes are going live.
So for example I'm going to do just like this and I'm going to zoom inside the inspect element so you
can see better.
And if I click on it I can hear likely the div from earlier this is does dif read a weird looking name.
And if we see these other window those are CSSA styles we can see the elements tiles for this div.
And from here we can edit out as much as we want.
So for example we can increase the margin on the right and we can see the website is going crazy.
We can basically do anything we want here.
All right so the list is pretty endless of what we can do if we go back to our Web site.
We can try and test things life.
So for example if I hover over disk drive here we can see a blue in a green box blue box is the content
itself and to the green box indicates the paddock.
So whenever you see a green box it indicates panning.
And whenever you see an orange box is in indicates the margins.
So for example including this div here and let's say that I do not want this much padding.
All right.
So if I click on the fountain here and I can use the arrow keys to change to panic or I can completely
shut the padding off.
It's the same thing with float there with it basically you can edit out the whole the CSSA that you
have written inside brackets.
And this is life.
So it's not getting saved anywhere.
It's just for testing purposes.
And once you've designed it in these Web sites indeed inspect element here it is ready to be copy and
paste it to your brackets.
That is a good practice because everything we edit here.
So if I add here margin bottom of 30 pixels the margin is being at it like if I hold shift and then
click on up and down to increase and decrease the margin of partem.
So anything we do here once we refresh do absolute control shift and are those changes are gone and
more and are not here anymore.
So basically you can feel free to do anything you want with respect element.
Go explore it play with it's features you'll see there is a very nifty tool and a very useful tool and
it is a must have skill and must use tools or any web designer slash developer.
Thank you guys for watching.
This was the first of the bonus lecture series that we will be going through through the next weeks
and stay tuned for a new balance lecture so I'll see you there.