[心得] Udemy 課程心得

去年年底腦波太弱，想買相機鏡頭買不下手，結果跟學弟合資買了一堆 Udemy 課 程，這篇來寫一下一些熱門課的觀課心得： ----- λ課名: Git a Web Developer Job: Mastering the Modern Workflow ψ講師: Brad Schiff μ更新: 11/2017 Ω推薦: ★★★★ Ψ心得: 這門課的最後更新日期是前年十一月，所以裡面用到的技術棧有些是非常舊的版 本，可以深深體會到那句「大佬們…別更新了！學不動了 QAQ」。這門課主要涉 及到的內容有： - 使用 jQuery + jQuery-smooth-scroll + waypoints 處理頁面滾動 - 使用 lazysizes 進行頁面元素延遲加載 - 處理 SVG sprites - 使用 picturefill 提供不同裝置的響應式圖片填充 - 跟你講 normalize.css 的優點跟怎麼使用 - CSS 後處理器 PostCSS 的使用 - gulp + babel + webpack 大禮包，讓你知道前端工程化的應用 - 介紹 CSS 的 class 命名風格：B.E.M - 一些簡單的 git 操作 我覺得這一門是非常非常前端的一門課，算是前端入門工程師必備，台灣一些傳 產的網站前端設計可能都停留在這一個層面，甚至沒有使用良好的 CSS 架構。 ω作品: - Travel Site: https://hsins.github.io/udemy_Travel-Site/ ----- λ課名: The Web Developer Bootcamp ψ講師: Colt Steele μ更新: 06/2019 Ω推薦: ★★★★★ Ψ心得: 這門絕對是網頁開發新手入門級別的神課之一！看更新日期似乎是很新的課程， 然而實際上並不是如此，在國外的一些討論區和下面課程評價中都可以看到有使 用者抱怨課堂中使用到的技術太舊了，但我倒覺得還好… 課程安排會由淺至深，從最基本的 HTML / CSS / JavaScript開始，穿插一些能 讓入門新手很快有感的小作業，這些小作業在美觀程度上我覺得有屌打其他課程 …課程中期會加入 jQuery 和 Bootstrap（之前是舊版，一直被人說課程太舊之 後，更新到了 Bootstrap 4），然後趁更新的時後放入了一些 JavaScript 的進 階內容，包括作用域（Scope）、提升（Hoist）和 this 的概念…等。 在邁入課程中後期會開始往簡單地後端帶，也穿插了一些基礎的命令行教學，在 課程的最後作品，會手把手帶你做一個簡單的全端項目，使用的技術棧是： Node.js + Express.js + mongoDB 沒有使用前端框架，過程中會然後帶到一些 RESTful/Cookie/Session 的概念， 學完這門大概算登堂入室懂得自己找關鍵字了，也會比較清楚網頁應用在做什麼 。 ω作品: - Tic Tac Toe Board : https://codepen.io/Hsins/pen/JLqZaG - Image Blog : https://codepen.io/Hsins/pen/yKWEwW - Blog From Scratch : https://codepen.io/Hsins/pen/jzopzO - Image Gallery : https://codepen.io/Hsins/pen/eMaamL - Landing Page : https://codepen.io/Hsins/pen/QmRXWY - Color Game : https://hsins.github.io/udemy_Color-Game/ - Todo List : https://codepen.io/Hsins/pen/YLZOrV - Patatap Clone : https://hsins.github.io/udemy_Patatap/ - Yelp-Camp : https://hsins-yelpcamp.herokuapp.com/ ----- λ課名: The Complete Web Developer Course 2.0 ψ講師: Rob Percival μ更新: 06/2019 Ω推薦: Ψ心得: 如果黃明志看完這堂課再去唱飄向北方的話，歌詞的 RAP 可能有一段是這樣的： 「東西太舊太簡單，他說不喜歡 　ＣＰ太低太浪費，他說不習慣」 我大概是快轉看完的，東西真的太弱，做出來的作品也很爛 有基礎的人會覺得東西太淺，拿不出手 沒基礎的人會覺得東西太廣，沒亮點 真的不知道為什麼上面評價這麼高，我覺得是糞課。 --- λ課名: The Advanced Web Developer Bootcamp ψ講師: Colt Steele, Elie Schoppik, Tim Garcia, Matt Lane μ更新: 04/2018 Ω推薦: ★★★ Ψ心得: 熱門講師 Colt 推出的進階課程，不過不如我預期中的那麼進階，找了他在舊金 山實戰營的一些講師小夥伴們來幫忙上課，當然也包括他所有課程中都會一直提 到的那個助教：他家的貓。（會拿寵物來舉例，很可愛，加分 > " <） 這些講師小夥伴們每個人負責不同的部份，在最一開始是由 Colt 介紹頁面的動 畫設計，這裡還不涉及 JavaScript 或 jQuery 的部分，主要是透過 CSS3 所提 供的虛擬類別（pseudo-class）、關鍵影格（Keyframes）來實作。 接著會講一下 Flexbox排版的部分，這是目前切板經常會用到的概念之一，第一 個小型作業是透過 Bootstrap配合前面學到的東西，搭配設計稿切一個完整的頁 面。第二部分會講前後端交互，根據歷史脈絡逐步介紹 fetch 和 AJAX，當然這 部分因為涉及到後端資料的訪問與等候資料回傳，所以順帶插入了 JavaScript 的異步操作、類別、回調概念…等。這裡有一個作業是利用 express 和 jQuery 弄了一個 To-Do List。 下一個部份是我覺得比較有價值也有趣的部分，是介紹了 D3.js 和 SVG 的使用 ，畢竟現在不論海內外，大家都在鼓吹數據分析和視覺化，這部分一定要跟風一 起潮一下的，雖然這部分不難，可是很有趣，也需要一點點時間上手。我覺得這 部分有想要走後端或全端的也可以看一下，會比較知道如果要傳資料給前端時， 怎麼去設計會比較優雅，這邊學起來感覺自己都能夠吹噓自己會大數據ㄌ一樣呢 ！ 課程的尾聲邁入了一個奇妙的節奏，終於講了很夯的前端框架 React/Redux，可 惜只是淺淺帶過不怎麼深入，最後的作業是一個製作一個仿 Twitter功能可是一 點都不 Twitter，介面又很醜的前後端專案，比起之前的 YelpCamp 多加了一些 功能，但還是老酒裝新瓶沒什麼新花樣。 對了，中間還穿插了一個單元測試的部分，不過也很無趣。 ω作品: - Todo-List ：https://hsins-jquery-todolist.herokuapp.com/ - Warbler ：https://warbler-client-jbh.herokuapp.com/ 後來學了 React 拿上面 Todo-List 的版型，使用同一個資料庫蓋了一個 MERN 版本： - Todo-List ：https://hsins-mern-todolist.herokuapp.com/ --- ＃ Colt Steele, Ian Schoonover, 07/2019 ＃ The Ultimate MySQL Bootcamp: Go from SQL Beginner to Expert ＃ 推薦：♥♥♥ 如果覺得單純學 MySQL不知道從哪裡下手，或者是看了一堆教學覺得很空虛沒有 實際應用的感覺，可以買這門。就是很基礎的講一些資料庫的使用，前面是先介 紹一些 SQL 的資料定義語言（DDL, Data Definition Language）部分，接著是 資料操作語言（DML, Data Manipulation Language）和資料查詢語言（DQL, Data Query Language）部分。 學完會對 MySQl 和 SQL 有初淺的認識，課程最後的專案是做一個…新產品上線 的電子郵件登陸網站，一樣是老酒變不出新把戲的 express.js 。如果指望能夠 學習到深入的資料庫概念，請左轉找 ＣＭＵ 的 15-445/645。 嗯…因為最後的專案真的很爛，我沒部署，我在世界上最大的同性交友平台上面 看了一下其他人…也都沒部署，可能是真的嫌太爛ㄌ。 --- ＃ Andrei Neagoie, 7/2019 ＃ The Complete Web Developer in 2019: Zero to Mastery ＃ 推薦：♥♥♥♥♥ 這是網頁開發入門的另外一堂入門神課，而且 Andrei 這位講師很優質的是有一 個社群平台，而且還算挺活躍，會不定期舉辦一些專案和挑戰給人練習，然後還 會有獎品，很潮！缺乏項目經驗和 GitHub 協作的人，英文不差的話也可以在這 上面和其他地區的人一起完成專案。（不過說真的，他們的有些代碼寫的真的爛 透ㄌ） 跟 Colt 那門差不多，不過這門的 React實作部分多一點，最後的專案我覺得算 是敗筆，一個 express.js + node.js + react.js + postgreSQL 有會員登入系 統，然後上傳圖片呼叫一個別人刻好的機器學習 API… 已新手來說作為入門第一堂還不錯。 --- ＃ Andrei Neagoie, 07/2019 ＃ The Complete Junior to Senior Web Developer Roadmap ＃ 推薦：♥♥♥♥ 比較潮一點的技術可以在這門學到一些初淺的東西，不過我認為難度都太低了。 不過這堂比較有一點讓轉職的前端工程師可以再往本科系已知的內容再跨一點， 比如資料庫的正規化、SSH 連線遠端伺服器進行開發，然後講一些持續集成與持 續部署的概念。 我覺得有帶到一些東西，可是深度不夠。 --- ＃ Stephen Grider, 06/2019 ＃ Modern React with Redux ＃ 推薦：♥♥♥♥ 上面一位非常推的講師，他的課程質量都很棒！這門算是 React/Redux 大禮包 ，講的很細很清楚，課程中會使用 draw.io 畫的各種圖來輔助說明，想要學習 怎麼教人寫代碼也是十分推薦可以參考他的風格。 重點是他有在更新課程，業界良心。但是這門課的專案我覺得都有點醜有點陽 春，不過很適合拿來自己實作自己的專案。 --- ＃ Stephen Grider, 06/2019 ＃ Node with React: Fullstack Web Development ＃ 推薦：♥♥♥♥♥ 如果說已經有 JavaScript 基礎想要直接學 React 的話，我更建議直接學這門 課而不用買上面那一門（覺得上一門廢話太多，不過新手可能比較喜歡），這 一門課就一個全端專案，實作一個透過 OAuth 登入還有串接 Stripe API 處理 金流的作品。這門課又會把 session/cookie 的概念講得更清楚一些，尤其在 串接 OAuth 和 Stripe 的部分，教學時輔助的圖片非常非常棒！甚至有時候我 直接看圖跳過他講解就可以繼續下去了。 不過我覺得這門最讓我驚豔的是他講解了他在實際開發項目中，如何進行開發 與佈署環境的分離，這是目前看到其他課程中不曾有的部分，而且穿插許多實 際開發時的 convention 用法！ 最後專案的完成可以參考： https://emaile.herokuapp.com/ --- ＃ Stephen Grider ＃ Go: The Complete Developer's Guide (Golang) ＃ 推薦：♥♥♥ 之前學弟找實習聽說對方可能會使用 Go 於是入手。其實 Stephen Grider 的 課我都怒推啦！對於新手來說，可是可能因為我們已經不太算新手了…這門課 的內容大概就是在講 Go 的一些特性和語法，其實有 C/C++基礎的人，對於指 針應該都駕輕就熟了，我覺得要學語法可以直接看官網文件，不需要購買這樣 的課程，這也是為什麼我給三顆星的原因，不過如果你是全全全新手要入門學 習的話，還是可以買的。 --- ＃ Stephen Grider ＃ ES6 Javascript: The Complete Developer's Guide ＃ 推薦：♥♥♥ 同上，其實他講的很棒，可是對我們來說真的有點小兒科了。 最後 Promise/Fetch 的部分值得一看，其他我覺得都還好，並沒有講到太多 更深入的東西，就是語法課。 --- ＃ The Complete React Developer Course (w/ Hooks and Redux) ＃ Andrew Mead ＃ 推薦：♥♥♥♥♥ 和 Grider 那門 Modern React and Redux 可以相輔相成。這一門課並不是直接 上來就教你使用 `create-react-app` 這樣的腳手架工具（boilerplate） 來開 發，而是會一步步帶你透過 Webpack來建立自己的腳手架工具（不過很可惜的是 使用的是 Webpack 3，跟 Webpack 4 有滿多地方不一樣，Grider 有另外一門課 會教 Webpack 2，聽說在 Webpack 5 推出之後他會更新課程）。 主要搭建兩個 APP，一個很基礎使用 class component 和 stateless component 搭建，並且將資料存放在瀏覽器的 localstorage；另外一個會使用到 Firebase ，這個東西在開發一些簡單網頁應用和手機應用都非常方便。 最後的專案可以參考： - Indecision App ：https://hsins.github.io/udemy_Indecision-App/ - Expensify App ：https://ritwickdey.github.io/expensify-app/#/ --- ＃ Jose Portilla 系列 ＃ 推薦： 這是我在 Udemy 上非常差的一個體驗，他的課我們好像一共買了四門，每一 門都爛到有剩，光是看投影片就知道沒有其他講師來的用心，然後每一門課 幾乎都是念稿，然後丟代碼（代碼風格我也不喜歡，變數命名、排版都沒有 依循一定的規範） 資料結構演算法那門更是爛，根本就是直接拿別人開源的書裡的內容跟代碼 來用，課程不會更新，頂多改一改代碼叫你自己跑，很明顯就是靠開這些課 賺賺一些白癡的智商稅，千萬千萬不要買他的課＝　＝ --- ＃ JavaScript: Understanding the Weird Parts ＃ Anthony Alicea ＃ 推薦：♥♥♥♥♥ 這門課極為推薦想進階入門 JavaScript 的同學，尤其學過一點作業系統和 編譯器概念會覺得豁然開朗，甚至會想去研究其他語言… 神課之一。 --- ＃ JavaScript Algorithms and Data Structures Masterclass ＃ Colt Steele ＃ 推薦：♥♥♥♥♥ 主要講資料結構跟演算法，憑良心說其實上的很好，不過我記得好像有些部 分的影片是用 ES5 Syntax 去寫的，現在已經染到了一種看到 var 就很罪惡 的病；然後他有些 coding style 我也不喜歡> " < 裡面有講到 Dijkstra's Algorithm 滿讓我意外的，甚至有講說會補上字串 的 KMP 算法，已經屌打 Udemy 上其他糞演算法的課了（我指 Jose Portilla） --- ＃ Vim Masterclass ＃ Jason Cannon ＃ 推薦：♥♥♥ 我覺得一點都不 Masterclass，內容滿基礎的，然後有些內容我覺得有點過時 ，已經有在用 Vim 的人可以不用買這堂課，買了也不用看影片，把他的作業 做一輪就可以了… --- 大概就這樣吧，還有一些攝影跟修圖的課，不過這裡不是攝影板就不放上來了 。一開始會想說上課就做個筆記，結果說真的滿不適合我的，因為之前當家教 的習慣都會寫得太詳細，對於我自己來說根本就是花時間去替他人作嫁衣（記 來給別人上課上的更快或可以不用買課程，實際上自己已經會了不用記錄） 一開始是寫在 HackMD：https://hackmd.io/e9Ma8W6QRqC7fusfryfuDA 可是發現內容一多就會開始頓…於是轉移到 GitHub Repo 裡 分單元跟課程整理：https://github.com/Hsins/Udemy-Notes 不過前陣子改用 VuePress 生成靜態頁面並且用 Travis 自動佈署 上面連結相對路徑會跑掉，最後頁面大概長這樣（還沒改完...）： https://reurl.cc/RM6Y9 後來都懶得做筆記了，一堆課程太淺太基礎，其實都重複內容 就比較需要紀錄的我都放在我的 WizNote 這個筆記軟體其實我滿推薦的（可惜就是可惜是對岸公司） 不然他提供跨平台（Win/macOS/Linux/ios/Android） 並且支援 Markdown 語法和輸入 MathJax 渲染數學式 價格又遠比 Evernote 划算，一年會員才三百台幣 --- 前端框架跟技術要入門不難，可是要會切版要切的漂亮要有天賦＝　＝ 最後建議如果是學習能力不錯的或學歷不錯的同學 關於資結演算法、作業系統這些課程 不要去 Udemy 上面學，直接找開放式課程來看會學得更多 -- ※ 文章網址: https://www.ptt.cc/bbs/Soft_Job/M.1562604814.A.927.html