前端开发常用免费资源，显著提升工作效率

╰+哭是因爲堅強的太久メ 2022-12-10 08:56 159阅读 0赞

Jatin Rao 原作，授权 New Frontend 翻译。

最近几个月我收集了大量可以显著提升开发效率的资源链接，在这篇文章中我会分享其中一些。这些资源对我很有帮助，希望对你也是如此。闲话少叙，下面是一些很棒的免费资源！

HTML

W3C Markup Validator 检查网页文件的标记是否合法

Meta Tags 编辑生成用于社交网络等站点的元标签，并预览效果

Favicon Generator 将 GIF、PNG、JPG 格式的图像文件转换为 ICO 格式

CSS

W3C CSS Validator 检查 CSS 文件是否合法

Animate.css 开箱即用的跨浏览器 CSS 动画效果

animista 按需定制 CSS 动画效果

CSSeffectsSnippets CSS 动画效果收集，点击某个效果即可复制相应的代码片段至剪贴板

SpinKit 汇集了实现各种加载效果的 CSS 代码片段

CSS Minifier 在线 CSS 代码极简化/压缩工具

JavaScript

JavaScript 30 使用原生 JavaScript 在 30 天内完成 30 个项目

Codewars 和其他人一起完成真实的代码挑战，提升你的技术

ESLint 检测、修正 JavaScript 代码的问题

Prettier 格式化 JavaScript 代码

在前端领域混了这几年，总结了一套前端学习的精讲视频和学习路线，如果有对前端开发感兴趣的伙伴，不管你是想转行，或是大学生，还有工作中想提升自己能力的web前端党，欢迎大家的加入我的前端开发交流群：603985993 希望大家诚心交流！，与企业需求同步。好友都在里面学习交流，每天都会有大牛定时讲解前端技术!也可以关注我的微信公众号：【前端留学生】 每天更新最新技术文章干货。

图标

Font Awesome 网站开发最流行的图标集

Feather 简洁美观的开源图标

Ionicons 精心绘制的开源图标

Simple Icons 常见品牌的 SVG 图标

Material Design Icons 轻快、精美的符号图标，包括常见操作和事项

Tabler Icons 681 枚可定制的开源 SVG 图标

色彩

Material Design Colors Material Design 色彩

Flat UI Colors 2 14 组配色、280 种颜色

Color Hunt 分享色彩搭配的自由开放平台，包括成千上万人工选取的配色，可以从中获取配色的灵感

Color Space 配色方案、CSS 颜色渐变生成工具

uiGradients 美观的颜色渐变

Colors and Fonts 色彩和字体工具

Coolors 配色方案生成工具

插画

Undraw 持续更新的精美的 SVG 插画集

manypixels 免费插画集

IRA Design 通过调配渐变色、搭配手绘组件定制插画

Free Illustrations by Lukasz Adam 免费 SVG 插画

Blobmaker 在线 SVG 形状生成器

Get Waves 在线 SVG 波形生成器

图片

Unsplash 可供免费使用的图片

Pexels 精美的免费图片和视频

Burst 免费高分辨率图片，可用于网站和商业用途

ISO Republic 使用 CC0 许可的免费高分辨率图片和视频

Pixabay 令人惊叹的免费（公共领域）图片和视频站点

StockSnap.io 精美的免费图片，同样使用 CC0 许可

Photopea 在线图片编辑工具，支持大量高级功能

Online Image Compressor 在线图片压缩工具，一次可以压缩多达 20 张图片

Bulk Resize Photos 最快的在线图片缩放工具（图片缩放和压缩在本地完成，无需上传到服务器）

参考

Front-end Developer Handbook 2019 前端开发者手册 2019 版，如何学习前端开发实践的全面指引

HackerRank 2020 Developer Skills Report HackerRank 的 2020 年开发者技能报告，有 116648 名开发者参与调查

Stack Overflow Developer Survey 2020 Stack Overflow 的 2020 年开发者调查报告，将近 65000 名开发者参与调查

HTML & CSS 很好的学习 HTML、CSS 的资料

Refactoring UI 从开发者的角度讲解如何应用特定的策略来设计美观的用户界面

Airbnb JavaScript Style Guide Airbnb 的 JavaScript 风格指南，算是目前业界最流行的 JavaScript 代码风格指南

JavaScript & jQuery 很好的学习 JavaScript 和 jQuery 的资料

You Don’t Know JS 深入理解 JavaScript 语言的核心机制

Eloquent JavaScript 面向编程初学者的 JavaScript 教程

