Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
What I would like to share in this movie is an incredibly useful tool that pretty much everyone who's doing web development and particularly CSS development should be installing into their copy of Firefox or Mozilla, and that's the Web Developer toolbar. I'm going to go to addons.mozilla.org and search for web developer. If you do that, oddly enough, the Web Developer toolbar is not the first thing that comes up. You get things like server switcher and Opera View and XML Developer Toolbar and you have to scroll down a bit, but then you find Web Developer 1.0.2 by Chris Pederick and you click on that and you find, here we are, at Web Developer 1.0.2, Chris Pederick, works with the following versions and you can install it. So you install, it counts down to make sure that you really want to do this because you should only install software from sources that you trust.
Well, I trust this one, never had a problem with it yet, so it says what developer will be installed when Firefox is restarted. So we're going to quit Firefox, close them up, we're going to launch Firefox again, I'm going to drag a file on here, and you'll notice that here, on the top of the screen there's this new toolbar. That is the Web Developer toolbar and you can do fun things with it, like disable all non- browser styles, basically, you can turn them on or off, you can add a user style sheet fairly easily, you can view CSS so if I hit view CSS, it's going to give me a list of all the CSS it's being applied to this file and where it comes from.
You can disable a pop-up block or if you're doing some development work you can look at cookies. There's all kinds of stuff in here. there's outlining, things like block level elements, so that would be paragraphs and divs. And this just gives you a visual sense of the structure of the document. You can outline custom elements if you want to, you can outline tables, just outline headings, see, so you can figure out where your headings are. If you have frames you can outline those. There is also access to the window resizer, so we can resize ourselves to 800 by 600.
To do testing for that, you can define your own resizes and there's also HTML and CSS validate links. So if I want to check to see if my CSS is valid, Oh, oh, it's a local file I can't do that, unless I pick Validate local CSS. The difference being that Validate CSS only works if the CSS file is on a publicly accessible website that the CSS elevator, but Validate Local CSS, grabs a copy of the CSS file off of your hard drive and sends it off to the validator.
So now we'll contact the validator and will say, oh, no, you have an error. It should mention what that is, there's a bug in the validator, that if you have a line-height value that has just a number, then it will throw an error, even though that's not an error. It will also give you warnings about colors and tell you what's valid and all that kind of fun stuff. See, we show you the works and everything and you can even go and validate the HTML for the CSS validator page if you wanted to. There are options for viewing source and there's also a whole set of options for the Web Developer toolbar. I can literally take half an hour to show you everything that's possible in the Web Developer toolbar.
Here you can see all of the anchors, you can have it show you all your IDs and classes. There's so much stuff in here, that is just insanely useful and so I very, very strongly recommend that if you're going to be doing any Web development, any writing of CSS and especially any creation of layouts, that you get the Web Developer toolbar, because it can really help you diagnose problems and get to a solution that much more quickly.
Get unlimited access to all courses for just $25/month.Become a member
58 Video lessons · 66191 Viewers
61 Video lessons · 96725 Viewers
56 Video lessons · 110435 Viewers
82 Video lessons · 105149 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.