There are so many tasks to be done to get a website set up. It is possible to speed up the process significantly by using flexible website templates for publishing platforms like WordPress, but as soon as you want to customize the site a bit things start to become more complex.
As you dive into the various tasks related to web design and development, I am sure you will find the need for some tools to get things done faster. Luckily there are tons of online tool you can try out and while they may not be as powerful as commercial software, they are all free to use.
To help you find useful tools and get an overview of the options I have made a collection of more than 50 online tools for web designers and developers. Check it out and let me know in a comment what you think.
- Test and Validation Tools
- Layout Tools
- Colors Tools
- Typography and Font Tools
- Markup and Content Tools
Test and Validation
ResponsivePx – MORE INFO
Enter the url to your site – local or online: both work – and use the controls to adjust the width and height of your viewport to find exact breakpoint widths in pixels. Then use that information in your media queries to create a responsive design.
The Responsinator – MORE INFO
The Responsinator helps website makers quickly get an indication of how their responsive site will look on the most popular devices.
QuirkTools – MORE INFO
The idea is simple: we make web apps that help you stay creative, connected, and collaborating with clients and coworkers.
Responsive Web Design Testing Tool – MORE INFO
This tool has been built to help with testing your responsive websites while you design and build them.
W3C Link Checker – MORE INFO
This Link Checker looks for issues in links, anchors and referenced objects in a Web page, CSS style sheet, or recursively on a whole Web site.
W3C mobileOK Checker – MORE INFO
This checker performs various tests on a Web Page to determine its level of mobile-friendliness.
W3C CSS Validation Service – MORE INFO
W3C offers a beta release of a new service providing you an integrated validation report on your entire web site.
ColoRotate – MORE INFO
With ColoRotate, you can work with colors in 3D, in real time, and in a way that matches how our minds process color.
Kuler – MORE INFO
Adobe® Kuler® is a web-hosted application for generating color themes that can inspire any project.
Color Scheme Designer – MORE INFO
This tool will find set of colors you can start with, and it may facilitate your looking for the optimal color palette.
Colors on the Web – MORE INFO
This website is dedicated to color theory and the use of colors in design
CSS Generator – MORE INFO
This little miracle helps you to select a face color for your new web project at once!
ColorExplorer – MORE INFO
ColorExplorer is a free online toolbox for designing and working with color palettes.
Sky CSS Tool – MORE INFO
«Sky CSS» allows you to create CSS classes almost without using manuscript code.
CSS Compressor – MORE INFO
Use this utility to compress your CSS to increase loading speed and save on bandwidth as well.
Pictaculous – MORE INFO
A color palette generator
CONTRAST-A-WEB V2.0 – MORE INFO
The application allows users to experiment with color combinations, examine them under the aspect of accessibility guidelines and to create custom color palettes.
Hex Color Scheme Generator – MORE INFO
This is a great tool to use if you want to develop a matching color scheme for your site.
Color Palette Generator – MORE INFO
Useful for quickly grabbing a particular color within an image for inspiration.
COLOURlovers – MORE INFO
COLOURlovers is a creative community where people from around the world create and share colors, palettes and patterns, discuss the latest trends and explore colorful articles.
Em Calculator – MORE INFO
Cascading Style Sheet CSS Generator – MORE INFO
This free online CSS generator makes it so easy to create cascading style sheets for your web page!
Color picker – MORE INFO
The color picker and chart on this page provide you with the hexadecimal color codes. The color picker also provides the RGB color code.
List-O-Matic – MORE INFO
List-O-Matic is a tool that makes the process of creating list-based, CSS-styled navigation just that little bit easier.
CSS Menu Generator – MORE INFO
CSS Menu Maker – MORE INFO
Our menu generators makes it easy to create custom CSS drop down menus without having to know all the complicated code.
CSS Menu Generator – MORE INFO
Our CSS Menu Generator will generate both the CSS and the HTML code required to produce a text-based yet appealing set of navigation buttons.
My CSS Menu – MORE INFO
My CSS Menu provides the average webmaster with tools to create custom, cross browser compatible css menu.
CleanCSS – CSS Formatter and Optimiser – MORE INFO
CleanCSS is a powerful CSS optimizer and formatter. Basically, it takes your CSS code and makes it cleaner and more concise.
Code Beautifier – CSS Formatter and Optimiser – MORE INFO
Basically, it takes your CSS code and makes it cleaner and more concise.
CSS Button & Text Field Generator – MORE INFO
HTML and CSS Table Border Style Wizard – MORE INFO
Use this wizard to experiment with table border styles and generate style source code.
Blueprint Grid CSS Generator – MORE INFO
This tool will help you generate more flexible versions of Blueprint’s grid.css and compressed.css and grid.png files.
Spritebox – MORE INFO
Spritebox is a WYSIWYG tool to help web designers quickly and easily create CSS classes and IDs from a single sprite image.
Tabs generator – MORE INFO
Tweak size, colors, corners and more, generate your design, then download and use in your css style sheet!
Spiffy Corners – MORE INFO
GRIDINATOR – MORE INFO
Grid Designer – MORE INFO
Variable Grid System – MORE INFO
The variable grid system is a quick way to generate an underlying CSS grid for your site.
CSS Grid Calculator – MORE INFO
It provides accurate visual feedback on how text blocks and page divisions will appear within a browser window, and returns style declarations for divisions and text to copy and paste into style sheets
Gridpak – MORE INFO
The Responsive grid generator
SimpleGrid – MORE INFO
Creating the code for your grid should be the least of your problems when building a site.
Yaml Builder – MORE INFO
A modular CSS framework for truly flexible, accessible and responsive websites
1140 CSS Grid – MORE INFO
The 1140 grid fits perfectly into a 1280 monitor. On smaller monitors it becomes fluid and adapts to the width of the browser.
Mobile Boilerplate – MORE INFO
Mobile Boilerplate helps you create rich, performant, and modernmobile web apps. Kick-start your project with dozens of mobile optimizations and helpers.
Typography and Font Tools
CSS Type Set – MORE INFO
FontStruct – MORE INFO
FontStruct lets you quickly and easily create fonts constructed out of geometrical shapes, which are arranged in a grid pattern, like tiles or bricks.
BitFontMaker2 – MORE INFO
BitFontMaker2™ is fast and easy Online Bit map font Editor.
CSStxt – MORE INFO
CSS font-style – MORE INFO
The CSS font-style property is used to set the style of the font to italic or oblique.
TYPETESTER – MORE INFO
The Typetester is an online application for comparison of the fonts for the screen. Its primary role is to make web designer’s life easier.
Markup and Content Tools
Html-ipsum – MORE INFO
Dummy Text Generator! – MORE INFO
This handy tool helps you create dummy text for all your layout needs.
Markup Generator – MORE INFO
Markup Generator is a simple tool created for xhtml/css coders that are tired of writing boring frame code at the very beginning of slicing work.
Tableless Code Generator for column layout – MORE INFO
This HTML – CSS template generator yields a three column layout without using any Tables.
CSS Layout Generator – MORE INFO
The generator helps you create the structure of your website template using valid HTML and CSS.
quickCSS – Online CSS generator – MORE INFO
CSS Generator – MORE INFO
CSS Creator allows you to choose a style for your web page.
Image Tools and Generators
Gradient Image Maker – MORE INFO
This online tool to allows you to painlessly generate a gradient image of 3 types, with instant previewing so you get exactly what you had in mind.
Favicon Generator – MORE INFO
A favicon (short for “favorites icon” and also known as a page icon), is an icon associated with a particular website or webpage that is displayed in the browser address bar next to a site’s URL.
Ultimate CSS Gradient Generator – MORE INFO
A powerful Photoshop-like CSS gradient editor from ColorZilla.
Button Maker Online – MORE INFO
Use this online tool to easily and visually create those popular “XHTML valid” micro buttons (80×15).
Tartan Maker – MORE INFO
Tartan Maker – the new trendsetting application for cool designers
Not exactly a web design tool, but it’s surely useful for any web designer
how to lose 10 pounds in a month
Useful info. Fortunate me I found your website by chance, and I’m shocked why this coincidence didn’t took place
earlier! I bookmarked it.