你好，我是宇哥。某天不經(jīng)意間打開了知乎，看到有人在我三年前寫的文章下留言。

不禁感嘆：一個(gè)機(jī)械專業(yè)的?？粕?，沒(méi)有參加過(guò)培訓(xùn)班，全憑自學(xué)，竟然能夠轉(zhuǎn)行程序員，工作三年依然沒(méi)被辭退。

你是不是也很好奇我的個(gè)人經(jīng)歷呢？

?？粕厴I(yè)進(jìn)了工廠

2012 年，我的高考成績(jī) 444 分，差一分上當(dāng)年的二本線。因?yàn)楦鞣N原因沒(méi)有選擇復(fù)讀，加上三本學(xué)院費(fèi)用高昂，無(wú)奈之下只好選擇了讀?？?。沒(méi)有專業(yè)填報(bào)指導(dǎo)的我，在親戚長(zhǎng)輩的建議下，選擇機(jī)械專業(yè)數(shù)控技術(shù)。

大一上學(xué)期，我報(bào)名了自考本科，當(dāng)上了班里的學(xué)習(xí)委員，還參加了社團(tuán)。隨著時(shí)間的推移，我漸漸以各種理由安慰自己：今天這堂課不用上，自考前再?gòu)?fù)習(xí)也來(lái)得及。正因?yàn)楫?dāng)時(shí)懶惰成性，后面為了這個(gè)自考本科文憑付出得更多（PS：文章后面會(huì)提到）。

轉(zhuǎn)移三年過(guò)去了，2015 年專科畢業(yè)的我一心只想著早點(diǎn)出來(lái)掙錢，于是跟幾個(gè)同學(xué)去了位于上海的一家蘋果代工廠。前期做著一些打雜和跑腿的工作，負(fù)責(zé)把技師們做好的樣品送到量?jī)x室，等結(jié)果出來(lái)再把樣品取回來(lái)供他們分析數(shù)據(jù)。還要做的一件事是幫白班（夜班）負(fù)責(zé)人統(tǒng)計(jì)這一班生產(chǎn)樣品的數(shù)量、合格率、報(bào)廢原因等等。

這樣的情況一直持續(xù)了三個(gè)月，我才有機(jī)會(huì)跟著一位老師傅學(xué)習(xí)機(jī)床知識(shí)，了解一塊物料到成品需要經(jīng)歷哪些步驟，慢慢的有機(jī)會(huì)去實(shí)際操作機(jī)床。

待了半年之后，我與幾個(gè)同學(xué)跳槽去了福建泉州的一家工廠，開始獨(dú)立負(fù)責(zé)手機(jī)后殼生產(chǎn)工序中的某個(gè)環(huán)節(jié)。

但是這種小工廠如果沒(méi)有接到單子做，工資就會(huì)特別少。3 個(gè)月后我與同學(xué)又跳槽去了廈門一家工廠，做的還是技術(shù)含量較低且重復(fù)的工作。

為什么選擇轉(zhuǎn)行做前端開發(fā)？

在新工廠的待遇比盡管剛?cè)胄心菚?huì)兒提升了不少，但每天需要工作 12-14 個(gè)小時(shí)，且常年無(wú)休，大部分時(shí)間都在上夜班。

閑暇時(shí)間我開始思考：除了工作我完全沒(méi)有生活，無(wú)法出去正常社交，也沒(méi)有多余的時(shí)間去提升自己，只能從這個(gè)工廠換到下一個(gè)工廠，或者待在一個(gè)工廠熬工齡。

經(jīng)歷過(guò)社會(huì)的毒打，我明白了年輕人還是應(yīng)該多學(xué)習(xí)、多思考、用技能武裝自己。內(nèi)心深處有一個(gè)念頭：我一定要做朝九晚六、正常雙休、不可替代性高的工作。

