1.CodePen：

http://codepen.io/

網站裏有很多很酷的(de)特效，而(ér)且可以(yǐ)看到(dào)效果的(de)源代碼，也(yě)可以(yǐ)看到(dào)實現效果，是(shì)一個(gè)非常不(bù)錯的(de)前端開發學習資源網站。

這(zhè)個(gè)是(shì)CodePen網站裏的(de)一個(gè)效果的(de)源碼截圖，是(shì)不(bù)是(shì)很酷呀！

2.RunJS：

http://runjs.cn/

點擊廣場，則可以(yǐ)看到(dào)很多開發者分享的(de)一些效果源碼，如果你想找資源，做項目，這(zhè)個(gè)網站絕對是(shì)一個(gè)不(bù)錯的(de)選擇。

3.BestCSSButtonGenerat：

http://www.bestcssbuttongenerator.com/

這(zhè)個(gè)網站主要(yào / yāo)提供各種按鈕的(de)CSS代碼，你可以(yǐ)從預設的(de)按鈕中選擇并使用模闆用于(yú)自己的(de)設計，還可以(yǐ)查看源代碼，非常适合學習。

4.jsrun：

http://jsrun.net

這(zhè)裏可以(yǐ)查看項目的(de)源碼，裏面有很多人(rén)分享的(de)一些特效，絕對是(shì)一個(gè)不(bù)錯的(de)學習資源網站。

這(zhè)個(gè)開發者将他(tā)自己的(de)項目分享在(zài)裏面，可以(yǐ)查看效果，JS，HTML，CSS源碼。

5.CodePlayerh：

ttp://thecodeplayer.com/

這(zhè)個(gè)網站裏的(de)項目資源，不(bù)僅可以(yǐ)看源碼與項目效果，同時(shí)你還能看到(dào)開發者是(shì)如果将效果通過一行一行的(de)代碼敲定出(chū)來(lái)，個(gè)人(rén)覺得非常酷，不(bù)行，你可以(yǐ)去看看哦！web小二說(shuō)話，從來(lái)不(bù)騙人(rén)。

6、實驗樓-web：

https://www.shiyanlou.com/courses/

這(zhè)裏也(yě)有很多前端的(de)項目，裏面有詳細的(de)實現步驟，你可以(yǐ)跟着項目一步一步的(de)做，同時(shí)還可以(yǐ)将源碼下載下來(lái)學習，也(yě)是(shì)一個(gè)不(bù)錯的(de)前端項目學習網站。

7、html5tricks：

http://www.html5tricks.com/

網站裏有很多前端實現的(de)功能，可以(yǐ)在(zài)線查看效果，也(yě)可以(yǐ)下載源碼的(de)，是(shì)一個(gè)不(bù)錯的(de)學習資源網站。

8、Enjoy CSS：

http://enjoycss.com/

此網站是(shì)一個(gè)完整的(de)代碼生成器，可以(yǐ)自定義輸入域或CSS3按鈕，同樣可以(yǐ)查看源代碼，适合學習。

9、frontendrescue：

https://uptodate.frontendrescue.org/

此網站裏面分享了(le／liǎo)網絡上(shàng)關于(yú)前端的(de)各種資源、大(dà)牛等資源信息，是(shì)個(gè)不(bù)錯的(de)學習網站。

10、Dribbble：

https://dribbble.com/

這(zhè)是(shì)一個(gè)質量不(bù)錯的(de)設計網站，也(yě)可以(yǐ)常去逛逛，對提高審美也(yě)有幫助，即使不(bù)學設計也(yě)可以(yǐ)進去看看

11、TutsPlus：

https://tutsplus.com/

TutsPlus是(shì)一個(gè)爲(wéi / wèi)Web開發人(rén)員與設計人(rén)員提供教程與技術文章爲(wéi / wèi)目的(de)網站，技能和(hé / huò)技巧，提高用戶設計和(hé / huò)建立網站的(de)能力。

12、CAN I USE：

http://caniuse.com/

CAN I USE，一個(gè)查詢浏覽器兼容性的(de)網站。

13、JSHint：

http://jshint.com/

此站點是(shì)一個(gè)在(zài)線JS檢測工具，可以(yǐ)檢測JavaScript代碼中的(de)錯誤和(hé / huò)潛在(zài)問題。

14、CSS-tricks：

https://css-tricks.com/

CSS-tricks是(shì)一個(gè)關于(yú)運用CSS技術進行網絡開發和(hé / huò)設計的(de)小技巧的(de)交流網站，裏面有各類樣式問題的(de)解決方案以(yǐ)及深度思考。

15、TechCrunch：

https://techcrunch.com/

TechCrunch 是(shì)一個(gè)科技類博客網站，主要(yào / yāo)以(yǐ)報道(dào)新興互聯網公司、評論互聯網新産品、發布重大(dà)突發新聞爲(wéi / wèi)主要(yào / yāo)内容。

16、Webdesigner Depot：

http://www.webdesignerdepot.com/

這(zhè)是(shì)一個(gè)網頁設計資源網站，網頁設計師必備站點，涵蓋大(dà)量教程、工具、素材等資源，是(shì)一個(gè)必去的(de)網站。

希望能對大(dà)家的(de)學習以(yǐ)及工作有所幫助

這(zhè)裏推薦一下我的(de)前端學習交流群：751196913，裏面都是(shì)學習前端的(de)從最基礎的(de)HTML+CSS+JS【炫酷特效，遊戲，插件封裝，設計模式】到(dào)移動端HTML5的(de)項目實戰的(de)學習資料都有整理，送給每一位前端小夥伴。2019最新技術，與企業需求同步。好友都在(zài)裏面學習交流，每天都會有大(dà)牛定時(shí)講解前端技術!