50 Free Web-Based Apps and Tools for Web Developers (from 2012)

What we have for you today is 50 web-based apps and tools that will either offer, in one way or another, a time-saving solution to many modern development issues or will help speed up your working day.

The post has been split into into the following categories: CSS, JS & HTML Tools, Web Editors & Playgrounds, Responsive Design Tools, and Just Useful.

So, even if you didn’t know you were looking for something today, we guarantee that you will find something really useful here.

CSS, JS & HTML Tools

SpritePad – Create and Edit CSS Sprites

SpritePad Create and Edit CSS Sprites Web-Based Apps

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 →

On/Off Flipswitch HTML5/CSS3 Generator

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 Generator →

Adobe Edge Free Web Fonts

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 →

Form Builder/Generator

Form Builder

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 →

Css2Less – CSS to LessCSS converter

Css2Less CSS to LessCSS converter

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

Css2Less→

CSSComb – Sort CSS Properties in a Specific Order

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 →

cssUpdater – Live Sync CSS Changes

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 →

CSS3Gen – Generate Useful Snippets of CSS3

CSS3Gen Generate Useful Snippets of CSS3 Web-Based Apps

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 →

CSS load.net – Loading CSS Spinners and Bars Generator

CSS load.net Loading CSS Spinners and Bars Generator

Loading CSS Spinners and Bars Generator →

Typecast

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 →

Fontello – Easy Iconic Fonts Composer

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 →

HTML5 Please

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 →

Stylie – A Graphical CSS Animation Tool

Stylie A Graphical CSS Animation Tool Web-Based Apps

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

Stylie →

Colllor – Color Palette Generator

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 →

Ribbon Builder/Generator

Ribbon Builder

Ribbon Builder →

Stitches – An HTML5 Sprite Sheet Generator

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 →

HTML5 Template Generator

HTML5 Template Generator

HTML5 Template Generator →

JavaScript Console Debugging JavaScript Tool

JavaScript Console Debugging JavaScript Tool

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

JavaScript Console →

Bootstrap Generator – Twitter Bootstrap Generator

Bootstrap Generator Twitter Bootstrap Generator Web-Based Apps

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 →

Minify and GZip Compress JavaScript & CSS

Minify and GZip Compress JavaScript & CSS

Minify and GZip Compress JavaScript & CSS →

SnipSave – Save Code Snippets Online

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 →

ZenBG

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

CSS FilterLab

CSS FilterLab

CSS FilterLab

Web Editors & Playgrounds

Intype Text Editor

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 →

Codeanywhere – Online Code Editor

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 →

EpicEditor – An Embeddable JavaScript Markdown Editor

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 →

Dirty Markup – Tidy and Beautify your HTML, CSS, and JS

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 →

dabblet – A Playground for Testing CSS and HTML

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 →

Liveweave – HTML5, CSS3 & JavaScript Playground

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 →

CodePen

CodePen

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

CodePen →

Shiny Demos

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 →

Moqups – HTML5 App For Creating Wireframes

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 →

MockNow – An Online Wireframing Sharing Tool

MockNow An Online Wireframing Sharing Tool

MockNow →

Responsive Design Tools

Responsify.it – A Responsive Template Generator

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 →

RWD Calculator – Turning Pixels into Percentages

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 →

Screenqueri.es – Responsive Design Testing Tool

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 →

responsivepx – Find that Tricky Breakpoint

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 →

Gridpak – The Responsive Grid Generator

Gridpak The Responsive Grid Generator

Gridpak is a generator for creating a responsive grid system. Use the simple interface to design your grid and then let Gridpak do the heavy lifting by generating PNGs, CSS and JavaScript. Check out this video for a detailed overview:

Gridpak →

Just Useful…

Mixpanel Flow

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 →

WP Remote

WP Remote

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

WP Remote →

Payhip

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 →

Plunk

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 →

Erlywarn Site Monitoring

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 →

Icon Builder/Generator

Icon Builder

Icon Builder →

Timeline JS

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 →

Termsfeed Privacy Policy Generator

Termsfeed Privacy Policy Generator

Termsfeed Privacy Policy Generator →

facturandum – Online Invoicing System

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 →

Word2cleanhtml – Convert Word Documents to Clean HTML

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 →

TagMyDoc

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 →

Author: (586 Posts)

Paul Andrew is the editor and founder of Speckyboy Design Magazine.

Comments