碰巧我的一位大學(xué)同學(xué)畢業(yè)后就在成都做運(yùn)營(yíng)工作，他在電話里說(shuō)：“你要不要試試轉(zhuǎn)行當(dāng)程序員？我好幾個(gè)朋友都去參加培訓(xùn)了，而且最近 Web 開發(fā)很火。”

于是我拿起手機(jī)，打開了知乎，搜索“怎樣成為一名程序員”、“程序員的工資待遇”、“零基礎(chǔ)怎么學(xué)習(xí)編程”等相關(guān)話題。在糾結(jié)選擇前端還是后端，iOS、Android 還是 Web，培訓(xùn)還是自學(xué)……嘗試了入門后端語(yǔ)言，了解開發(fā)程序原生應(yīng)用需要的設(shè)備和環(huán)境之后，我的智力和經(jīng)濟(jì)條件告訴我：你沒(méi)得選，自學(xué) Web 前端吧。

于是我就開啟了一段長(zhǎng)達(dá) 8 個(gè)月的自學(xué)經(jīng)歷。

我的自學(xué)規(guī)劃和路線

對(duì)于每一位零基礎(chǔ)自學(xué) Web 前端的人來(lái)說(shuō)，最難的是什么？

1、不知道學(xué)什么、怎么學(xué)

2、遇到問(wèn)題誰(shuí)幫我解決

3、想認(rèn)識(shí)一些在職工作的前端程序員

起初，通過(guò)搜集網(wǎng)上的一些信息，我明白了想要找到一份前端工作，至少要掌握四門技術(shù)（我當(dāng)時(shí)的理解）——HTML、CSS、JavaScript、AJAX。因?yàn)闆](méi)錢上培訓(xùn)班，我的學(xué)習(xí)資料來(lái)源于百端云盤和一些免費(fèi)的視頻教程，但都不夠系統(tǒng)，我也區(qū)分不了難易程度。

然后我接觸到了 https://codecombat.163.com/play 這個(gè)網(wǎng)站，用游戲的方式學(xué)習(xí)編程。

但是礙于費(fèi)用問(wèn)題，試學(xué)完免費(fèi)課程之后我就放棄了。

那么，有沒(méi)有一個(gè)組織或網(wǎng)站可以幫助到我這樣的萌新呢？

有！freeCodeCamp.org，簡(jiǎn)稱 FCC。

偶然間我在知乎大佬余博倫的回答下看到了這個(gè)網(wǎng)站，他推薦說(shuō)非常適合小白自學(xué) Web。在此之前我始終未能找到一個(gè)合適且免費(fèi)的平臺(tái)，可以幫助零基礎(chǔ)想學(xué)習(xí)編程的人，于是我抱著試一試的態(tài)度就點(diǎn)了進(jìn)去。

我使用的是志愿者協(xié)同翻譯的中文版（最新中文版在 learn.freeCodeCamp.one，即將上線到官網(wǎng) freeCodeCamp.org）。哇，我整個(gè)人都驚呆了，HTML 基礎(chǔ)，CSS 基礎(chǔ)、布局、視覺(jué)設(shè)計(jì)，JS、ES6 基礎(chǔ)、數(shù)據(jù)結(jié)構(gòu)、算法基礎(chǔ)、框架……而且每一個(gè)章節(jié)都帶有項(xiàng)目實(shí)戰(zhàn)，這不正是我所需要的嗎？

在工廠打工是不可能的，這輩子都不可能打工。培訓(xùn)費(fèi)又貴，只有靠在 FCC 自學(xué)前端，才有未來(lái)。喔喲，我超喜歡在里面學(xué)習(xí)的，全球?qū)W員線上聊天互相鼓勵(lì)，國(guó)內(nèi)多個(gè)城市有志愿者發(fā)起的線下社區(qū)，經(jīng)常分享流行的前沿技術(shù)，里面?zhèn)€個(gè)都是大佬，又喜歡自稱“萌新”，熱心解答你的每一個(gè)問(wèn)題。

自學(xué)有太多的困難，有時(shí)候朋友會(huì)叫你出去玩，網(wǎng)友發(fā)來(lái)游戲邀請(qǐng)，三天打魚兩天曬網(wǎng)，無(wú)法長(zhǎng)期堅(jiān)持。