Learning JavaScript Design Patterns JavaScript 设计模式，面向 JavaScript 和 jQuery 开发者

Web Content Accessibility Guidelines (WCAG) 2.1 各种让网站的可访问性更好的建议

可访问性

NV Access Windows 平台下的屏幕阅读器

ChromeVox Chrome Extension Google 出品的 Chrome 屏幕阅读插件

axe Chrome Extension 给 Chrome 开发者工具增加可访问性测试的插件

部署

GitHub Pages GitHub 提供的免费静态网站托管服务

Netlify 30 秒内部署你的网站

Vercel 快速部署你的网站

Surge 只需一个命令就可以发布你的网站

Heroku 在云端构建、运行你的应用

其他

web.dev 评测网站性能（基于 Lighthouse）

Shape Divider 定制各种形状的网站分区 SVG 的工具

GTmetrix 网页性能分析工具

Can I Use 前端技术的浏览器支持情况

Carbon 代码转图片工具

Wappalyzer 检测某个网站使用的技术栈

> 作者：LeanCloud  
> 链接：https://juejin.im/post/6875943665597546510  
> 来源：掘金

发表评论取消回复

表情：

评论列表（有 0 条评论，159人围观）

还没有评论，来说两句吧...

相关阅读

相关推荐前端开发者提升效率的工具

是否掌握新的技术很大程度决定着你是否被淘汰。虽然应用程序试图将网站替代，但前端 Web 开发业务仍在快速变化和增长，前端开发人员的功能并没有消失。以下介绍一款前端开发者提升

谁践踏了优雅/ 2024年03月23日 18:11/ 0 赞/ 93 阅读

相关工作效率提升工具分享

分类技术框架常用工具解决方案原型设计摄影网站常用网站视频点播区块链技术在线学习站长工具元宇宙 CHATGPT AI工具集 ![7f28a7e41883

一时失言乱红尘/ 2024年03月17日 22:40/ 0 赞/ 79 阅读

相关 idea 提升效率的常用快捷键汇总

点击`File --> Settings --> keymap`便可进入看到 IDEA 提供的快捷键。我们也可以搜索和自定义所有快捷键下面13个事我常用的快捷键，后面还有全

r囧r小猫/ 2024年02月20日 10:02/ 0 赞/ 52 阅读

相关 IDEA常用配置，提升开发效率，赶紧造起来

目录目录 1. 设置IDEA主题 2. 代码提示 3. 设置字体大小以及样式 4. 修改单行注释样式 5. 配置类注释 6. 隐藏我们不想看到的文件 ----

今天药忘吃喽~/ 2023年09月29日 12:43/ 0 赞/ 52 阅读

相关如何提升工作效率？

要想提升效率，我觉得首先得解决以下四个问题，那就是「沟通、持续学习、情绪管理、学会拒绝」。 1.沟通我们先来看看沟通的定义：沟通是不同的行为主体，通过各种载体实现信息的双

淩亂°似流年/ 2022年12月14日 13:43/ 0 赞/ 302 阅读

相关前端开发常用免费资源，显著提升工作效率

Jatin Rao 原作，授权 New Frontend 翻译。最近几个月我收集了大量可以显著提升开发效率的资源链接，在这篇文章中我会分享其中一些。这些资源对我很有帮助，希

╰+哭是因爲堅強的太久メ/ 2022年12月10日 08:56/ 0 赞/ 160 阅读

相关效率提升———linux常用别名设置

`vim /etc/profile` alias lst='ls -l --time-style=long-iso -h' alias c='clear'

女爷i/ 2022年11月12日 09:56/ 0 赞/ 186 阅读

相关 Linux 常用 alias 配置，十倍提升工作效率

文章目录 Linux 常用 alias 配置，十倍提升工作效率相关阅读 1、目录操作 2、工具

拼搏现实的明天。/ 2022年10月14日 13:52/ 0 赞/ 218 阅读

相关用PDCAR法提升工作效率

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][] > 如何提高工作效率呢？一件事的成功，无非包含这个过

分手后的思念是犯贱/ 2022年01月14日 23:13/ 0 赞/ 305 阅读

相关免费前端开发常用网站

话不多说，直接进入主题：首先百度更百度翻译是必备的在开发的过程中遇到问题是避免不了的，如果不会就可以百度一下就算么有原封不动的答案，至少也有解决的思路： 1.[百度][L

╰+哭是因爲堅強的太久メ/ 2021年08月19日 17:59/ 0 赞/ 472 阅读