Speaker 1:          00:00          Hi there. Have you ever wondered how you can experiment with changes on your website without committing to those changes or risking anything messing up? The good news is that Google chrome and other browsers let you do that quite easily using a tool called the developer tools which is built into the browser. We're going to take a look at that right now. Here I am on my own website and let's say for example, I wanted to see what the website looks like without my big get a quote button here. All I need to do is mouse over that item and select it right click and then select inspect and what I'll see then is a separate window that contains all of the code that powers the website. It looks a bit confusing at first, but the good thing is that when you make selections as I've just done it will highlight the relevant part of the code. 

Speaker 1:          00:56          Now I've got a button that is hiding inside a paragraph, which is what the bracket p bracket means. If I select that and then right click again and say delete element that won't actually delete it from my website, but it will delete it from the temporary view of the page that I've got now, so I'm going to click that and you'll see all of a sudden if I clicked back in, that button has gone. Uh, here's another example. Let's say I wanted to change the size of an image. Let's say I pick an image in my footer. I want to make my face bigger. For example, I will right click on that select inspect and again I jumped to the relevant bit of the code which shows that this is an image and there's some other code in there, but what you'd be looking for are things like height and width of values. 

Speaker 1:          01:59          So I can see a width value in here of 130. So all I need to do there is double click and then I can change that figure. So let's say I change it to 220 for example, and then I press return and all of a sudden my image has got bigger. Again. It's a way of checking easily what something would look like at a different size without actually creating a new image or going around and changing the real code that powers that website. Let's say for example, I wanted to change the text of my intro. Now again, normally I would go into my website and change the back end text, but you can test it out here too. I'll right click on part of a paragraph that I want to change and say inspect and this time it's highlighted a paragraph inside the code. Of course, a little disclosure Arrow next to that. 

Speaker 1:          03:05          If I click on that, I can see the text that's in here and again I can change it if I want. I can just double click and I can just change the text as they want, so they'll go, I've written something that makes no sense, but you get the idea. You can change this as much as you want and nothing is committed to the website. In doing so, it's a temporary change. If I refresh the page now all of the original content will come back as it was. Let's do one more check. Let's say even if you're not on your own website, you might be interested to see what type face is being used on another website. So let's say let's say I like this little bit of text and I'm wondering what type faces used them, what font. I can right click on it and I can say inspect. 

Speaker 1:          04:00          That would jump me to that part of the text, but if I look over on the right side, I'll see a load of code that's also related to this text. If I click into the computer tab and look for Font family, that will tell me the fonts or type faces that are used in this text and the way it's written is that the first item that's in the list will be the font that it tries to use and if it can't use that for some reason, it will move on to the second item and it'll write it in that type face. And if that's not available then it will move onto the third and so on and so forth. So what I can do now is if I go back into the styles, tap here at the top, if I can look for that same text and I can see it down here, then I can see the full set of type faces used in that text, but I don't need to just see it. 

Speaker 1:          04:57          I can actually edit it as well. So let's say on my Mac, I'm using the Avenir type face for this text, if I Click into this I can change it. So let's say I changed Avenir to a Verdana for example, and press return. Then all of a sudden if I go back to the page, that paragraph and any other paragraph that uses the same style has now changed the type face. Again, this is not a permanent change. If I refresh the page, so I'm going to press command are on my Mac, it will reload and you'll see that everything has gone back to normal. So this is a fairly simple way to do experiments on your site. You can add things, you can remove things, you can change text, you can change the type face. If you get into the style sheets, you can even change colours and many other things too, so give it a try. Let me know what you think and I hope that helps.