點(diǎn)擊上方藍(lán)色字體關(guān)注「程序員共讀」

這半年一直在教女朋友寫程序留攒，女朋友工作確定后，正好知乎上也有這么一個問題《如何教會非計(jì)算機(jī)專業(yè)的女友寫代碼》，就分享了一下學(xué)習(xí)心得和方法白魂，寫了一個答案，沒想到?jīng)]過幾天點(diǎn)贊數(shù)就上千了上岗，看來前端培訓(xùn)這個市場還是有非常大的缺口啊福荸。于是就轉(zhuǎn)到自己博客上吧，給更多正在前端路上戰(zhàn)斗的朋友們一些參考肴掷。

背景：

女友14年本科畢業(yè)敬锐，學(xué)的是商科，大學(xué)里一點(diǎn)編程都沒接觸過呆瞻，畢業(yè)后也從事與編程無關(guān)的工作台夺，工作了一年多覺得工作不合適自己，想換一份持續(xù)學(xué)習(xí)痴脾、有挑戰(zhàn)的工作颤介；與此同時(shí)在我的耳濡目染下漸漸對寫程序產(chǎn)生了興趣，于是我們就做了大膽的決定赞赖，轉(zhuǎn)程序媛吧滚朵。

我目前還是上海交通大學(xué)計(jì)算機(jī)系研二的學(xué)生，雖然未來的職業(yè)規(guī)劃不是前端方向前域，但學(xué)生時(shí)期做過許多項(xiàng)目始绍，教她前端入門完全沒有問題，與此同時(shí)還需要幫她自底向上構(gòu)建計(jì)算機(jī)基礎(chǔ)知識话侄，這一點(diǎn)對所有方向的程序員來說都至關(guān)重要亏推。

關(guān)于技術(shù)選型，我們沒有多想直接選了Web前端年堆，一來是因?yàn)樾Ч菀渍宫F(xiàn)保持學(xué)習(xí)的成就感吞杭，二來是因?yàn)镹odeJS的存在可以很容易學(xué)一些后端知識。

在學(xué)習(xí)方法上变丧，我們分了好幾條線路同時(shí)學(xué)習(xí)：

線一：HTML/CSS/JavaScript

這是一條入門和打基礎(chǔ)的線芽狗。

• 我們看的第一本書：《Head First HTML and CSS》，這是本非逞髋睿基礎(chǔ)的書童擎，適合初學(xué)者作為第一本書滴劲。

• 之后做的第二件事：完成了codecademy（強(qiáng)烈推薦這個網(wǎng)站，計(jì)算機(jī)入門的好資源）上的JavaScript教程顾复，并做了課后配套的幾個網(wǎng)站項(xiàng)目班挖。

• 看的第二本書：《JavaScript DOM編程藝術(shù)》，這也是本入門好書芯砸，講了一個網(wǎng)站從簡單到復(fù)雜是怎么一部部完成的萧芙，力薦。

• 看的第三本書：《Head First HTML5》這本書同樣寫得深入淺出假丧，在講JavaScript和DOM的時(shí)候與第二本書有一點(diǎn)點(diǎn)的重復(fù)双揪，可以看看不同的書是如何講解JavaScript的。

• 之后開始學(xué)JQuery包帚，跟著try.jquery.com走一遍就可以在項(xiàng)目里用了渔期。女友表示學(xué)了原生JS再學(xué)JQuery實(shí)在太簡單了。

• 然后看《JavaScript高級程序設(shè)計(jì)》渴邦，這本書很厚擎场，女友表示沒看完，只有在查具體的知識點(diǎn)才去翻閱几莽。

線二：計(jì)算機(jī)科學(xué)導(dǎo)論

我挑了兩門贊譽(yù)度比較高的Introduction to Computer Science課給她上：

• Intro to Computer Science（udacity的CS101）

• Computer Science 101（Coursera的CS101）

