【好物分享】分享給前端開發的28個資源（網站、軟體、外掛），簡直是提高效率必備

---

theme: fancy highlight: atom-one-light

---

Hi~，我是一碗周，如果寫的文章有幸可以得到你的青睞，萬分有幸~

🍇 寫在前面

對於開發來說，尤其是前端開發，有一個好的開發環境真的很提升工作效率，這裡我整理了28個頂級資源，包括但不限於網站、軟體和外掛（瀏覽器外掛、VScode外掛），可以點贊收藏保留一下，萬一在什麼時候需要的；

🍈 網站分享

🍉 學習類

做前端的都一直有一個感覺，就是卷不動了，這裡整理了幾個學習網站，除此之外，每個技術的官方文件是學習它的最簡單的方式。

MDN Web Docs

說道學習網站，首先第一個推薦的肯定是MDN啊，這個我就不多解釋了

W3Cchools

同MDN類似，也是一個老牌的前端學習網站

現代 JavaScript 教程

以最新的 JavaScript 標準為基準。通過簡單但足夠詳細的內容，為你講解從基礎到高階的JavaScript相關知識。

Learn Git Branching（學習Git分支）

Learn Git Branching在網站提供的沙盒中學習Git中的分支操作，從簡入難漸進學習，非常的有趣。

力扣（刷演算法必備）

這個我就不多嗶嗶了，刷演算法必備。

CSSBattle（通關式學習CSS）

該網站內建了很多關卡，使用CSS復原每個關卡中內容，可以逐步的精進我們的CSS技術。

VisuAlgo（資料結構和演算法動態視覺化）

這個網站提供了很多資料結構和演算法的視覺化，通過該網站學習資料結構和演算法時會方便很多。

🍊 工具類

Can I Use

檢視HTML標籤、CSS屬性和各種API的相容器非它莫屬，前端必備。

Readme.so（用最簡單的方式建立README）

有寫過README的同學都知道這個東西寫起很麻煩，這個網站提供了一個編輯器以及一些模板，編寫非常的方便和快捷。

Carbon（程式碼片段轉圖片）

Carbon是一個用於將原始碼轉換成圖片的一個網站，支援多種語言以及多種主題。

Responsively（預覽神器）

如果你在開發一個響應式的Web程式，還在為了切換不同的螢幕解析度而苦惱時，這個網站幫你解決了這個問題，可以讓你在一個視窗畫面中觀看各個螢幕尺寸下的畫面狀態。

圖片壓縮工具（Picdiet、TinyPNG）

convertio（檔案格式轉換器）

一個線上的檔案格式轉換器

Excalidraw（畫圖神器）

這個網站可以畫一些流程圖之類的圖片，很多jy都在用。

🍋 CSS相關

Animista（CSS動畫參考）

這個網站中提供了很多CSS的動畫參考，如果動畫不會寫了，可以來這個網站找一些參考。

Neumorphism.io（視覺化陰影調整）

這個網站給你提供了一些配置項，可以視覺化的調整CSS中的陰影。

Clippy-CSS

通過CSS中的clip-path屬性來裁剪出各種奇形怪狀的圖形。

FANCY-BORDER-RADIUS（異形邊框）

通過broder-radius屬性製作異性邊框。

cubic-bezier（動畫曲線視覺化）

該網站提供了可以用於設定貝塞爾曲線的視覺化頁面，以及用於動畫的效果對比。

CSS Gradient（漸變視覺化）

提供一個視覺化頁面設定線性漸變以及徑向漸變，還提供了對應的CSS程式碼。

CSS Grid Generator

一個Grid佈局生成器。

🍌 軟體分享

這裡筆者是Windows，只能給你分享一些Windows的軟體，像VSCode這種就不推薦了，前端人都知道的軟體不會推薦。

Windows Terminal

win11的預設終端，在win10中我強烈推薦安裝。

draw.io

一個畫圖軟體，我文章中的所有圖幾乎全部都出自這個軟體。

這個軟體有Vscode外掛版以及網頁版

PowerToys

微軟自己做的一款小工具，內部包括很多實用的小外掛，用微軟的話說就是優化Windows體驗，提供工作效率。

uTools

新一代效率工具平臺，用過之後真的離不開了，真的挺良心的一款國產軟體。

🍍 外掛分享

外掛分享在掘金中到處都是，這裡我就分享幾個我覺得比較不錯的，太常見的我就不佔文章篇幅了。

🥭 瀏覽器外掛

Global Speed: 視訊速度控制

視訊學習（追劇）必備，統一所有網站的視訊倍速，不用開啟一個視訊開一次二倍速。

iGuge

懂得都懂吧，這裡不介紹了。

🍎 VScode外掛

暫時沒啥推薦的，感覺我用的外掛大家都在用，後面有了新鮮的在更新吧~

🍏 寫在最後

到這文章就結束了，這篇文章將會持續更新，有好的資源將會在文章中進行更新，趕緊收藏一波吧。

各位看官如果有好的資源可以在評論區進行評論，會增加到文章中的呦\~