Welcome to a special tutorial from EasyProgramming.net. Today, I want to lay some groundwork for a future tutorial series in JavaScript. One thing that you will most definitely need to know is how to use the developer tools in your browser, more specifically, the element inspector, and the JavaScript console. Today, I'll cover three parts of the element inspector and go a little over the JavaScript console, more on the console will come later!

So what is the element inspector? The element (or page) inspector is part of a browser which allows you to see the view and even modify the DOM, or the document object model. This means you can use it to create, edit, and delete DOM elements on the page in HTML. you can also create, modify, and delete CSS. And with the JavaScript console, you can run JavaScript commands to do your bidding.

All major browsers have the element inspector and I'll be using the one on Chrome. You can do this in Firefox, Opera, or whatever browser you prefer. The inspector will look similar. You can also use plugins like firebug. The inspector allows you to troubleshoot items on web pages every easily with help from the sources or network tab, or by debugging a script. something I'll briefly go over today and cover more in depth in another tutorial.

Checkout the Codesnip section below for the link to the Github repository!

Remember to checkout the Resources section below for associated downloadable on Github and more!