1.CodePen：

http://codepen.io/

網站(zhàn)裡有很多很酷的特效，而且可(kě)以看到效果的源代碼，也可(kě)以看到實現效果，是一個(gè)非常不錯的前端開發學習資(zī)源網站(zhàn)。

這個(gè)是CodePen網站(zhàn)裡的一個(gè)效果的源碼截圖，是不是很酷呀！

2.RunJS：

http://runjs.cn/

點擊廣場，則可(kě)以看到很多開發者分享的一些效果源碼，如(rú)果你(nǐ)想找資(zī)源，做項目，這個(gè)網站(zhàn)絕對是一個(gè)不錯的選擇。

3.BestCSSButtonGenerat：

http://www.bestcssbuttongenerator.com/

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

4.jsrun：

http://jsrun.net

這裡可(kě)以查看項目的源碼，裡面有很多人分享的一些特效，絕對是一個(gè)不錯的學習資(zī)源網站(zhàn)。

這個(gè)開發者将他自己的項目分享在裡面，可(kě)以查看效果，JS，HTML，CSS源碼。

5.CodePlayerh：

ttp://thecodeplayer.com/

這個(gè)網站(zhàn)裡的項目資(zī)源，不僅可(kě)以看源碼與項目效果，同時你(nǐ)還能看到開發者是如(rú)果将效果通(tōng)過一行一行的代碼敲定出來，個(gè)人覺得非常酷，不行，你(nǐ)可(kě)以去看看哦！web小二說話，從來不騙人。

6、實驗樓-web：

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

這裡也有很多前端的項目，裡面有詳細的實現步驟，你(nǐ)可(kě)以跟着項目一步一步的做，同時還可(kě)以将源碼下(xià)載下(xià)來學習，也是一個(gè)不錯的前端項目學習網站(zhàn)。

7、html5tricks：

http://www.html5tricks.com/

網站(zhàn)裡有很多前端實現的功能，可(kě)以在線查看效果，也可(kě)以下(xià)載源碼的，是一個(gè)不錯的學習資(zī)源網站(zhàn)。

8、Enjoy CSS：

http://enjoycss.com/

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

9、frontendrescue：

https://uptodate.frontendrescue.org/

此網站(zhàn)裡面分享了網絡上關(guān)于前端的各種資(zī)源、大牛等資(zī)源信息，是個(gè)不錯的學習網站(zhàn)。

10、Dribbble：

https://dribbble.com/

這是一個(gè)質量不錯的設計網站(zhàn)，也可(kě)以常去逛逛，對提高審美也有幫助，即使不學設計也可(kě)以進去看看

11、TutsPlus：

https://tutsplus.com/

TutsPlus是一個(gè)為Web開發人員與設計人員提供教程與技術(shù)文(wén)章為目的網站(zhàn)，技能和(hé)技巧，提高用戶設計和(hé)建立網站(zhàn)的能力。

12、CAN I USE：

http://caniuse.com/

CAN I USE，一個(gè)查詢浏覽器(qì)兼容性的網站(zhàn)。

13、JSHint：

http://jshint.com/

此站(zhàn)點是一個(gè)在線JS檢測工具，可(kě)以檢測JavaScript代碼中(zhōng)的錯誤和(hé)潛在問(wèn)題。

14、CSS-tricks：

https://css-tricks.com/

CSS-tricks是一個(gè)關(guān)于運用CSS技術(shù)進行網絡開發和(hé)設計的小技巧的交流網站(zhàn)，裡面有各類樣式問(wèn)題的解決方案以及深度思考。

15、TechCrunch：

https://techcrunch.com/

TechCrunch 是一個(gè)科技類博客網站(zhàn)，主要以報道新興互聯網公司、評論互聯網新産品、發布重大突發新聞為主要内容。

16、Webdesigner Depot：

http://www.webdesignerdepot.com/

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

希望能對大家的學習以及工作有所幫助

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