I am not a web developer/designer BUT I do dabble a lot for my job. Here are some of the tools that get me by and let me pretend I know how to hack the interwebs.
in 27 toolboxes
Cyberduck is an open source FTP and SFTP client for Mac OS X. This means that it's a tool that allows me to access the files of a website so I can download HTML, CSS and PHP files, tweak them, then upload them again to change the website.
in 51 toolboxes
Firebug is the best Firefox add-on ever. It allows you to see the underlying code of a webpage and lets you see what the site would look like if you were to tweak the code. Essential for finding out what the color code is for your favorite webpage background or figuring out how many divs it took to make that layout
in 345 toolboxes
Firefox is currently my browser of choice because of its add-ons Firebug and MeasureIt
in 117 toolboxes
The open source Photoshop, GIMP definitely has a steep learning curve but once you get the hang of it, it's an incredible piece of open source software for altering and playing with images
in 13 toolboxes
MAMP is a piece of software that will allow you to use your computer as a server so you can install programs like Wordpress, Joomla and Drupal on it to play around with and test.
in 5 toolboxes
Draw out a ruler to get the pixel width and height of any elements on a webpage.
in 8 toolboxes
I like to test my webpages in Opera first because of its standards-obsessed mission
in 5 toolboxes
Seashore is another open source image editor like GIMP. It's much much lighter-weight for your computer in terms of memory and computing power than GIMP so I like to use it when I need to do simple image edits like resizing.
in 10 toolboxes
Smultron is a text editor that I am in love with. It recognizes multiple languages meaning it will highlight different tags in different colors to make your code way easier to read. Word on the street is that development has stopped for this program. ;(