在過去的幾年里，在互聯網上出現了許多為開發人員提供的在線編程網站（Coding playgrounds）。這不是一件壞事情，畢竟，如果一個編程網站的話，開發者們遲早會膩的。在這些網站上，你在網頁上編寫代碼，可以實時地看到效 果。你可以編輯所有的東西并預覽其效果。當然，這些網站最適合編寫HTML，CSS和JavaScript代碼了。最贊的地方在于他們大多都是免費的，你 可以很容易地與別人分享你的編程現場，這很適合于團隊工作和創新想法的交流。

如果你深入地想想這種編程模式的話，你就會發現這種模式對于項目合作很有幫助。而且如果你使用得當的話，你會收獲很多。如果你在Coding 的時候發現你遇到問題了，你可以找你的朋友來跟你一起來玩，說不定問題很快就解決了。因此我們想給你推薦10個在線編程網站，去試試這些個工具，然后告訴 我們你的感覺如何，隨時歡迎你的評論！

你或許也對CSS Code Snippets 和Javascript Resources and Tools感興趣。

1、Codepen

這個工具寫前端代碼最合適了，其包括了教學，分享和設計靈感的方方面面。這個網站提供了許多實用的功能，比如說分享代碼，嵌入代碼片等。我們建議你邊開發項目邊使用Codepen來進行測試。

2、JSFiddle

這是一個shell 編輯器，而且因為可以使用JS庫來編寫客戶端界面，所以用JSFiddle編寫JS代碼將會特別舒服。現在你就可以選擇一些JS庫來開始你的代碼之旅。我覺得這或許是***、最***的JS研發、測試和分享平臺了。

#p#

3、JS Bin

這是為那些想要測試CSS和JavaScript代碼段的開發者設計的網站，你還可以去這里調試代碼。如果對自己的代碼很滿意的話，你可以保存自己的項目并分享給朋友。

4、CSSDeck

這是一個在線的CSS沙盒軟件，你可以快速地測試你的CSS代碼片，并能感受到完成作品所帶來的成就感。這個工具還可以顯示代碼行數，并且有語法高亮。最贊的特性是可以你可以把代碼分享給任何人，可以是你的朋友或其他的人。

#p#

5、Dabblet

如果你想快速地測試你的HTML和CSS代碼片的話，那么這個工具將是你的不二選擇。該軟件實現了Prefix-free 理念來簡化開發人員的工作，Prefix-free就是開發者勿需寫CSS 前綴，由軟件來自動完成。你還可以將你的代碼保存到Github上和朋友或別人來分享你的作品。當下該工具只支持Google Chrome，Safari和Firefox，但很明顯你很少用別的瀏覽器對吧？

6、Liveweave

如果你是一個Web設計人員或開發人員，那么這個工具會很適合你，該工具支持HTML5和CSS3，當然還支持JavaScript。你可以用它來 測試你的作品或工具。遇到問題了你可以和朋友一起來Coding一起來解決問題，寫出了很酷炫的代碼，你也可以炫耀一番。值得一提的是，該工具還有代碼智 能提示哦。

#p#

7、Google‘s Code Playground

當所有人都來參與在線編程的時候，我們知道谷歌肯定也會來分一杯羹的。 谷歌Code Playground是一個基于Web的工具，旨在讓開發者來更方便地使用谷歌提供的API接口。你可以修改代碼然后查看結果。這個工具可以讓你查看任何 的代碼而無需打開一個外部編輯器。它還為開發者提供了默認的API，你只需要選擇你想用的就可以了。

8、Editr

這是一個相對簡單的工具，你甚至可以在自己的服務器上搭建該工具。該工具基于ACE編輯器，搭建起來非常簡單，支持水平、垂直和單一三種視圖。前兩 種視圖用于在線編程，后一種用于展示你的作品。該工具遵循MIT License，所以我敢保證用起來絕對很爽。另外，Editr 設計簡潔美觀，絕對會招你青睞的。

#p#

9、D3 Playground

這個工具是為了更全面地支持D3.js庫而設計的，所有改變將實時地反映到輸出中。 當下CSS的角色已經舉足輕重，所以CSS代碼已經是Web開發中不可或缺的 一部分，幸運的是，該工具內嵌了CSS編輯環境，你可以輕松地編寫CSS代碼。

10、HTML5 Playground

這個工具提供了很多代碼和工具庫供開發者學習和使用，當然很多是關于HTML5的有趣的新特性的，比如說是audio標簽，互動式form等。當 然，還有很多的element，比如說range，date input，甚至還有郵件地址格式的自動檢查。這個工具很有前景，而且肯定能在工作中給你很多幫助。