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插件
暂时没啥推荐的，感觉我手里就是一些普通的插件，后面有了在更新吧
🍏 写在最后
到这文章就结束了，这篇文章将会持续更新，有好的资源将会在文章中进行更新，赶紧收藏一波吧。
各位jy如果有好的资源可以在评论区进行评论，会增加到文章中的呦~
