50 Free Tools and Apps for Web Designers and Developers
Over the past year or so I have bookmarked hundreds of various tools and resources covering all aspects of web & mobile development – There are tools that will improve your work-flow, resources that will clean and validate code, apps that will allow you to collaborate with any number of colleagues, bookmarklets that let you create mockups within your browser, productivity checklists, sites that will track and keep a watchful eye on your sites… and on … and on.
So, I thought I would share my 50 favorites with you.
I have split the article into the following sub-categories for easier browsing: General Web Development Tools, Web Typography Apps, Browser Tools, Web Site Analysis Apps and, finally, Productivity Apps & Tools.
Compiling an article about my favorite free web development apps from the past year or so, as you can imagine, was not an easy task, and the chances are that I may have missed a few, so why don’t you tell us about your favorite free development apps within the comment section below. You never know we might collate enough for a part 2 of this post!
Web Development ToolsProCSSor – Advanced CSS Prettifier
ProCSSor is a useful tool that will ‘prettify’ and format CSS files on the fly. ProCSSor – Advanced CSS Prettifier →
ScriptSrc.net
> Tired of hunting down the script tag for the latest version of your Javascript Library of choice? ScriptSrc allows you to copy the latest library (jQuery, MooTools, YUI…) script tags.> ScriptSrc.net →
HTMLform.com
With HTMLform.com all you have to do is design your HTML form and you will get a Zip file that can be very easy installed in your website, with everything needed to make it work: a form that can be embedded in any webpage, a small but very potent database to suit your needs, a tool for checking data online and a button for exporting to CSV and Excel formats.> HTMLform.com →
Spritebox
Spritebox is a WYSIWYG tool to quickly and easily create CSS classes and IDs from a single sprite image.> Spritebox →
HTML Purifier
HTML Purifier is a standards-compliant HTML filter library written in PHP. It will not only remove all malicious code (better known as XSS) with a thoroughly audited, secure yet permissive whitelist, it will also make sure your documents are standards compliant.> HTML Purifier →
Tiny Fluid Grid
Tiny Fluid Grid is a super-simple CSS grid framework generator, inspired by the 1kb Grid, that ships with an index.html with demo code, and the grid.css containing the CSS for the grid you created.> Tiny Fluid Grid →
TABLEIZER!
TABLEIZER! is a quick tool for creating HTML tables from spreadsheet data.> TABLEIZER! →
Try Ruby! (in your browser)
If you haven’t as yet tried Ruby, with Try Ruby! you can take the quick and painless Ruby tutorial and then test your knowledge directly in your browser.> Try Ruby! (in your browser) →
Plupload
Plupload allows you to upload files using HTML5 Gears, Silverlight, Flash, BrowserPlus or normal forms, providing some unique features such as upload progress, image resizing and batch uploads.> Plupload →
Favigen: Favicon Generator
Favigen: Favicon Generator →
Super Conversion Button
A call-to-action is one of the most important parts of any web page, displaying the primary action you want people to take. With this simple tool you can create a beautiful, effective call-to-action button in seconds> Super Conversion Button →
Subfolio
Subfolio is made for creative types to share their work online with speed and elegance – publicly or privately. It’s good for freelancers, studios, agencies, enterprise or even the classroom.> Subfolio →
jsFiddle
JsFiddle is a playground for web developers, a tool which may be used in many ways. One can use it as an online editor for snippets build from HTML, CSS and JavaScript. The code can then be shared with others, embedded on a blog, etc.> jsFiddle →
A/B Split Testing Calculator
A/B Split Testing Calculator →
Frame Box – Lightweight online tool for creating mockups
Frame Box does not have an extensive list of features (like the web based apps above). You can drag and drop, re-size and copy/paste the UI units, but its main focus, and why we like it so much, is that it allows you to create your mockup/prototype very, very quickly> Frame Box – Lightweight online tool for creating mockups →
App Inventor for Android
To use the Android App Inventor, you do not need to be a professional developer, instead of writing code, you visually design the way the app looks and use blocks to specify the app’s behavior.> App Inventor for Android →
HTML-Ipsum
HTML Ipsum is a great tool that gives you lorem ipsum snippets with HTML markup to help test your CSS.> HTML-Ipsum →
CSS3 Button Maker
CSS3 Button Maker →
CSS3 Click Chart by Impressive Webs
Each examples on the CSS3 Click Chart visually displays the CSS3 feature, with a clickable heading that opens a box at the bottom of the page for information on that particular feature.> CSS3 Click Chart by Impressive Webs →
CSS3 Generator
CSS3 Generator is a useful tool that generates the CSS3 properties for the likes of @fontface, border-radius, multi-column…> CSS3 Generator →
CSS3 Menu
You can build a cool rounded navigation menu, with no images and no Javascript, and effectively make use of the new CSS3 properties border-radius and animation. This menu works perfectly well with Firefox, Opera, Chrome and Safari. The drop-down also works on non-CSS3 compatible browsers such as IE7+, but the rounded corners and shadow will not be rendered.> CSS3 Menu →
0to255
0to255 is a simple tool that helps web designers find lighter and darker colors based on any color.> 0to255 →
Web Typography Tools & AppsWordmark
Wordmark is a tool that allows you to preview any word with the fonts already installed on your computer.> Wordmark →
Awesome Fontstacks
With Awesome Fontstacks you can create bundles of matching, free web fonts, with fail-safe font stacks to back them up.> Awesome Fontstacks →
Google Font Directory
With the Google Font Directory you can browse all available fonts, learn about the font designers who created them, and then copy the code required to use them directly on your web page.> Google Font Directory →
Fillerati – Faux Latin is a Dead Language
If you are tired of using Lorem Ipsum, then Fillerati is for you. You can choose text from the authors Jules Verne, H.G. Wells, Lewis Carroll, L. Frank Baum, Edgar Rice Burroughs or Lewis Carroll.> Fillerati – Faux Latin is a Dead Language →
Browser Tools & AppsWirify: The Web as Wireframes
Wirify is a simple bookmarklet that will turn any web page into a wireframe mockup with only one click.> Wirify: The Web as Wireframes →
maki
Just drag the maki bookmarklet to your toolbar, go to a page where you’re working on the HTML/CSS, and click the bookmark. You’ll then be directed to a version of your site where you can upload the mock-up image, adjust the transparency of the overlay, and reload your changes seamlessly.> maki →
Browize – Online Browser Resizer
Browize – Online Browser Resizer →
The HTML5 Test
The HTML5 test – how well does your browser support HTML5? This tool will let you know.> The HTML5 Test →
Support Details
Support Details →
resizeMyBrowser
resizeMyBrowser →
iPad Peek
iPad Peek is a handy app that allows you to view how any website will be rendered on the iPad.> iPad Peek →
Web Site AnalysisMoniitor BETA
Moniitor is a FREE website stat monitoring tool, it will allow you to monitor multiple sites and check for stats such as Pagerank, Alexa Rank, Feedburner Subscribers, Twitter mentions and more…> Moniitor BETA →
Uptime Robot
Uptime Robot monitors your websites by pinging your site every 5 minutes and alerts you if your sites are down.> Uptime Robot →
WooRank
WooRank →
Clue
Clue is a tiny app, from ZURB, that allows you to test your web pages so that you can find out exactly what parts are memorable and will potentially stick in the minds of your users.> Clue →
Productivity Apps & ToolsWridea.com
Wridea is a free tool that stores your ideas, allows you to manage and organize them, collaborate with your friends and colleagues over your ideas, etc. It provides you with all necessary tools and services for organizing your ideas.> Wridea.com →
Domainr
When you want a short URL or something big, Domainr will find it, fast and helps you explore the entire domain name space beyond the ubiquitous—and crowded—.com, .net and .org. Inspired by jish.nu, burri.to and del.icio.us.> Domainr →
Thoughtboxes
Thoughtboxes is a simple tool that helps to organize your thoughts so you can make things happen.> Thoughtboxes →
Create Free Privacy Policy
With GeneratePrivacyPolicy.com you can create professional privacy policies agreements tailored specifically to your website or your business.> Create Free Privacy Policy →
Recurse
Recurse is a simple solution to show clients your spiffy new design. By emulating a website with multiple flat images clients will have a better idea of what the composition will look like ‘in the wild’.> Recurse →
Launchlist
Launchlist is cool tool to help and encourage web designers and developers to check their work before exposing it to the world at large by going through an essential list of web development requirements. When you click ‘Submit Report’ you will be either given a ‘Go For Launch’ or, if issues found, ‘Not Advisable’.> Launchlist →
TitanPad
TitanPad is the simplest of tools that allows you to collaborate on a document simultaneously. You can either create a ‘public’ pad or you can create a ‘private’ pad for your team with a custom URL.> TitanPad →
CeeVee
Not only specific for developers, CeeVee allows you to create a themed professional resume, giving you the option to make it either public or private.> CeeVee →
Billable
If you don’t likes the tedious task of invoicing, then you will love Billable. It really doesn’t get any simpler than this.> Billable →
Bounce
Bounce is a tiny app that allows anyone to give feedback on the design of any given webpage.> Bounce →
TinEye Reverse Image Search
TinEye is a reverse image search engine. It finds out where an image came from, how it is being used, if modified versions of the image exist, or if there is a higher resolution version.> TinEye Reverse Image Search →
…and finally…CopyPasteCharacter.com
CopyPasteCharacter is a very useful tool for copying & pasting those impossible to remember HTML entities.> CopyPasteCharacter.com →
NounProject
The Noun Project collects, organizes and adds to the highly recognizable symbols that form the world’s visual language. The symbols can be downloaded completely free.> NounProject →
Victor Miranda
Professional Ethical Hacker, Pentester & Forensics Investigator MPCS, CEH v8, CSSP, CICP-CICAP HTCIA Member & ISECOM Member Twitter: @victormirandamx