25 個前端網站工具推薦

作者：涼皮  來源：轉載於麻瓜編程公衆號  

給大家整理了 25 個前端相關的學習網站和一些靠譜的小工具，包括一些小遊戲、教程、社區網站和博客，以及一些資源網站，希望可以幫助到大家！

▍CSS 相關

1

CSS Battle - 在線比拼 CSS

https://cssbattle.dev

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

2

Learn CSS layout - 學習 CSS 佈局

http://learnlayout.com

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

3

** Flexbox Froggy - 學習 Flex 佈局的小遊戲**

http://flexboxfroggy.com

4

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

https://enjoycss.com

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

5

CSS-Tricks - CSS 技巧

https://css-tricks.com

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

6

Neumorphism - 實現新擬態效果

https://neumorphism.io

7

uiGradients - 分享漸變色

https://uigradients.com

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

▍JS 相關

8

JavaScript 祕密花園

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

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

9

JS Tips - JS 技巧

https://www.jstips.co

每天一個 Javascript 小知識。

10

**JSweekly - 技術週刊 **

https://javascriptweekly.com

專門講解 Javascript 的技術週刊。 

11

CDNJS - JavaScript 資料庫

https://cdnjs.com/libraries

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

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 格式，素材有多種尺寸尺寸包括 512512、256256、128128、6464、3232、1616 等，非常適合前端設計師收藏備用。

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 模版，用戶可以自己分享和修改模版。

本文推薦的網站彙總：

  1. CSS battle : https://cssbattle.dev

  2. Learn CSS layout：http://learnlayout.com

  3. Flexbox Froggy：http://flexboxfroggy.com

  4. EnjoyCSS：https://enjoycss.com

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

  6. Neumorphism：https://neumorphism.io

  7. uiGradients：https://uigradients.com

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

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

  10. JSweekly：https://javascriptweekly.com

  11. CDNJS：https://cdnjs.com/libraries

  12. Beautiful Open ：https://beautifulopen.com

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

  14. Stack Overflow：https://stackoverflow.com

  15. 掘金：https://juejin.im

  16. Codrops：https://tympanus.net

  17. CodePen：https://codepen.io

  18. CodeSandBox：https://codesandbox.io

  19.  JS Bin：https://jsbin.com

  20. ICONSVG：https://iconsvg.xyz

  21. OpenMoji：https://www.openmoji.org

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

  23. tableconvert ：https://tableconvert.com

  24. Feathericons：https://feathericons.com

  25. HTML5UP ：https://html5up.net/

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/p42jHbvLWNMwhFmiq9-7Ug

猜你喜歡