自學(xué)的過(guò)程也是孤獨(dú)的，找不到志同道合的伙伴分享解決問(wèn)題的那種喜悅，遇到難題也沒(méi)人提供思路。感謝 FCC 提供了這樣一個(gè)良好的學(xué)習(xí)氛圍，我可以和每一位自學(xué)的小伙伴交流，并且結(jié)識(shí)了一群志同道合的朋友。

FCC 深圳社區(qū)的小伙伴

自學(xué)那會(huì)兒有受到過(guò)前同事的嘲笑，身邊的朋友也不看好我能夠?qū)W完，找到工作。好在家里人非常支持我，為我提供一個(gè)舒適安靜的學(xué)習(xí)環(huán)境。我給自己訂的規(guī)劃是保證每天學(xué)習(xí) 8 小時(shí)。

早上一般是 10:00 – 12:00

下午 1:00 – 6:00

晚上 8:00 – 睡前（大部分實(shí)際在凌晨以后）

四個(gè)月的時(shí)間，我剛好學(xué)完了 FCC 上 HTML、CSS、JS 大部分基礎(chǔ)內(nèi)容，并跟著 FCC 的設(shè)計(jì)完成對(duì)應(yīng)項(xiàng)目編寫。感覺(jué)沒(méi)理解的知識(shí)點(diǎn)，回頭又補(bǔ)看了一些視頻。

這期間我總共讀了四本書：《CSS權(quán)威指南》、《JavaScript DOM 編程藝術(shù)》、《鋒利的 jQuery》，粗讀了《JavaScript 高級(jí)程序設(shè)計(jì)》前 14 章，差不多 450 頁(yè)，看不懂的地方都先跳過(guò)了。

經(jīng)過(guò)這段時(shí)間的學(xué)習(xí)，我已基本掌握常見(jiàn)的頁(yè)面布局、樣式編寫，和用 JS 實(shí)現(xiàn)簡(jiǎn)單的特效。

自學(xué)過(guò)程中的焦慮和迷茫

焦慮的原因一方面是看著很多培訓(xùn)班的畢業(yè)生，要準(zhǔn)備找工作了，怕自己錯(cuò)失良機(jī)，另一方面裸辭在家經(jīng)濟(jì)壓力挺大。

9 月份我去了當(dāng)?shù)匾患覚C(jī)構(gòu)給小學(xué)生輔導(dǎo)作業(yè)，一直要做到他們放假，差不多 2017 年 1 月中旬的樣子。沒(méi)辦法這么快出去找工作，就有點(diǎn)迷茫不知道學(xué)啥了。

也在思考：如果我簡(jiǎn)單自學(xué) 4 個(gè)月就能找到工作，那么科班生通過(guò)學(xué)習(xí)之后豈不是更容易？何況在學(xué)歷和計(jì)算機(jī)基礎(chǔ)都不占優(yōu)勢(shì)的情況，HR 很大概率不會(huì)選擇錄用我。加之在打聽(tīng)到培訓(xùn)班一般不會(huì)講算法和數(shù)據(jù)結(jié)構(gòu)之后，索性就沉下心來(lái)去繼續(xù)學(xué)習(xí)前端以外的知識(shí)，比如數(shù)據(jù)結(jié)構(gòu)和算法，HTTP 協(xié)議，設(shè)計(jì)模式等。

跟著 FCC 刷完它的初、中、高級(jí)算法之后，我對(duì) JS 很多的 API 有了更深刻的理解，并把全部題解寫成了文章發(fā)到知乎和簡(jiǎn)書上，雖然現(xiàn)在看來(lái)屬實(shí)寫得不怎樣，效率太低。原因是我缺少一些前置知識(shí)，便買了一本《學(xué)習(xí) JavaScript 數(shù)據(jù)結(jié)構(gòu)與算法》，再去有名的刷題網(wǎng)站 LeetCode 刷題。

