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 代码
图标
- 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 检测某个网站使用的技术栈