我記得其中一門是介紹計(jì)算機(jī)組成結(jié)構(gòu)的迅办、另一門是介紹一個搜索引擎的結(jié)構(gòu)，這兩門課是給新手準(zhǔn)備的章蚣。關(guān)注公眾號：程序員大咖 免費(fèi)領(lǐng)取視頻教程 這兩門課學(xué)完可能對前端學(xué)習(xí)沒有什么即時(shí)的效果站欺，但從長遠(yuǎn)來看是絕對需要上的一門課。之后的某個學(xué)習(xí)階段很有可能把這些知識結(jié)構(gòu)上零散的點(diǎn)連接起來纤垂，形成自己的知識圖譜矾策。

線三：算法與數(shù)據(jù)結(jié)構(gòu)

這條線也非常重要，是所有不同方向程序員所相交的部分峭沦。

• 我們看的第一本書：《程序員的數(shù)學(xué)》贾虽，寫得很入門，非常好吼鱼。

• 接下來是可汗學(xué)院的算法課蓬豁，這門課非常有意思，我記得講了許多排序算法菇肃，通俗易懂地粪，有一天晚上她學(xué)完一節(jié)課開始和我討論一些排序算法的優(yōu)劣，我就知道這門課還是很有價(jià)值的琐谤。

• 之后蟆技，開始上coursera的算法，教材是那本著名的算法第四版，這門課有點(diǎn)難度质礼，Java寫課后作業(yè)旺聚，女友學(xué)得較吃力。

• 學(xué)算法的同時(shí)穿插著刷Leetcode眶蕉，一開始easy題做一晚上都做不出砰粹，再后來easy題很快就有思路然后花半小時(shí)多才實(shí)現(xiàn)出來，再后來medium的題在和我討論下也能勉強(qiáng)做出來妻坝，一步步進(jìn)步就好，初學(xué)者學(xué)算法急不得惊窖。

線四：工具的使用

編輯器（atom刽宪、vim），linux命令行（git…）

linux命令行是自己手把手教的（cd界酒、rm圣拄、mkdir……等基礎(chǔ)命令），先調(diào)出個“黑框框”毁欣，然后在里面輸入一些命令庇谆，輸出一些結(jié)果，交互式的教學(xué)讓女友學(xué)得非称敬快饭耳。

然后要學(xué)git了，推薦codecademy上的git教程执解，通俗易懂寞肖。學(xué)完git后就把之前的項(xiàng)目全用git管理起來，推到github上面衰腌，也順便熟悉了github這類倉庫服務(wù)的使用流程新蟆。

女友問有了atom為什么要學(xué)vim，我說萬一哪一天你要到登錄到另一臺服務(wù)器上改代碼右蕊，沒有圖形界面只能用vim琼稻，她好像明白了，但是到現(xiàn)在依然只會用vim的2個command：i饶囚、:wq…

線五：計(jì)算機(jī)基礎(chǔ)的學(xué)習(xí)（這是條長線）

基礎(chǔ)課主要體現(xiàn)在以下幾個領(lǐng)域：操作系統(tǒng)帕翻、數(shù)據(jù)庫、組成原理與體系結(jié)構(gòu)萝风、編譯原理熊咽、計(jì)算機(jī)網(wǎng)絡(luò)。目前這些課我都沒有教過她闹丐，覺得沒有到時(shí)候横殴，理解不了。其中，計(jì)算機(jī)網(wǎng)絡(luò)可能是我們下一階段要學(xué)的內(nèi)容衫仑，畢竟和前端還能扯上一些關(guān)系梨与，容易理解一些。

線六：項(xiàng)目

做項(xiàng)目和看書一樣重要文狱，我們一直保持一個時(shí)間段至少有1個項(xiàng)目在寫粥鞋。

• 我們寫的第一個項(xiàng)目的靈感是來源于這個回答，于是我們的第一個項(xiàng)目就是把它完善瞄崇∩氪猓看懂代碼后在此基礎(chǔ)上美化UI、增加了平均判定苏研、悔棋等浊、還實(shí)現(xiàn)了一個最簡單的AI，等等摹蘑。這個項(xiàng)目對她意義非常重大筹燕，經(jīng)歷了是從接手別人代碼、修改衅鹿、開發(fā)撒踪、調(diào)試、簡單部署的整個過程大渤。

