Udemy前端公开课点评推荐 | 学习经验与心得全总结

前端入门相对容易,但是前端覆盖的知识面广。对于刚开始学习前端的同学们来说,若能更有效更系统地学习前端知识,定能在成为优秀的前端工程师路上事半功倍。此帖整合了Udemy上很好的前端公开课内容。作者贴心地对每门课附上了推荐指数(满分为5个心)。希望想要学习前端的同学们看完此帖少走弯路,早日成为优秀的前端工程师。

前端基础篇

The Web Developer Bootcamp

讲师:Colt Steele

更新日期:08/2019

推荐:♥♥♥♥♥

这门课应该是网页开发入门神课之一(虽然我想说没有之一,可是还真的有另一堂还算不错)。不要看更新的日期好像在最近,在国外的课程评价中都是说他这门用的技术太旧了,但其实也还好。这门课会从最基本的HTML/CSS/JavaScript 开始,然后穿插一些能让入门新手很快有感的小作业,精简美观屌打其他课程。课程中期会加入 jQuery 和 Bootstrap(之前是旧版,一直被人说课程太旧之后,更新到了 Bootstrap 4),然后趁更新的时后放入了一些 JavaScript 的进阶内容,包括作用域、提升(Hoist)和 ‘this’ 的咩咩角角。
课程的最后会手把手带你做一个小全端项目,使用 Node.js、Express.js 以及mongoDB 来建置,然后带一些RESTful/ Cookie/ Session的概念,学完这门大概算登堂入室懂得自己找关键字了。

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 架构。

The Complete Web Developer in 2019: Zero to Mastery

讲师:Andrei Neagoie

更新日期:8/2019

推荐:♥♥♥♥♥

这是网页开发入门的另外一堂入门神课,而且 Andrei 这位讲师很优质的是有一个社群平台,而且还算挺活跃,会不定期举办一些专案和挑战给人练习,然后还会有奖品,很潮!缺乏项目经验和 GitHub 协作的人,英文不差的话也可以在这上面和其他地区的人一起完成专案(不过说真的,他们的有些代码写的真的烂透ㄌ) 。
跟 Colt 那门差不多,不过这门的 React实作部分多一点,最后的专案我觉得算是败笔,一个 express.js + node.js + react.js + postgreSQL 有会员登入系统,然后上传图片呼叫一个别人刻好的机器学习 API。
新手来说作为入门第一堂还不错。

JavaScript: Understanding the Weird Parts

讲师:Anthony Alicea

更新日期:08/2015

推荐:♥♥♥♥♥

这门课极为推荐想进阶入门 JavaScript 的同学,尤其学过一点作业系统和编译器概念会觉得豁然开朗,甚至会想去研究其他语言。
神课之一。

JavaScript Algorithms and Data Structures Masterclass

讲师:Colt Steele
更新日期:11/2018
推荐:♥♥♥♥♥

主要讲资料结构跟演算法,凭良心说其实上得很好。不过我记得好像有些部分的影片是用 ES5 Syntax 去写的,现在已经染到了一种看到 var 就很罪恶的病;然后他有些 coding style 我也不喜欢。
里面有讲到 Dijkstra’s Algorithm 蛮让我意外的,甚至有讲说会补上字串的 KMP 算法,已经屌打 Udemy 上其他粪演算法的课了(我指 Jose Portilla)

前端进阶篇

The Advanced Web Developer Bootcamp

讲师:Colt Steele, Elie Schoppik, Tim Garcia, Matt Lane

更新日期:04/2018

推荐:♥♥♥

热门讲师 Colt 的进阶课程,可是也不怎么进阶,找了他实战营的一些小伙伴们来帮忙上课,他的所有课程都会一直提到一个不出镜的助教:他家的猫。

不同人负责不同部份,最一开始是讲页面动画设计,主要是 CSS3 提供的虚拟类别(pseudo-class)、关键影格(Keyframes),接着讲一下 Flexbox 排版的部分,第一步份小练习又是 Bootstrap…再来第二部分会讲前后端交互,一路会慢慢讲 Fetch、AJAX,当然这部分会涉及到 JavaScript 的异步操作、类别、回调…等,实作部分用 express 和 jQuery 又弄了一个 To-Do List。

我觉得比较有价值的大概就是介绍了 D3.js 和 SVG 的使用,毕竟现在大家都在大数据大数据嘛!资料视觉化一定要跟风一起潮一下的,这边不难可是很有趣。

课程的后面迈入了一个奇妙的节奏,开始讲 React/Redux,不过浅浅带过不怎麽深入,最后专案是一个仿 Twitter 功能可是一点都不 Twitter 介面又很丑的全端专案,比起之前的 YelpCamp 多加了一些功能,觉得还是老酒装新瓶没什么新花样。
对了,中间还穿插了一个单元测试的部分,不过也很无趣。

The Complete Junior to Senior Web Developer Roadmap

讲师:Andrei Neagoie

更新日期:07/2019

推荐:♥♥♥♥

比较潮一点的技术可以在这门学到一些初浅的东西,不过我认为难度都太低了。不过这堂比较有一点让转职的前端工程师可以再往本科系已知的内容再跨一点,比如资料库的正规化、SSH 连线远端伺服器进行开发,然后讲一些持续集成与持续部署的概念。
我觉得有带到一些东西,可是深度不够。

Modern React with Redux

讲师:Stephen Grider

更新日期:08/2019

推荐:♥♥♥♥

上面一位非常推的讲师,他的课程质量都很棒!这门算是 React/Redux 大礼包,讲的很细很清楚,课程中会使用 draw.io 画的各种图来辅助说明,想要学习怎麽教人写代码也是十分推荐可以参考他的风格。
重点是他有在更新课程,业界良心。但是这门课的专案我觉得都有点丑有点阳春,不过很适合拿来自己实作自己的专案。

Node with React: Fullstack Web Development

讲师:Stephen Grider

更新日期:06/2019

推荐:♥♥♥♥♥

如果说已经有 JavaScript 基础想要直接学 React 的话,我更建议直接学这门课而不用买上面那一门(觉得上一门废话太多,不过新手可能比较喜欢),这一门课就一个全端专案,实作一个透过 OAuth 登入还有串接 Stripe API 处理金流的作品。这门课又会把 session/cookie 的概念讲得更清楚一些,尤其在串接 OAuth 和 Stripe 的部分,教学时辅助的图片非常非常棒!甚至有时候我直接看图跳过他讲解就可以继续下去了。
不过我觉得这门最让我惊艳的是他讲解了他在实际开发项目中,如何进行开发与佈署环境的分离,这是目前看到其他课程中不曾有的部分,而且穿插许多实际开发时的 convention 用法!

The Complete React Developer Course (w/ Hooks and Redux)

讲师:Andrew Mead

更新日期:05/2019

推荐:♥♥♥♥♥

和 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,这个东西在开发一些简单网页应用和手机应用都非常方便。