40+ 优质免费 Web 开发资源

资源对程序员来说至关重要，因为它们可以极大地提高编程效率。几个月来，我一直在收集各种链接，希望与大家分享其中的一些。希望它们能像对我一样对你有所帮助。闲话少叙，这里有一些很棒的免费最新资源！

目录：

• 插图
• 发展
• CSS
• 顺风
• 设计
• 生产率

插图

错误 404

这个资源非常适合寻找可用于您网站 404 页面的插图。

脸红

Blush 允许你免费下载其所有插图，用于商业和个人用途。它非常出色，因为它提供多种插图风格，你可以组合它们来创作新的插图。此外，他们还提供了一个Figma插件，让你可以立即在设计中使用它们。

Smash 插图

Smash Illustrations 提供时尚人物和简约插画，可供商业和个人免费使用。它包含 250 多个物品和人物，以及 20 多个独特场景，您可以随心所欲地创作。

控制

Control 提供高质量的免费实线和线性插图。无论商业用途还是个人用途，均可免费使用，但需遵循一定的.png格式。如果您需要 SVG 格式，则需要支付 38 美元，对于这种质量的插图来说，这个价格还算可以接受。

DrawKit

DrawKit 提供 220 多幅免费插图。它们全部以 SVG 格式呈现，方便您创作精彩的构图！此外，他们还提供使用lottie制作的动画插图，这对于打造酷炫流畅的网站至关重要。

打开涂鸦

如果你喜欢手绘插画，那么你一定会爱上 Open Doodles。所有插画均可免费下载，SVG 或 PNG 格式。此外，他们还提供构图路线和生成器，方便你获取所需的涂鸦！

免费插图

免费插图具有许多插图背景，非常适合登陆页面开发。

Mixkit

Mixkit 是插画界的Unsplash，或者说，这就是他们的目标。它提供众多插画类别，以及免费的素材视频和音乐。

德莱设计

Deledesign 提供许多简洁的免费插图。其主要优势在于其多样性。

发展

雄伟

Majestic 是 Jest 的零配置 UI，它使查看测试日志输出更加便捷，无需使用纯粹的终端。它可以全局安装，也可以在任何仓库中打开，使用npx majestic

碳

如果您想在推文或博客中分享代码片段的精美图像，Carbon 非常有用。

斯库什

压缩图片几乎不会造成明显的质量损失。此外，您还可以编辑图片大小和质量损失，这对于网站图片优化至关重要。

SVGOMG

SVGOMG 提供了一个用于优化 SVG 文件的 GUI。这对于在网站上使用 SVG 文件时至关重要。

风筝

Kite 在提升代码效率方面非常出色。我相信未来人工智能不会取代我们的工作，但类似这样的工具会增强我们的工作效率。它使用经过 200 多万个代码库训练的机器学习技术，在你常用的编辑器中提供自动补全功能。目前它只支持 Python 和 JavaScript，但很快将支持更多语言。

开发文档

DevDocs 是一个文档聚合器。它在一个简洁易搜索的界面中添加了多个库和 API 文档。这对于一般的开发来说非常有用，所以我强烈推荐它。

开发提示

该网站提供许多工具的备忘单，例如 bash、React、go、sass 等等。

Wappalyzer

想知道你最喜欢的网站的堆栈情况吗？不用多说，Wappalyzer 可以让你快速了解。他们还有一个扩展程序，方便你随时随地查找这些信息。

iHateRegex

对于那些不想自己写正则表达式或想在谷歌上搜索的人来说，这个网站简直就是圣杯。你可以把它想象成正则表达式版的谷歌。

Lottie文件

听说过Lottie吗？之前我完全没听说过，直到我发现了这个网站。Lottie 是一个库，可以解析和运行从 Adob​​e After Effects 导出的动画。这些动画非常精美，LottieFiles 上成千上万的动画都是免费的。不过，需要注意的是，它们大多数都遵循 CC-BY 2.0 许可证。

形状分隔线

Shape Divider 可以让你快速为网站生成美观的分隔线。与其他网站相比，它的用户界面非常酷炫，而且效果非常好。

CSS

安尼米斯塔

需要一些 CSS 动画灵感或代码片段吗？Animista 可以满足您的需求。它提供许多炫酷的 CSS 效果，可以加速您的开发。

模式.css

