分享最全面，巨豐富前端開(kāi)發(fā)學(xué)習(xí)資源清單，讓你在前端編程的路上少走彎路，多一些實(shí)戰(zhàn)，少一點(diǎn)煩惱，多一點(diǎn)錢(qián)，少花點(diǎn)時(shí)間，多一個(gè)女朋友，少一份孤獨(dú)。

點(diǎn)擊上方“Web前端進(jìn)階指南”關(guān)注我呦

跟程序員小強(qiáng)一起學(xué)前端

引言

最近有些網(wǎng)友，也是做前端開(kāi)發(fā)的，就問(wèn)，作為前端開(kāi)發(fā)的，平時(shí)都看哪些網(wǎng)站關(guān)注最新學(xué)習(xí)信息？其實(shí)啊，尤其使我們做前端的，更需要掌握最新的技術(shù)，然后去學(xué)習(xí)并掌握應(yīng)用到我們的項(xiàng)目當(dāng)中，顯而易見(jiàn)的是，我們前端技術(shù)是最容易接觸到客戶(hù)的，也是跟客戶(hù)的眼睛打交道，我們無(wú)時(shí)無(wú)刻我在跟著社會(huì)走，跟著大眾的眼睛走，他們看到哪里，我們就要寫(xiě)到哪里，這就是所謂的用戶(hù)體驗(yàn)。

技術(shù)更新迭代非常迅速，想想Vue，在短短的時(shí)間里就已經(jīng)到3.0了，已經(jīng)掌握2.0的小伙伴們希望抓緊熟知Vue 3.0，還沒(méi)有掌握2.0的小伙伴們可就要加油啦。技術(shù)不等你啊，可想要豐厚的報(bào)酬就得掌握一手的技術(shù)啊。

好了，話(huà)不多說(shuō)，帶你們看看從哪些地方就可以掌握第一手的學(xué)習(xí)資料和資訊。

GitHub

首當(dāng)其沖就是它了，gitHub是一個(gè)面向開(kāi)源及私有軟件項(xiàng)目的托管平臺(tái)，除了git代碼倉(cāng)庫(kù)托管及基本的 Web管理界面以外，還提供了訂閱、討論組、文本渲染、在線(xiàn)文件編輯器、協(xié)作圖譜（報(bào)表）、代碼片段分享（Gist）等功能。目前，其注冊(cè)用戶(hù)已經(jīng)超過(guò)350萬(wàn)，托管版本數(shù)量也是非常之多，其中不乏知名開(kāi)源項(xiàng)目 Ruby on Rails、jQuery、Vue、python 等。

除此之外，你還可以每天打開(kāi)Github或email看有沒(méi)有watch項(xiàng)目的消息或者自己項(xiàng)目的issue，然后 Explore 看看社區(qū)內(nèi)項(xiàng)目的走勢(shì)，然后開(kāi)始按照TODO來(lái)學(xué)習(xí)，并開(kāi)始push,push 并不斷的在github檢查自己寫(xiě)的代碼，這樣真的能提高很快的。

你也可以關(guān)注下Github的blog, 看看有沒(méi)有新聞，偶爾看下Github的tip，有時(shí)候會(huì)一時(shí)興起去搜索下有意思的項(xiàng)目，看到有意思的人就會(huì)去他的博客看看，這樣就可以擴(kuò)展自己的技術(shù)，到晚上要睡覺(jué)之前會(huì)考慮是不是要寫(xiě)篇博客，打開(kāi)編輯器寫(xiě)好后push上去，這樣既能完成自媒體的工作，又讓你的技術(shù)更上一層樓，豈不美哉，哈哈哈。

github前端發(fā)布瀏覽排行榜

看看圖上這些前端大神，在GitHub上留下了多少自己的項(xiàng)目，還有那么多人瀏覽，難道你不想嗎？作為程序員，一定要在GitHub上留下自己的項(xiàng)目啊。

