【好物分享】分享給前端開發的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插件

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

🍏 寫在最後

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

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