從 10 月份開始一直到 12 月底，我看完了《JavaScript 設(shè)計(jì)模式與開發(fā)實(shí)戰(zhàn)》與《HTTP 權(quán)威指南》中跟 Web 相關(guān)的部分，了解到真實(shí)的前端開發(fā)工作是要跟后端人員通過(guò)接口的形式進(jìn)行數(shù)據(jù)傳遞，也明白企業(yè)級(jí)項(xiàng)目并不是我之前寫的那種面向過(guò)程式代碼，會(huì)思考怎么封裝、復(fù)用。

再回過(guò)頭看自己以前寫的代碼，恍惚間感覺(jué)自己提升了不少，也消除內(nèi)心的迷茫，更加堅(jiān)定要走軟件開發(fā)這條路。

項(xiàng)目與簡(jiǎn)歷

從完成自學(xué)到工作還有最后一道檻，那就是做一個(gè)拿得出手的項(xiàng)目，寫一份漂亮的簡(jiǎn)歷。其實(shí) FCC 準(zhǔn)備項(xiàng)目已經(jīng)很出色，同時(shí)百度前端學(xué)院也有許多不錯(cuò)的項(xiàng)目可供選擇。我做過(guò)一些 demo, 包括 2048、貪吃蛇、飛機(jī)大戰(zhàn)等小游戲。

2017 年可以稱得上前端三大框架崛起的一年，你不會(huì)其中一個(gè)，都不好意思去面試，所以我不得不抽時(shí)間看看 Vue 官方文檔，并完成了一個(gè)簡(jiǎn)單的案例——Vue ToDoList。

盡管做了以上這些，離真正意義上的前端開發(fā)還是缺點(diǎn)味道，于是我找到了我的大學(xué)朋友。經(jīng)過(guò)半年他已經(jīng)從 UI 轉(zhuǎn)崗到了產(chǎn)品經(jīng)理，在我三番五次要求之下，他給我看了一些他們以前外包的項(xiàng)目，有完整的需求說(shuō)明、UI 設(shè)計(jì)稿，有些還能直接訪問(wèn)。這就是我想要的真實(shí)項(xiàng)目。

于是我對(duì)著設(shè)計(jì)稿自己實(shí)現(xiàn)，盡量把自己想象成一位真正的開發(fā)人員：這個(gè)特效我會(huì)怎么實(shí)現(xiàn)？這里的布局為什么不用這樣？遇到不會(huì)的地方，我就記錄下來(lái)，然后通過(guò)搜索來(lái)解決。這樣如果面試官問(wèn)我自學(xué)過(guò)程中，或者項(xiàng)目中有遇到什么最難的問(wèn)題，我也能對(duì)答如流。

完成了項(xiàng)目的準(zhǔn)備，這里簡(jiǎn)單說(shuō)下簡(jiǎn)歷。對(duì)于沒(méi)有做過(guò)什么項(xiàng)目的小伙伴來(lái)說(shuō)，我強(qiáng)烈建議你用前端代碼寫一份響應(yīng)式簡(jiǎn)歷，然后通過(guò) GitHub Pages（一種網(wǎng)頁(yè)寄存服務(wù)，可以讓任何人看你做的頁(yè)面） 讓面試官可以訪問(wèn)到，這樣既能展示你的個(gè)人信息，也側(cè)面讓面試官康康你的代碼實(shí)力，一舉兩得?。≒S：更多關(guān)于項(xiàng)目與簡(jiǎn)歷的詳細(xì)細(xì)節(jié)，請(qǐng)關(guān)注我的 B 站個(gè)人賬號(hào)：宇哥在學(xué)習(xí)）

持續(xù)學(xué)習(xí)與成長(zhǎng)

前端真的是一個(gè)看上去簡(jiǎn)單，實(shí)際上知識(shí)點(diǎn)復(fù)雜且多樣的職業(yè)，如下圖：

