如何教会非计算机专业的女友写代码

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

背景:

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

1342582137-810237896

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

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

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

线一:HTML/CSS/JavaScript

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

  • 我们看的第一本书:《深入浅出HTML与CSS》,这是本非常基础的书,适合初学者作为第一本书。
  • 之后做的第二件事:完成了codecademy(强烈推荐这个网站,计算机入门的好资源)上的JavaScript教程,并做了课后配套的几个网站项目。
  • 看的第二本书:《JavaScript DOM编程艺术》,这也是本入门好书,讲了一个网站从简单到复杂是怎么一部部完成的,力荐。
  • 看的第三本书:《深入浅出HTML5编程》这本书同样写得深入浅出,在讲JavaScript和DOM的时候与第二本书有一点点的重复,可以看看不同的书是如何讲解JavaScript的。
  • 之后开始学JQuery,跟着try.jquery.com走一遍就可以在项目里用了。女友表示学了原生JS再学JQuery实在太简单了。
  • 然后看《JavaScript高级程序设计》,这本书很厚,女友表示没看完,只有在查具体的知识点才去翻阅。

线二:计算机科学导论

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

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

线三:算法与数据结构

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

  • 我们看的第一本书:《程序员的数学》,写得很入门,非常好。
  • 接下来是可汗学院的算法课,这门课非常有意思,我记得讲了许多排序算法,通俗易懂,有一天晚上她学完一节课开始和我讨论一些排序算法的优劣,我就知道这门课还是很有价值的。
  • 之后,开始上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

余下全文(1/3)
分享这篇文章:

请关注我们:

共有 13 条讨论

  1. raiden 对这篇文章的反应是赞一个
  2. 胡雨 对这篇文章的反应是赞一个
  3. hello 对这篇文章的反应是俺的神呀
  4. CQY 对这篇文章的反应是俺的神呀
  5. xing 对这篇文章的反应是mark
  6. 有这样的女友真是太好啦,很多女生估计看了第一本书就放弃不看了 (编程哪有韩剧好看

  7. 晴天 对这篇文章的反应是好文很实用

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注