【好物分享】分享给前端开发的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插件

暂时没啥推荐的，感觉我用的插件大家都在用，后面有了新鲜的在更新吧~

🍏 写在最后

到这文章就结束了，这篇文章将会持续更新，有好的资源将会在文章中进行更新，赶紧收藏一波吧。

各位看官如果有好的资源可以在评论区进行评论，会增加到文章中的呦\~