前端学习与工作中常用网站推荐

一.视频学习/刷面试题网站

1.慕课网（质量好，价格较贵，更专业，废话少）

2.腾讯课堂 （质量参差不齐，价格便宜，较啰嗦）

3.牛客网 （刷刷各大企业的面试题）

4.LeetCode （刷算法题）

......

二.前端免费模板下载

1.html5tricks

有很多有趣的小程序

2.源码之家 

各类模板灰常之多，不过也有很多广告

3.代码家园

整个网站看起来舒服，广告很少

4.模板之家

广告较多

5.魔客吧

有些要money

6.站长之家

7.404页面模板

8.vue相关UI库，开发框架，应用实例等等（非常多）

9.17素材网（需要积分...F12...ctrl+s）

10.51个css时间轴

11.ImageHover（纯 css 实现）

近百种图片 hover 效果，非常 nice！

......

三.图片图标logo素材

1.标志在线

免费设计logo

2.阿里巴巴矢量图标

图标特别多，而且基本上都是免费的

3.iconmonstr

免费图标下载

4.懒人图库

素材很多，不知道要不要钱

5.loading.io

看名字就知道是下什么的了吧

6.preloaders

进度条下载，有些要钱还是dollar，不过也有很多免费的

......

四.其他

1.JS格式化

如果你的编辑器不支持格式化js代码的话可以试试

2.css代码兼容

css代码复制上去，自动会帮你生成兼容的css代码，是不是很厉害！不过兼容IE几我也不太清楚，你们自己去看看吧

查询css代码兼容性：网站

3.配色

这是给你网站配色的，有兴趣的可以了解下

4.html、css、js压缩，js多文件合并

es6代码需先转es5再压缩，当然，也可以使用fis3构建压缩html，css，js；fis3还可以将图片转成webp格式（ios有兼容问题）

5.图片压缩

基本上是无损压缩，效果很不错

6.图片转换

转webp格式图片

7.雪碧图 （似乎访问不了了）

选中雪碧图中的图片，自动生成css代码。如：background: url('imgs/example.png') no-repeat -433px -51px;width: 33px;height: 33px;

8.html在线编辑工具

可以在线运行html代码

9.rgb,rgba,十六进制等颜色相互转换

10.HTML特殊字符编码对照表

11.改图宝

修改图片尺寸，生成二维码，生成印章，图片加水印...

12.Easy-mock

做数据mock的

13.查询css/js兼容性的网站

14.思维导图

在线版可以选择：Processon，桌面版可以选择：xmind

15.Sass转CSS

在线转换网站：SassMeister | The Sass Playground!

16.BootCDN

稳定、快速、免费的前端开源项目 CDN 加速服务.

国外的CDN：cdnjs

17.generate-avatar

自动生成头像的 TS 插件，效果类似 github 用户头像。只要输入一个字符串就能生成一个唯一的头像，因此，就不必要将用户的头像保存在数据库中了，用户头像根据用户的唯一 id 进行生成展示。

在线预览：https://generate-avatar.now.sh/

18.CSS3 剪贴路径（Clip-path）在线生成器​​​​​​​

......

大佬的个人网站：

行业前沿，技术大拿：张鑫旭个人网站、阮一峰个人网站

很多免费技术视频和博文：技术胖个人网站

前端必读书籍推荐：前端开发值得一读的书籍有哪些？_前端es6书籍推荐-CSDN博客