As part of learning HTML for WordPress and Thesis, there are some tools that are valuable to know how to use. I want to draw your attention to them here and we’ll start off with Firefox.
Firefox Tools
Now, many of you have watched me for many hours and you see that I typically use Chrome and I use it because it’s just my preferred browser. Chrome has similar although not identical tools to these things. However, the Firefox tools are actually both easier to use and I think a little bit more comprehensive for beginners than the Chrome tools are.
Chrome has lots and lots and lots of great developer tools and it is my preferred web browser. But for beginners, I think Firefox is probably a better place to start because its tools do a better job of helping you figure out some things that I think beginners struggle with.
Adding On MeasureIt, ColorZilla and Source Chart
There are three Firefox tools that I recommend that you add to Firefox and that’s “MeasureIt”, “ColorZilla” and “Source Chart”. The way you do that is just come over here to Firefox and over to Add ons and that’s going to load this Get Add ons thing here. Then all you’re going to need to do is search for “Measureit”. When it comes up, you can install it.
The next one is “ColorZilla” which we’ll use here today and that’s this one here. Then finally, “Source Chart” and this is actually “View Source Chart”. We’ll go ahead and install that just like that.
As soon as it’s installed, you click Restart Now and once that’s done, you can look at your own list of extensions and see that those are all installed so “ColorZilla”, “Measureit”, “View Source Chart” and we’re going to look at each of those things here today as we work our way through this material.
Firefox Developer Tools
Now, I used to recommend that you install Firebug and Web Developer but Firefox has its own set of developer tools that are very powerful all by themselves and in fact, I think a little bit better than those tools that I used to recommend. So you don’t actually have to do anything to get those because the tools are built directly into Firefox.
The easiest way to access those tools is to place your mouse some place on the page and choose inspect element where it’s inside the queue there, inspect the element with that queue, and this brings up the Firefox Developer Tools.
The Toolbar
The Firefox Developer Tools has a couple of main sections. The first one is the toolbar and the toolbar allows you to choose different tools. So for example, the consul or the inspector or the debugger or the style editor.
We’re going to spend all of our time today inside either the inspector or the style editor because those are the sections that give you information about the CSS and the HTML in particular. Although we’ll look at some of these other tools as well as we work our way through this material.
The Tools – Page Inspector
The next part of this are the tools. Here we are in developer tools and we have selected the inspector which is short for the page inspector and the page inspector has two panes. It has the HTML pane which shows a tree view of the HTML and it has a CSS pane which shows the CSS that is being applied to the selected element. You’re going to see this in operation over and over and over again here.
The CSS Pane
The two parts that I want to draw your attention to of the CSS pane are the rules and then the computed. The rules are the actual written rules that exist in stylesheets and computed is what the browser has finally computed based on its interpretation of all the rules that a specific element has. So this is the way it is computed and these are the rules that are actually written and that’s the difference between rules and computed.
The Tools – Style Editor
Now, in addition to the page inspector, you have the style editor. The style editor also has two panes. The left hand pane shows all of the CSS stylesheets that are being called by this page plus inline styles that may exists some place inside the page. That’s the left hand side.
The right hand side is the content of that stylesheet. So the left hand side is the classic responsive css.css file and here is that entire file as it is actually written.
Then we’re using a Google font here so this is the CSS file for that font. This is the CSS file for the admin bar that gets loaded when you’re logged in and this is the CSS file for the meteor slideshow. This is the CSS file for the Google maps.
So these are each of the files and then each of the contents of those files and these are the two things that we’ll be looking at over and over and over again today and that’s where you’re going to spend the lion’s share of your time when you’re doing that. So those are the tools of the trade that we’re going to be using here throughout the day.
Option of Chrome Tools
Somebody is asking, “Are there similar tools for Safari?” No, there are not. In order for you to use the tools as I’m describing them and talking about them, you’re going to have to use Firefox at least for this aspect of it. And there is Firefox for the Mac but there really isn’t anything else out there, really only Firefox and Chrome have the best set of developer tools.
If you don’t wish to use Firefox, you can use Chrome. Its tools are somewhat different but this demonstration will all be in Firefox. The developer tools for Firefox are not a plugin, they are built directly into Firefox. The tools that are not built in were the 3 that I’ve mentioned before which are “ColorZilla, “Source Chart” and “Measureit”.