We started with CSSDesk because he is one of the oldest on our list. It is very easy to understand online tool for writing HTML and CSS.
Sure, this tool a lot of pluses. It is very easy to use. There are three main sections: HTML, CSS and preview, the dimensions of which can be easily optimized with one click. Immediately see the result of your code. It's very simple: open the site and start building.
Among the pluses and syntax highlighting. And as such a simple feature (which is not often meet in such instruments) as the line numbers are also present.
Excellent panel functions with some settings that you simply will not find elsewhere. Not only can you share the result, but you also have to download something that you just built. In addition, you can choose any background, including backgrounds with grids.
Two. JS Bin
JS Bin is another popular place where you can mess with your code. The design of this application is really quite minimal and lets you focus on your code. There are three sections: to view the html, js and penele preview. You can leave only the panels you need.
There are a lot of nice features in the JS Bin. The first thing you refresh the page does not destroy your work. Preview updated automatically, but for those rare occasions when you need to update manually, it's nice that your basic instinct (Ctrl-R) does not lead to the accidental loss of the code and makes you re all the tinkering.
As in CSSDesk, you can continue to share their work and upload it. You can create your own JS or connect the library like JQuery.
This is a good tool, but it certainly lacks the charm of others. There is a special section for CSS and the need to embed it into HTML.
jsFiddle is the most popular option in the list at the moment. And no wonder, because it is an amazing application. Let's face it: when you start digging into jsFiddle, you'll never look at other options.
jsFiddle allows you to log in and view your past work saved. It is possible to automatically clean the dirty code.
You can quickly connect any library Java Script (JQuery, MooTools, etc).
Another nice feature is that you can embed scripts in Web pages.
The main drawback is the lack of jsFiddle automatic update option to preview. If you already have protests all other options from this list, you will be hard to hard to reconcile with the fact that constantly need to update manually. Hot keys can certainly speed up the process a little bit, but still ...
Dabblet - new to this genre. How CSSDesk, it focuses only on HTML and CSS. Nevertheless, he brings some serious innovation that you will not find in any other editor.
By default, Dabblet divided into four tabs: CSS and the result, HTML, and the result, all the tabs and just result. This provides flexibility and attention, allowing you to always monitor the results.
You can change the position of blocks, as shown below. Location of partitions can be vertical, horizontal, or the whole screen with the overlay area code. Please note, there are also reports on the use of prefix-free. This means that you should not use prefixes of all browsers.
Dabblet has many options for saving, for example, you can "remain anonymous."
Another great feature Dabblet - a stunning effect when you hover in the CSS. Its easier to show than describe. Here are some examples:
You can get a preview of the fonts, colors, sizes, and even images.
Dabblet bit bizarre from a visual standpoint.
Tinkerbin very similar to jsFiddle. Although there are not all the features available in jsFiddle, he has some good features of their own.
Tinkerbin is the only option that allows you to see all your code using windows «View Source».
I want to play with the settings and make the preview pane wider.
No account of integration into GitHub, etc. You just keep their experiments on a shortened URL-address.
Codepen - Chris Koyera sensational project. To learn more about it you can watch the following videos:
I hope this review helps you to look into the details of each of these solutions. Now you need to know not only what each option does, but also their advantages and disadvantages.
And what tools do you use? Which one is your favorite and why?