我當(dāng)初找到第一份工作的時(shí)候，干活用到的技術(shù)真的就只有 HTML、CSS、jQuery、Bootstrap，連 ES6 都很少用到。到了 17 年中旬， Boss 直聘前端崗位技能要求 Vue、React 二者至少掌握一個(gè)，且熟悉其生態(tài)。

為了以后能有更好的就業(yè)機(jī)會(huì)，在公司技術(shù)體系已經(jīng)穩(wěn)定的情況下，我主動(dòng)向領(lǐng)導(dǎo)申請(qǐng)，采用當(dāng)時(shí)流行的 Vue + Vuex 技術(shù)開發(fā)單頁(yè)應(yīng)用，并利用空閑時(shí)間和周末，去一些技術(shù)平臺(tái)（掘金、Segmentfault）看教程文章，按照樣例代碼一行一行地敲。

在半個(gè)月內(nèi)，我做了一個(gè)簡(jiǎn)易版的 demo，并向同事們和領(lǐng)導(dǎo)演示其效果，講明白這套技術(shù)相比之前的方案有了哪些改進(jìn)和提升。得到老板的肯定后，我的方案被應(yīng)用到新項(xiàng)目。

得益于這段經(jīng)歷，我成功跳槽，直接漲薪資 4K。我清晰記得第三輪的面試官問(wèn)過(guò)一個(gè)問(wèn)題：“你自學(xué)了 8 個(gè)月，現(xiàn)在才工作了半年多一點(diǎn)，就獨(dú)立負(fù)責(zé)過(guò)公司項(xiàng)目的技術(shù)選型，是什么在支撐著你？”

我回答到：“堅(jiān)持學(xué)習(xí)和自信”。

在轉(zhuǎn)行學(xué)習(xí)程序開發(fā)之前，我內(nèi)心是比較自卑的，也不太敢在公眾場(chǎng)合發(fā)表自己的觀點(diǎn)，怕被質(zhì)疑和嘲笑。但是這段自學(xué)的經(jīng)歷給我?guī)?lái)了非常大的改變，從沒(méi)有像自學(xué)編程一樣堅(jiān)持一件事情長(zhǎng)達(dá) 8 個(gè)月，收獲了別人的肯定，最重要的是我變得更自信。

在 18 年初，我嘗試去一些大廠面試，但因?yàn)閷？茖W(xué)歷被拒絕了，這時(shí)才想起大學(xué)時(shí)我報(bào)名了一個(gè)自考本科。那會(huì)兒我人在深圳，為了拿到這個(gè)畢業(yè)證，除了學(xué)習(xí)工作上用到的知識(shí)，還要拾起自考課程和尋找一些考試相關(guān)資料，于是我每個(gè)周末都去圖書館，和那些考研的奮斗小伙伴們一起學(xué)習(xí)。

因?yàn)樽钥嫉脑盒Ｔ诔啥?，所以每年?4 月、10 月，我都要坐飛機(jī)回成都參加考試。終于在 19 年 5 月考完了所有課程，拿到了我夢(mèng)寐以求的本科畢業(yè)證，同年參加了學(xué)位英語(yǔ)考試，算是彌補(bǔ)了我一生的遺憾吧。如果后面有機(jī)會(huì)我希望能再去讀一個(gè)在職研究生，認(rèn)識(shí)更多優(yōu)秀的人。

最后想說(shuō)的話

這就是我零基礎(chǔ)轉(zhuǎn)行 Web 前端開發(fā)的經(jīng)歷。

我現(xiàn)在也嘗試做一名 UP 主，這個(gè)決定從 19 年中旬就有了，現(xiàn)在終于邁出了第一步。

這是我做的一個(gè)視頻，我在視頻中留了三個(gè)問(wèn)題，希望小伙伴們可以想一想。

不管你是否想要從事編程工作，想做什么就全力以赴去做，不斷學(xué)習(xí)，分享你的成長(zhǎng)。即使大多數(shù)人不看好你的決定，你也要堅(jiān)持，用結(jié)果證明給他們看。