幾個超火的在線編程網(wǎng)站,別錯過

2022-1-24    前端達(dá)人

大家好,我是魚皮,今天給大家推薦幾個最近非常流行的編程網(wǎng)站,相信能夠幫助大家提高編程效率、更好地學(xué)習(xí)編程。

熱門編程網(wǎng)站推薦

Codepen

演示視頻:https://www.bilibili.com/video/BV1im4y1X7zb/

國外的在線前端編程網(wǎng)站,在這里你可以發(fā)現(xiàn)很多國外大神編寫的前端代碼,除了各種網(wǎng)頁布局代碼外,更多的是各式各樣好玩的、炫酷的、新穎的前端動畫和特效。

比如圣誕節(jié)快到了,很多小伙伴問我能不能用代碼畫顆圣誕樹。

我是不會,但是在這個網(wǎng)站中,輸入 “Christmas Tree” 搜索,就能看到各種不同風(fēng)格的圣誕樹網(wǎng)頁啦!

Codepen 好玩的網(wǎng)頁

點擊你看中的網(wǎng)頁,就能進(jìn)到代碼編輯頁面,在這里,你可以任意修改 HTML、CSS、JavaScript 前端代碼,并且在底部的區(qū)域?qū)崟r瀏覽運行效果,非常地方便!

在線編輯

編輯好網(wǎng)頁后,可以在網(wǎng)頁右下角的菜單中進(jìn)行全屏瀏覽、收藏、克隆、分享等,還能直接將網(wǎng)頁內(nèi)嵌到我們自己的項目中,或者下載完整代碼包到本地。

網(wǎng)頁操作

得益于前端技術(shù)的發(fā)展,這個網(wǎng)站為開發(fā)者提供了搜索項目、在線編輯、分享導(dǎo)出的一條龍服務(wù),使得我們能夠以自主練習(xí)的方式輕松學(xué)習(xí)別人優(yōu)秀的代碼。

下面再分享幾個類似的網(wǎng)站。

CodeSandbox

代碼沙箱,顧名思義,可以幫助你在隔離的環(huán)境中運行前端項目。

在這里你可以基于豐富的模板來創(chuàng)建自己的沙箱(項目),比如 React、Vue、Angular、VuePress、Svelte 等常見的前端框架:

創(chuàng)建好沙箱后,你就可以在線編輯代碼、實時查看效果,或者分享沙箱給其他小伙伴啦~

在線編輯

JSFiddle

前端開發(fā)的練習(xí)場,也可以在線編寫代碼、實時瀏覽效果。相對于 Codepen,個人感覺這個網(wǎng)站的編輯體驗更好:

在線編輯

當(dāng)你在網(wǎng)上看到了一段不錯的 JS 代碼或者插件,不必再下載到本地了。直接把代碼粘貼到 JSFiddle 中,就能以最快的方式查看運行效果了。現(xiàn)在很多前端組件庫也用到了這種平臺,給開發(fā)者所見即所得的體驗。

JSRUN

國內(nèi)的在線編程網(wǎng)站,除了前端外,甚至支持多達(dá) 30 多種編程語言的在線調(diào)試和運行!

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

下載代碼

不得不說,在國內(nèi),這個網(wǎng)站算是做的相當(dāng)出色的了,訪問速度和功能體驗都很棒!

Gitpod

這個平臺要比上面提到的網(wǎng)站更高級一些,它是一個強大的在線 IDE(集成編程環(huán)境),提供了 VSCode 風(fēng)格的編輯器,允許你在線編寫代碼完成開發(fā)。

在線 IDE

Gitpod 基于容器技術(shù),可以幫助你一鍵編譯、構(gòu)建、運行任何 GitHub 項目,不止前端!而且每個項目的運行都是互相隔離的,隨用隨創(chuàng)建、用完可隨時回收,非常靈活。

如果你看中了一個 GitHub 項目,又不想在本地去搭建各種環(huán)境去查看它的運行效果,那么最好的方式就是使用 Gitpod 來在線構(gòu)建和執(zhí)行?,F(xiàn)在也有越來越多的 GitHub 項目接入了 Gitpod,大家只要看到下圖的按鈕,都是可以一鍵部署運行的,大大提高效率!


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


文章來源:csdn   作者:

分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

日歷

鏈接

個人資料

存檔