分享最全面，巨丰富前端开发学习资源清单，让你在前端编程的路上少走弯路，多一些实战，少一点烦恼，多一点钱，少花点时间，多一个女朋友，少一份孤独。

点击上方“Web前端进阶指南”关注我呦

跟程序员小强一起学前端

引言

最近有些网友，也是做前端开发的，就问，作为前端开发的，平时都看哪些网站关注最新学习信息？其实啊，尤其使我们做前端的，更需要掌握最新的技术，然后去学习并掌握应用到我们的项目当中，显而易见的是，我们前端技术是最容易接触到客户的，也是跟客户的眼睛打交道，我们无时无刻我在跟着社会走，跟着大众的眼睛走，他们看到哪里，我们就要写到哪里，这就是所谓的用户体验。

技术更新迭代非常迅速，想想Vue，在短短的时间里就已经到3.0了，已经掌握2.0的小伙伴们希望抓紧熟知Vue 3.0，还没有掌握2.0的小伙伴们可就要加油啦。技术不等你啊，可想要丰厚的报酬就得掌握一手的技术啊。

好了，话不多说，带你们看看从哪些地方就可以掌握第一手的学习资料和资讯。

GitHub

首当其冲就是它了，gitHub是一个面向开源及私有软件项目的托管平台，除了git代码仓库托管及基本的 Web管理界面以外，还提供了订阅、讨论组、文本渲染、在线文件编辑器、协作图谱（报表）、代码片段分享（Gist）等功能。目前，其注册用户已经超过350万，托管版本数量也是非常之多，其中不乏知名开源项目 Ruby on Rails、jQuery、Vue、python 等。

除此之外，你还可以每天打开Github或email看有没有watch项目的消息或者自己项目的issue，然后 Explore 看看社区内项目的走势，然后开始按照TODO来学习，并开始push,push 并不断的在github检查自己写的代码，这样真的能提高很快的。

你也可以关注下Github的blog, 看看有没有新闻，偶尔看下Github的tip，有时候会一时兴起去搜索下有意思的项目，看到有意思的人就会去他的博客看看，这样就可以扩展自己的技术，到晚上要睡觉之前会考虑是不是要写篇博客，打开编辑器写好后push上去，这样既能完成自媒体的工作，又让你的技术更上一层楼，岂不美哉，哈哈哈。

看看图上这些前端大神，在GitHub上留下了多少自己的项目，还有那么多人浏览，难道你不想吗？作为程序员，一定要在GitHub上留下自己的项目啊。

在这里给你们列出一些值得阅读mark文章链接吧。一般人都看不到，都给你们，感觉被人。。。

1、github前端工程——基础篇

https://github.com/fouber/blog/issues/10

2、这里收集了许多移动端上遇到的各种坑与相对解决方案

https://github.com/RubyLouvre/mobileHack

3、各种大神的经验技术分享

https://github.com/DDFE/DDFE-blog

4、github前端发布浏览排行榜

http://githubrank.com/

5、优质的中文前端博客

https://github.com/FrankFang/best-chinese-front-end-blogs

博客园

这里是程序员的天堂，也是我们学习的好地方，众多的代码编程者在这里出发，总结自己的代码经验，在总结自己知识的同时，又能分享给别人，真正的代码乐事，广泛的应用技术，丰富的交流经验，好心肠的程序员，都会让你从中受益，提升自己的编程水平。

像这样的博客园还有很多，例如：CSDN、新浪博客，黑马程序员，51CTOP、itpub博客，醉牛前端，知乎、简书、掘金、微信公众号等等优秀的团队博客，当然还有我们的@今日头条，这里面有大项目，超丰富的知识等你学习。

此外还有一些个人的博客，也是炒鸡火爆的，当然好多超级大神们也不更新了，我就不说了：

1、阮一峰的网络日志

http://www.ruanyifeng.com/blog/

2、廖雪峰的官方网站

https://www.liaoxuefeng.com/

3、张鑫旭

https://www.zhangxinxu.com/wordpress/

4、大前端

http://www.daqianduan.com/

网站

网站是我们学习的最基础，最直接技术的资源，上面有各个技术的开发文档，案例，教程、如果说那些博主分享他们的经验，那这些网站就教我们入门，让我们从基础学起。

每出现一门新的技术，相应的都会有自己的网站作为宣传和教程，我们可以去他们官方网站进行查看，除此之外，也有一些网站也会去分享学习最新的技术，例如：

1、W3C菜鸟教程

https://www.runoob.com/

2、WEB技术分享

https://www.helloweba.net/

3、OSCHINA

https://www.oschina.net/

4、前端里

http://www.yyyweb.com/

5、segmentfault

https://segmentfault.com/

6、coursera

https://www.coursera.org/

