前言
有时候，提高效率的办法，比如收藏一些好用的网站。这么多年下来，收藏夹里面躺着一些好用的网站，来掘金的时候，收获了很多知识，这时候准备回馈点东西给你们。
如果部分国外网站访问不了的，请自行解决。
开发工具
平时学习前端时用到的一些辅助工具类网站
| 网址 | 说明 |
|---|---|
| https://www.typora.io | 个人最喜欢的Markdown写作工具，所见即所得。 |
| https://mdnice.com | 使markdown语法更加美观。 |
| unbug.github.io/codelf | 变量命名推荐（支持中文）。 |
| https://www.docschina.org | 印记中文。 |
| https://github.com/any86/any-rule | 正则表达式库，非常全，使用起来很方便。 |
| xuanfengge.com/easeing/cea… | css动画缓动函数预览及生成。 |
| www.toptal.com/developers | 多张图片合成雪碧图，并生成对应css。 |
| tool.lu | 整合常用的工具，包括正则表达式，进制转换等。 |
| www.bootcdn.cn 或 cdn.baomitu.com | 国内的CDN库，速度快。 |
| www.gitignore.io | 根据选择会去生成.gitignore文件。 |
https://github.com/any86/any-rule 正则表达式
使用起来很方便，如果你使用Vscode开发的话，去插件商店搜索any-rule，非常便利。
unbug.github.io/codelf 还在为命名而烦恼吗？它就能帮你解决，变量推荐的网站。
比如多张图片生成雪碧图，还有国内的CDN库，赶紧去试一试吧。
HTML CSS JS
常见的CSS动画库，炫酷的组件，各种好看UI组件，各种样式及动画在线生成。
| 网站 | 说明 |
|---|---|
| htmlarrows | 提供HMTL的特殊符号，只有你想不到的 |
| cssdeck | 在线CSS前端代码Demo样式效果 |
| codepen | 前端炫酷样式效果，各种loading效果，在线编程，Vue组件也特别多 |
| Animista | 前端炫酷样式技能效果,各种各样的动画效果，提供在线的CSS代码 |
| cubic-bezier | CSS3贝塞尔曲线在线调试工具 |
| three.js | JavaScript编辑3D模型，各种各样炫酷的效果以及Documentation值得你去了解 |
| View UI | 一套基于 Vue.js 的高质量 UI 组件库 |
| Snapsvg | SVG动效的JS库,各种炫酷的效果。 |
| Cool Backgrounds | 超酷的背景图片，渐变的色彩的图片背景都有，看起来很酷。 |
上面的网站，我们就选两个介绍一下。
codepen
一个在线编程的网站，不止如此，还能给你提供非常丰富的组件，炫酷的动画也会给你思想上很大的冲击力。
有时候，你想要的Vue组件上面说不定都有，比如你需要好看的loading UI的话，codepen都能给你一定的帮助。
Animista
我们直接看看这个网站可以减少我们哪些工作量吧。
有时候，你需要一个炫酷的入场动画，或者是炫酷的出场动画，这个网站就可以帮助你，直接给你生成相应的代码，减少了你的工作量。
编程题库
通过刷题和编程训练来提升编程思想
对于非Acmer而言，通过这个两个网站刷题来提高编程思想就好啦
剑指offer
我们拿这个剑指offer来说，里面的题目质量都是很高的，通过此网站的刷题，会让你的编程思想更有所提高，也帮助你早日拿大厂Offer🚀
上面的分类会有相应的题目练习，通过分类标签刷题，这样子效率会更高些。
检查测试
检测Web前端兼容性或者是网站性能测试
| 网址 | 说明 |
|---|---|
| Can I use | 正如网站一样，我这个属性能在哪些浏览器兼容，一查便知。 |
| Browser Sandbox | 各大平台浏览器兼容性在线测试 |
| GTmetrix | 网站在线性能测试分析、优化建议 |
| HttpWatch | 一款强大的网页HTTP数据分析软件 |
| PageSpeed | Google在线性能测试网站、优化建议 |
| validator | W3C的HTML有效性验证 |
| css-validator | W3C的CSS有效性验证 |
Can I Use
非常好用的网站，有时候，你不知道一个属性的兼容性，一查便知🚀
PageSpeed
这个网站可以帮你检测性能，给你提出一些优化建议，对于有个人博客的掘金小伙伴来说，很不错。
至于其他的网站，自行去探索一下。
视频教程
技术分享和教程视频。
| 网址 | 说明 |
|---|---|
| free-programming-books | 这个就不多说了，强烈推荐过的，免费的计算机编程类书籍，很多很全，不过都是英文的，有英语阅读习惯的人强烈推荐给你们。 |
| 可汗学院 | 可汗学院是一种新型的教育方式，甚至颠覆了美国的教育方式，简单地说，就是世界上最牛的老师，给全世界想学习的人，创造的一个百科全书式的、全免费和网上智能跟踪的视频学习平台 |
| IT大咖说 | 国内技术大会分享录像为主。 |
| 慕课 | 国内网站，免费课挺多，实战课付费，按课付费，价格偏贵。（其他如腾讯课堂，网易云课堂等都差不多一个路数） |
| Udacity | Udacity 中文名叫做「优达学城」，是一个免费的自学编程的网站，不过目前也有一些收费课程。 |
当然了，这里有中文版的，地址：free-programming-books-zh_CN.
GitHub上面154k,中文版的也有68k+,非常好的学习资源。
有些人喜欢看视频，觉得这样子更加清楚直观，所以很多人都更喜欢看视频，尤其是刚入门的时候。网上现在也有很多培训机构的课程视频，能找到了也可以看一看，但是进阶时建议多看些国外视频，拓宽下视野，顺便练下英语能力。
上面大部分网站的视频还是付费的，如果想看免费的视频其实可以看youtube，上面技术分享的视频也非常多，重点是都是免费的。
下面推荐几个youtube的技术账号，可以关注一下。
问答论坛
开发中遇到问题，去这些地方就对了。
| 网站 | 说明 |
|---|---|
| 知乎 | 没什么说的，有了知乎应该没有人会再去用百度知道那垃圾东西了吧。 |
| Segmentfault | 更专注技术问题。 |
| Stack Overflow | Segmentfault的外国原版，非常强大。 |
| cnodejs | node社区 |
| react-china | react社区 |
| 掘金 | 掘金是一个高质量产出的地方，当然了，很多的问题在这里也是可以寻求帮助并解决的。 |
开源框架和库的问题，去github上找到项目查询issue通常都能找到解决方案。
生成漂亮的代码图片
想要好看的代码片段怎么办，当然有办法了，上面三个网站都是不错的选择，我们来看其中的一个效果吧。
图库素材
对于图片的需求，日常肯定也是必不可少的，所以选中了其中几个高质量的。
高质量免费版权的图库素材 这个网站的素材也不错的
其他的素材网站也非常的不错，这里就不举例子了。
压缩工具
基本上图片，gif压缩这个网站都可以解决的，免费使用，效果也不错。
设计规范
有时候，移动开发的话，会遇到许多涉及规范的问题，这个时候应该怎么办呢？可以通过上面的网站，去查找相应的设计规范，我们举个例子。
其他的网站查询设计标准也是不错的，有兴趣的话，可以去折腾一下。
免费字体设计
这个网站字体不错，我找了好久，都特别美观，而且都是免费下载的🤭
icon图标
上面的图标库，绝对可以满足你日常开发的要求，这里就展示一下阿里图标库吧。
免费好用的PDF在线工具
有了它，日常的学习开发遇到PDF都不带怂一下的。
颜色搭配
- 中科院色谱的中国传统色
- 在线快速配色生成工具
- 每天更新一组简洁舒服的配色方案
- MaterialDesign强大的在线配色
- 通过网址获取分析网站配色
- 炫酷多边形背景色块生成
- 色彩搜索引擎
- 流行的网格渐变背景免费下载
- 上传并匹配提取图片风格的颜色
有时候， 你想搭配一套好看的配色怎么办呢？上面这些网站就可以解决你的大部分的问题。
你看看正如这个中科院色谱的中国传统色名字一样，里面的配色很好看，而且很容易获取到。
我们看看下面的配色网站：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4waNmULn-1600859110826)(…\images\常用学习网站\每日一组配色网站.gif)]
也不知道为什么看了上面的配色，顿时赶紧自己又行了🤭
在线绘图
有没有思维导图绘制工具推荐，当然有了，上面三个工具就可以解决这个问题，不需要下载，在线编辑就行。
第三个思维导图绘制在线工具也不错，可以推荐给你们。
稳定免费图床
免费的图床难道不香吗，而且操作起来简单。
文件传输-网盘工具
有时候，想传文件怎么办呢，这时推荐给你们两个好用免费的网盘工具，免费速度快，操作简单。
设计素材
❤️ 感谢大家
如果你觉得这篇内容对你挺有有帮助的话：
-
点赞支持下吧，让更多的人也能看到这篇内容（收藏不点赞，都是耍流氓 -_-）
-
整理一些网站，可能会遗漏一些网站，如果有更大其他优秀的学习网站的话，可以评论分享出来，最后也希望这些网站可以给大家带来帮助。
-
觉得不错的话，也可以看看往期文章：
扫一扫
2959
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