在這里給你們列出一些值得閱讀mark文章鏈接吧。一般人都看不到，都給你們，感覺(jué)被人。。。

1、github前端工程——基礎(chǔ)篇

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

2、這里收集了許多移動(dòng)端上遇到的各種坑與相對(duì)解決方案

https://github.com/RubyLouvre/mobileHack

3、各種大神的經(jīng)驗(yàn)技術(shù)分享

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

4、github前端發(fā)布瀏覽排行榜

http:///

5、優(yōu)質(zhì)的中文前端博客

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

博客園

這里是程序員的天堂，也是我們學(xué)習(xí)的好地方，眾多的代碼編程者在這里出發(fā)，總結(jié)自己的代碼經(jīng)驗(yàn)，在總結(jié)自己知識(shí)的同時(shí)，又能分享給別人，真正的代碼樂(lè)事，廣泛的應(yīng)用技術(shù)，豐富的交流經(jīng)驗(yàn)，好心腸的程序員，都會(huì)讓你從中受益，提升自己的編程水平。

像這樣的博客園還有很多，例如：CSDN、新浪博客，黑馬程序員，51CTOP、itpub博客，醉牛前端，知乎、簡(jiǎn)書(shū)、掘金、微信公眾號(hào)等等優(yōu)秀的團(tuán)隊(duì)博客，當(dāng)然還有我們的@今日頭條，這里面有大項(xiàng)目，超豐富的知識(shí)等你學(xué)習(xí)。

此外還有一些個(gè)人的博客，也是炒雞火爆的，當(dāng)然好多超級(jí)大神們也不更新了，我就不說(shuō)了：

1、阮一峰的網(wǎng)絡(luò)日志

http://www./blog/

2、廖雪峰的官方網(wǎng)站

https://www./

3、張?chǎng)涡?/p>

https://www./wordpress/

4、大前端

http://www./

網(wǎng)站

網(wǎng)站是我們學(xué)習(xí)的最基礎(chǔ)，最直接技術(shù)的資源，上面有各個(gè)技術(shù)的開(kāi)發(fā)文檔，案例，教程、如果說(shuō)那些博主分享他們的經(jīng)驗(yàn)，那這些網(wǎng)站就教我們?nèi)腴T(mén)，讓我們從基礎(chǔ)學(xué)起。

每出現(xiàn)一門(mén)新的技術(shù)，相應(yīng)的都會(huì)有自己的網(wǎng)站作為宣傳和教程，我們可以去他們官方網(wǎng)站進(jìn)行查看，除此之外，也有一些網(wǎng)站也會(huì)去分享學(xué)習(xí)最新的技術(shù)，例如：

1、W3C菜鳥(niǎo)教程

https://www.runoob.com/

2、WEB技術(shù)分享

https://www./

3、OSCHINA

https://www.oschina.net/

4、前端里

http://www./

5、segmentfault

https://segmentfault.com/

6、coursera

https://www./

7、PHP中文網(wǎng)站

https://www./

8、慕課網(wǎng)

https://www.imooc.com/

9、網(wǎng)易云課堂

https://study.163.com/

10、中國(guó)大學(xué)MOOC

https://www.icourse163.org/

11、極客學(xué)院/宅客學(xué)院

https://www./

12、bilibili

https://www.bilibili.com/

注：不包括各個(gè)技術(shù)的官方網(wǎng)站

插件庫(kù)

作為相當(dāng)資深的切圖仔，不得不感謝這么多年給我們提供插件的這些友友們啊，真的幫了不少的忙，省了不少的功夫，也裝了不該有的逼，在這里，確實(shí)要感謝一些他們啊，沒(méi)有他們，不知道剛工作的時(shí)候還能不能切圖。[哈哈][哈哈]

1、jquery插件庫(kù)

https://www./

2、swipe中文網(wǎng)

https://www./

4、bootstrap

https://www./

5、baguetteBox.js（響應(yīng)式的圖像 Lightbox 插件）

