Putting Together a Web Development Toolkit

Web Development Toolkit

In web development, organization is just as important as anything else. One way of being organized is by putting a web development toolkit, containing basic templates, copies of CMSes, and other tools, organized in a directory for quick access.

Here are some of the things that I keep in my web development toolkit.

Copies of CMSes

To speed up setup of websites, I keep some CMSes in my toolkit, ready to be uploaded and installed without waiting to download them. Right now, I have WordPress and SMF in my toolkit, but you should add the CMSes that you use often.

Make sure that you have the latest versions, so that you don't end up realizing that you have to go and upgrade after you've installed.

Basic Templates

I don't know about you, but I can't remember all of those document types. So, I keep some basic HTML and CSS templates so that I can have a simple design ready by simply modifying some HTML, and adding some CSS to make it look nice.

The ones that I keep include 2-column, 3-column, 2-column with subsections, and a few others.

Code Snippets

I usually like to keep little bits of code ready to be used, whether they are just small fixes for bugs, or complete features.

For example, while not exactly a snippet, I keep the user authorization functions from Part 7 of Creating a PHP CMS so that they can be used whenever they are needed.

Cheat Sheets

Cheat sheets are excellent reference guides when working on a project. Here is a list of cheat sheets that are useful to have around.

If you know of any other good cheat sheets, be sure to leave a comment to let everyone know!

IDEs And Editors

Rule number one when choosing an editor: Don't use a WYSIWYG editor!

WYSIWYG editors generally create horrible code and gets in the way of actually learning to develop websites the right way.

When doing development, your integrated development environment is an important thing to consider. I could write an entire post on this alone, but I will stick to a few that I like, for now.

  • Vim — An awesome, lightweight editor from the old days of Unix. It can be difficult for beginners who aren't used to modal editing, but once you learn the keys, you'll be editing much more quickly.
  • Eclipse — A nice IDE, originally intended for Java development, that can be easily extended with plugins such as Aptana. The only real downside I see with this is that it is a bit on the slow side, and uses up quite a bit of memory on my machine.
  • Komodo Edit is my current choice of editor for web development. The main reason is for the Vim keybindings built right in, so I can get the quick editing power of Vim, with all of the nice features like code completion, file browser, and project management.

So make it easy for yourself and pick one of those examples, or go find a new one. Be sure to try out different editors, and just see what you like!

I would just like to mention another IDE that I enjoy: Code::Blocks. It's a very good C++ IDE, though I don't use it for web development.

A Development Server

It's very useful to have a local server setup, so that you can work on projects without having to reupload your files every time you make some changes. I installed Apache, PHP and MySQL on my computer all separately, but if you don't have time, you can use XAMPP, which includes everything I mentioned, and is easy to setup. Also, it will work on on Windows, Mac OS X and Linux!

Other Useful Tools

In addition to the rest of this toolkit, there are some other tools that I should mention.

Does anyone else have a web development toolkit? If so, please share it with us!

Stay Updated

Did you enjoy this post? Don't miss a single post by getting free updates!


  1. January 22, 2010

    Good idea with the templates, and thanks for the links to the Cheat Sheets.

    I need to get a development server up, for a lot of reasons/projects.

    Do you count Dreamweaver into the "don't use a WYSIWYG editor" group?

    • January 22, 2010

      Well, that depends on how much you use the WYSIWYG parts of it. I haven't used Dreamweaver much, but it looks like a good editor.

      I guess it would be okay to use the WYSIWYG features once in a while, but don't rely on them.

  2. January 23, 2010

    Espresso by Macrabbit is my tool! I love it, really.

  3. January 26, 2010

    Nice list there. Although I wouldn't totally agree with the editors. I use Dreamweaver. It's pretty clean on the code side. With its dual view, I can see the generated code and the design at the same time, Edit what I want.

    Cheat sheets are a must.

    • January 27, 2010

      Well I haven't used the WYSIWYG editors in a while, so I just remember a long time ago when they always produced very bad code.

      I'm sure there have been some improvements in that area, to make them generate cleaner code.

  4. January 15, 2011

    Its great toolkit and useful one..all web developers mush have all this..its great information

  5. August 5, 2011

    Excellent post thanks for sharing this great toolkit that will be very useful for me

  6. September 8, 2011

    nice toolkit to follow.