There are many available tools to help make web development projects – such as modifying and customizing your JoomlArt Template based websites - quicker and more productive. Aside from a handy text editor like Notepad++ or WYSIWYG editor like Dreamweaver, you can find plenty of FREE tools and utilities that can greatly increase development speed, reduce testing time, and improve quality of the output.
The tools described below are a variety of utilities, optimizers, and testing tools aimed towards helping developers create websites more efficiently.
Notepad++
Notepad++ is a fairly powerful; multiple-language supporting; code auto-completing; multi-view, multi-document creating; macro recording; regular-expression-using code editor that should be on every web developer's desktop. I still have a hard time believing that this little beauty is free.
FileZilla FTP
FileZilla is an open source software that is distributed for free under the terms of the GNU General Public License. FileZilla is a FREE fast and reliable software that will be your free FTP solution!
Firebug
Firebug is a Mozilla Firefox extension that gives you plenty of web development tools and features. Firebug has a built-in JavaScript debugger that lets you step through your script as well as allowing you to perform benchmarks to see why your script is slow/sluggish.
You can quickly hunt down CSS, HTML, JavaScript, and XML errors through Firebug, and it even allows you to filter and search for specific errors. Another handy feature is the DOM inspector pane which outlines a web page's structure; very handy if you're working on a big website or an open-source application that you've recently gotten involved with.
Google Chrome Inspector
Google Chrome has loads of features some of which are an absolute delight for Webmasters. One such feature is the Google Chrome Inspector. To inspect, edit and debug the HTML, CSS or Javascript in a webpage in Google Chrome, right-click on the page and click on Inspect Element in the context menu that follows:
Google, by incorporating the Inspector, thus stays faithful towards Webmasters and developers and helps immensely in the task of developing efficient and high performance websites. Who knows, the inspector might just fine Chrome a few converts from the beloved Firefox!
IE Developer
Even if you prefer Firefox (or Safari) to develop and test your web pages, you have to test your stuff in the Internet Explorer browser for cross-compatibility. Whenever I test in IE, there are plenty of times when I wish certain features in Firebug and the Web Developer extension are accessible through IE, such as the DOM inspector option or the CSS Information option.
IE Developer Toolbar is the IE add-on that provides me the features I like in my Firefox extensions.
Resolution Test
Resolution Test is a Chrome browser plugin, that changes the size of the browser window for developers to preview their websites in different screen resolutions. It includes a list of commonly used resolutions as well as a custom option for you to input your own.
BrowserShots
With Browsershots, you can view screenshots of your website as it displays in different browsers, with a great degree of customization. Browser shots lets you choose your screen size, color depth, JavaScript and Flash settings. This website features the kitchen sink of browser lists, including a few you may never have heard of before.
This is a great free option for glimpsing multiple browsers. Keep your requests speedy by selecting a small sample of browsers. You may need to grab a cup of coffee while you wait for your screenshots if you selected every browser from Avant to SeaMonkey.
Pingdom Tools
Pingdom Tools is web-based application that you can use for easily testing the performance of your web pages. It can give you information on the total loading time of a web page and the total number of objects required to render the page to give you insights on things you can leave out or combine. It gives you a visualization of how page objects are loaded and you can sort the results by load order, load time (helpful in seeing what's taking so long to load), file size, file type, and URL.
Microsoft Expression
Microsoft is working to make your life easier. No, really. This tool makes optimizing for the various IE platforms a little less painful. The SuperPreview download for Internet Explorer allows you to check your site in multiple versions of Internet Explorer.
Side-by-side viewing options stack horizontally or vertically. There's also an overlay option to let you work out minute layout differences. Rulers, guides and other toys ease the burden of compatibility tweaks.
Unlike other testing options, SuperPreview allows you to test pages as you're developing them on your local machine. Still under development, but a promising program already.
Speed Tracer
Speed Tracer is a tool to help you identify and fix performance problems in your web applications. It visualizes metrics that are taken from low level instrumentation points inside of the browser and analyzes them as your application runs. Speed Tracer is available as a Chrome extension and works on all platforms where extensions are currently supported (Windows and Linux).
Adobe Kuler
If you find choosing colors tricky, then take a look at kuler, a fully database driven Flash site created by Adobe Labs. With kuler, you can choose, create, modify, mix and match colors to your heart's content, for free of course, until you happen upon the perfect color scheme for your website. Not only can you create your own color swatches, complete with RGB and HEX codes, you can save them and download other peoples' swatches too. You can even extract color palettes from illustrations and photographs, uploading them or selecting them on Flickr. Once you've chosen the ideal color pallet, you can download it for use in Adobe Creative Suite.
DynamicDrive
Looking for a quick and easy way to create favicons for your website, then look no further than Dynamic Drive's excellent FavIcon Generator. It's effortless to use, just select any image (provided it's a gif, jpg, png, or bmp) you want to turn into a favicon and press Create Icon. Follow the simple instructions generated to create an eye-catching favicon that will help your website stand out.
WebPageTest
Run a free website speed test from multiple locations around the globe using real browsers (IE and Chrome) and at real consumer connection speeds. You can run simple tests or perform advanced testing including multi-step transactions, video capture, content blocking and much more. Your results will provide rich diagnostic information including resource loading waterfall charts, Page Speed optimization checks and suggestions for improvements.