以前有小夥伴自己做了個小遊戲，類似掃雷這種，都覺得簡單好玩，老師還提名表揚呢，那時沒深究是怎麽開發的，現在想想就是純前端的簡單小遊戲啊。

工作後，發現前端才是王道啊，先不說大家說的什麽“整個互聯網都缺前端啊”這種話題，就說要抓取用戶眼球，讓用戶有點擊的欲望，這都是前端工作啊，畢竟用戶才不關心“你咋實現這個功能的”，只要看著舒服就行。

其實，說這麽多，我只想說，如果你想學前端，現在還來得及。我平時會留意各種資源，因此，這裏整理一番，可能更適合有一定基礎的前端學習者看~

說明：關於前端學習網站，太多了，什麽官方文檔啦、各種在線學習網站啦，只要你想學前端，那麽一搜就全出來了，因此啊，我就不整理介紹了；

我主要整理3個部分：

• 1）想開發項目，哪裏找教程？
• 2）關於前端的有趣網站；
• 3）分享一些合集資源；

一、前端項目哪裏找？

前端的入門教程網上很多，只要你搜索呼啦啦就出來了，因此啊，就不整理了。主要整理一下，哪裏可以找到前端項目，就是有源代碼的，可以拿來學習或者拿來用的。

1、CodePen

網站裏有很多很酷的特效，而且看到它們的源代碼，也可以看到效果圖。

2、 CodePlayer

網站裏有各種項目效果，選擇自己想學的，同樣可以看到源代碼和效果圖，和codepen不同的是你可以看到作者是怎樣把代碼打出來的。

3、html5tricks

網站裏有很多前端實現的功能，可以在線查看效果，也可以下載源碼的。

有詳細的教程，而且步驟詳細，教你一步步開發出項目

4、phodal/ideabook

一個練手項目集，有很多實戰項目，有步驟、。

5、實驗樓-WEB

網站裏有很多前端項目教程，可以跟著教程一步步在環境中實現，並查看效果圖，同樣可以下載源代碼，非常適合項目實戰學習。

二、前端有趣的網站：

1、JS1k

大名鼎鼎的js1K，1K字節以內的Javascript代碼，實現一個酷炫的動畫、特效、小遊戲之類的。官網從2010年開始征集參賽作品，現在已經辦了７年了，還在辦。

2、Can I use

CAN I USE，相信每個前端同學都不陌生，查詢瀏覽器兼容性的利器。

3、JSHint

一個在線JS檢測工具，可以檢測JavaScript代碼中的錯誤和潛在問題。

4、aaencode

將JS代碼轉換成常用的網絡表情，例如“(?Θ?)”。轉換的代碼並不復雜，可以在源代碼裏看到。

類似的還有：

• jsobfuscate

一個在線混淆工具，通過先進的算法，來混淆你的JavaScript代碼，使其不可讀。該工具還可以減小文件的大小，以便快速加載。

5、Best CSS Button Generator

網站主要提供各種按鈕的CSS代碼，你可以從預設的按鈕中選擇並使用模板用於自己的設計，還可以查看源代碼，非常適合學習。

還有一個類似的：

• Enjoy CSS

網站是一個完整的代碼生成器，可以自定義輸入域或CSS3按鈕，同樣可以查看源代碼，適合學習。

6、CSS屬性指引

一份清單，按字母表順序列出了每個CSS屬性。

7、frontendrescue

裏面分享了網絡上關於前端的各種資源、大牛等信息，總之很多資源就對了。

三、一些整理的合集資源：

資源太多了，我就把平時mark的一些合集資源整理出來吧；

一些整理好的合集資源：

• 平時收集的一些有關UED的團隊和個人博客
• WEB開發者應該有哪些必備的技能？
• 前端小白到大神，不可不收藏的網站合集
• 關於前端面試相關的資源整理
• 前端開發者準備的文檔和指南
• 50 款簡化 CSS 開發的實用工具和生成器
• 148個資源讓你成為CSS專家

前端開發怎能少的了 Chrome 呢，因此單獨對 Chrome 的一些資源整理一番：

• 我的 Chrome 插件集
• 私人珍藏的Chrome插件，吐血推薦
• 前端程序員必知的30個Chrome擴展
• Dev Tips（講了很多Chrome開發技巧）
• Chrome控制臺實用指南
• Chrome 實用調試技巧

以上就是我整理的的關於前端的學習資源，如果你還有其他的不錯的前端資源，歡迎留言啊，我隨時添加進來~推薦下我自己創建的web前端資料分享群606721798，這是web前端學習交流的地方，不管你是小白還是大牛，小編都歡迎，不定期分享幹貨，包括我整理的一份適合零基礎學習web前端的資料和入門教程。

web前端開發需要的資料