看影片也能学写程式？13个你一定要知道的互动教学平台

前提摘要

在看接下来的介绍之前，你必须接受一个很残酷的事实，虽然这些优质的平台可以帮助你快速入门“写程式”这个领域，成本又非常的低，但你必须具备一定的“英文听力”跟“英文阅读”能力。当然我相信大家都有足够的能力！

此外，以下介绍租费都是采用“美金”当单位，所以看到 $20 一个月的时候请不要马上反应怎么这么便宜～

1. Codecademy

网站网址：https://www.codecademy.com/

资源数量：中等

租费方案：免费及 Pro 会员 ($19.99/M)

互动方式：实作题目

我要最先介绍的是 Codecademy，这个网站的名称其实很好记，因为是“Code”跟“Academy”的缩写。为何最先介绍它呢？因为我认为这是初学者的入门首选！

Codecademy 的内容其实没有说特别多，但包含了“HTML & CSS”、“Javascript”、“PHP”以及“Ruby”、“Python”，虽然没有包轮万象，但光这些资源就够让初学者成为一个入门的“网站工程师”了 (不仅仅是网页设计喔)！

以下是 Tommy 分享它在 Codecademy 的学习经历：

更多 Codecademy 成员的个人经验分享：https://www.codecademy.com/stories

现在，你可能已经迫不及待的想要试试 Codecademy 了？赶快到 Codecademy 注册一个账号吧！

登入后先选择一个课程主题，假设你想学习如何制作一个网站，就可以找到“Web Developer Skills”底下的“Make a Website”。

点进去课程主题后，会有这项课程的介绍，以及“Project”跟“Quiz”的数量，还有“多少人学习了这门课”、“预估花费时间”、“需要的程度”。

接着往下拉可以看到课程列表，基本上架构会区别为 Unit 下面有 Lesson、Quiz、Project，测验跟专案实作都要 Pro 会员才能使用。由于这网站比较少我适用的内容，故没办法买 Pro 会员跟大家详细介绍测验还有专案实作。

点进去 Lesson 一开始通常是像下图画面的简介，会说些这个课程会学习到什么以及一些简介。一开始很像会有精灵带大家认识界面，这边就不多介绍。

Codecademy 是透过“看左边题目”、“从中间实作”以及“试右边预览”的方式进行教学，题目都会比预期来得简单，只要仔细看题目相信大家都做得出来，如果真的做不出来，只要 Run 三次左右就会询问你是否需要协助，到时候可以让系统给你一些提示。

答对的话题目前面会打勾。

Codecademy 会发放 Badge 给你，只要完成一个阶段，就会拿到该阶段的 Badge，虽然不能代表什么，但可以当作给自己的肯定，顺便记录自己什么时候学了什么东西。Badge 非常容易取得，为了展示，我花了几小时就拿到了 10 个 Badge，相信你可以拿到更多。

Profile 页面可以看到自己完成了多少技能的学习，以及取得到多少 Badge，还有点数跟蝉联纪录。

最后顺便提一下 Codecademy Pro 会员，让大家了解一下这该如何使用。

互动的课程：其实免费会员就可以体验到互动课程，在这边 Codecademy 又特别强调了一次。

随堂测验：测验的部分就真的只有 Pro 会员可以体验了，透过小测验的方式可以加强对细项的印象，一方面还可以给自己一个肯定。

与业界接轨的专案实作：这个我就觉得很重要了，你学了新技能，也要知道这项技能该如何运用。所以 Codecademy 提供了“Real-Workd Projects”让大家用学到的技能与业界接轨。

路径规划：Codecademy 提供了三种路径，假设你希望成为网页前端工程师，就可以透过“Front End Web Development”的路径做学习，让学习更有效率。

线上真人协助：遇到困难？学习的过程中难免会。Pro 方案还提供了线上的小老师，协助你解决目前的难题。

如果 Codecademy 的课程对你来说很受用，租用 Codecademy 其实是很划算的，一个月 $19.99 有一系列的课程可以学习，还有线上家教。我同时也是台湾某知名电脑补习班的“老学员”，据我所知光 Frontend Development 那套，在电脑补习班少说要花两三万才学得到，而且不是缴钱就马上可以学，还要等补习班凑到人数才开课，接着一周要跑补习班三四趟。虽然补习班比较有“真实感”，还可以看到活生生的老师，但要是我，绝对是选择透过这些平台在家自修。

2. Code School

网站网址：https://www.codeschool.com/

资源数量：多

租费方案：免费及付费会员 ($29/M or $290/Y)

互动方式：看影片及实作

