graphic design, freelancing, illustration, advertising, web design

Firebug’s good, but I personally find it a bit ‘overkill’. I use the ‘Web Developer’ add-on, which can be found here:

https://addons.mozilla.org/en-US/firefox/addon/60

It does pretty much the same sort of stuff, but in a less obtrusive fashion!

Just my tuppence!

Thanks Paul, I had downloaded that too, but hadn’t experimented with it yet.

It’s all down to personal preference. I know several designers who swear by Firebug, and several who swear at it and use Web Dev…

They both sound really useful, even for just low level fiddling with templates.

Cool, thanks.

I really like Firebug- it’s great when you can’t figure out why something isn’t working as you set it up in the CSS, because you can see all the code that applies to an element. Very useful. Good luck with your project to learn this stuff!

Hi Chris, I’m glad it might help you too.

Hi Randa, thanks for the good luck message, I need it!

Nice post Tara! Firebug nearly made it into my Firefox add-on top 5: http://www.cymru66.com/uncategorized/my-five-favorite-firefox-add-ons/

In the end, however, the Web Developer extension just edged it.

I’m constantly amazed how many great add-ons are out there for Firefox.

–steve

Thanks Steve

I have just downloaded the FTP add on you suggested in your post. I have only just started using Firefox its so much better than safari on the Mac

This is the best add-on for FireFox, and you’re right too, it’s a great tool through which to learn CSS/HTML. I would also recommend Bullet Proof Web Design as a great intro to CSS. And you can always ask me - would be only to willing to help out.

And if you want to use FireBug for IE, then you can try FireBug Lite:
http://www.getfirebug.com/lite.html

Thanks Johno thats good of you. If I get stuck I’ll give you a shout.

Firebug is a really nice tool - though like Paul I find myself using the WD toolbar much more often. It’s just so familiar, and it takes up very little space (I do a lot of coding on my laptop). I think Firebug is great for larger monitors for sure.

With the WD toolbar can you mouseover to see an area of code? It doesn’t seem as easy to use as Firebug.

Yep you sure can. It’s a little more obscure, but if you go to Outline > Outline Current Element, a new bar will display just under the menu buttons, and show you the name of the item you’re hovering over, and its inheritance all the way back up to the HTML tag. There’s a key combo for quick access but it escapes me at the moment.

Oh I know what it was: Ctrl+Shift+F (not sure what it is for mac). But this is different than what I mentioned above. It still gives you element info, but in a little pop-up - and you have to click an item on the page to get it rather than hover. Eh, I don’t use this much but it’s there.

Thanks for the info Charity I’ll try that

I just installed Firebug, but really have not had any time to play around with it. If is overkill, like Paul suggested, I may just do away with it. Too set in my ways I guess. lol.

Anyhow, the reason I stopped to comment was that there is a sweet CSS Cheatsheet from Jack Daniel’s that you can download and print out (both PNG and PDF formats). I printed this one out, cuz I am like you, can’t keep a lot of it straight.

They have others there as well — and I just posted a list of several others (such as microformats).

Thanks for the cheatsheet links I have just downloaded it - will be very useful

That cheatsheet’s an excellent reference - even for those of us who know what we’re doing with CSS!

There are so many CSS references out there, it’s hard to know where to begin! I’m still pretty new to designing with CSS, but I do like it; it gives the kind of freedom you can’t get with tables. For me, Float Theory was probably the hardest thing to wrap my head around and this article from Smashing Magazine really helped. Although I haven’t looked into it too much, I’ve also found this tutorial site that is supposedly recommended by Dave Shea of CSS Zen Garden and Mezzoblue. You can look at my del.icio.us bookmarks if you’d like to see other sites I’ve found helpful. Most of the CSS stuff is under webtech, webdesign, CSS (though that contains galleries, too) and tutorials.

Thanks for these links Lauren, will be checking them out soon… so much to learn!

