Web Development Tools and Resources Online

Good tools can be extremely helpful in programming so I wanted to share a list of web development tools that I have been collecting over some time. The list below includes online tools covering all areas of web development, including different generators, cheat sheets, and code snippets plus other random tools which make dev work more efficient. So far I have 53 different online development tools listed and I hope that you can benefit from these:

CSS Resources

PrimerCSS – undercoats your CSS by pulling out all of your classes and id’s and placing them into a starter stylesheet.

CSS Lint – an open source CSS code quality tool.

0 to 255 – is a simple tool that helps web designers find variations of any color

ProCSSor – Advanced CSS Prettifier

Spritebox – create CSS classes and IDs from a single sprite image



Boxes – quick css for different layouts

Fake Height CSS Layouts – collection of preset faux CSS layouts

Fixed Width CSS Layouts – collection of preset fixed-width CSS layouts.

CSS 2 Visual Cheat Sheet – a useful and practical reference guide to Cascading Style Sheets Level 2 for web designers and developers.

Bear CSS – creates css from your uploaded html document.

SpritePad – Simply create CSS sprites.

JavaScript and jQuery Resources

jQuery Deconstructed – Navigate the physical jQuery code to see what, where, and how the magic happens

jQuery Visual Cheat Sheet – all the reference you will ever need for jQuery 1.4.2 API

ScriptSrc – script tags for the latest version of your Javascript Library of choice.

MicroJS – a list of fantastic JavaScript Micro-Frameworks and Micro-Libraries

Online JavaScript beautifier – Beautify, unpack or deobfuscate JavaScript and HTML, make JSON/JSONP readable, etc..

Bookmarkleter – converts your javascript into a bookmarklet.

JavaScript Web Inspector for SublimeText

Other Resources

Regex Colorizer – RegexPal-style regex syntax highlighting on your webpages.

htaccess Cheatsheet – simple cheatsheet for the .htaccess file

htaccess tester – online tool to test your htaccess rewrite rules

URL Rewriting Tool – .htaccess redirect generator to make better URLs for search engines.

DiffNow – Compare files online

showoff.io – the easiest way to share localhost over the web.

convert your unix timestamp – convert your timestamp in a human readable format.

WobZip – allows you to uncompress packaged files online including chrome extensions.

URL Decoder/Encoder – Input a string of text and encode or decode it.

Google Swiffy – converts Flash SWF files to HTML5.

JSfiddle – test and share your html, css, and js code.

html5 Boilerplate – rock-solid default for HTML5 awesome.

Initializr – an HTML5 templates generator to help you getting started with a new project based on HTML5 Boilerplate.

Modernizr – open-source JavaScript library that helps you build the next generation of HTML5 and CSS3-powered websites.

XML Sitemaps – free tool that let’s you generate an xml sitemap from a URL.

PHP Object Generator – open source PHP code generator which automatically generates clean & tested Object Oriented code with MySQL interaction.

Postable – turns HTML tags into post-friendly code.

Kotatsu – a simple html table generator.

iPhone Icon Generator – generates icons from images for iphone, favicons, etc…

HTML Entity Character Lookup – allows you to quickly find the entity based on how it looks.

pForm – Create HTML Form in seconds.

IconFinder – nice Icon search engine

Code Snippets from CSS-Tricks – awesome code snippets covering CSS, HTAccess, HTML, Javacript, jQuery, PHP, and WordPress.

BrowserShots – test your website across many platforms and browsers.

Preloaders – awesome loading image generator.

Favicon Generator – great favicon generator from image and editor.

Web Development Project Estimator – a simple tool to quickly estimate the time and materials required for a proposed web project.

Snipt – awesome snippets of code, long-term memory for coders.

Golden Ratio Calculator – enter a width and get the golder ratio for your columns.

Vector Magic – Easily Convert Bitmap Images To Clean Vector Art.

PicMarkr – Watermark your images online for free.

Show IF – simple if…else generator that allow user to set the conditions based on the client’s environment.

JPEGmini – reduces the file size of your photo by up to 5x, while keeping thier original quality and JPEG format.

ImageOptim – optimizes images and handles PNG, JPEG and GIF animations.

List of all WordPress hooks – Use this index to identify the WordPress hooks that you need.

JsApp.US – hosting platform for node.js applications.

BrowserHacks – extensive list of browser specific CSS and JavaScript hacks.