{%hackmd @themes/dracula %}

# fe-resources

> 前端資源整理

**！小提醒：請不要拿這篇個人筆記去拆別人的招牌，如：X 角學院、X camp 的課怎麼賣這麼貴之類的。台灣的資源也有他好的地方，這邊推薦的內容也很主觀，但有讓你多一個參考或是有幫助到你就足夠了。**

---

## TL;DR （前言）

安安，你好！我是 Benben

**如果你趕時間，可以直接看下面的 [總結 (aka 懶人包)](#Conclusion)**

主要還是依個人需求去選擇資源，我這邊推的資源 **我都有買、也做了不少研究**，就推薦一下我覺得 **CP 值最高** 的課吧！

我說的 CP 值最高不一定對你來說不一定是最好的學習方式，因為很看個人的決心、動機，如果覺得自己沒決心的，可以找其他各大前端速成班，主要還是有一群人可以學習會比較有動力。

我這邊推的資源就比較需要 **真的有決心的人** ，因為陸續也推不少人了，也有正在轉職中的，目前都還算不錯。

對於超級新手想入門，在 Udemy 上一門 20 ~ 30 小時的課，也才不到 400 塊，了不起就浪費了 400 塊跟 20 ~ 30 小時的時間無傷大雅。

當然也有一些人聽完我推薦的課就沒下文了，這都很正常，這邊還是要稍為說明一下的，因為我不想說買了課就會成功之類的，那些成功的人背後努力是外面的人看不到的。

這邊我的小建議是，你可以先買個一門 `入門` 課，一門就好，先試試水溫，如果這是你喜歡的，我替你開心；如果不是，那也沒關係，比起外面有的課程 10 來萬（有的你要退費，甚至會刁難你），但一門不到 400 元的課，老實說你也沒什麼損失，是吧？真的不適合，就好好放下，去完成你更想做的事吧！

那麼就讓我一一介紹吧！

## Udemy

論純學程式的話，Udemy 絕對是首推，但在台灣大家不太敢推，所以確實有些人不知道，因為怕斷人財路啊（？）

台灣林林總總有很多的 **前端速成班** ，對於前端領域，這些速成班絕對功不可沒，但速成完呢？學程式的路上總要靠自己，無法靠自己學習的會漸漸成為所謂的 **前端難民** ，比起那些百日轉職之類的成功者，我更關注前端難民，沒什麼原因，因為我曾也是之一，說不上成功但也不算失敗。

但總要有人說真話的，希望我這個不上不下的建議可以讓你少走一點彎路，但決定要不要走的還是你。


> 目前我 Udemy 上一部分的課，有些其實是當複習跳著看

**注意： Udemy 的課請等有特價再買，新會員有特價，也很常特價，所以稍忍一下，價錢在 330 ~ 390 都可以買，一門課 3XX 已經蠻便宜的了，沒有差這 60 塊了**

> 小提示：可以用無痕開重開 Udemy 頁面看看，有時候會有驚喜！

- 中文課程
- `入門` [2022網頁開發全攻略(HTML, CSS, JavaScript, React, SQL, Node, more) | Udemy](https://www.udemy.com/course/html5-css3-z/)
- `進階` [資料結構與演算法 (JavaScript) | Udemy](https://www.udemy.com/course/algorithm-data-structure/)

- 英文課程
- `入門` [The Complete 2022 Web Development Bootcamp | Udemy](https://www.udemy.com/course/the-complete-web-development-bootcamp/) // 先說這門我沒有買，因為很多內容已經會了，但蠻適合新手的
- `入門` [The Complete Web Developer in 2022: Zero to Mastery | Udemy](https://www.udemy.com/course/the-complete-web-developer-zero-to-mastery/)
- `超推` `系列課程` [Zero To Mastery | Learn In-Demand Skills. Get Hired. | Udemy](https://www.udemy.com/user/andrei-neagoie/)
) // 基本上 ZTM 系列都很棒，品質、教材、錄音都一極棒，因為他也沒在廣告的，都是靠別人推的，進階的課可以有用到在決定要不要買，重點是他們每年更新教材！
- `其他` 基本上入門的學完，就可以自己決定下一個要學什麼了，搜尋一下通常熱門的課，都會有特價：D

[⬆️ Go to top](#fe-resources)

## Hahow

Hahow 的話，我也算老粉了，但頁面很卡，又塞一堆數據追縱，我不是很推（指 Hahow 平台），但是也算是中文很好的資源，其他的品質就不好說，吳哲宇大大的課應該是最好了，內容豐富又多，雖然內容稍舊，但還是蠻值得學習的。


> Hahow 的網站追縱，少數看到追縱一堆數據的網站 QQ （你知道的太多了）

- 吳哲宇 - 網頁互動系列
- `入門` [動畫互動網頁程式入門 (HTML/CSS/JS)](https://hahow.in/courses/56189df9df7b3d0b005c6639/main?mts_s=ap&mts_m=ha&oasId=5f4793e9211da0aa8ae2f514)
- `進階` [動畫互動網頁特效入門 (JS/CANVAS)](https://hahow.in/courses/586fae97a8aae907000ce721/main?mts_s=ap&mts_m=ha&oasId=5f4793e9211da0aa8ae2f514)
- `興趣` [互動藝術程式創作入門 (Creative Coding)](https://hahow.in/courses/5d1ba52a0d5f3b0021dbb996/main?mts_s=ap&mts_m=ha&oasId=5f4793e9211da0aa8ae2f514) // 比較偏藝術創作，就看個人，工作上基本上用不到

[⬆️ Go to top](#fe-resources)

## Other (Free)

坦白說，**大多數免費的資訊會比較破碎化**，新手還是建議找有個一有連慣系統學習會比較好。

- YouTube
- [freeCodeCamp.org - YouTube](https://www.youtube.com/c/Freecodecamp) => 佛心來的不解釋 aka 免費 CS 大學
- [Traversy Media - YouTube](https://www.youtube.com/c/TraversyMedia) => 全端優資內容
- [Web Dev Simplified - YouTube](https://www.youtube.com/c/WebDevSimplified) => 講解一些很棒的小細節，但比較雜一點
- [Fireship - YouTube](https://www.youtube.com/c/Fireship) => 比較廣的內容，很多如 learn X in Y min 系列
- [JavaScript 30 — Build 30 things with vanilla JS in 30 days with 30 tutorials](https://javascript30.com/) => 應該是廣為人知的 JS 免費課，作者的網站也還有一些免費的資源
- [Huli - blog](https://blog.huli.tw/) => 應該是程式在寫，文章在看，總有一天會看到 Huli 的文章，好啦，也是我老師，必須推，內容非常多可以尋寶
- [CS50's Introduction to Computer Science | edX](https://www.edx.org/course/introduction-computer-science-harvardx-cs50x) => 非本科 Computer Science 救星，可以看看更多的 [CS50 推坑](https://blog.techbridge.cc/2017/11/11/cs50/)

[⬆️ Go to top](#fe-resources)

## Advance

其他進階資源推薦

> 已經是前端工程師了，但還在等人培訓你？你該自己培訓自己！

### Articles or Repository：

- [ryanmcdermott/clean-code-javascript: Clean Code concepts adapted for JavaScript](https://github.com/ryanmcdermott/clean-code-javascript) （沒時間的話就讀這個吧，repo 最下面有繁中翻譯版）
- [Patterns](https://www.patterns.dev/posts/) （各種現代前端的 design patters，基於 React 但，不管是不是用 React 還是很推）

### Books：

> 📄 => 表示有 pdf 檔的電子書
>
> 📕 => 表示實體書，需自行購買 or 跟其他人借

- [📄 Clean Code in JavaScript](https://booksdrive.org/wp-content/uploads/2022/03/Clean-Code-in-JavaScript-by-James-Padolsey-pdf.pdf)

- (!) 不知道看什麼？首推這本，以 JavaScript 為主
- 後端寫 node.js 的話，也很推
- 全英文，或是可以看繁中版 [📕 Clean Code 學派的風格實踐：開發可靠、可維護又強健的 JavaScript | 天瓏網路書店](https://www.tenlong.com.tw/products/9789864345700)

- [📄 Clean Code](https://thixalongmy.haugiang.gov.vn/media/1175/clean_code.pdf)

- 想寫出 "Clean Code" ？要先了解什麼是 Clean code
- 軟工經典書籍， Bob 大叔的 Clean Code ，想到開發者就會想到的書之一
- 全英文，或是可以看繁中版 [📕 無瑕的程式碼 | 天瓏網路書店](https://www.tenlong.com.tw/products/9789862017050?list_name=srh)

- [📄 The Clean Coder](https://d-pdf.com/book/pdf-download-the-clean-coder-a-code-of-conduct-for-professional-programmers)

- 想當個 "Clean Coder" ？知道 Clean Code 還不夠，如何與 "人" 溝通亦是開發者的議題
- 軟工經典書籍，Bob 大叔的 The Clean Coder，與 Clean Code 相輔相成
- 全英文，或是可以看繁中版 [📕 無瑕的程式碼 番外篇 | 天瓏網路書店](https://www.tenlong.com.tw/products/9789862017883?list_name=srh)

- [📄 The Pragmatic Programmer](https://d-pdf.com/book/the-pragmatic-programmer-pdf-download)

- 想要提升自我？
- 軟工經典書籍
- 全英文，或是可以看繁中版 [📕 The Pragmatic Programmer | 天瓏網路書店](https://www.tenlong.com.tw/products/9789865022754)

- [📕 人月神話：軟體專案管理之道 | 天瓏網路書店](https://www.tenlong.com.tw/products/9789867889188)

- 不會抓專案時程？
- 專案管理經典書籍，雖說主要是寫個 PM 、主管看的，但身為開發者也必須要看一下

[⬆️ Go to top](#fe-resources)

## Conclusion

> aka 懶人包

- 認為自己沒動力的或是自學程式末滿 3 個月的：

1. `入門` [2022網頁開發全攻略(HTML, CSS, JavaScript, React, SQL, Node, more) | Udemy](https://www.udemy.com/course/html5-css3-z/)
2. 報名台灣的程式補習班

- 認為自己還算自律的或是自學程式 3 個月以上的：

1. `入門` [動畫互動網頁程式入門 (HTML/CSS/JS)](https://hahow.in/courses/56189df9df7b3d0b005c6639/main?mts_s=ap&mts_m=ha&oasId=5f4793e9211da0aa8ae2f514)
2. `入門` [2022網頁開發全攻略(HTML, CSS, JavaScript, React, SQL, Node, more) | Udemy](https://www.udemy.com/course/html5-css3-z/)
3. （英文） `入門` [The Complete 2022 Web Development Bootcamp | Udemy](https://www.udemy.com/course/the-complete-web-development-bootcamp/)
4. （英文） `入門` [The Complete Web Developer in 2022: Zero to Mastery | Udemy](https://www.udemy.com/course/the-complete-web-developer-zero-to-mastery/)

- 認為自己已經是中高階或資深的：

1. 你來錯地方啦！
2. 去刷 leetcode 吧！或是可以看看 leetcode 入門： [Lidemy | 先別急著刷 leetcode](https://lidemy.com/p/alg101-leetcode)
3. 加強 Computer Science 或再上一次 CS50： [CS50's Introduction to Computer Science | edX](https://www.edx.org/course/introduction-computer-science-harvardx-cs50x)
4. 想要繼續精進的，可以考慮讀讀：
- [ZTM | Web Dev Monthly](https://zerotomastery.io/blog/?tag=WDM#monthly)
- [JavaScript Weekly Archives](https://javascriptweekly.com/issues)
- [React Status Archives](https://react.statuscode.com/issues)
- [Node Weekly Archives](https://nodeweekly.com/issues)

對於一開始不知道要學什麼的人來說，就先看哪堂順眼就上哪堂，之後就 **穩穩的跟完一門什麼都不要想**，必免知識焦慮，邊跟著做作品，如果真的覺得靜不下心來學，不想繼續了也沒關係，因為這條路本來就不容易，那些你看到的轉職之後，就過著輕鬆的生活的，都是騙人的，都是補習班的行銷手法，這也是為什麼我選 [Lidemy](https://github.com/Lidemy/mentor-program-5th) 的原因。

跟完之後再看 **自己對哪邊比較有興趣**，是前端畫面的呈現嗎？還是後端資料的處理？還是我全都要？就整理自己有興趣的作品，但 **請不要抄作業當作品集**，作品集、履歷準備好應該就可去投看看 junior 的缺了。

[⬆️ Go to top](#fe-resources)

---

有任何不清楚或還想深入了解的，都可以在 benben.me 找到我，我會一直在這個小宇宙陪伴你的。

Happy coding ~

by Benben