7、PHP中文网站

https://www.php.cn/

8、慕课网

https://www.imooc.com/

9、网易云课堂

https://study.163.com/

10、中国大学MOOC

https://www.icourse163.org/

11、极客学院/宅客学院

https://www.jikexueyuan.com/

12、bilibili

https://www.bilibili.com/

注：不包括各个技术的官方网站

插件库

作为相当资深的切图仔，不得不感谢这么多年给我们提供插件的这些友友们啊，真的帮了不少的忙，省了不少的功夫，也装了不该有的逼，在这里，确实要感谢一些他们啊，没有他们，不知道刚工作的时候还能不能切图。[哈哈][哈哈]

1、jquery插件库

https://www.jq22.com/

2、swipe中文网

https://www.swiper.com.cn/

4、bootstrap

https://www.bootcss.com/

5、baguetteBox.js（响应式的图像 Lightbox 插件）

http://feimosi.github.io/baguetteBox.js/

6、popper.js（弹出层）

https://popper.js.org/

7、anime.js做动画效果

http://www.animejs.cc/

8、animate.css

https://daneden.github.io/animate.css/

9、ECharts

https://www.echartsjs.com/zh/index.html

10、chart.js中文网

http://chartjs.cn/

11、perfect scrollbar（滚动条插件）

https://github.com/mdbootstrap/perfect-scrollbar

12、Impress.js（旋转）

https://impress.js.org/#/bored

13、fullPage（全屏gundomg）

http://fullpage.81hu.com/

14、zepto.fullpage（专注于移动端的fullPage.js，依赖Zepto）

https://www.findbestopensource.com/

15、turn.js （翻页的效果）

http://www.turnjs.com/

16、h5播放器

https://developer.jwplayer.com/jwplayer/docs

17、日期选择框

http://www.miniui.com/

18、Foundation（多种Web上的UI组件）

https://www.apache.org/foundation/

19、Fontello（图标字体生成器）

https://www.apache.org/foundation/

20、Hover.css（鼠标 Hover 态的效果）

http://ianlunn.github.io/Hover/

21、NProgress.js（页面加载时有更好的loading效果）

http://ricostacruz.com/nprogress/

22、favico.js（改变网页图标）

http://lab.ejci.net/favico.js/

23、ant.design（提供React 和 Angular 组件实现）

https://ant.design/components/grid-cn/

等等，还有好多插件库让你选择，根据自己时间开发需求找找，不过自己也得会改动哦

素材特效

上面的插件比较的系统，属于那种封装、轻量级的一种框架，运气来比较灵活，易维护，而下面这些网站上的素材是各个小伙伴们实打实写的，没有进行封装，是纯粹的为了某一个特效而写的素材插件，也要感谢他们哦，我们来看看。

1、酷站代码

http://www.5icool.org/

2、脚本之家

https://www.jb51.net/

3、懒人之家

https://www.lanrenzhijia.com/

4、站长素材

http://sc.chinaz.com/jiaoben/

5、特效网

http://www.zhaotexiao.com/js/

6、懒人图库

http://www.lanrentuku.com/js/

7、17素材网

https://www.17sucai.com/

8、51前端

http://www.51qianduan.com/

9、PHP中文网

https://www.php.cn/xiazai/js

10、青岛星网

http://www.qdxw.net/jscode/

11、JS代码

https://www.jsdaima.com/js-128.html

前端工具

工欲善其事必先利其器，找到一些有利于我们开发的工具，那着实是一件美事啊，让你的效率也大大提高的同时，也让你在别的同事面前，大显神威，“哇，你怎么弄的，这么快，这么好看”，记住，有工具你不用，你想干啥。

1、GitHub Desktop（私有软件项目的托管平台）

https://desktop.github.com/

2、FastStone Capture

https://faststone-capture.en.softonic.com/

3、溜云库

https://www.3d66.com/ku/

4、程序员的工具箱

https://tool.lu/

5、免费的CDN加速器

https://www.bootcdn.cn/

6、大前端

http://www.daqianduan.com/nav

7、在线APP原型工具

https://www.xiaopiu.com/

8、Parcel（极速零配置Web应用打包工具）

https://parceljs.org/

9、Chrome扩展程序

https://chrome.google.com/webstore/category/extensions?hl=zh-CN

10、Superpreview（跨浏览器测试工具）

https://www.microsoft.com/en-us/download/details.aspx?id=2020

总结

以上的这些前端资源也是在平时开发中常用到的，如有不足之处，多多指教。

如果还有您想了解，却不知道的资源，咨询我，我帮您找。

如果还您有知道，我不知道的，也请您告知。

想了解更多的前端技术，关注我，持续为您输出干货，谢谢！

正在准备输出JavaScript