/beyond/webmaster/toolbox/article.php/3917386/Six-Web-based-Tools-for-Web-Developers.htm Six Web-based Tools for Web Developers

Six Web-based Tools for Web Developers

By Scott Clark

Like most people, web developers are slowly getting used to the idea of doing things online via web-based applications. For web developers, that means finding ways to handle their normal web dev tasks via any computer that has an up-to-date web browser. In this article we will take a look at some top-notch web-based tools for web developers.

Adobe BrowserLab

Adobe BrowserLab allows you to preview your website using multiple browsers and operating systems. Since it's an Adobe product, they have integrated it with Dreamweaver CS5, so it can be launched directly from within Dreamweaver as well. One really handy feature is to be able to see how a particular page looks in two different browsers, side by side. It's free, and there is also a Firebug add-on available as well.

MockingBird Mockup Tool

If you've ever used a wireframe tool to mock up a design, whether it's a house plan, room design, a product you're making, or a website, then you are familiar with how they make it easy to illustrate to clients the vision that you have in your mind for their prospective website. The MockingBird Mockup Tool is just like that--there are icons on the left which you can drag into position on the right side of the screen to layout a web page, including form fields, videos, images, you name it.

YUI CSS Grid Builder

The YUI CSS Grid Builder doesn't have any directions or instructions, but it's fairly self-explanatory. When you go to the CSS Grid Builder site you will be presented with the editor shown below:

You can select the size you wish for the web page to appear (750px, 960px, 974px, 100% or custom), the number of columns with specific widths for the sidebar, and you can split the content row into 1 - 4 columns. There are several other options available as well as the ability to set the header and footer content. Once you're done, you simply click the Show Code button and save the CSS code that is generated for your own site.

Pixlr Online Image Editor

The Pixlr Online Image Editor provides you with the ability to edit your images using an online editor--and the images can be uploaded from your own computer, or they can be grabbed from an online URL. If you are used to using PhotoShop, Pixlr will probably disappoint you, but if you just need a basic image editor (don't think Microsoft Paint, think more PhotoImpact or PaintShop Pro), Pixlr is an excellent alternative to traditional desktop applications.


Like Pixlr, Net2FTP is a tool that you can use when you are out of the office, at the airport, or otherwise not at your computer and need to transfer some files to your web server. You do have to provide your FTP login details, and I wouldn't use this service for anything critical, but it provides a decent FTP client in a pinch.

Favicon Generator

You should know what favicons are by now--they are those little icons that show up in your browser's URL bar. If your site doesn't have one, then your site's users won't see one. Creating a favicon used to be a real chore, but with the use of the Favicon Generator it's as easy as selecting an image from your PC and clicking the Create Icon button.

If you know of some online tools we should mention, please leave us a comment below!

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
Thanks for your registration, follow us on our social networks to keep up-to-date