50 Excellent Web Based Tools and Apps for Developers

tools, web development 3099 Comments

In today’s busy world it can be hard to be tied down to one computer. With web based applications becoming so advanced it is now possible to still get work done anywhere there is a computer without installing any software. From image editing to Word documents, you can do it all online.

Recommended: Free Webmaster Tools(including SEO, DNS, HTML and Text tools)

This post is covering many useful web based tools and applications for web developers, organized in various categories like: CSS, JS and HTML Tools, Responsive Design Tools, Web Editors and Playgrounds, and General Useful Tools.

CSS, JavaScript and HTML Tools

1. CSS3Gen – Generate Useful Snippets Of CSS3

CSS3Gen allows you to easily generate useful snippets of CSS3 and copy them straight into your projects. There are tools for generating border-radius, box-shadow, text-shadow and gradients.

css3gen – generate useful snippets of css3

2. Css2Less – CSS To LessCSS Converter

Css2Less will quickly convert your old CSS files to fresh new LESS files. As simple as copy/paste.

css2less – css to lesscss converter

3. CSSComb – Sort CSS Properties in a Specific Order

CSSComb is an intelligent tool that will sort the CSS properties from your stylesheet and, from the settings, allows you to sort them in a specific order. Check this video for a quick overview:

csscomb – sort css properties in a specific order

4. Stylie – a Graphical CSS Animation Tool

Stylie is an app that lets you graphically generate CSS3 transform animations.

stylie – a graphical css animation tool

5. CSS FilterLab

CSS FilterLab uses CSS Filters and custom filters.

css filterlab

6. Typecast

Typecast lets you design and experiment, all in the browser, with web fonts and real content. You can try the most popular web fonts all in one place, including all weights and compare font combinations.

typecast

7. CSS Load.Net – Loading CSS Spinners and Bars Generator

css load.net – loading css spinners and bars generator

8. Ribbon Builder/Generator

ribbon builder/generator

9. Adobe Edge Free Web Fonts

Adobe Edge Web Fonts, powered by Typekit, features hundreds of free web fonts, including some fonts from the Adobe library as well as a large collection of open source fonts.

adobe edge free web fonts

10. Bootstrap Generator – Twitter Bootstrap Generator

The Twitter Bootstrap Generator will allow you to quickly kick-start your Twitter Bootstrap project the way you want. Simply alter the options and click "Generate" to get your compiled Bootstrap CSS file.

bootstrap generator – twitter bootstrap generator

11. JavaScript Console – Debugging JavaScript Tool

JSconsole is a simple tool for debugging Javascript and remote debugging mobile web apps.

javascript console – debugging javascript tool

12. CssUpdater – Live Sync CSS Changes

cssUpdater is a must for any designer. It will sync any CSS changes made with FireBug with your actual local/online CSS files. This way when you reload your site, your layout is preserved.

cssupdater – live sync css changes

13. HTML5 Template Generator

html5 template generator

14. Colllor – Color Palette Generator

With Colllor it is much easier to generate a consistent web color palette so you have a common look and feel throughout your design. All the alternative proposals produced by Colllor derive from the same color and they all have a common denominator sharing hue, lightness or saturation values.

colllor – color palette generator

15. SpritePad – Create and Edit CSS Sprites

SpritePad will create your CSS sprites within minutes. Simply drag & drop your images and have them immediately available as a PNG sprite plus the CSS code.

spritepad – create and edit css sprites

16. on /Off Flipswitch HTML5/CSS3 Generator

A beautifully designed and super-easy-to-use tool for generating pure CSS3 on/off flipswitches with optional animated transitions.

on /off flipswitch html5/css3 generator

17. SnipSave – Save Code Snippets Online

SnipSave lets you save snippets of code online for future reference. SnipSave features a very easy-to-use interface where you can quickly create, edit and delete code snippets.

snipsave – save code snippets online

18. ZenBG

ZenBG is a small web app that allows you to create backgrounds for websites or desktops. It includes a large collection of textures – wood, rust, paper, concrete and more – which can be combined with linear-gradients or colors to create a wide assortment of themes.

zenbg

19. Form Builder/Generator

Form Builder, as its name suggests, is a useful tool for creating forms. It gives you the freedom to customize your form in any way that you can imagine with its multitude of options.

form builder/generator

20. Minify and GZip Compress JavaScript & CSS

minify and gzip compress javascript & css

21. HTML5 Please

HTML5 Please offers recommendations for polyfills and implementation so you can decide if and how to put each of the HTML5 features to use.

html5 please

22. Stitches – An HTML5 Sprite Sheet Generator

Stitches is a really easy-to-use HTML5 sprite sheet generator. Simply drag and drop image files onto the app, click "Generate" and your sprite and stylesheet will be good to go.

stitches – an html5 sprite sheet generator

23. Fontello – Easy Iconic Fonts Composer

Fontello lets you combine iconic webfonts for your own project. With fontello you can shrink glyph collections (minimizing font size) and merge symbols from several fonts into a single file. You can choose from four icon fonts, they are: Entypo, Font Awesome, Iconic and Brandico.

fontello – easy iconic fonts composer

Responsive Design Tools

24. Responsify.It – a Responsive Template Generator

Responsify allows you to quickly generate your own responsive grid framework and customise it (how many columns, the amount of gutter width etc.) as you need.

responsify.it – a responsive template generator

25. Gridpak – the Responsive Grid Generator

gridpak – the responsive grid generator

26. Screenqueri.Es – Responsive Design Testing Tool

