25 個實用前端網站工具推薦

資料來源: https://mp.weixin.qq.com/s?__biz=MzA3MzA5MDY2NA==&mid=2247487385&idx=1&sn=1f70d4d9d1d2aeb80b31f967fde28bc6&chksm=9f151c9ea862958814551615bd0dc911df7d8d148b52f84684219fff8ecbe1eeaa24c8f9ca7e&scene=126&sessionid=1596421975&key=baed9475c9f7eb8b337f3139cf58a23e42e04259a68eb0b01bb1b2788e9050ecb0426f3d7e1cd1cffc52a232d2991ab32a22a139d46696e2572eb3bb8fa3ed3ca5038828b1de183db00fd6be6ab5a303&ascene=1&uin=MjIwODk2NDgxNw%3D%3D&devicetype=Windows+10+x64&version=62090529&lang=zh_TW&exportkey=AptjjV1nENtGVp3%2B13SqUB0%3D&pass_ticket=cKTjH2fY%2BPp0i6xoKXTuA6grSXna%2Fe2CKu8JbgWhPZjAQZuzdYgIvkBj%2BsDBxT9n

▍CSS 相關
● 01 CSS Battle – 在線比拼CSS

https://cssbattle.dev

在線比拼CSS ，一個挺有趣的競爭性遊戲，一共有12個級別，需要你用HTML和CSS 100%還原它給出的頁面，然後再盡量減少代碼，你也可以查看全球的排行榜，看解決方案。

● 02 Learn CSS layout – 學習 CSS 佈局

http://learnlayout.com

在線CSS佈局學習，它會一步一步引導初學者學習CSS 基礎知識，在實踐中幫助初學者掌握好CSS 的佈局知識，改善初學者對CSS 的編寫習慣和正確方法。

● 03 Flexbox Froggy – 學習Flex 佈局的小遊戲

http://flexboxfroggy.com

一個引導式的學習Flex 佈局的遊戲，用flex 佈局讓青蛙跳到荷葉上就算完成，遊戲裡面幾乎包含了所有常用的屬性，這樣學習起來很有趣嘞，形象好記憶，誰要是Flex 佈局還不熟的話，在這多練練。

● 04 EnjoyCSS-在線CSS代碼可視化工具

https://enjoycss.com

在線版的CSS3 代碼生成工具，基於可視化操作，能快速無編碼的環境下調整網頁效果和圖形樣式。就像是在本地使用PS 或AI 軟件一樣。

● 05 CSS-Tricks – CSS 技巧

https://css-tricks.com

這個網站不斷的在更新一些關於CSS 的技巧優秀的教程和技巧，每天都會更新文章。

● 06 Neumorphism-實現新擬態效果

https://neumorphism.io

可以輕鬆實現新擬態效果，不僅可以修改顏色或填寫色值，也可以修改尺寸、半徑、距離、強度、模糊效果以及形狀等參數，同時提供了CSS代碼可以直接Copy。

● 07 uiGradients – 分享漸變色

https://uigradients.com

提供漸變色效果的站點，裡面接近上百種漸變配色方案，可根據自己風格來選擇搭配，能直接獲得對應漸變配色的CSS 代碼。

▍JS 相關
● 08 JavaScript 秘密花園

https://bonsaiden.github.io/JavaScript-Garden/zh/

一個一直更新的JavaScript 的語法文檔，主要會寫如何去避免一些常見的錯誤，以及找到很難發現的bug ，比較深入JavaScript 的語言特性。

● 09 JS Tips – JS 技巧

https://www.jstips.co

每天一個Javascript 小知識。

● 10 JSweekly – 技術周刊 

https://javascriptweekly.com

專門講解Javascript 的技術周刊。 

● 11 CDNJS –  JavaScript資料庫

https://cdnjs.com/libraries

CDNJS 為開發者提供最新的前端Web 開發資源，免費使用，無使用限制。你可以直接在自己的網頁上引用這些JS 文件。進入CDNJS 網站後，搜索你想要的資源庫，找到後點擊項目後方的[ Copy Script Tag] ，然後貼上就可以用了。目前CDNJS 在Web 前端的CDN 服務中排名第二（第一名是Google），性能出色。

● 12 Beautiful Open – 開源 JS 庫集合

https://beautifulopen.com

收集各類卓越設計的開源項目，大到CMS內容管理系統，小到常用的Javascript庫，適合網站開發的用戶使用。

