1.CodePen：

http://codepen.io/

網(wǎng)站里有很多很酷的特效，而且可以看到效果的源代碼，也可以看到實(shí)現(xiàn)效果，是一個(gè)非常不錯(cuò)的前端開發(fā)學(xué)習(xí)資源網(wǎng)站。

這個(gè)是CodePen網(wǎng)站里的一個(gè)效果的源碼截圖，是不是很酷呀！

2.RunJS：

http://runjs.cn/

點(diǎn)擊廣場，則可以看到很多開發(fā)者分享的一些效果源碼，如果你想找資源，做項(xiàng)目，這個(gè)網(wǎng)站絕對是一個(gè)不錯(cuò)的選擇。

3.BestCSSButtonGenerat：

http://www.bestcssbuttongenerator.com/

這個(gè)網(wǎng)站主要提供各種按鈕的CSS代碼，你可以從預(yù)設(shè)的按鈕中選擇并使用模板用于自己的設(shè)計(jì)，還可以查看源代碼，非常適合學(xué)習(xí)。

4.jsrun：

http://jsrun.net

這里可以查看項(xiàng)目的源碼，里面有很多人分享的一些特效，絕對是一個(gè)不錯(cuò)的學(xué)習(xí)資源網(wǎng)站。

這個(gè)開發(fā)者將他自己的項(xiàng)目分享在里面，可以查看效果，JS，HTML，CSS源碼。

5.CodePlayerh：

ttp://thecodeplayer.com/

這個(gè)網(wǎng)站里的項(xiàng)目資源，不僅可以看源碼與項(xiàng)目效果，同時(shí)你還能看到開發(fā)者是如果將效果通過一行一行的代碼敲定出來，個(gè)人覺得非?？?#xff0c;不行，你可以去看看哦！web小二說話，從來不騙人。

6、實(shí)驗(yàn)樓-web：

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

這里也有很多前端的項(xiàng)目，里面有詳細(xì)的實(shí)現(xiàn)步驟，你可以跟著項(xiàng)目一步一步的做，同時(shí)還可以將源碼下載下來學(xué)習(xí)，也是一個(gè)不錯(cuò)的前端項(xiàng)目學(xué)習(xí)網(wǎng)站。

7、html5tricks：

http://www.html5tricks.com/

網(wǎng)站里有很多前端實(shí)現(xiàn)的功能，可以在線查看效果，也可以下載源碼的，是一個(gè)不錯(cuò)的學(xué)習(xí)資源網(wǎng)站。

8、Enjoy CSS：

http://enjoycss.com/

此網(wǎng)站是一個(gè)完整的代碼生成器，可以自定義輸入域或CSS3按鈕，同樣可以查看源代碼，適合學(xué)習(xí)。

9、frontendrescue：

https://uptodate.frontendrescue.org/

此網(wǎng)站里面分享了網(wǎng)絡(luò)上關(guān)于前端的各種資源、大牛等資源信息，是個(gè)不錯(cuò)的學(xué)習(xí)網(wǎng)站。

10、Dribbble：

https://dribbble.com/

這是一個(gè)質(zhì)量不錯(cuò)的設(shè)計(jì)網(wǎng)站，也可以常去逛逛，對提高審美也有幫助，即使不學(xué)設(shè)計(jì)也可以進(jìn)去看看

11、TutsPlus：

https://tutsplus.com/

TutsPlus是一個(gè)為Web開發(fā)人員與設(shè)計(jì)人員提供教程與技術(shù)文章為目的網(wǎng)站，技能和技巧，提高用戶設(shè)計(jì)和建立網(wǎng)站的能力。

12、CAN I USE：

http://caniuse.com/

CAN I USE，一個(gè)查詢?yōu)g覽器兼容性的網(wǎng)站。

13、JSHint：

http://jshint.com/

此站點(diǎn)是一個(gè)在線JS檢測工具，可以檢測JavaScript代碼中的錯(cuò)誤和潛在問題。

14、CSS-tricks：

https://css-tricks.com/

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

15、TechCrunch：

https://techcrunch.com/

TechCrunch 是一個(gè)科技類博客網(wǎng)站，主要以報(bào)道新興互聯(lián)網(wǎng)公司、評論互聯(lián)網(wǎng)新產(chǎn)品、發(fā)布重大突發(fā)新聞為主要內(nèi)容。

16、Webdesigner Depot：

http://www.webdesignerdepot.com/

這是一個(gè)網(wǎng)頁設(shè)計(jì)資源網(wǎng)站，網(wǎng)頁設(shè)計(jì)師必備站點(diǎn)，涵蓋大量教程、工具、素材等資源，是一個(gè)必去的網(wǎng)站。

希望能對大家的學(xué)習(xí)以及工作有所幫助

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