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

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

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/

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *