HackMD
fe-resources
前端資源整理
！小提醒：請不要拿這篇個人筆記去拆別人的招牌，如：X 角學院、X camp 的課怎麼賣這麼貴之類的。台灣的資源也有他好的地方，這邊推薦的內容也很主觀，但有讓你多一個參考或是有幫助到你就足夠了。
TL;DR （前言）
安安，你好！我是 Benben
如果你趕時間，可以直接看下面的 總結 (aka 懶人包)
主要還是依個人需求去選擇資源，我這邊推的資源 我都有買、也做了不少研究，就推薦一下我覺得 CP 值最高 的課吧！
我說的 CP 值最高不一定對你來說不一定是最好的學習方式，因為很看個人的決心、動機，如果覺得自己沒決心的，可以找其他各大前端速成班，主要還是有一群人可以學習會比較有動力。
我這邊推的資源就比較需要 真的有決心的人 ，因為陸續也推不少人了，也有正在轉職中的，目前都還算不錯。
對於超級新手想入門，在 Udemy 上一門 20 ~ 30 小時的課，也才不到 400 塊，了不起就浪費了 400 塊跟 20 ~ 30 小時的時間無傷大雅。
當然也有一些人聽完我推薦的課就沒下文了，這都很正常，這邊還是要稍為說明一下的，因為我不想說買了課就會成功之類的，那些成功的人背後努力是外面的人看不到的。
這邊我的小建議是，你可以先買個一門 入門 課，一門就好，先試試水溫，如果這是你喜歡的，我替你開心；如果不是，那也沒關係，比起外面有的課程 10 來萬（有的你要退費，甚至會刁難你），但一門不到 400 元的課，老實說你也沒什麼損失，是吧？真的不適合，就好好放下，去完成你更想做的事吧！
那麼就讓我一一介紹吧！
Udemy
論純學程式的話，Udemy 絕對是首推，但在台灣大家不太敢推，所以確實有些人不知道，因為怕斷人財路啊（？）
台灣林林總總有很多的 前端速成班 ，對於前端領域，這些速成班絕對功不可沒，但速成完呢？學程式的路上總要靠自己，無法靠自己學習的會漸漸成為所謂的 前端難民 ，比起那些百日轉職之類的成功者，我更關注前端難民，沒什麼原因，因為我曾也是之一，說不上成功但也不算失敗。
但總要有人說真話的，希望我這個不上不下的建議可以讓你少走一點彎路，但決定要不要走的還是你。
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
目前我 Udemy 上一部分的課，有些其實是當複習跳著看
注意： Udemy 的課請等有特價再買，新會員有特價，也很常特價，所以稍忍一下，價錢在 330 ~ 390 都可以買，一門課 3XX 已經蠻便宜的了，沒有差這 60 塊了
小提示：可以用無痕開重開 Udemy 頁面看看，有時候會有驚喜！
-
中文課程
-
英文課程
入門The Complete 2022 Web Development Bootcamp | Udemy // 先說這門我沒有買，因為很多內容已經會了，但蠻適合新手的入門The Complete Web Developer in 2022: Zero to Mastery | Udemy超推系列課程Zero To Mastery | Learn In-Demand Skills. Get Hired. | Udemy
) // 基本上 ZTM 系列都很棒，品質、教材、錄音都一極棒，因為他也沒在廣告的，都是靠別人推的，進階的課可以有用到在決定要不要買，重點是他們每年更新教材！其他基本上入門的學完，就可以自己決定下一個要學什麼了，搜尋一下通常熱門的課，都會有特價：D
Hahow
Hahow 的話，我也算老粉了，但頁面很卡，又塞一堆數據追縱，我不是很推（指 Hahow 平台），但是也算是中文很好的資源，其他的品質就不好說，吳哲宇大大的課應該是最好了，內容豐富又多，雖然內容稍舊，但還是蠻值得學習的。
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Hahow 的網站追縱，少數看到追縱一堆數據的網站 QQ （你知道的太多了）
- 吳哲宇 - 網頁互動系列
入門動畫互動網頁程式入門 (HTML/CSS/JS)進階動畫互動網頁特效入門 (JS/CANVAS)興趣互動藝術程式創作入門 (Creative Coding) // 比較偏藝術創作，就看個人，工作上基本上用不到
Other (Free)
坦白說，大多數免費的資訊會比較破碎化，新手還是建議找有個一有連慣系統學習會比較好。
- YouTube
- freeCodeCamp.org - YouTube => 佛心來的不解釋 aka 免費 CS 大學
- Traversy Media - YouTube => 全端優資內容
- Web Dev Simplified - YouTube => 講解一些很棒的小細節，但比較雜一點
- Fireship - YouTube => 比較廣的內容，很多如 learn X in Y min 系列
- JavaScript 30 — Build 30 things with vanilla JS in 30 days with 30 tutorials => 應該是廣為人知的 JS 免費課，作者的網站也還有一些免費的資源
- Huli - blog => 應該是程式在寫，文章在看，總有一天會看到 Huli 的文章，好啦，也是我老師，必須推，內容非常多可以尋寶
- CS50's Introduction to Computer Science | edX => 非本科 Computer Science 救星，可以看看更多的 CS50 推坑
Advance
其他進階資源推薦
已經是前端工程師了，但還在等人培訓你？你該自己培訓自己！
Articles or Repository：
- ryanmcdermott/clean-code-javascript: Clean Code concepts adapted for JavaScript （沒時間的話就讀這個吧，repo 最下面有繁中翻譯版）
- Patterns （各種現代前端的 design patters，基於 React 但，不管是不是用 React 還是很推）
Books：
📄 => 表示有 pdf 檔的電子書
📕 => 表示實體書，需自行購買 or 跟其他人借
-
- (!) 不知道看什麼？首推這本，以 JavaScript 為主
- 後端寫 node.js 的話，也很推
- 全英文，或是可以看繁中版 📕 Clean Code 學派的風格實踐：開發可靠、可維護又強健的 JavaScript | 天瓏網路書店
-
- 想寫出 "Clean Code" ？要先了解什麼是 Clean code
- 軟工經典書籍， Bob 大叔的 Clean Code ，想到開發者就會想到的書之一
- 全英文，或是可以看繁中版 📕 無瑕的程式碼 | 天瓏網路書店
-
- 想當個 "Clean Coder" ？知道 Clean Code 還不夠，如何與 "人" 溝通亦是開發者的議題
- 軟工經典書籍，Bob 大叔的 The Clean Coder，與 Clean Code 相輔相成
- 全英文，或是可以看繁中版 📕 無瑕的程式碼 番外篇 | 天瓏網路書店
-
- 想要提升自我？
- 軟工經典書籍
- 全英文，或是可以看繁中版 📕 The Pragmatic Programmer | 天瓏網路書店
-
- 不會抓專案時程？
- 專案管理經典書籍，雖說主要是寫個 PM 、主管看的，但身為開發者也必須要看一下
Conclusion
aka 懶人包
-
認為自己沒動力的或是自學程式末滿 3 個月的：
-
認為自己還算自律的或是自學程式 3 個月以上的：
-
認為自己已經是中高階或資深的：
- 你來錯地方啦！
- 去刷 leetcode 吧！或是可以看看 leetcode 入門： Lidemy | 先別急著刷 leetcode
- 加強 Computer Science 或再上一次 CS50： CS50's Introduction to Computer Science | edX
- 想要繼續精進的，可以考慮讀讀：
對於一開始不知道要學什麼的人來說，就先看哪堂順眼就上哪堂，之後就 穩穩的跟完一門什麼都不要想，必免知識焦慮，邊跟著做作品，如果真的覺得靜不下心來學，不想繼續了也沒關係，因為這條路本來就不容易，那些你看到的轉職之後，就過著輕鬆的生活的，都是騙人的，都是補習班的行銷手法，這也是為什麼我選 Lidemy 的原因。
跟完之後再看 自己對哪邊比較有興趣，是前端畫面的呈現嗎？還是後端資料的處理？還是我全都要？就整理自己有興趣的作品，但 請不要抄作業當作品集，作品集、履歷準備好應該就可去投看看 junior 的缺了。
有任何不清楚或還想深入了解的，都可以在 benben.me 找到我，我會一直在這個小宇宙陪伴你的。
Happy coding ~
by Benben
