Essential Tools For Your Web Development Toolkit

One category of projects that I find myself engaging most often is web development. From simple one page prototypes to a full blown web application, the fundamentals remain the same regardless of the size of each undertaking.

In this post, I would like to share some tools I find useful when constructing my projects. Who knows, they might be beneficial for your next web development projects too!

Inspecting, Debugging and Testing

A tool that I consider very important when it comes to developing web pages is the Web Developer extension for Firefox. It’s aptly named because it contains a boatload of features and functions that will assist a web developer. Some people call it a Swiss army knife for a web developer. I personally think that it’s more like a web developer’s science lab.

Web Developer Firefox Extension

Some of Web Developer‘s features that I use most are:

  • Validators (for HTML, CSS and feeds)
  • Browser resizer (to test page layouts on different resolutions)
  • Form manipulator (to remove field size limits, throw out read only attributes, conversion of POST to GET)
  • CSS viewer (shows all CSS codes whether embedded or externally included; all in one page)
  • Page information (response headers, id and class details, element info)

Colour Picking and Manipulation

If you do even minimal levels of web design, you can’t avoid dealing with colours. How many times have you looked at a page that uses a colour scheme that you simply fell in love with at first sight? How long did you take to obtain the specific HTML codes for the colours that you wanted to copy? How long did it take you to load that bloated image editing software just to paste a screenshot of the page and grab HTML colour codes from it?

I used to do all that until I came across Color Selector. It is a lightweight tool that can grab the colour codes for any pixel displayed on your screen. Better still, it generates not only HTML colour codes but also RGB, HSL, HSB/HSV, CMY, Hex and Decimal values for you chosen colour. These codes can be copied to the clipboard instantaneously via customizable shortcut keys.

Color Selector

Color Selector also has RGB and darker/lighter slider controls that can help you pick the exact colour to be applied in your web project. In addition to that, it has a cool colour code converter built in as well!

Grab this free software and colour picking would no longer be a hassle!

References and Documentations

Even if you’re a hardcore web developer (which I unfortunately am not), it’s always good practice to keep a copy of useful manuals and guides within reach. Below are some useful resources that I use all the time:

I included the PHP manual in the list because it’s the main web scripting language I use for most of my projects; it may or may not be relevant to your own web development goals.

Share Your Resources

Finally, I’d like to see what you think should be added to this list – whether they are text references, browser extensions or even full blown applications. Tell us about these tools and I’m sure myself and other readers would appreciate them too!