Skills are one thing, but the better your tools are, and the more command you have over those tools, the better your skills can be put to use (you can just ask any carpenter, golfer, or app programmer about the sheer importance of the "tools of the trade").
First up, we'll need to meddle with markup and code—lots of markup, CSS, PHP, and jQuery. So, you'll need a good code or HTML editor. Dreamweaver is a great option (http://www.adobe.com/products/dreamweaver/), although I prefer to use Coda for Mac (http://www.panic.com/coda/). Before I discovered working with Coda, I was very happy with the free editor TextWrangler (http://www.barebones.com/products/textwrangler/). When I was working on a PC, I loved the free text/code editor HTML-kit (http://www.htmlkit.com/).
There are thousands of editors out there, some free, some expensive, and with varying degrees of features. Just about every developer and designer I've talked to, uses something different and has a ten-minute "schpiel" about why their editor is the best. Ultimately, any HTML or text editor that lets you enable the following features will work just great. I recommend you enable/use all of the following:
View line numbers: This comes in very handy during the validation and debugging process. It can help you find specific lines in a jQuery script, theme, or plugin file, for which a validation tool has returned a fix. This is also helpful for other theme or plugin instructions given by their author, which refer to a specific line of code that might need customizing or editing under different conditions.
View syntax colors: Any worthwhile code and HTML editor has this feature usually set as a default. The good editors let you choose your own colors. This displays code and other markup in a variety of colors, making it easier to distinguish various types of syntax. Many editors also help you identify broken XHTML markup, CSS rules, or PHP code.
View non-printing characters: You might not want this feature turned on all the time. It makes it possible to see hard returns, spaces, tabs, and other special characters that you may or may not want in your markup and code.
Text wrapping: This of course lets you wrap text within the window, so you won't have to scroll horizontally to edit a long line of code. It's best to learn what the key-command shortcut is for this feature in your editor, and/or set up a key-command shortcut for it. You'll find it easier to scroll through unwrapped, nicely-indented, markup and PHP code to quickly get a general overview or find your last stopping point; however, you will still want to turn wrapping on quickly so you can easily see and focus your attention on one long line of code.
Load files with FTP or local directories: An editor that allows you to connect through FTP or see your local working directory in a side panel, is extremely helpful. It saves you from having to manually find files locally in your OS explorer or finder, or from having to upload through an additional FTP client. Being able to connect to your files in a single application just speeds up your workflow.
Note
Free open source HTML editors:
I've also used Nvu (http://www.net2.com/nvu/) and KompoZer (http://kompozer.net/). They're both free, open source, and available for Mac, PC, and Linux platforms. KompoZer was made from the same source as Nvu and, apparently, fixes some issues that Nvu has. (I haven't run into any major issue with Nvu myself). Both editors are too limited for my regular use, but I do like being able to format HTML text quickly and drag-and-drop form objects onto a page. Both editors have a Source view, but you must be careful while switching between the Normal and the Source view tabs. Nvu and KompoZer are a little too helpful, and will try to rewrite your handcoded markup if you haven't set your preferences properly!
Linux users of Ubuntu and Debian (and Mac users with Fink) might also be interested in checking out the Bluefish editor (http://bluefish.openoffice.nl). I use Bluefish when working on Ubuntu Linux. I prefer it when on Linux, though it's robust enough to probably be considered more of an IDE (Integrated Development Environment), similar to Eclipse (http://www.eclipse.org), rather than just a basic code or HTML editor. Many of you may find that a tool like Bluefish or Eclipse is overkill for your general WordPress development and maintenance needs. On the other hand, if you're serious about WordPress development, they may have features you find invaluable and they are worth downloading and checking out.
Finally, you'll need a web browser. I strongly suggest that you use the latest stable version of the Firefox browser, available at http://mozilla.com/firefox/.
Now one may ask, why use Firefox? While this browser has its setbacks (like any other), on the whole, I view it as an excellent web development tool. For me, it's as essential as my HTML editor, FTP programs, and graphics tools. Firefox has great features that we'll be taking advantage of to help us streamline our WordPress and jQuery enhancements and site production. In addition to built-in features such as the DOM Source Selection Viewer and adhering to CSS2 and some CSS3 standards as specified by the W3C, Firefox also has a host of extremely useful extensions such as the Web Developer Toolbar and Firebug, which I recommend to further enhance your workflow.
If you have some experience with jQuery, you've probably noticed that the great documentation on jQuery's site as well as most jQuery books, tend to focus on the intricacies of jQuery, using very simple and basic HTML markup examples with minimal CSS attributes added. Within WordPress, you'll find yourself working with a theme or plugins that were most likely created by someone else. You'll need an easy way to explore the Document Object Model (DOM) and CSS that the theme, plugins, and WordPress are generating in order to get jQuery to do what you want with the resulting markup that is generated. The Firefox browser and its extensions allow you to do this more easily than any other browser.
This is a great extension that adds a toolbar to your Firefox browser. The extension is also available for the Seamonkey suite and the new Flock browser, both of which, are powered by the open source code of Mozilla, just like Firefox. Get it from http://chrispederick.com/work/web-developer/.
The toolbar lets you link directly to the browser's DOM and Error Consoles, as well as W3C's XHTML, and CSS validation tools. It also lets you toggle and view your CSS output in various ways, and lets you view and manipulate a myriad of information your site outputs on-the-fly. The uses of this toolbar are endless. Every time I develop a design or create jQuery enhancements, it seems I discover some feature that I have never previously used and yet find quite useful.
A more robust tool is Joe Hewitt's Firebug extension for Firefox found at http://www.getfirebug.com/. You'll note, there's also a "Firebug Lite" version available for Internet Explorer, Safari, and Opera. But the full Firebug for Firefox is your best bet.
This extension is a powerhouse when combined with the features of the Web Developer toolbar. On its own, Firebug will find anything you need to manipulate or debug: HTML, CSS, JavaScript, you name it. It can even help you find little "weirdo" tidbit things happening to your DOM on-the-fly. There's a variety of fun inspectors and just about all of them are invaluable.
My favorite Firebug features are the options for reviewing HTML, CSS, and the DOM. Firebug will show you your box models and let you see the measurements of each ledge. Plus, the latest version of Firebug lets you make edits on-the-fly to easily experiment with different fixes before committing them to your actual source files. (There are features that let you edit on-the-fly in the Web Developer Toolbar as well, but I find the Firebug interface more in-depth and easier to use.)
The last tool that I'd like to mention is an image editor. While you can certainly do plenty of cool enhancements with pure CSS, chances are you'll want to expand on your WordPress design and jQuery enhancements a little more by being able to add some slick visual elements such as cool icons or custom backgrounds. These are best achieved by using a graphic editor such as GIMP, Photoshop, or Fireworks.
Adobe owns both Photoshop and Fireworks. It also offers a light and less-expensive version of Photoshop, called Photoshop Elements that will allow you to do basic image edits (http://www.adobe.com/products/).
Any graphic editor you prefer is fine. One that allows you to work with layers is best.
Note
Free open source image editors
If you're on a budget and in need of a good image editor, I'd recommend GIMP. It's available for PC, Mac, and Linux. You can get it from http://gimp.org/.
On the other hand, if you prefer vector art as I do, then try Inkscape, which is also available for PC, Mac, and Linux. Bitmap graphic editors are great in that they also let you enhance and edit photographs and do some drawing. But if you just want to create neat buttons and icons or other interface elements and vector-based illustrations, Inkscape gives you detailed drawing control and is worth trying out (http://inkscape.org). You'll find that many graphic examples created for this book were done primarily with Inkscape.
I personally use both, a bitmap image editor like GIMP or Photoshop in conjunction with a solid vector drawing program like Inkscape. I find it is often necessary to use both types of image editors together to create most of my site designs and effects.