開始工作到現在，發現其實有非常多的夥伴將工程師視為一個夢想中的職業（🙄）或者當作一個職涯轉換的目標（想不開？），對於完全沒有程式背景的夥伴，在各式各樣的工程師中，前端工程師算是相對較為容易的一個出發點，當然它還是有一定的門檻存在，而且工程師的學習都是無止盡的。即使已經下定決心要來準備轉職，初學者其實很容易對網路上千奇百怪的學習資源感到茫然，花錢買到根本就不適合自己的課程內容，進而投注大量資源後卻放棄繼續往這個方向前進非常可惜。但…在這樣的資訊爆炸的狀況下，我們究竟該如何找到最適合自己的前端線上課程呢？
Hello，我是 Samuel，目前是 Hahow for Business 的 Product Owner，至於為什麼一個 Product Owner 會來和各位討論前端線上課程，背後其實是有很多很多血淚和掙扎的（笑），如果對於我的「 iOS 工程師 x 介面設計師 x 前端工程師」到 Product Owner 的職涯轉換過程有興趣的夥伴，歡迎參考之前寫的文章：
寫程式現階段對於我來說就是一個興趣，每週寫點 Code 有助於身心靈健康眼目清明，尤其是當你從工程師轉職成為 Product Owner 之後，每次重新回來寫程式時真的會淚流滿面，覺得這個世界真的太美好 🤣；目前我在 Hahow 已經開設兩門與程式相關的課程，一門課程是提供給對於成為 iOS 工程師有興趣的夥伴，從介面設計開始到 Swift 開發到 App 上架（該門課程也在今年更新加上 Swift 5 的全新課程內容）；另外一門課程用非常輕鬆的方式來聊聊程式邏輯與運算思維，內容有趣而且輕量（自己說），非常適合給程式入門的夥伴。
除此之外，如果不想這麼 Hardcore 單純想用聽的方式來快樂學習。我之前剛好也有錄製一系列關於「前端與設計」的音頻課程（笑），聽完的都說聲音很療癒雖然語助詞很多哈哈哈哈哈哈哈，內容基本上是自己在成長過程中的一些體悟和提醒，當然也包含一些很硬的前端基礎知識啦，內容並沒有過時難易度也算適中，很適合在上下班的通勤時間收聽，推薦給剛入行或是在迷惘的設計夥伴們參考：
教學對於我來說一直都是件非常有趣的事情，從投入工作到現在也都持續的在 NTUST、NTU、SYSU 擔任客座講師，多個設計補習班（赫綵、譯智..etc）開設基礎、進階前端開發、iOS 開發和專案溝通相關的課程，有來上課的話都可能不小心會遇到我喔，在這邊偷偷附上一些之前學生的靜態切版作品他們真的超棒 🎉
由於上述的背景，有非常多的機會和我的學生、程式領域的初學者或者有興趣的社群夥伴們持續互動，發現大家對於前端的學習資源一直以來都有著不知該如何選擇的困擾，這些困擾也促使我想要整理這篇文章來和大家分享
究竟我們應該要如何選擇一堂適合自己的前端線上課程呢？
在開始選擇一堂前端線上課程之前，最重要的一件事情：「釐清自己的學習目標是什麼」，不同的學習目標會有不同的課程選擇方向，該目標的學習曲線和所需學習時間也都會產生差異，這也是我在第一堂課時一定要求學生思考的事情，這邊我們可以將前端學習分為幾種角色類型：
（1）你是個想要自我實現的夥伴：並無直接業務相關，但希望能夠理解工程師的工作內容，建立程式語言的基礎概念達到自我實現的目標。作為這樣的角色，你會需要了解工程師的工作流程、程式語言運作邏輯和運算思維的概念。
（2）你是個專案經理 / 產品經理或任何需要和工程協作的夥伴：希望能夠理解工程師的工作內容、工作流程，建立任一程式語言的邏輯概念與系統架構，提升自己對於產品時辰，開發流程的掌控程度，作為這樣的角色，你會需要網路架構、前後端系統架構、前後端系統溝通等基礎知識，加上理解前端網站的開發流程，開發框架等背景，當然如果能夠有一點 html、css、javascript 的基礎認知就更棒了。
（3）你是個介面設計師：總是搞不懂工程師為什麼永遠都差那 1px 🤬，希望能夠熟悉工程師的切版邏輯，並優化雙方的工作流程，必要時能夠協助工程師進行簡單的介面調整。常常有學生問我介面設計師是否需要會寫程式？我都會回答「Nice to have」，這個技能絕對不是必須的，但多學總是沒有傷害麻。作為這樣的角色，除了前面所提到的內容，你會需要增加一些對於 html 結構上的瞭解，class 命名的基礎再加上更多 css 樣式運用的知識。
（4）你想轉職成為前端設計師：前端設計師對我來說是個非常特別的存在，在台灣有許多 Design Studio 都有這樣的角色，這樣的角色運用設計和工程的知識技能，將設計完美且充滿互動的透過程式呈現出來，這類型的角色或花更多心力投注在前端互動效果的開發甚至是 3D 效果、物理引擎等大部分網站（例：Facebook、Instagram、Shopee）不會使用到的功能。作為這樣的角色，除了前面所提到的知識技能，你需要理解第三方套件的運用方式，開始使用大量的 javascript / jQuery 進行網站開發，你會需要建立一些關於數學、物理的基礎知識，熟悉各式各樣爆炸酷炫的前端效果。
（5）你想轉職成為前端工程師：想不開就選這條路吧（誤），如果你是認真想要轉職成為前端工程師的話，可以參考這個網站所提供的 Front-end developer roadmap，從 css、html、javascript 一路到自動化流程、版本控制與協作、前端框架（react、vue、angular）的運用等等，這會是一條充滿挑戰有非常有趣的道路（心虛）。來句 Jose Aguinaga 大大說過我覺得很帥的一句話：
對我而言，前端工程師是一群，橫跨設計與工程領域，美感理性兼備，對於 Web 充滿熱情，相信自己可以利用 Web 改變世界的傢伙。
不論你是屬於哪種類型的角色，我都會希望你記住一個原則 — 「慢慢來，穩定且持續的向上成長」，這句話並不是要你放輕鬆慢慢學習，而是要你專注於眼前正在學習的項目（例如先打好 html 和 css 的基礎，javascript 先別理它）。我最常遇到的狀況就是因為資訊量太多的關係，學生往往會不知道自己究竟該學些什麼，業界又需要什麼，接著開始產生嚴重的焦慮感，並且覺得自己什麼都想要學，「想要學 html，想要學 pug 想要學 css 想要學 scss，想要學 SQL 想要學 git 版本控制，想要學 javascript 想要學 python，又想學後端系統開發又想學 api 串接」，呃，通常想到這裡就會開始衝動購物買下一堆無用的課程，然後開啟一個漸進式的放棄流程，從開始到放棄，所以！先緩一緩吧，選擇一個適合自己的學習資源 / 課程，扎實的把它完成，把過程中有疑惑的地方都釐清，再開始規劃你下一階段的學習。
學習資源類型
好！在理解自己的學習目標之後，我們可以先來看看有哪些學習資源可以應用的，基本上可以分為「免費資源」和「付費資源」兩種類型。
🌟 免費資源包含：
- Youtube 課程影片
- 技術文章平台（Medium、it 邦幫忙）
- 線下講座、社群（front-end developer taiwan）
免費資源肯定要先推社群大大 Huli 的文章「紮實的網頁前端學習路線與資源推薦」，比較可惜的點在於免費資源的學習資源通常比較適合「初學者」或者「進階開發者」，相較於付費資源比較難找到非常完整的學習體系，在學習過程中也常常會出現學習路徑跳躍，程度落差等狀況，
- Youtube 學習資源
- it 邦幫忙或 Medium 的學習資源：
- 六角學院整理的「前端工程師養成手冊」
免費資源還有許多特定工程領域的內容，例如想要理解前端和後端基本架構的夥伴，可以在 搜尋到底下的影片：
不論是求職、Webpack 自動化或者各式各樣單一主題的免費資源，在 Youtube 上面只需要搭配正確的關鍵字都能找到各式各樣的內容。
🌟 付費資源包含：
- 實體課程（業界機構、補習班、各大學推廣中心、職訓局）
- 線上課程
- Conference（JSDC、Modern Web）
這篇文章我們會先針對「線上課程」這個項目進行深度的討論，繼上一篇線上如何找到適合自己的線上攝影課程之後，小弟這次再度運用身為 Hahow 好學校夥伴的員工福利（大笑），認真為各位走完平台上各式各樣的課程內容（倒地不起），帶著各位針對 Hahow 的線上課程來做個分析和討論吧😈。扣除線上課程，畢竟我也不是每堂實體課程都有參加，之後我們再找時間聊聊不同機構開設的實體課程和 Conference 吧，有許多不為人知的小秘密呢（笑）。接下來，讓我們一起來從 Hahow 挑選一堂適合自己的線上課程吧！
Hahow 好學校 — 前端線上課程整理與分析
到目前為止我大概教過約 500 位學生，加上線上課程應該大約 1500 位吧…突然驚覺害人不淺 🤣，統整完這些學生們的學習背景、學習目標和發問內容，我將下列每堂課程都進行課程完整性、課程難易度、業界需求性進行分析與整理，同時評估該課程最適合下列哪一種類型的角色，希望能夠幫助各位在課程選擇上能夠更加精準（笑）。
（1）你是個想要自我實現的夥伴
（2）你是個專案經理 / 產品經理或任何需要和工程協作的夥伴
（3）你是個介面設計師
（4）你想轉職成為前端設計師
（5）你想轉職成為前端工程師
一、使用 HTML 開發一個網站
👨🏻💻 適合角色類型：（1）到（5）類型皆可，但特別適合（1）和（3）類型
🚨 課程難易度（最難五顆星）： ⭐️
🌟 推薦分數（最多五顆星）：️⭐️⭐️⭐️⭐️
🔖️ 推薦原因：六角學院是台灣相當有名的前端線上課程學院，主要專注在分階段的前端線上課程，不過近期也有加入部分基於 Node.js 進行開發的後端課程，他們課程中最大最大最大的賣點就是給你快樂地問，開心地問問到飽（笑），非常適合「充滿熱情」的初學者，沒有給到五顆星的原因是這門課程中的範例老實說沒有那麼吸引我（對我就是那麼難搞），再加上其中所提到的 jQuery 應用場景在業界其實越來越少（小聲…），不過 16 小時的扎實內容絕對是堂適合新手入門 HTML 和 CSS 的前端課程。
注意喔，這堂課程會專注在「靜態網頁」的呈現，並沒有包含和後端系統串接或第三方套件整合的內容。
二、使用 jQuery 打造互動性網頁動畫效果
👨🏻💻 適合角色類型：（3）、（4）
🚨 課程難易度（最難五顆星）： ⭐️ ⭐️ ⭐️
🌟 推薦分數（最多五顆星）：️⭐️⭐️
🔖️ 推薦原因：會特別推薦（3）和（4）的原因是基於現階段仍然有許多第三方動畫套件提供開發者使用 jQuery 進行開發或者公司產品原本就使用 jQuery 的夥伴則是逃也逃不掉（笑），這堂課裡面有套用到滿多動畫效果的範例，還算適合沒有概念的夥伴建立一些動畫應用場景的經驗。
三、互動藝術程式創作入門 Creative Coding
👨🏻💻 適合角色類型：（4）
🚨 課程難易度（最難五顆星）： ⭐️ ⭐️ ⭐ ⭐ ⭐
🌟 推薦分數（最多五顆星）：️⭐️⭐️ ⭐ ⭐ ⭐
🔖️ 推薦原因：吳哲宇的課我都給五星好評，他絕對是小弟見過最認真的老師（笑），但這堂課程請大家務必看清楚適合的角色類型「前端設計師」，如果對於互動藝術創作有興趣的夥伴有福啦，裡面有著各式各樣的極具設計感的範例，課程內容綜合物理、數學、基本 css、html 和 javascript 一個都跑不掉，非常適合有興趣在這個領域鑽研的夥伴。
四、動畫互動網頁程式入門（HTML/CSS/JS）
👨🏻💻 適合角色類型：（2）-（5）
🚨 課程難易度（最難五顆星）： ⭐️ ⭐️
🌟 推薦分數（最多五顆星）：️⭐️⭐️ ⭐ ⭐ ⭐
🔖️ 推薦原因：這兩堂課我絕對推好推滿，尤其是「動畫互動網頁程式入門」作為基礎，「動畫互動網頁特效入門」作為第二堂進階課程來學習，課程講師同樣是吳哲宇，課程內容將從最基本的 html 和 css 開始介紹，搭配爆炸美的課程範例，100% 能夠提高你的學習意願（笑），我自己雖然已經是工程師，但當時仍然扎實地把超過 3000 分鐘的課程全部看完了，有任何問題老師也都會在問題討論區或者 Facebook 社團中持續協助你解決。
這堂課程的後半段會用相當清楚的觀念來解釋 Javascript，搭配動畫與互動的案例能讓你更快熟悉程式的運作邏輯，最後也會講到業界其中一個主流的前端框架 vue.js，在前端線上課程中算是一門相當完整的課程。唯一比較可惜的是我不會推薦這門課程給類型（1）的夥伴，這門課程並沒有針對前後端架構、運作邏輯進行基礎的介紹，直接跳入到開發的世界中算是我自己覺得比較可惜的地方。
五、職人必修的 RWD 網頁入門班 & 一變應萬變：RWD 響應式網頁設計
👨🏻💻 適合角色類型：（3）-（4）
🚨 課程難易度（最難五顆星）： ⭐️ ⭐
🌟 推薦分數（最多五顆星）：️⭐️ ⭐️ ⭐
🔖️ 推薦原因：這兩門課程都是針對 RWD 響應式網頁的專門課程；我會特別推薦給已經有學過 html 和 css 的夥伴，課程內容主要專注在不同裝置、螢幕尺寸的適配場景，同時協助解決許多在處理 RWD 時會遇到的特定問題，例如多語系的支援、Flexbox 套用和動態選單的開發等等。職人必修一個滿加分的項目是課程最後會搭配 Github Page 帶著你把自己開發的靜態網頁上線，後者則有一個相當有趣的章節「PM、Sales、Art、F2E、Backend 之間如何真心合作」，針對團隊溝通、協作上有更多的說明。不過這兩堂課相對於其他前端課程算是比較專注在 RWD 應用的一門課程，老實說我個人會偏向學好基礎後，未來處理 RWD 時就用見招拆招的方式應對啦，畢竟透過搜尋就有這麼多的相關資源了，如果硬要我推的話我會推後者啦（笑）。
六、從入門到業界實戰 — UI / UX 前端網頁設計
👨🏻💻 適合角色類型：（2）-（5）
🚨 課程難易度（最難五顆星）： ⭐️
🌟 推薦分數（最多五顆星）：️⭐️ ⭐️ ⭐
🔖️ 推薦原因：這門課程內容包山包海，從介面設計到前端開發內容相當完整，推薦分數較低的主要原因在於課程內容已經停止更新，內容比較舊一些，同時課程講師基本上不太會回覆學生學習過程中遭遇的問題，卡關時可能會各種崩潰；但如果你是一位搜尋能力特別強（笑）或者已經有基本程式基礎的同學，這門課程的 CP 值是非常高的，不只是開發還能學設計喔 🎉
七、軟體工程師必備的版本管理時光機
👨🏻💻 適合角色類型：（5）
🚨 課程難易度（最難五顆星）： ⭐ ⭐️ ️️⭐️ ️️
🌟 推薦分數（最多五顆星）：️⭐️ ⭐️ ⭐ ⭐
🔖️ 推薦原因：如果你的目標是前端工程師，很抱歉你逃不掉非得要學版本控制啦，但會建議你不要急，一步一步慢慢來，先建立前端的基礎知識（html、css、javascript），如果找到工作或者確定要往這個方向走，再來上這門 Git 版本管理的課程。
八、科技苦手事務所：不學 Coding 的邏輯思考課
👨🏻💻 適合角色類型：（1）- （3）
🚨 課程難易度（最難五顆星）： ⭐
🌟 推薦分數（最多五顆星）：️⭐️ ⭐️ ⭐ ⭐ ⭐
🔖️ 推薦原因：自己開的課程還不推爆？好啦，這應該是 Hahow 上唯一一門專門做給非工程師背景的夥伴想要建立工程基礎概念與思考邏輯的課程，在裡面不寫程式不談版本控制這種硬到不行的知識內容，其有趣程度看募資影片就知道啦，課程內容精簡且快速，非常適合無壓力狀況下服用。
九 、全方位學 WordPress — 從架站到整合行銷
👨🏻💻 適合角色類型：無
🚨 課程難易度（最難五顆星）： ⭐ ⭐
🌟 推薦分數（最多五顆星）：️⭐️
🔖️ 推薦原因：老實說我自己寫 WordPress 的經驗少之又少，但目前業界大部分採用 WordPress 進行開發大多是接案公司，身邊的工程師朋友基本上都是在三大框架 React、Vue、Angular 中進行開發，職缺搜尋一輪發現也沒有什麼 WordPress 的職缺，所以…我通常都不會和學生推薦任何的 WordPress 課程，尤其是想要轉職前端工程師的夥伴，不如花些時間扎實的學好 javascript 比較實際！
十、精通 Bootstrap 4 — 開發超強不解釋
👨🏻💻 適合角色類型：（2）- （3）
🚨 課程難易度（最難五顆星）： ⭐ ⭐
🌟 推薦分數（最多五顆星）：️⭐️
🔖️ 推薦原因：Bootstrap 算是業界運用覆蓋度最高的前端模板吧（笑），和 RWD 課程的部分相同，我會特別推薦給已經有學過 html 和 css 的夥伴，如果工作場景有實際運用 Bootstrap 時再來上這門課就好，但… Bootstrap 的資源在線上更是多到溢出來，不怕找不到只怕看不完的狀況下，我就沒有那麼推薦這門課程囉。
Hahow 前端線上課程的部分，小弟我就先幫各位整理到這邊啦，其實我私底下買了超級多的 Udemy 課程，而且我都有很認真的上課，之後如果有時間再來整理這些課程心得和大家分享囉，如果覺得這篇文章有幫助，請不要吝嗇給予我很多很多很多的掌聲 🥺，如果想要購買課程也可以透過文章中的課程連結購買，這些都會是我繼續寫下去的動力！
您好，我是Samuel，目前任職於Hahow好學校，擔任Product Owner & Software Developer，TEAMUP和Kapi的共同創辦人;正在努力培養跨領域的思維，認為分享和傳遞資訊這個行為能夠改變整個環境與業界氛圍。熱愛設計，技術實作，創業和攝影，有任何想法或者合作的機會都歡迎一起喝杯咖啡。Website：www.samuel-kao.com
Facebook：https：//www.facebook.com/citysite1025
Instagram：https://www.instagram.com/citysite1025/
