If you’re just beginning web design/development, or if you simply don’t want to spend money on expensive software tools, it may seem impossible to achieve your dream of coding and designing your own site. You might even think you can’t create anything worth looking at or browsing if you don’t have high-end software.

I am happy to tell you that there are wonderful free software options for all of us who can’t yet afford some of the loftier programs. Not only are these programs free, but they are often the best utilities out there for the price. Here are the three webdesign software tools I use for my own designs:

Best Free Code Editor: Notepad++

Ever since I began web design, I longed for a “just-code” editor, one that would display the bare code like Notepad did…except that I wanted a little more Web-specific functionality, too. I wanted to surf through the code without getting so lost; I wanted to be able to speed up the long and tedious editing process. I needed a program that wasn’t so simplistic as a WYSIWYG editor, but one that was also helpful for those of us who were learning code.

Well, someone in the Notepad++ development team must have heard my prayers! Here, you can see how the different bits of code are color-coded (HTML tags are blue, selectors are in red, option choices are in purple, and so on).

See the gray minus sign and the line extending between the opening p tag and the closing p tag? This is another one of Notepad++’s great tricks: “folding up” a section of code if you need it up and out of the way.

When you click the minus sign, it closes the section of code encased by the opening and closing p tags, resulting in a display like this. Clicking the red plus sign will expand the hidden code out again.

Like the image above says, the “Replace” function is also known as “Hallelujah!!!” That’s what you’ll shout when you realize you can use the Find & Replace function to edit the same text in every file you have open within the program. SO awesome for expediting those previously long and tedious tasks, like editing a line of code on every page of your site.

Now, I haven’t even begun to expound upon all of Notepad++’s awesome features. The program supports a variety of different languages, from ASP all the way to XML, and even including some languages I’ve never even heard of (Haskell and KIXtart, among others). Plus, it has the ability to use macros, plugins, and converters for even faster programming. Check out the program with the link below:

Download Notepad++: Notepad-Plus-Plus.org

Best Free Graphics Program: GIMP

Ever wanted Photoshop but couldn’t hack the $600 price tag? Well, GIMP can do most things you’d use Photoshop for, even transparency and text addition, but for free.

Its interface is a little more free-form and spartan…

…but within it, you can still do all of the basic image-editing techniques, as well as some of the more sophisticated ones usually in higher-end products.

This is how an image looks when opened within GIMP–it appears in the central box of the program.

Most of the tools that usually appear under Enhance in Photoshop-esque programs are located under Colors in GIMP, such as Brightness/Contrast, Levels, Hue & Saturation. etc. These dialogs work just as well as the pricey ones, and these come with handy ToolTips to help you navigate the menus.

This is an example of the Levels dialog, in which you can change the shadows, midtones, and highlights to your heart’s content.

The Image menu remains largely unchanged from programs like Photoshop–it’s just that the “Resize Image” dialog is renamed “Scale Image.”

The dialog for resizing the image appears here. To resize your image proportionally, just type in your desired height or width, and then click the linked chains to the right of the boxes to get the corresponding number in the other measurement.

Besides changing sizes and tweaking shadows and highlights, GIMP can also do a lot of the artistic filters on pictures that Photoshop can, plus cropping, layering, and masking. It’s a great program, and even after six months of using it I’m still not done exploring all it can do. Check it out for yourself!

Download GIMP: GIMP.org

Best Free File Uploading Program: FileZilla

If you’ve got tons of files to upload, never fear that you’ll be stuck uploading through your browser again! FileZilla is a free FTP program that offers clean and simple uploading (and downloading!) functionality.

This is what the program looks like before you make a connection to an FTP server. On the left appears your computer’s folder hierarchy (top left pane), and the content you’re working with in the currently open folder (bottom left pane).

To connect to your FTP server, you’ll need to provide FileZilla with some information. This is the Site Manager dialog box, where you plug in the info for your site. The “Host” line is usually something like “ftp.yourdomain.com”; you’ll need to fill in your username and password for your hosting server. (My details are obscured for privacy reasons.) Once you’re done filling in your info, you can save and connect!

This button, at the top right underneath the word “File,” is the Quickconnect button. Use this to connect to any of the sites whose profiles you’ve saved already through the Site Manager dialog box.

Once you connect to a server, its folder hierarchy appears in the top right pane, and the contents of an individual folder appear in the bottom right pane. Uploading can be as simple as dragging and dropping the files from the bottom left to the bottom right pane!

Or, you can always right-click the file you want to upload and choose “Upload” from the right-click menu. (For Mac users, I am not sure of the keyboard shortcut to achieve this–please pardon my Windows-user ignorance.)

If you want to upload multiple files, the highlight-and-right-click-upload method works best, I’ve found.

FileZilla will even warn you if a file already exists, and through this dialog box you can choose whether you want to overwrite it or not–it even specifies very detailed actions depending on the age and size of the two files it’s comparing.

Not only can you upload files, but you can download them from your server as well! It’s great for making file backups…and, as I found out in 2011, great for emergency saves of all your hard work. When my hard drive crashed in 2011 and I lost ALL my data, FileZilla was able to download copies of all my files from my hosting provider very quickly and efficiently.

(And, just like uploading multiple files, you can highlight-and-right-click all the files you want to download from your server, and do it en masse. That’s what made getting all my Web work back a whole lot easier.)

FileZilla may not have a lot of frills, but it’s an excellent utility for bulk uploading and downloading, making file backups, and connecting to your site without having to have a browser window open. It’s well worth a download!

Download FileZilla: FileZilla-Project.org