1
00:00:06,020 --> 00:00:12,700
Welcome back in this lecture we're going to discuss how to inspect elements on a Web site the Chrome

2
00:00:12,700 --> 00:00:15,760
browser comes the ability to inspect elements on a web page.

3
00:00:15,760 --> 00:00:21,730
In most modern browsers do not just chrome we can use that to then explore the web pages each time.

4
00:00:21,780 --> 00:00:25,140
And CSSA components and even edit them on the fly.

5
00:00:25,140 --> 00:00:27,430
Let's quickly see how this works in the browser.

6
00:00:28,340 --> 00:00:33,380
Here I am at Google dot com and you can perform the sort of inspection on any Web site.

7
00:00:33,650 --> 00:00:37,120
What you do is you pick an element that you're interested in.

8
00:00:37,130 --> 00:00:41,700
For example let's choose this about button over here on the nav bar.

9
00:00:41,800 --> 00:00:46,780
I'm going to right click on about and then select inspect.

10
00:00:47,120 --> 00:00:53,120
Upon selecting inspect either on the bottom of your browser on the right hand side you should see this

11
00:00:53,120 --> 00:00:58,460
doc show up and if you want to change the location of the dock you can click these three buttons and

12
00:00:58,460 --> 00:00:59,620
then choose where you want it.

13
00:00:59,630 --> 00:01:04,550
You can have it dock to the bottom to the left or even open in a separate window right now I'll just

14
00:01:04,550 --> 00:01:10,350
keep it on dock to the right and then what you notice is it will actually highlight in the raw H.T.

15
00:01:10,360 --> 00:01:12,680
mail that's being served from Google dot com.

16
00:01:12,840 --> 00:01:15,360
What is the reference to that particular button.

17
00:01:15,360 --> 00:01:18,960
So you notice here as you scroll down you can even see the styles.

18
00:01:19,170 --> 00:01:22,790
So you can see display padding left color and more.

19
00:01:22,920 --> 00:01:24,840
So I can actually edit these colors.

20
00:01:24,840 --> 00:01:30,570
In fact let's click on this little box and that opens up a color picker and I can decide to make this

21
00:01:30,600 --> 00:01:32,770
maybe a bright orange.

22
00:01:32,940 --> 00:01:38,130
So then upon selecting that that's a bright orange if I take a look back I'm actual nav bar.

23
00:01:38,130 --> 00:01:40,710
I've changed that now pure orange for me.

24
00:01:40,710 --> 00:01:46,080
Keep in mind we're only editing our particular view of Google dot com as it's rendered right now in

25
00:01:46,080 --> 00:01:46,780
the browser.

26
00:01:46,890 --> 00:01:50,370
I'm actually editing the real Google dot com for everyone else.

27
00:01:50,820 --> 00:01:57,840
And you can see here the various other CSSA style components the value pairs that are being displayed.

28
00:01:57,870 --> 00:02:00,910
That's really all we wanted to show you here for the inspect element.

29
00:02:00,960 --> 00:02:05,550
It's really useful when you're exploring other people's Web sites and maybe you want to take some ideas

30
00:02:05,550 --> 00:02:08,330
from their Web sites and implement them in your own sites.

31
00:02:08,340 --> 00:02:14,860
All you need to do is right click inspect and you could see both the HVM mail as well as the styles.

32
00:02:15,300 --> 00:02:15,810
All right.

33
00:02:15,990 --> 00:02:17,140
That's it for this lecture.

34
00:02:17,160 --> 00:02:21,420
I hope you find that information useful and I encourage you to play around with the various styles of

35
00:02:21,420 --> 00:02:25,650
Web sites you're already familiar with and see how they change the Web site.

36
00:02:25,650 --> 00:02:31,050
If you ever want to go back to the original site all you need to do is just refresh and you'll see the

37
00:02:31,050 --> 00:02:33,140
original colors and styles.

38
00:02:33,150 --> 00:02:34,290
OK that's it.

39
00:02:34,290 --> 00:02:35,340
We'll see you at the next lecture.