http://feimosi./baguetteBox.js/

6、popper.js（彈出層）

https://popper./

7、anime.js做動(dòng)畫(huà)效果

http://www./

8、animate.css

https://daneden./animate.css/

9、ECharts

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

10、chart.js中文網(wǎng)

http:///

11、perfect scrollbar（滾動(dòng)條插件）

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

12、Impress.js（旋轉(zhuǎn)）

https://impress./#/bored

13、fullPage（全屏gundomg）

http://fullpage./

14、zepto.fullpage（專(zhuān)注于移動(dòng)端的fullPage.js，依賴(lài)Zepto）

https://www./

15、turn.js （翻頁(yè)的效果）

http://www./

16、h5播放器

https://developer./jwplayer/docs

17、日期選擇框

http://www./

18、Foundation（多種Web上的UI組件）

https://www./foundation/

19、Fontello（圖標(biāo)字體生成器）

https://www./foundation/

20、Hover.css（鼠標(biāo) Hover 態(tài)的效果）

http://ianlunn./Hover/

21、NProgress.js（頁(yè)面加載時(shí)有更好的loading效果）

http:///nprogress/

22、favico.js（改變網(wǎng)頁(yè)圖標(biāo)）

http://lab./favico.js/

23、（提供React 和 Angular 組件實(shí)現(xiàn)）

https:///components/grid-cn/

等等，還有好多插件庫(kù)讓你選擇，根據(jù)自己時(shí)間開(kāi)發(fā)需求找找，不過(guò)自己也得會(huì)改動(dòng)哦

素材特效

上面的插件比較的系統(tǒng)，屬于那種封裝、輕量級(jí)的一種框架，運(yùn)氣來(lái)比較靈活，易維護(hù)，而下面這些網(wǎng)站上的素材是各個(gè)小伙伴們實(shí)打?qū)崒?xiě)的，沒(méi)有進(jìn)行封裝，是純粹的為了某一個(gè)特效而寫(xiě)的素材插件，也要感謝他們哦，我們來(lái)看看。

1、酷站代碼

http://www./

2、腳本之家

https://www.jb51.net/

3、懶人之家

https://www./

4、站長(zhǎng)素材

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

5、特效網(wǎng)

http://www./js/

6、懶人圖庫(kù)

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

7、17素材網(wǎng)

https://www./

8、51前端

http://www./

9、PHP中文網(wǎng)

https://www./xiazai/js

10、青島星網(wǎng)

http://www./jscode/

11、JS代碼

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

前端工具

工欲善其事必先利其器，找到一些有利于我們開(kāi)發(fā)的工具，那著實(shí)是一件美事啊，讓你的效率也大大提高的同時(shí)，也讓你在別的同事面前，大顯神威，“哇，你怎么弄的，這么快，這么好看”，記住，有工具你不用，你想干啥。

1、GitHub Desktop（私有軟件項(xiàng)目的托管平臺(tái)）

https://desktop.github.com/

2、FastStone Capture

https://faststone-capture.en./

3、溜云庫(kù)

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

4、程序員的工具箱

https:///

5、免費(fèi)的CDN加速器

https://www./

6、大前端

http://www./nav

7、在線(xiàn)APP原型工具

https://www./

8、Parcel（極速零配置Web應(yīng)用打包工具）

https://parcel/

9、Chrome擴(kuò)展程序

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

10、Superpreview（跨瀏覽器測(cè)試工具）

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

總結(jié)

以上的這些前端資源也是在平時(shí)開(kāi)發(fā)中常用到的，如有不足之處，多多指教。

如果還有您想了解，卻不知道的資源，咨詢(xún)我，我?guī)湍摇?/p>

如果還您有知道，我不知道的，也請(qǐng)您告知。

想了解更多的前端技術(shù)，關(guān)注我，持續(xù)為您輸出干貨，謝謝！

正在準(zhǔn)備輸出JavaScript