Nerd Party: How to use the Web Developer tool
Today I’m going to share one of my favorite design tools, the Web Developer add-on for FireFox & Chrome. You can download it here and then watch the video to see how it works. (Firebug was the other tool I talked about)
You are gonna to earn lots of nerd points with this one!
Here are a few screen shots in case you aren’t able to see the text well enough in the video…
Click tools > web developer extension > css > display style information to located divs and tags for specific design elements.
Highlight the item you’d like to inspect and that portion of the stylesheet will appear in the box below.
To edit the stylesheet live, click tools > web developer extension > css > edit css.
To figure out the height or width or items user the rulers: tools > web developer extension > miscellaneous > display ruler. The size will appear at the bottom of the tool bar…
Let me know if you like this type of video. It was actually pretty fun & easy to make (way less edits than shooting video of myself talking!) so I’ll be happy to do more in the future.
CLICK HERE FOR MORE NERD PARTY POSTS
03.13.13 in nerd party
I just discovered this tool the other day after finishing my HTML and CSS basics lessons on codecademy.com and I was so excited! I haven’t taken time to play with it yet, but after watching this, I think I’ll have to very soon. It’s even more powerful than I had imagined!
This is a great tool! I can’t wait to try it out. :)
Also, you have the cutest voice ever!
Thanks Laura! Listening to my voice over and over drives me a little crazy haha