天天看點

幾個超火的程式設計網站,别錯過!

大家好,我是魚皮,今天給大家推薦幾個最近非常流行的程式設計網站,相信能夠幫助大家提高程式設計效率、更好地學習程式設計。

示範視訊:https://www.bilibili.com/video/BV1im4y1X7zb/

國外的線上前端程式設計網站,在這裡你可以發現很多國外大神編寫的前端代碼,除了各種網頁布局代碼外,更多的是各式各樣好玩的、炫酷的、新穎的前端動畫和特效。

比如聖誕節快到了,很多小夥伴問我能不能用代碼畫顆聖誕樹。

我是不會,但是在這個網站中,輸入 "Christmas Tree" 搜尋,就能看到各種不同風格的聖誕樹網頁啦!

幾個超火的程式設計網站,别錯過!

點選你看中的網頁,就能進到代碼編輯頁面,在這裡,你可以任意修改 HTML、CSS、JavaScript 前端代碼,并且在底部的區域實時浏覽運作效果,非常地友善!

幾個超火的程式設計網站,别錯過!

編輯好網頁後,可以在網頁右下角的菜單中進行全屏浏覽、收藏、克隆、分享等,還能直接将網頁内嵌到我們自己的項目中,或者下載下傳完整代碼包到本地。

幾個超火的程式設計網站,别錯過!

得益于前端技術的發展,這個網站為開發者提供了搜尋項目、線上編輯、分享導出的一條龍服務,使得我們能夠以自主練習的方式輕松學習别人優秀的代碼。

下面再分享幾個類似的網站。

代碼沙箱,顧名思義,可以幫助你在隔離的環境中運作前端項目。

在這裡你可以基于豐富的模闆來建立自己的沙箱(項目),比如 React、Vue、Angular、VuePress、Svelte 等常見的前端架構:

幾個超火的程式設計網站,别錯過!

建立好沙箱後,你就可以線上編輯代碼、實時檢視效果,或者分享沙箱給其他小夥伴啦~

幾個超火的程式設計網站,别錯過!

前端開發的練習場,也可以線上編寫代碼、實時浏覽效果。相對于 Codepen,個人感覺這個網站的編輯體驗更好:

幾個超火的程式設計網站,别錯過!

當你在網上看到了一段不錯的 JS 代碼或者插件,不必再下載下傳到本地了。直接把代碼粘貼到 JSFiddle 中,就能以最快的方式檢視運作效果了。現在很多前端元件庫也用到了這種平台,給開發者所見即所得的體驗。

國内的線上程式設計網站,除了前端外,甚至支援多達 30 多種程式設計語言的線上調試和運作!

幾個超火的程式設計網站,别錯過!

同 Codepen 一樣,你可以在這裡看到很多别人編寫的代碼片段,直接下載下傳。還可以儲存和分享你的代碼,建立自己的小代碼合集。

幾個超火的程式設計網站,别錯過!

不得不說,在國内,這個網站算是做的相當出色的了,通路速度和功能體驗都很棒!

這個平台要比上面提到的網站更進階一些,它是一個強大的線上 IDE(內建程式設計環境),提供了 VSCode 風格的編輯器,允許你線上編寫代碼完成開發。

幾個超火的程式設計網站,别錯過!

Gitpod 基于容器技術,可以幫助你一鍵編譯、建構、運作任何 GitHub 項目,不止前端!而且每個項目的運作都是互相隔離的,随用随建立、用完可随時回收,非常靈活。

如果你看中了一個 GitHub 項目,又不想在本地去搭建各種環境去檢視它的運作效果,那麼最好的方式就是使用 Gitpod 來線上建構和執行。現在也有越來越多的 GitHub 項目接入了 Gitpod,大家隻要看到下圖的按鈕,都是可以一鍵部署運作的,大大提高效率!

幾個超火的程式設計網站,别錯過!

以上就是本期分享,有幫助的話幫忙點個 贊 吧,謝謝大家!

幾個超火的程式設計網站,别錯過!

繼續閱讀