Well Lauren, you may be new, but it appears that you are doing quite well at discerning where to find the information you need. Another one you might want to add is A List Apart if you haven’t already.

Thanks for the compliments, and oh yes, I love ALA. Zeldman, Cameron Moll, Dave Shea, all those Happy Cog people… they just amaze me. I wish I could go to the Event on the Pacific coast (Seattle?) to hear them speak! Another really neat thing for understanding CSS that I stumbled upon today is the Yahoo! YUI CSS Grid Builder Tool. (Here’s a link to the main page) Found it from a link on this site to Brian Gardener’s site to Randa Clay’s site to Alister Cameron’s site. Crazy, this small bloggin’ world

Some more good links I don’t know what to read first.
I am currently working through a CSS course I bought (only $30) from Online Learning which seems pretty good so far. I previously did their HTML course. It’s good because it tells you something sets you a small task then you can view the results in the same page.

Hey Tara if you’re interested in picking up a good book about CSS in addition to your online class, you might consider Bulletproof Web Design by Dan Cederholm. I’m kind of a book junkie, so I buy up a lot of design and CSS books and then pick my way through bits and pieces that interest me… but this book I read cover to cover very quickly. It focuses less on dry stuff like syntax, and offers step by step solutions to common trip-ups instead. It’s a nice read.

Hi Charity,

Funny you should suggest that, a few other people have too, so I ordered it yesterday. I’m a book addict too, Amazon seriously damages my bank balance. Thanks

Oh I know just what you mean! I swear I have so many books in my wish list I’ll probably never actually acquire them all. Gonna try though.

That’s a very cool Firefox extension. Just installed it. Works beautifully.

Hi Crazy Leaf, glad its working for you

Very cool looking tool. I’m gonna have to check it out. Thanks!

Nice one. I have to install this. Thanks!

Hi,
Its superb.I am going to download it right now.Thanks for sharing with us!

I’m coming to this thread very late in the day, but that extension is genius. A real timesaver, particularly when I’m asked to recode sloppy work by other designers.

Just downloaded Firebug. It’s truly amazing being able to look under the bonnet and learn.
I’ve been reading ‘CSS Mastery’ by Andy Budd:
and published by ‘friends of ed’.I recommend it to right brained creatives. I love CSS but the browser idiosyncracies give me grey hairs.
The blog is a goldmine - thankyou

@ Kieran, I totally agree with you there.

I too have read Andy Budds’ CSS Mastery, although I must admit, still leaves some questions unanswered. Fortunately, I also discovered Firebug about 9 months ago now, and is now as important to me than any CSS book I’ve read.

As the say, ‘trail and error’ is the way. The ability to analyze peoples’ sites is awesome…I strongly recommend it to anyone wanting to learn CSS - even from scratch like me!

one thing I like about firebug is the “inspect” feature…that’s really amazing, and helpful. On top, you can edit the HTML code.
The web developer add-on is also helpful as at first glance, you can see if a website is standard compliant or not !

SEO for Firefox

I just read a post about the Firebug tool by Firefox. Here’s my contribution to the supbject.

As a self taugh CSS coder, I can run with the best of them when it comes to CSS design. I had a buddy recommend the Firbug tool. Finally I broke down and installed.

It sucks, not worth it’s weight in crap. The program slows down your Firefox browsing with a weighted lug. You can shut the device “off” for a site, but that doesn’t help everytime you encounter a new site browsing. The default is on.

Beside from this slowing of your browser, it takes up unnecessary memory and doesn’t help all that much. Learning to navigate this device is just as cumbersome as just learning to understand CSS. The nature of CSS is that it is inherently understandable.

I am a huge fan of Firefox and what they do, so to leave on a new good point and open the dialoge, there is a good new program by Firefox: SEO for Firefox. It’s great. Check it out if you are into the SEO thing.

It’s a different topic however, SEO, so i’ll leave it at that for now.