作者：朱佳顺链接：https://www.zhihu.com/question/34915410/answer/95860877来源：知乎著作权归作者所有，转载请联系作者获得授权。半年多前看到这个问题，当时刚开始教女友写前端；半年后又看到这个问题，女友已找到较满意的工作，半年来感触良多，所以打算将这些日子的学习路径和方法写下来，希望能提供一个与 @yanyiwu 的答案不太一样的视角，帮助到有同样需求的人吧。背景：女友14年本科毕业，学的是商科，大学里一点编程都没接触过，毕业后也从事与编程无关的工作，工作了一年多觉得工作不合适自己，想换一份持续学习、有挑战的工作；与此同时在我的耳濡目染下渐渐对写程序产生了兴趣，于是我们就做了大胆的决定，转程序媛吧。我目前还是上海交通大学计算机系研二的学生，虽然未来的职业规划不是前端方向，但学生时期做过许多项目，教她前端入门完全没有问题，与此同时还需要帮她自底向上构建计算机基础知识，这一点对所有方向的程序员来说都至关重要。关于技术选型，我们没有多想直接选了Web前端，一来是因为效果容易展现保持学习的成就感，二来是因为NodeJS的存在可以很容易学一些后端知识。在学习方法上，我们分了好几条线路同时学习：线一：HTML/CSS/JavaScript这是一条入门和打基础的线。我们看的第一本书：《Head First HTML and CSS》，这是本非常基础的书，适合初学者作为第一本书。
之后做的第二件事：完成了codecademy（强烈推荐这个网站，计算机入门的好资源）上的JavaScript教程，并做了课后配套的几个网站项目。
看的第二本书：《JavaScript DOM编程艺术》，这也是本入门好书，讲了一个网站从简单到复杂是怎么一部部完成的，力荐。
看的第三本书：《Head First HTML5》这本书同样写得深入浅出，在讲JavaScript和DOM的时候与第二本书有一点点的重复，可以看看不同的书是如何讲解JavaScript的。
之后开始学JQuery，跟着http://try.jquery.com**走一遍就可以在项目里用了。女友表示学了原生JS再学JQuery实在太简单了。
然后看《JavaScript高级程序设计》，这本书很厚，女友表示没看完，只有在查具体的知识点才去翻阅。
线二：计算机科学导论我挑了两门赞誉度比较高的Introduction to Computer Science课给她上：Intro to Computer Science**（udacity的CS101）
Computer Science 101**（Coursera的CS101）
我记得其中一门是介绍计算机组成结构的、另一门是介绍一个搜索引擎的结构，这两门课是给新手准备的。这两门课学完可能对前端学习没有什么即时的效果，但从长远来看是绝对需要上的一门课。之后的某个学习阶段很有可能把这些知识结构上零散的点连接起来，形成自己的知识图谱。线三：算法与数据结构这条线也非常重要，是所有不同方向程序员所相交的部分。我们看的第一本书：《程序员的数学》，写得很入门，非常好。
接下来是可汗学院的算法课：https://www.khanacademy.org/computing/computer-science/algorithms**，这门课非常有意思，我记得讲了许多排序算法，通俗易懂，有一天晚上她学完一节课开始和我讨论一些排序算法的优劣，我就知道这门课还是很有价值的。
之后，开始上coursera的算法，教材是那本著名的算法第四版Coursera - Free Online Courses From Top Universities**，这门课有点难度，Java写课后作业，女友学得较吃力。
学算法的同时穿插着刷Leetcode，一开始easy题做一晚上都做不出，再后来easy题很快就有思路然后花半小时多才实现出来，再后来medium的题在和我讨论下也能勉强做出来，一步步进步就好，初学者学算法急不得。
线四：工具的使用编辑器（atom、vim），linux命令行（git...）linux命令行是自己手把手教的（cd、rm、mkdir......等基础命令），先调出个“黑框框”，然后在里面输入一些命令，输出一些结果，交互式的教学让女友学得非常快。然后要学git了，推荐codecademy上的git教程，通俗易懂。学完git后就把之前的项目全用git管理起来，推到github上面，也顺便熟悉了github这类仓库服务的使用流程。女友问有了atom为什么要学vim，我说万一哪一天你要到登录到另一台服务器上改代码，没有图形界面只能用vim，她好像明白了，但是到现在依然只会用vim的2个command：i、:wq...线五：计算机基础的学习（这是条长线）基础课主要体现在以下几个领域：操作系统、数据库、组成原理与体系结构、编译原理、计算机网络。目前这些课我都没有教过她，觉得没有到时候，理解不了。其中，计算机网络可能是我们下一阶段要学的内容，毕竟和前端还能扯上一些关系，容易理解一些。线六：项目做项目和看书一样重要，我们一直保持一个时间段至少有1个项目在写。我们写的第一个项目的灵感是来源于 @Jasin Yip的回答2015/8/28更新 Javascript 初学者如何思考才可以把脑中的东西转换成代码写出来？ - Jasin Yip 的回答。该回答中的井字棋有许多改进的地方，于是我们的第一个项目就是把它完善。看懂代码后在此基础上美化UI、增加了平均判定、悔棋、还实现了一个最简单的AI，等等。这个项目对她意义非常重大，经历了是从接手别人代码、修改、开发、调试、简单部署的整个过程。
跟着codecadamy上的课程把课后项目做一遍。
接下来我们模仿了知乎的登录/注册页面、首页，写了一个仿知乎的静态页面。我们就以现知乎网页为设计稿，根据这个模板写出了它对应的效果。这个项目提升了她从一个图片设计稿到完成网站原型的能力，顺便增加了一些CSS框架（Bootstrap）的使用经验。
做了若干个前端项目后，是时候有必要让她学习一下后端到底在干什么，于是我们用Express框架搭了一个最简单的网站，她当时JS已经比较熟，所以写起Node来上手也非常快，我们完成了一个“信息存储”的网站，很简单，在客户端A输入一段文字，获取KEY，在客户端B输入KEY，可以把文字拿回来。后端其实就存一个kv数据，但这个简单的网站把前后端都串起来了，从前端发送AJAX，到服务器收到HTTP包解析，拿到结果，错误处理，然后再把JSON数据发回去的过程。我打算之后增加“kv持久化”功能来向她介绍数据库的概念。
还做了其余很多练手小项目，不一一列举了。
线七：前端工程化前端这几年变化实在太快了，不在贵圈的人完全跟不上节奏。但仔细想想还好嘛，本质的东西其实是不变的，后来加的东西都是为了工程化。reactjs，gulp，webpack这些东西目前还在学习中，我自己也在学习，否则就跟不上她的节奏了。最后：上述多条线我们前后一共历时半年多一点，女友从一个什么都不会的小白，成长到一个能根据需求完成基本功能的初级开发者、能讨论算法、有基本的计算机素养，现在想来也是不容易。后来投简历面试，投了一家创业公司，没想到从技术面到HR面都非常顺利，就顺理成章的入职了，觉得我们运气非常好。公司不加班、技术氛围和leader都不错、团队很年轻，她比较满意，那我也很开心。感想：把技术的东西用通俗易懂的话讲出来很重要。比如和她解释AJAX的时候有个同步/异步的概念，我和她说，我们用微波炉加热东西，加热两分钟，这两分钟你可以就一直盯着微波炉看，其它什么事都不做（同步），没人会这么干对吧？所有人都是去洗个手/刷个微博/上个厕所（异步）...然后听到微波炉发出“叮”的一声（数据到达事件），提醒你去拿东西吃（执行回调函数），所以从这个意义上讲，异步才是正常的东西，同步都是反人类啊。
努力会有回报。虽然这句话听起来很鸡汤，但是很多时候它是对的，特别是当你还有一个正确方向的时候。