Code School 其实可以跟 Codecademy 并列第一，只不过我们是在排顺序不是在排名次～Code School 跟 Codecademy 一样内容都很优质，不过 Code School 还有影片辅助教学，让学习更具有效率！且 Code School 还提供了官方讨论区，可以线上跟其他使用者针对课程做讨论，如果有需要，这会是个非常有帮助的功能。因为拍摄影片成本比较高的关系，Code School 售价稍微贵 Codecademy 一些，每个月要 $29，一次租一年的话只要 $290，如果你有考虑租一年期，请务必想一下，你要看的内容是否真的需要一年才能完成。

在课程规划的部分，Code School 不像 Codecademy 用最终成果来做路径规划，而是用“语言”来做规划。这样对完全不了解的初学者来说需要先花时间去认识每个语言才能做决定，故将 Codecademy 放到第一顺位。不过 Code School 是我个人比较喜欢的，因为它的内容让我非常满意，特别是 Javascript 系列，非常的完整。如果你跟我一样以 Javascript 为主，选 Code School 就对了！！

下图是路径的排版，左侧是推荐的课程学习顺序，右侧有完成进度。

为了写这篇文章，我花了一些时间看完也实作完 Google 赞助 Code School 推出的“Shaping up with Angular.js”课程，因此得到了一些 Badge，这个制度跟 Codecademy 类似，只是数量没这么多。

下图是课程的页面，左侧是课程的列表，用 Level 做排序，每个 Level 都有一定的影片跟实作题，右侧则是课程的讲师以及助教等教学团队。如果你想跟其他正在学习这个课程的网友讨论，可以看到右侧的“Discuss Course”。

开始一个 HTML 的基础课程。一开始可以浏览这个 Level 的内容，先看影片，接着就开始实作，几乎所有课程都维持这样的模式，除了有些没有影片的。

影片播放界面大概是这样，多看几次你就熟了！

实作界面“大概”是这样，每种语言跟课程都不太一样。但会有几个纲要是一样的，分别是“实作介绍 (告诉你实作什么)”、“工作项目 (要你实作出来的东西)”以及“编辑区”跟“预览区”。大部分题目在无法解题时都可以用 Code School 的点数“PTS”购买解答，也可以点 Task 右边的“?”购买提示。

完成课程的话，Code School 会提供一些课程相关的学习资源，以及推荐您其他课程。

Code School 不像是 Codecademy，在使用免费会员时，Codecademy 让人感觉可买可不买，因为没买顶多没有测验跟专案实作。但 Code School 就不一样，只要付费的课程，看完了 Free Level，接下来的 Level 就得乖乖付费才能看。但只要真的有用到，花这点小钱绝对是值得的，就像到补习班要缴补习费一样的概念。

3. Team Tree House

网站网址：https://teamtreehouse.com/

资源数量：多

租费方案：Basic ($25/M) / Pro ($49/M)

互动方式：影片及实作及测验

Team Tree House 跟前两者很雷同，但比前两者更加完善，前面有的我都有，前面没有的我也有。以下是 Team Tree House 的特色功能。

课程内容的部分跟前面也非常的雷同，但我没有使用过所以不比较。

租费的部分有分两个方案，这边的选择就见仁见智了。由于 Hiram 小编我已经在打呵欠了，就不详细介绍，有兴趣的你，欢迎点连结直接试用看看！注册连结：https://teamtreehouse.com/subscribe/plans。

4. egghead

网站网址：https://egghead.io/

资源数量：中等

租费方案：免费及付费会员 ($199.99/Y)

互动方式：教学影片、线上讨论

egghead (蛋头) 算是比较单纯的影片教学平台，虽然没有以上三种这么强大的线上实作系统，内容仍然保持在一定水准之上。光是 Angular 1 系列的教学就有“105”部影片！虽然每部都只有短短的数分钟，但分得非常细，且非常有重点，入门非常的适用！

此外，egghead 的主题都是以 Javascript 为主，且比较有深度，通常都是 Framework 或一些大型的 Library。

以下是 egghead 的课程类型一览：

5. Coursera

网站网址：https://www.coursera.org/

资源数量：专业内容：中等，整体：多。

租费方案：视课程而定

互动方式：教学影片

6. Lynda

网站网址：https://www.lynda.com/

7. Udemy

网站网址：https://www.udemy.com/courses/

8. KHANAcadem

网站网址：https://www.khanacademy.org/

9. LearnCode.academy

网站网址：https://www.youtube.com/channel/UCVTlvUkGslCV_h-nSAId8Sw

网站类型：YouTube 频道

10. Coder’s Guide

网站网址：https://www.youtube.com/channel/UCVTlvUkGslCV_h-nSAId8Sw

网站类型：YouTube 频道

11. Udacity

网站网址：https://www.udacity.com/

网站类型：大型线上学习平台

12. edX

网站网址：https://www.edx.org/

网站类型：大型线上学习平台

13. GA Dash

网站网址：https://dash.generalassemb.ly/

赶快把这些网站通通存到“Google Save”吧！