Complete web development toolkit

A list of handpicked intuitive web design and development tools that will in most obvious ways enhance your workflow. From inspiration, color, font, CSS, test platform, place holder, to presentation based toolkit. It’s simply a complete web development toolkit

  1. Productivity
    Recommendation: Emmet
    emmetGetting the work at hand done quickly creates more time for the next one in the queue, and that’s where Emmet comes in. Emmet is a plugin that adds some time saving magic to most popular text editors , significantly improving HTML & CSS workflow. It make it possible for developers to code HTML & CSS faster than usual.
  2. Web design inspiration
    Recommendation: Site Inspire
    Site inspire
    If you’re like me that doesn’t just start designing without first of all seeking inspiration from the best places possible, taking a look at Site Inspire will most definitely inspire you.
  3. Color
    Recommendation: Adobe Kuler
    If asked, I’d say that Adobe Kuler is the best free online color tool there is. As you work with, it presents you with a grid of 5 matching colors and also the choice to adjust it further. You can also upload an image and generate your colors from it. It’s simply intuitive.
  4. Background
    Recommendation: Transparent Textures
    Transparent texture
    Though flat is the current trend, sometimes you need to bring your design to life with a little texture. Transparent Textures has a list of gorgeously crafted textures and as the name implies, they’re all transparent. It does have a tool that allows you the independence to instantly test the patterns with the color of your choice before you download them.
  5. Fonts
    Recommendation: Google Fonts
     google fonts
    Gone are the days when web designers are stuck with just the fonts that are available on the PC’s , the MC books, and whatever computer the end user might have. Google fonts have changed all that. As your website loads, it will simultaneously present the fonts in use to the browser.
  6. Icons
    Recommendation: Font Awesome
    Who knew that icons will one day come in the form of fonts. Thanks to the the truly awesome font-awesome, it is happening right now. font-awesome eliminates the use of images as icons and that in turn significantly reduces your website’s load time.
  7. CSS sprites
    sprite box gives you that much needed but elusive break by doing the mathematical work involved in the use of CSS sprite method.
  8. CSS3
    Recommendation: CSS3 Generator
    css 3 is an “All in one” tool capable of helping you achieve (Generate) all your CSS3 based goals.
  9. Test
    mobile test
    It’s of utmost importance to test your work before you start thinking of presenting it to your client to avoid an “Opps!! moment”. is a great place to find out how your work will render on mobile devices. Both landscape and portrait displays. The device options range from HTC ONE, Nokia Lumia 920, Samsung Galaxy Y, Google Nexus 7, to Apple iPad Mini.
  10. Presentation
    Recommendation: Cup Cake Ipsum
    Cup cake lipsum
    Believe it or not, your clients are to you what the audience are to the entertainers. You start failing the moment you fail to connect with your clients, so spice up your work with things that they are familiar with before you present it. If you’re going to use ipsum, why not use one with some humor. If you generate your ipsum from Cup Cake Ipsum, your clients will immediately recognize it as a place holder.

If you have suggestions on what you think we should add to the list, please state it below via the comment form.
Suggestions are welcome and comments are appreciated.

  • Ben says:

    Much needed overview. Thanks!

  • Chib says:

    Welcome Ben. Glad you like it.

  • Nutrawee says:

    Nice set 😀

  • Chib says:

    Thank you so much Zeally. It wouldn’t have been this good without your suggestions.

  • Leave a Reply