Screenqueri.es is a responsive design testing tool. It allow you to test your responsive design on 30 different device resolutions presets or check with custom resolution by resizing window.

screenqueri.es – responsive design testing tool

27. RWD Calculator – Turning Pixels Into Percentages

RWD Calculator is a simple calculator to help turn your PSD web template into the start of your responsive website.

rwd calculator – turning pixels into percentages

28. Responsivepx – Find That Tricky Breakpoint

responsivepx is a responsive web design testing tool where you enter the URL to your site (local or online) and use the controls to adjust the height and width of your viewport to find the exact breakpoint widths in pixels.

responsivepx – find that tricky breakpoint

Web Editors and Playgrounds

29. Dabblet – a Playground for Testing CSS and HTML

dabblet is an interactive playground for quickly testing snippets of CSS and HTML code. It uses -prefix-free, so that you won't have to add any prefixes in your CSS code.

dabblet – a playground for testing css and html

30. EpicEditor – An Embeddable JavaScript Markdown Editor

EpicEditor is an embeddable JavaScript Markdown editor with split fullscreen editing, live previewing, automatic draft saving, offline support, and more.

epiceditor – an embeddable javascript markdown editor

31. Shiny Demos

Shiny Demos is a growing set of demos of the latest Open Web Standards, made by the Opera developer relations team.

shiny demos

32. CodePen

CodePen is useful for showing off your work, troubleshooting, demonstrating bugs, or anything else you can think of.

codepen

33. Dirty Markup – Tidy and Beautify Your HTML, CSS, and JS

Dirty Markup combines the power of HTML Tidy, CSS Tidy, JS Beautify, and the Ace editor to effortlessly clean up your messy code. Just paste your code into the editor and press “clean”.

dirty markup – tidy and beautify your html, css, and js

34. MockNow – An Online Wireframing Sharing Tool

mocknow – an online wireframing sharing tool

35. Liveweave – HTML5, CSS3 & JavaScript Playground

Liveweave, similar to JSFiddle and Tinkerbin, is a new playground for developers and designers to test HTML, CSS and Javascript.

liveweave – html5, css3 & javascript playground

36. Moqups – HTML5 App for Creating Wireframes

Moqups is a HTML5 web app for creating wireframes, mockups or UI concepts.

moqups – html5 app for creating wireframes

37. Intype Text Editor

Intype is a fast and easy text editor. It has smart select & edit, snippet insertion and management, auto-paired characters, fast syntax highlighting and code-coloring themes. Snippets, themes or even language grammars can be changed or added in the comfy extension editor.

intype text editor

38. WebPutty – a Simple CSS Editing and Hosting Service

WebPutty gives you a syntax-highlighting CSS editor you can use from anywhere, the power of SCSS and Compass, a side-by-side preview pane, and instant publishing with minification, compression, and automatic cache control. This video gives you a great overview of WebPutty:

webputty – a simple css editing and hosting service

39. Codeanywhere – Online Code Editor

Codeanywhere is a code editor in a browser with support for all popular web formats including HTML, PHP, JavaScript, CSS, and XML.

codeanywhere – online code editor

General Tools

40. Facturandum – Online Invoicing System

facturandum is a beautifully designed and easy-to-use online invoicing service with all of the features you would ever need if you are a freelancer.

facturandum – online invoicing system

41. Word2cleanhtml – Convert Word Documents To Clean HTML

Word2cleanhtml cleans up HTML pasted from Word documents. It applies filters to fix various things that Microsoft Office puts in its HTML and gives you a well formatted result that you can paste directly into a web page or content editing system.

word2cleanhtml – convert word documents to clean html

42. Icon Builder/Generator

icon builder/generator

43. Mixpanel Flow

Mixpanel Flow is a simple and free app that works out where your users go and when they leave, all in real-time. Instead of a line graph or a table, you get a diagram of the actual paths people take as they browse your site.

mixpanel flow

44. Erlywarn Site Monitoring

Erlywarn is a web service that will send you instant notification whenever your website is responding unusually allowing you to minimize your downtime. Not free, although it is only $1 a month.

erlywarn site monitoring

45. Plunk

Plunk is a handy tool for finding out if your designs work within a mobile setting. You can create click tests that give immediate feedback and efficiently visualize where mobile users respond.

plunk

46. Payhip

Payhip is an e-commerce platform that enables anyone to sell ebooks directly to their fans and followers using just a link. You can simply upload your product, enter the price and start selling on Twitter, Facebook or your own website.

payhip

47. Termsfeed Privacy Policy Generator

termsfeed privacy policy generator

48. Timeline JS

Timeline is a useful tool for creating timelines that are easy and intuitive to use. It can pull media from Twitter, YouTube, Flickr, Vimeo, Google Maps and SoundCloud.

timeline js

49. TagMyDoc

TagMyDoc offers a free cloud service that allows you to add a tag to a document of practically any format, scan it and retrieve it instantly through any mobile device. Check out this video for an overview:

tagmydoc

50. WP Remote

WP Remote allows you to monitor and manage all of your WordPress powered sites from one central location.

wp remote

You are most welcome to suggest any additions to this list. You can use the comments box below to make any suggestions.

themeforest banner
elegant themes banner

Related Articles:

You may be interested in:

This post was written by a guest contributor. If you are interested in contributing a guest post, check out these submission guidelines for more details.

Would you like to contribute to this site? Get started »
Rate this article:
(5.0 rating from 1 votes)

Comments