点击上方蓝色字体关注「程序员共读」

这半年一直在教女朋友写程序，女朋友工作确定后，正好知乎上也有这么一个问题《如何教会非计算机专业的女友写代码》，就分享了一下学习心得和方法，写了一个答案，没想到没过几天点赞数就上千了，看来前端培训这个市场还是有非常大的缺口啊。于是就转到自己博客上吧，给更多正在前端路上战斗的朋友们一些参考。

背景：

女友14年本科毕业，学的是商科，大学里一点编程都没接触过，毕业后也从事与编程无关的工作，工作了一年多觉得工作不合适自己，想换一份持续学习、有挑战的工作；与此同时在我的耳濡目染下渐渐对写程序产生了兴趣，于是我们就做了大胆的决定，转程序媛吧。

我目前还是上海交通大学计算机系研二的学生，虽然未来的职业规划不是前端方向，但学生时期做过许多项目，教她前端入门完全没有问题，与此同时还需要帮她自底向上构建计算机基础知识，这一点对所有方向的程序员来说都至关重要。

关于技术选型，我们没有多想直接选了Web前端，一来是因为效果容易展现保持学习的成就感，二来是因为NodeJS的存在可以很容易学一些后端知识。

在学习方法上，我们分了好几条线路同时学习：

线一：HTML/CSS/JavaScript

这是一条入门和打基础的线。

• 我们看的第一本书：《Head First HTML and CSS》，这是本非常基础的书，适合初学者作为第一本书。

• 之后做的第二件事：完成了codecademy（强烈推荐这个网站，计算机入门的好资源）上的JavaScript教程，并做了课后配套的几个网站项目。

• 看的第二本书：《JavaScript DOM编程艺术》，这也是本入门好书，讲了一个网站从简单到复杂是怎么一部部完成的，力荐。

• 看的第三本书：《Head First HTML5》这本书同样写得深入浅出，在讲JavaScript和DOM的时候与第二本书有一点点的重复，可以看看不同的书是如何讲解JavaScript的。

• 之后开始学JQuery，跟着try.jquery.com走一遍就可以在项目里用了。女友表示学了原生JS再学JQuery实在太简单了。

• 然后看《JavaScript高级程序设计》，这本书很厚，女友表示没看完，只有在查具体的知识点才去翻阅。

线二：计算机科学导论

我挑了两门赞誉度比较高的Introduction to Computer Science课给她上：

• Intro to Computer Science（udacity的CS101）

• Computer Science 101（Coursera的CS101）

我记得其中一门是介绍计算机组成结构的、另一门是介绍一个搜索引擎的结构，这两门课是给新手准备的。关注公众号：程序员大咖 免费领取视频教程 这两门课学完可能对前端学习没有什么即时的效果，但从长远来看是绝对需要上的一门课。之后的某个学习阶段很有可能把这些知识结构上零散的点连接起来，形成自己的知识图谱。

线三：算法与数据结构

这条线也非常重要，是所有不同方向程序员所相交的部分。

• 我们看的第一本书：《程序员的数学》，写得很入门，非常好。

• 接下来是可汗学院的算法课，这门课非常有意思，我记得讲了许多排序算法，通俗易懂，有一天晚上她学完一节课开始和我讨论一些排序算法的优劣，我就知道这门课还是很有价值的。

• 之后，开始上coursera的算法，教材是那本著名的算法第四版，这门课有点难度，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个项目在写。

• 我们写的第一个项目的灵感是来源于这个回答，于是我们的第一个项目就是把它完善。看懂代码后在此基础上美化UI、增加了平均判定、悔棋、还实现了一个最简单的AI，等等。这个项目对她意义非常重大，经历了是从接手别人代码、修改、开发、调试、简单部署的整个过程。

• 跟着codecadamy上的课程把课后项目做一遍。

• 接下来我们模仿了知乎的登录/注册页面、首页，写了一个仿知乎的静态页面。我们就以现知乎网页为设计稿，根据这个模板写出了它对应的效果。这个项目提升了她从一个图片设计稿到完成网站原型的能力，顺便增加了一些CSS框架（Bootstrap）的使用经验。

• 做了若干个前端项目后，是时候有必要让她学习一下后端到底在干什么，于是我们用Express框架搭了一个最简单的网站，她当时JS已经比较熟，所以写起Node来上手也非常快，我们完成了一个“信息存储”的网站，很简单，在客户端A输入一段文字，获取KEY，在客户端B输入KEY，可以把文字拿回来。后端其实就存一个kv数据，但这个简单的网站把前后端都串起来了，从前端发送AJAX，到服务器收到HTTP包解析，拿到结果，错误处理，然后再把JSON数据发回去的过程。我打算之后增加“kv持久化”功能来向她介绍数据库的概念。

• 还做了其余很多练手小项目，不一一列举了。

线七：前端工程化

前端这几年变化实在太快了，不在贵圈的人完全跟不上节奏。 但仔细想想还好嘛，本质的东西其实是不变的，后来加的东西都是为了工程化。 reactjs，gulp，webpack这些东西目前还在学习中，我自己也在学习，否则就跟不上她的节奏了。

最后：

上述多条线我们前后一共历时半年多一点，女友从一个什么都不会的小白，成长到一个能根据需求完成基本功能的初级开发者、能讨论算法、有基本的计算机素养，现在想来也是不容易。

后来投简历面试，投了一家创业公司，没想到从技术面到HR面都非常顺利，就顺理成章的入职了，觉得我们运气非常好。公司不加班、技术氛围和leader都不错、团队很年轻，她比较满意，那我也很开心。

感想：

把技术的东西用通俗易懂的话讲出来很重要。

比如和她解释AJAX的时候有个同步/异步的概念，我和她说，我们用微波炉加热东西，加热两分钟，这两分钟你可以就一直盯着微波炉看，其它什么事都不做（同步），没人会这么干对吧？所有人都是去洗个手/刷个微博/上个厕所（异步）…然后听到微波炉发出“叮”的一声（数据到达事件），提醒你去拿东西吃（执行回调函数），所以从这个意义上讲，异步才是正常的东西，同步都是反人类啊。

努力会有回报。虽然这句话听起来很鸡汤，但是很多时候它是对的，特别是当你还有一个正确方向的时候。

转载自：lifeofzjs.com

文章地址：http://lifeofzjs.com/blog/2016/05/01/how-to-teach-gl-write-code/

作者：朱佳顺