Nowadays web developers already know how to quickly code a menu or a layout structure, pages even a site. Because there are many available tools such as color selecting, color palette, JS Library, CSS/HTML/PHP Framework, WYSIWYG editor and more to help make web development projects quicker and more productive. Here is an collection 40 free and useful tools for web development and designers. Hope it will helpful to you!
Adobe BrowserLab provides an easier, faster way to do cross-browser testing that integrates with Creative Suite 5.
You can refer See BrowserLab In Action here, in this video, Adobe Product Manager Scott Fegette shows how to use Adobe® BrowserLab for testing your cross-browser layouts with Adobe Dreamweaver® CS5 software.
Alloy is a UI metaframework that provides a consistent and simple API for building web applications across all three levels of the browser: structure, style and behavior.
CamStudio is able to record all screen and audio activity on your computer and create industry-standard AVI video files and using its built-in SWF Producer can turn those AVIs into lean, mean, bandwidth-friendly Streaming Flash videos (SWFs).
Clean is an open source engine for AJAX, that provides a high level interface to work with the AJAX technology. It can be plugged in any page or DHTML framework because it was designed in conformation with the separation of concerns principle, keeping focus on AJAX issues.
CodeIgniter is a free open source PHP Framework with a very small footprint, built for PHP coders who need a simple and elegant toolkit to create full-featured web applications. If you want:
CodeIgniter is right for you.
CodeRun Studio is a cross-platform Integrated Development Environment (IDE), designed for the cloud. It enables you to easily develop, debug and deploy web applications using your browser. CodeRun Studio can be used instead or alongside your existing desktop IDE. You can upload existing code in order to test it in the cloud or for sharing with your peers.
Rapidly increased precision and color space conversions, better preview, enhanced scheme creation system, unique scheme IDs and permanent URL of the scheme.
With ColorZilla you can get a color reading from any point in your browser, quickly adjust this color and paste it into another program. You can Zoom the page you are viewing and measure distances between any two points on the page. The built-in palette browser allows choosing colors from pre-defined color sets and saving the most used colors in custom palettes. DOM spying features allow getting various information about DOM elements quickly and easily.
Use this wizard to experiment with font and text styles and generate sample CSS style source code. This wizard uses dynamic HTML to change the style of the table in-situ, without loading another page. It is cross-browser compatible with Firefox, Netscape, Internet Explorer, and other modern browsers.
CSS sprites are a way to reduce the number of HTTP requests made for image resources referenced by your site. Images are combined into one larger image at defined X and Y coorindates. Having assigned this generated image to relevant page elements the
background-position CSS property can then be used to shift the visible area to the required component image.
Use this Button Maker thing, you just adjust the settings until you have a nice looking button, then press the button and it will give you the CSS. Copy and paste at your leisure. Now you can use the class name “button” on HTML elements to make them look like buttons.
Live demo: http://css-tricks.com/examples/ButtonMaker/
CSS Grid Builder is a YUI based lightweight CSS framework developed by Yahoo!.
DOMAssistant provides a simpler and more consistent way to script against the Document Object Model (DOM) in web browsers.
DOMAssistant.js. All other modules are optional, and you can choose to only use the ones you find necessary in your application.
DooPHP is a rapid high performance open source development framework for PHP using commonly known design patterns like MVC and ORM, reduces development costs and helps developers write less code.
DooPHP is fast, RESTful, AJAX support, SEO friendly, well documented, easy to learn & fun to code. With such superior performance, Doo still provides a set of features that are crucial in today’s Web 2.0 development.
Dropbox is a Web-based file hosting service operated by Dropbox, Inc. which uses cloud computing to enable users to store and share files and folders with others across the Internet using file synchronization.
FireShot is a Firefox extension that creates screenshots of web pages. This plugin provides a set of editing and annotation tools, which let users quickly modify web captures and insert text annotations and graphical annotations. Such functionality will be especially useful for web designers, testers and content reviewers.
Formee is nothing but a framework to help you develop and customize web based forms. Main features:
Customizable and Flexible – The form has a structure built around percentage widths, thus allowing its inclusion in any project, adapting to the space available. Formee has its structural code independent of the style codes, facilitating the complete customization and manteinance of the form.
Semantics and Performance – The form was built with care to preserve web standards and their semantic values, working with the smallest possible amount of tags and according to the W3C rules.
Accessibility and Usability – Some elements have been inserted to add more value to your project , such as message boxes that can be shown indicating errors, warnings and success alerts. We also use the fieldset element to cluster form fields that have the same context through the legend tag.
Live demo: http://www.formee.org/demo/index.htm
The Google Font Directory lets you browse all the fonts available via the Google Font API. All fonts in the directory are available for use on your website under an open source license and are served by Google servers.
The Starter Pack is a bit different than a template. It was built with one guiding principle: scalability. As a result, you can use this to get started on your portfolio page or the next Facebook. You can download the Starter Park from here(zip).
The coding part is all HTML5, cross-browser, It’s a very basic HTML5 starter pack with a clean & ordered directory structure fit for most projects. Here’s a list of a few major features of the pack:
Here is the screenshot of the project page:
And here is the URI of this project:
Kondingen is an all-featured online web development platform that enables individuals or teams to work on projects.
Less Framework 2 is a CSS framework for building cross-device layouts. It uses CSS3 media-queries to switch between three grids: a five-column one for netbooks and tablets, a two-column one for smartphones, and an eight-column one for laptops and desktops. All grids share the same column width and vertical rhythm, so designing for all of them at once is a breeze.
Expression Web SuperPreview for Internet Explorer is a visual debugging tool that makes it easier to migrate your web sites from Internet Explorer 6 to Internet Explorer 7 or 8.
Microsoft WebsiteSpark is a program that offers visibility, support and software for professional Web Developers and Designers.
MooTools Canvas Library provides functionality to manage and interact with the content of a html5 canvas element. It emulates layers and items that can be manipulated and managed and provides mouse-events to the items.
PHPanywhere is a web based free Integrated Development Environment or IDE for the PHP language, in other words it is an application that gives developers all the code editing capabilities they need to develop PHP applications online.
It includes a real-time syntax code editor with support for all web formats and a powerful FTP editor.
FAT-FREE is a powerful yet lightweight PHP 5.3+ Web development framework designed to help you build dynamic and robust applications – fast!
Fat-Free is also packaged with optional plug-ins that extend its capabilities. There’s the Axon auto-mapping mini-ORM and the M2 MongoDB mapper to help simplify database access, plus an easy-to-use SQL handler for fine-tuning database engine interactions.
Template Inheritance is an extremely useful technique for making reusable HTML layouts for a site. It is much more flexible than alternative techniques, such as “including” common elements of a page (like a header and footer file). Unlike other libraries, PHP Template Inheritance lets you write everything in straight PHP. There is no need to learn another template language.
PixelZoomer is a Firefox extension for web developers which allows for zooming into
websites. The core features are characterized by tools for pixel perfect measuring of
distances and picking colors (HEX codes) with an eye dropper. The viewable area of a web
page is being displayed in PixelZoomer through using a screenshot so that the view is based
on real pixels.
Simple Cloud API is an open source project providing common PHP interfaces for File Storage, Document Storage, and Simple Queue cloud services. You can start writing scalable, highly available, and resilient cloud applications that are portable across all major cloud vendors
Live demos showing Smokescreen in action:
Tiny Fluid Grid can help you build fluid grid based websites with the happy & awesome way.
Inspired by 1kbgrid.com. Developed with love by Girlfriend’s overconfident and pretty good looking team of web developers. Tiny Fluid Grid ships with a index.html with demo code, and the grid.css containing the CSS for the grid you created.
It comes with a rich view-component library ranging from Slider to List and SplitPane.
The User Agent Switcher extension adds a menu and a toolbar button to switch the user agent of the browser.
The Web Developer extension adds a menu and a toolbar with various web developer tools.
Websecurify is a powerful web application security testing environment designed from the ground up to provide the best combination of automatic and manual vulnerability testing technologies.