喜欢在设计中使用图案？那么你一定会喜欢这个。它是一个 CSS 库，提供各种不同的类，让你可以为网站创建出精美的图案。

CSS效果片段

为您的网站提供精美的 CSS 动画。

98.css

98.css 让你的怀旧幻想成真。如果你需要构建一个 Windows 98 风格的网站或 Electron 应用，那么 98.css 将助你一臂之力。

顺风

Tailwind组件

Tailwind 最近非常流行，像这个网站就说明了原因。TailwindComponents 提供了数百个由社区使用tailwind.css构建的组件。其中一些质量非常高，一定要去看看！

尾块

Tailblocks 拥有更多高质量的 Tailwind 组件。但它们提供的体验与 Bootstrap 类似，因此您可以使用它们创建整个网站。这对于加快开发速度至关重要。

设计

颜色。哈哈

需要一些描述性极强的调色板吗？Colors.lol 就是找到这些调色板的好地方。他们提供了 10 多个这样的调色板，可以让你的设计更加生动。

色彩思维

Colormind 利用深度学习生成配色方案。您可以锁定颜色，并获取与之互补的其他颜色。

Ucraft 徽标制作器

每当我需要为业余项目快速制作一个 logo 时，我都会选择这个。他们提供数千个图标，可以帮你创建各种 logo 组合。此外，他们还提供免费的商业和个人用途的 PNG 版本 logo 下载。

AppMockUp

AppMockUp 让你可以轻松生成 Android 和 iPhone 的模型。如果你是移动开发者，一定要试试这个。

网框

Webframe 有数千个基于真实网站的设计灵感。

FontSpark

FontSpark 允许您通过生成不同的字体来发现您下一个喜欢的字体，直到您喜欢它为止。

HackDesign

时间充裕，又想学习设计？那么 HackDesign 就是你的不二之选。这个网站提供丰富的课程，助你成为设计师。

清单设计

如果您正在设计或构建网站，这些清单可以帮您大忙。它们可以确保您网站各个部分（例如表单、排版、按钮等等）的可访问性和出色的用户体验。

移除背景

标题一目了然。这款工具可以轻松删除图片背景，方便您在设计或网站中使用。

取消筛选

就像remove.bg，但用于 gif 和视频。

生产率

塞伊达

Sejda 提供一款简洁的在线 PDF 编辑器。用它来编辑简历简直太棒了！

获取条款

GetTerms 会为您的应用生成定制的隐私政策和服务条款。这对于节省构建 Web 产品的时间非常有帮助。

顶级狩猎时光机

此工具可让您查看Product Hunt中最受欢迎的产品。如果您想寻找资源，请务必每月查看一次。

概念

Notion 太棒了！好到它几乎成了我日常写作的平台。我太喜欢它简洁高效的博客和笔记写作体验了。

写字

需要一个超级精简流畅的写作编辑器？那么你一定会喜欢 Writty。它拥有一个超级简洁的编辑器，可以将你写下的所有内容保存在浏览器中，这样你就不用担心内容会被轻易泄露到互联网上。此外，它是开源的，这也是一个优点。

Grammarly

这是在互联网上编写任何代码的必备工具。我将此工具与 ESLint 进行比较，因为它能让你在注意到错误之前就发现它们。无论我们在 GitHub 上编写问题，还是在 Stack Overflow 上提问，开发人员都可以从中受益……

开源构建者

OpenSource Builders 为 Facebook、Slack、Shopify 等常见产品提供了许多开源替代品。

海浪

如果您是自由职业者或有自己的企业，Wave 可以在网上免费帮助您进行会计、发票和收据处理。

Clockify

Clockify 是一款真正免费的时间追踪器，适用于个人和团队。它让您轻松记录时间，并提供多种数据管理功能。

未使用的工具

Untools 具有许多思维模式，可以帮助您进行编程。

结论

我希望所有这些资源都能像帮助我一样，帮助你构建更好的网站和应用程序！如果你还有其他喜欢的资源，请在下面的讨论中分享。

想要了解更多最新的 Web 开发内容，请在Twitter和Dev.to上关注我！感谢阅读！😎

你知道我有一份新闻通讯吗？📬

如果您想在我发布新博客文章时收到通知并收到精彩的每周资源以保持网络开发领先地位，请访问https://jfelix.info/newsletter。