去年年底脑波太弱，想买相机镜头买不下手，结果跟学弟合资买了一堆 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://webptt.com/cn.aspx?n=bbs/Soft_Job/M.1562604814.A.927.html 要学前端的话，课程太多了… PluralSight 之前有稍微看过，感觉更新的幅度比不上 Udemy... 然後课程不是买断，是用订阅方式无形中的成本太贵了QQ 说到免费课程我就赌烂，以前年少无知也领了一堆 可惜的是免费课程多半课程品质堪忧 根本是放着占空间，我买课程之前还特地砍了帐号重创 Colt 那门其实讲解的并不差，如果主要是用 JavaScript 开发或面试，这门课 的内容满够用了，一般的网页前後端用不太到复杂的资料结构跟演算法。比较看 重资料结构跟演算法的职缺，也比较少是用 JavaScript 开发… 作业系统我自己是看恐龙书的原文和中译，对照着看比较有效率；另外恐龙书作 者的官网上有放投影片和重点整理，後者算是不错的素材，如果你有心一点，网 路上应该也能找到一位师大博班和另外一位台大硕班整理的作业系统笔记，前者 有缺漏，後者还满完整的。如果想要看课程又不会嫌弃黑背景很丑的投影片的话 ，大维的 3310 有放在 YouTube 上。 当然不只…不过我这边说的并不是资料结构跟演算法在不同的程式语言上实作起 来的差别（但我还是想说建议用 C/C++ 比较好评估实际的时间复杂度状况） 深度绝对是 Berkeley 的 CS61B会谈及比较多的内容，光是课程作业和阅读素材 的量就不是 Udemy可以相比拟的，为了贩售课程，当然是越浅显越好嘛！这个取 决你的目的吧？ ※ 编辑: Hsins (140.112.247.1 台湾), 08/29/2019 03:02:55