• 跟著codecadamy上的課程把課后項(xiàng)目做一遍制妄。

• 接下來我們模仿了知乎的登錄/注冊頁面、首頁泵三，寫了一個仿知乎的靜態(tài)頁面忍捡。我們就以現(xiàn)知乎網(wǎng)頁為設(shè)計(jì)稿，根據(jù)這個模板寫出了它對應(yīng)的效果切黔。這個項(xiàng)目提升了她從一個圖片設(shè)計(jì)稿到完成網(wǎng)站原型的能力砸脊，順便增加了一些CSS框架（Bootstrap）的使用經(jīng)驗(yàn)。

• 做了若干個前端項(xiàng)目后纬霞，是時(shí)候有必要讓她學(xué)習(xí)一下后端到底在干什么凌埂，于是我們用Express框架搭了一個最簡單的網(wǎng)站，她當(dāng)時(shí)JS已經(jīng)比較熟诗芜，所以寫起Node來上手也非惩ィ快，我們完成了一個“信息存儲”的網(wǎng)站伏恐，很簡單孩哑，在客戶端A輸入一段文字，獲取KEY翠桦，在客戶端B輸入KEY横蜒，可以把文字拿回來胳蛮。后端其實(shí)就存一個kv數(shù)據(jù)，但這個簡單的網(wǎng)站把前后端都串起來了丛晌，從前端發(fā)送AJAX仅炊，到服務(wù)器收到HTTP包解析，拿到結(jié)果澎蛛，錯誤處理抚垄，然后再把JSON數(shù)據(jù)發(fā)回去的過程。我打算之后增加“kv持久化”功能來向她介紹數(shù)據(jù)庫的概念谋逻。

• 還做了其余很多練手小項(xiàng)目呆馁，不一一列舉了。

線七：前端工程化

前端這幾年變化實(shí)在太快了毁兆，不在貴圈的人完全跟不上節(jié)奏浙滤。 但仔細(xì)想想還好嘛，本質(zhì)的東西其實(shí)是不變的荧恍，后來加的東西都是為了工程化瓷叫。 reactjs屯吊，gulp送巡，webpack這些東西目前還在學(xué)習(xí)中，我自己也在學(xué)習(xí)盒卸，否則就跟不上她的節(jié)奏了骗爆。

最后：

上述多條線我們前后一共歷時(shí)半年多一點(diǎn)，女友從一個什么都不會的小白蔽介，成長到一個能根據(jù)需求完成基本功能的初級開發(fā)者摘投、能討論算法、有基本的計(jì)算機(jī)素養(yǎng)虹蓄，現(xiàn)在想來也是不容易犀呼。

后來投簡歷面試，投了一家創(chuàng)業(yè)公司薇组，沒想到從技術(shù)面到HR面都非常順利外臂，就順理成章的入職了，覺得我們運(yùn)氣非常好律胀。公司不加班宋光、技術(shù)氛圍和leader都不錯、團(tuán)隊(duì)很年輕炭菌，她比較滿意罪佳，那我也很開心。

感想：

把技術(shù)的東西用通俗易懂的話講出來很重要黑低。

比如和她解釋AJAX的時(shí)候有個同步/異步的概念赘艳，我和她說，我們用微波爐加熱東西，加熱兩分鐘第练，這兩分鐘你可以就一直盯著微波爐看阔馋，其它什么事都不做（同步），沒人會這么干對吧娇掏？所有人都是去洗個手/刷個微博/上個廁所（異步）…然后聽到微波爐發(fā)出“杜磺蓿”的一聲（數(shù)據(jù)到達(dá)事件），提醒你去拿東西吃（執(zhí)行回調(diào)函數(shù)）婴梧，所以從這個意義上講下梢，異步才是正常的東西，同步都是反人類啊塞蹭。

努力會有回報(bào)孽江。雖然這句話聽起來很雞湯，但是很多時(shí)候它是對的番电，特別是當(dāng)你還有一個正確方向的時(shí)候岗屏。

轉(zhuǎn)載自：lifeofzjs.com

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

作者：朱佳順