[实用]推荐一些非常棒的前端网站

戒网号

前言

有时候，提高效率的办法有很多，比如收藏一些好用的网站。这么多年下来，收藏夹里面躺着一些好用的网站，来掘金的时候，收获了很多知识，这时候准备回馈点东西给你们。
如果部分国外网站访问不了的，请自行解决！！！
开发工具

平时学习前端时用到的一些辅助工具类网站

网址	说明
https://www.typora.io/	个人最喜欢的Markdown写作工具，所见即所得。
https://mdnice.com	使markdown语法更加美观
https://unbug.github.io/codelf/	变量命名推荐（支持中文）。
https://www.docschina.org	印记中文。
https://github.com/any86/any-rule	正则表达式库，非常全，使用起来很方便。
http://xuanfengge.com/easeing/ceaser/	css动画缓动函数预览及生成。
https://www.toptal.com/developers/css/sprite-generator	多张图片合成雪碧图，并生成对应css。
https://tool.lu/	整合常用的工具，包括正则表达式，进制转换等。
http://www.bootcdn.cn 或 ttps://http://cdn.baomitu.com/	国内的CDN库，速度快。
http://www.gitignore.io	根据选择会去生成.gitignore文件。

unbug.github.io/codelf 还在为命名而烦恼吗？它就能帮你解决，变量推荐的网站。


<hr/>HTML CSS JS

常见的CSS动画库，炫酷的组件，各种好看UI组件，各种样式及动画在线生成。

网站	说明
https://www.toptal.com/designers/htmlarrows/	提供HMTL的特殊符号，只有你想不到的
http://cssdeck.com/	在线CSS前端代码Demo样式效果
https://codepen.io/	前端炫酷样式效果，各种loading效果，在线编程，Vue组件也特别多
https://animista.net/	前端炫酷样式技能效果,各种各样的动画效果，提供在线的CSS代码
https://cubic-bezier.com/#.17,.67,.89,.22	CSS3贝塞尔曲线在线调试工具
https://threejs.org/	JavaScript编辑3D模型，各种各样炫酷的效果以及Documentation值得你去了解
https://www.iviewui.com/	一套基于 Vue.js 的高质量 UI 组件库
http://snapsvg.io/	SVG动效的JS库,各种炫酷的效果。
https://coolbackgrounds.io/	超酷的背景图片，渐变的色彩的图片背景都有，看起来很酷。

上面的网站，我们就选两个介绍一下。
codepen
前端炫酷样式效果，各种loading效果，在线编程
一个在线编程的网站，不止如此，还能给你提供非常丰富的组件，炫酷的动画也会给你思想上很大的冲击力


Animista
前端炫酷样式技能效果,各种各样的动画效果，提供在线的CSS代码
我们直接看看这个网站可以减少我们哪些工作量吧。


有时候，你需要一个炫酷的入场动画，或者是炫酷的出场动画，这个网站就可以帮助你，直接给你生成相应的代码，减少了你的工作量
<hr/>编程题库

通过刷题和编程训练来提升编程思想

• leetcode中文版
  
• 剑指offer
  
• Codewars
  

对于非Acmer而言，通过这个两个网站刷题来提高编程思想就好啦
剑指offer
我们拿这个剑指offer来说，里面的题目质量都是很高的，通过此网站的刷题，会让你的编程思想更有所提高，也帮助你早日拿大厂Offer


<hr/>检查测试

检测Web前端兼容性或者是网站性能测试

网址	说明
https://caniuse.com/	正如网站一样，我这个属性能在哪些浏览器兼容，一查便知。
https://turbo.net/browsers	各大平台浏览器兼容性在线测试
https://gtmetrix.com/	网站在线性能测试分析、优化建议
https://www.httpwatch.com/	一款强大的网页HTTP数据分析软件
http://developers.google.com/speed/pagespeed/insights/	Google在线性能测试网站、优化建议
http://validator.w3.org/	W3C的HTML有效性验证
http://jigsaw.w3.org/css-validator/	W3C的CSS有效性验证

Can I Use
非常好用的网站，有时候，你不知道一个属性的兼容性，一查便知


<hr/>图库素材

• 高质量免费版权的图库素材
  
• 免费高清灵感图片
  
• 免费高清摄影图库
  
• 高清壁纸图片分享网站
  

对于图片的需求，日常肯定也是必不可少的，所以选中了其中几个高质量的。
高质量免费版权的图库素材 这个网站的素材也不错的
其他的素材网站也非常的不错，这里就不举例子了。
<hr/>压缩工具

• docsmall.com
  
• img.top
  
• 图片压缩squoosh
  

基本上图片，gif压缩这个网站都可以解决的，免费使用，效果也不错
<hr/>设计规范

• iPhone各设备屏幕尺寸
  
• 移动屏幕尺寸设计规范
  
• 微信官方小程序UI样式库
  
• 各大尺寸设备响应式屏幕效果显示
  

有时候，移动开发的话，会遇到许多涉及规范的问题，这个时候应该怎么办呢？可以通过上面的网站，去查找相应的设计规范，我们举个例子。
移动屏幕尺寸设计规范


其他的网站查询设计标准也是不错的，有兴趣的话，可以去折腾一下
<hr/>icon图标

• 阿里图标库
  
• 草莓图标库
  
• 免费商用高质量图标素材
  
• Flation-海量扁平化标准图标库
  
• 精美简洁icon
  
• easyicon-图标库
  
• 系统平台风格和web图标库
  
• 完全可定制和使用的矢量图标库
  

上面的图标库，绝对可以满足你日常开发的要求，这里就展示一下阿里图标库吧。


笔者最常用~~
<hr/>抠图神器

• removebg
  
• 在线ps-uupoop
  

有时候老板给你一张图，要你去切图，你没有PS工具怎么办，不怂，我们有这个网站，直接解决我们日常学习开发遇到的困难，切图仔我也会。


持续更新中！！

如果你觉得这篇内容对你挺有有帮助的话：

• 点赞支持下吧，让更多的人也能看到这篇内容（收藏不点赞，都是耍流氓 -_-）
  
• 整理一些网站，可能会遗漏一些网站，如果有更加其他优秀的学习网站的话，可以评论分享出来，最后也希望这些网站可以给大家带来帮助。
  

承諾只為實現

为啥一条评论都没有

倪丹

为啥一条评论都没有

紫翩逝舞

额，笔者我也不知道呀
[哈哈]

灵猫

我是一个个点开然后进去体验的，都挺高效，感谢作者
[干杯]

路遥马力

哈哈感谢支持
[干杯]

张良友

非常棒！

花不丸

[赞]

午后南边飘来了一朵云

codelf失效了么。输入中文后一直不跳转

星辰日月

前端｜面试进阶之道 ===> 如何精通面试,获取前端面试资源,吊打大厂面试官,通过面试题查缺补漏,秋招、社招一战成名。免费开源前端｜面试进阶之道，快来学习，会更新各大厂的面试真经和答案，每个面试题从源码角度和可调试、尝试角度出发，祝你成功！===> 前端｜面试进阶之道