以前有小伙伴自己做了個小游戲，類似掃雷這種，都覺得簡單好玩，老師還提名錶揚呢，那時沒深究是怎麼開發的，現在想想就是純前端的簡單小游戲啊。 工作後，發現前端才是王道啊，先不說大家說的什麼“整個互聯網都缺前端啊”這種話題，就說要抓取用戶眼球，讓用戶有點擊的欲望，這都是前端工作啊，畢竟用戶才不關心“你咋實 ...
以前有小伙伴自己做了個小游戲，類似掃雷這種，都覺得簡單好玩，老師還提名錶揚呢，那時沒深究是怎麼開發的，現在想想就是純前端的簡單小游戲啊。
工作後，發現前端才是王道啊，先不說大家說的什麼“整個互聯網都缺前端啊”這種話題，就說要抓取用戶眼球，讓用戶有點擊的欲望，這都是前端工作啊，畢竟用戶才不關心“你咋實現這個功能的”，只要看著舒服就行。
其實，說這麼多，我只想說，如果你想學前端，現在還來得及。我平時會留意各種資源，因此，這裡整理一番，可能更適合有一定基礎的前端學習者看~
說明：關於前端學習網站，太多了，什麼官方文檔啦、各種線上學習網站啦，只要你想學前端，那麼一搜就全出來了，因此啊，我就不整理介紹了；
我主要整理3個部分：
- 1）想開發項目，哪裡找教程？
- 2）關於前端的有趣網站；
- 3）分享一些合集資源；
一、前端項目哪裡找？
前端的入門教程網上很多，只要你搜索呼啦啦就出來了，因此啊，就不整理了。主要整理一下，哪裡可以找到前端項目，就是有源代碼的，可以拿來學習或者拿來用的。
1、CodePen
網站里有很多很酷的特效，而且看到它們的源代碼，也可以看到效果圖。
2、 CodePlayer
網站里有各種項目效果，選擇自己想學的，同樣可以看到源代碼和效果圖，和codepen不同的是你可以看到作者是怎樣把代碼打出來的。
網站里有很多前端實現的功能，可以線上查看效果，也可以下載源碼的。
有詳細的教程，而且步驟詳細，教你一步步開發出項目
一個練手項目集，有很多實戰項目，有步驟、。
5、實驗樓-WEB
網站里有很多前端項目教程，可以跟著教程一步步在環境中實現，並查看效果圖，同樣可以下載源代碼，非常適合項目實戰學習。
二、前端有趣的網站：
1、JS1k
大名鼎鼎的js1K，1K位元組以內的Javascript代碼，實現一個酷炫的動畫、特效、小游戲之類的。官網從2010年開始徵集參賽作品，現在已經辦了７年了，還在辦。
CAN I USE，相信每個前端同學都不陌生，查詢瀏覽器相容性的利器。
3、JSHint
一個線上JS檢測工具，可以檢測JavaScript代碼中的錯誤和潛在問題。
4、aaencode
將JS代碼轉換成常用的網路表情，例如“(ﾟΘﾟ)”。轉換的代碼並不複雜，可以在源代碼里看到。
類似的還有：
一個線上混淆工具，通過先進的演算法，來混淆你的JavaScript代碼，使其不可讀。該工具還可以減小文件的大小，以便快速載入。
網站主要提供各種按鈕的CSS代碼，你可以從預設的按鈕中選擇並使用模板用於自己的設計，還可以查看源代碼，非常適合學習。
還有一個類似的：
網站是一個完整的代碼生成器，可以自定義輸入域或CSS3按鈕，同樣可以查看源代碼，適合學習。
6、CSS屬性指引
一份清單，按字母表順序列出了每個CSS屬性。
裡面分享了網路上關於前端的各種資源、大牛等信息，總之很多資源就對了。
三、一些整理的合集資源：
資源太多了，我就把平時mark的一些合集資源整理出來吧；
一些整理好的合集資源：
- 平時收集的一些有關UED的團隊和個人博客
- WEB開發者應該有哪些必備的技能？
- 前端小白到大神，不可不收藏的網站合集
- 關於前端面試相關的資源整理
- 前端開發者準備的文檔和指南
- 50 款簡化 CSS 開發的實用工具和生成器
- 148個資源讓你成為CSS專家
前端開發怎能少的了 Chrome 呢，因此單獨對 Chrome 的一些資源整理一番：
- 我的 Chrome 插件集
- 私人珍藏的Chrome插件，吐血推薦
- 前端程式員必知的30個Chrome擴展
- Dev Tips（講了很多Chrome開發技巧）
- Chrome控制台實用指南
- Chrome 實用調試技巧
以上就是我整理的的關於前端的學習資源，如果你還有其他的不錯的前端資源，歡迎留言啊，我隨時添加進來~推薦下我自己創建的web前端資料分享群606721798，這是web前端學習交流的地方，不管你是小白還是大牛，小編都歡迎，不定期分享乾貨，包括我整理的一份適合零基礎學習web前端的資料和入門教程。