● 13 JavaScript Fun – 代碼庫集合

https://www.javascript.fun

一個集合當下最流行的JavaScript 代碼庫，顯示流行排行，開發者可以輕鬆的找到想要最新的代碼插件、工具和博客。

▍社區和博客

● 14 Stack Overflow – 編程人員問答網

https://stackoverflow.com

全球IT界最受歡迎的技術問答網站之一，一個解決bug 的社區，稱為“ 編程界的十萬個為什麼”。

● 15 掘金- 高質量技術社區

https://juejin.im

掘金技術社區是質量很高的技術分享社區，技術大牛和極客們共同編輯篩選的優質乾貨，這些技術文章包括Android、iOS、前端、後端資源。

● 16 Codrops – 網頁設計開發博客

https:// tympanus.net

發表技術文章和網頁教程，提供經驗，少踩坑，資源豐富很豐富，很多優秀的技術都是從這裡來的。

▍在線IDE ( ONLINE )

● 17 CodePen

 https://codepen.io

一個網站前端設計開發平台，針對網站前端代碼的一個工具，上面有各種效果的案例特效（炫技），可以在他們的demo 基礎上開發自己的前端設計。

● 18 CodeSandBox 

https://codesandbox.io

站如其名，CodeSandBox 網站提供一個在線開發環境的“沙盒”，主流的框架如React、Vue、Angular 等，都可即開即用、實時編譯預覽，非常方便。

● 19 JS Bin

https://jsbin.com

另一個輕量級在線編輯器網站，界面簡潔乾淨，臨時想調試簡單的HTML 或JS 代碼可以考慮去這裡試一試。

▍資源類

● 20 ICONSVG – 在線自定義設計SVG圖標素材

https://iconsvg.xyz

是一個在線可自定義設計SVG圖標素材的網站，幫助前端設計師找到想要的圖標素材，這些圖標素材都是常用圖標，可以點擊官方提供的素材進行二次設計，同時也可以把設計好的圖標導出。

● 21 OpenMoji – 免費表情符號庫

https://www.openmoji.org

提供源代碼的表情符號庫，可免費下載使用。

● 22 Share Icon – 免費矢量素材圖庫

https://www.shareicon.net

提供超過25萬中ICON矢量圖片素材的站點，120多種分類，所有的素材都提供PNG、SVG格式，素材有多種尺寸尺寸包括512*512、256*256、128*128、64*64、 32*32、16*16等，非常適合前端設計師收藏備用。

● 23 tableconvert   -在線表格編輯器

https://tableconvert.com

一個功能強大的在線表格編輯器，支持Excel、Markdown、JSON、CSV、HTML等格式的相互轉換。當需要轉換錶格，又不能讓它變形，不妨試試這款工具。

● 24 Feathericons – 極簡ICON 圖標集

https://feathericons.com

一個免費開源的簡單而美麗的ICON圖標集合，主要設計的使用範疇為應用系統、媒體控制、位置、天氣、箭頭、徽標等，可在移動端應用開發的時候使用，圖標格式為SVG。

● 25 HTML5 + CSS 3 免費模版

https://html5up.net/

提供大量的HTML5模版，用戶可以自己分享和修改模版。

—————–

本文推薦的網站列表：

CSS battle : https://cssbattle.dev

Learn CSS layout：http://learnlayout.com

Flexbox Froggy：http://flexboxfroggy.com

EnjoyCSS：https://enjoycss.com

CSS-Tricks ：https://css-tricks.com

Neumorphism：https://neumorphism.io

uiGradients：https://uigradients.com

JavaScript：https://bonsaiden.github.io/JavaScript-Garden/zh/

JS Tips：https://www.jstips.co

JSweekly：https://javascriptweekly.com

CDNJS：https://cdnjs.com/libraries

Beautiful Open ：https://beautifulopen.com

JavaScript Fun：https://www.javascript.fun

Stack Overflow：https://stackoverflow.com

掘金：https://juejin.im

Codrops：https://tympanus.net

CodePen：https://codepen.io

CodeSandBox：https://codesandbox.io

 JS Bin：https://jsbin.com

ICONSVG：https://iconsvg.xyz

OpenMoji：https://www.openmoji.org

Share Icon ：https://www.shareicon.net

tableconvert ：https://tableconvert.com

Feathericons：https://feathericons.com

HTML5UP ：https://html5up.net/