今天想跟同學們聊一個話題，
怎么樣能夠達到月薪12,000元，
然后呢，我在這做了一個思維導圖啊，
零基礎自學web前端達到月入額，12,000元，
這個我是指的工資，啊
然后呢，如果同學們覺得我說得還行，
請給我三連操作啊，
點擊、收藏 、投幣，
如果能轉發(fā)一下那就更好了，謝謝
這個話題呢，我將分成以下幾個部分啊，
就是12345678一直是8個部分啊，8個部分，
第一個部分呢，首先肯定是html、css，
因為是零基礎的學生嘛，是吧，
所以肯定要先學html、css
那么我給大家找的這個啊，叫什么呢？
就是很簡單啊，
html、css嘛它就是很簡單的一個東西啊，
就是這個w3school，
就是這些網(wǎng)站啊，w3school，
他這里邊這個html、css這些東西啊，
所以看起來就是啊，
挺好用的，就是一些常用的標簽啊，
同學們一邊啊，看一看啊，
這里面有些資料，可以看一看就可以啊，
html有很多的標簽啊，那我們在學習當中呢，
你不必去學習所有的標簽，
你只需要學習一些常用的標簽就可以啊，
例如這個div啊，
label，span p b ul ol li dt dd i em h1 h2 h3 input
基本這些就可以
然后在這一階段啊，html5可以先不學，
html這一階段啊，
我們的目的啊，就是掌握一些基本的html標簽，
例如說你看一些東西啊，
你有一些標簽的，你不知道干嘛，
那我們大概得再去看一下啊，就可以，
現(xiàn)在幾個階段了啊，
html不用太深的研究，沒有啥用
然后第2個階段呢，就是這個css，
首先還是一個基本的語法啊，
那就是css也是這個w3school，
這個玩意兒挺好用的，
因為它里面有些東西呢，也是介紹得很詳細是吧
然后呢，同學們在學東西的時候，
啊，不必去盲目地追新，
因為，太新的東西都需要比較好的基礎啊，
這樣的能夠比較快速地去了解，
那如果說你一味地說我覺得追求去新的東西啊，
這個效果呢反而不好，
那么學習css呢，首先就是語法，
比如說.操作符，由class引用
#號操作符，由id引用，在這過程當中啊，
在語法這個階段，
什么層級呀兄弟呀，啊級聯(lián)啊，群組啊，
各種各樣的選擇器的寫法不用太深究啊，
不用太深究，
因為我們只是想要先掌握基本的css語法，
然后掌握了css語法之后呢，
就是基本的一些概念，
什么層疊式樣式表是什么意思？
怎么層疊的，css模型是什么？
定位是什么？文檔流是什么？
定位是4種定位是什么？
position、relative、absolute,啊，
position、relative、static、fixed
常用的4種定位方式啊，定位和這個浮動對吧？
css的優(yōu)先級，可以大概地了解一下，
比如說這個定位的權重!important啊
這個，然后在網(wǎng)上找一些例子，
網(wǎng)上找一個例子的話呢，可以做一做，
呃比較典型的可以做一個這個京東的首頁啊，
或者說網(wǎng)易的首頁啊，對吧啊，
或者說你可以看一看我的這個
在我b站的首頁里面啊，有這個，
嗯，有什么呢？html、css仿京東電商的項目，
這個的競拍頁面可以做一下啊，
做一下還有一個還有一個這個就是這個訪問京東官網(wǎng)啊，
這個是舊版本，但是這個呢，
說得也蠻詳細啊，對于學習html、css也是比較有幫助的，
然后呢，這是html、css的這個階段的，
css3相關的東西，在此階段不需要去學。
這個階段呢，
我們只需要做一兩個靜態(tài)的html頁面啊，做一兩個就可以
不必在這個階段浪費太多的時間
css花費太多的時間去鉆研，沒有什么的意義。
為什么呢？因為現(xiàn)在前端開發(fā)嘛，都是在寫js，
在面試的過程當中他也是問你js的東西占絕對多數(shù)，
那我們的目的是干嘛？是要就業(yè)啊。
我們是要成為html、css專家嗎？
不是的。我們的目的，是做好項目啊，
做好準備，然后呢，通過面試找到工作，
也就是說我們是針對面試學習，我們的目的是通過面試對吧，
那你把這個自學當做一個應試，也是可以的，
那接下來第3階段，就是這個javascript
三板斧嘛，那js是這個東西呢，
我還是給同學們推薦了這個什么啊，
這個js的話就直接說他，
就這個javascript，它就可以
就這個東西，一些一些常用的啊，常用的一些東西，
什么語法函數(shù)啊，賦值啊，字符串啊，簡介輸出啊，
運算符也都很詳細，
同學們不要覺得這個w3school啊，它很舊啊，是
很這個800年前就有了，不新不酷是吧，
咱們學的東西啊，你不要追求酷啊，
他時間久，說明他出的早啊，
這么長時間以來他出的錯就少
另外這東西很經(jīng)典啊，還是要基本的先從語法開始，
js的語法呢，它也很簡單啊，var 創(chuàng)建變量，
function函數(shù)，function()xx，
函數(shù)的傳參與調用，this是個什么東西？
for循環(huán)數(shù)組和對象啊，然后forin，document是什么東西對吧，
我們把這些基本的東西這幾個基本語句先搞清楚，
那我們就可以做一些東西了，
什么if else true 基本數(shù)據(jù)類型，
然后在這里邊，我們就可以做一些操作dom的基本操作
比如說，
createElement、appendChild、innerHTML、setAttribute
我們創(chuàng)建dom節(jié)點，附加dom節(jié)點，向dom節(jié)點里面寫入內容
然后呢，給dom節(jié)點添加屬性，這個是一條線啊，
我們通過這個最新的語法，我們就能完成一些個，
基本簡單的業(yè)務邏輯，就可以寫好了。
就是在語法這一階段嘛，
你不必說在語法這個階段你就去深入研究document，
深入研究數(shù)組對象啊之類的哈，
咱們學的東西要有一條主線，
在這個主線的每一個階段我們要完成不同的任務，
而不是說啊，遇到一個難點我們就往里鉆，
遇到一個端端端端端，
這樣的話呢，如果這么學習這樣的話，
你學出來是一條折線，而不是一條直線，
有時它不光是一條折線
，還是一線彎線，浪費時間就浪費在這里
這一階段啊，語法它的目的呢，學到這就行，
不用太多啊，不要去研究什么，
在這個階段不要研究太深入的東西，
沒有必要，你也研究不了啊，
因為你零基礎初學者嘛，
你的目的是要保證能寫基本業(yè)務邏輯，
建立基本的這個開發(fā)思維，然后是事件，
事件，js支持很多的事件，啊，
移入、移出啊，焦點獲取、失去啊，
但是在這一階段onclick，
我們只需要知道是一個onclick就可以，
因為啥呢，因為js它是事件驅動的，
咱們呢你知道一個，你其他的也就一通百通了。
啊，實例的話呢，可以寫個輪廓圖啊啊，靜態(tài)留言板，
然后帶菜單的橫向導航條啊，二維數(shù)組的是吧？
這一階段，你不用去做太多的原生js的例子，
你在這一階段，你猛勁的研究原生js，沒有啥大用，
因為你是一個初學者，
你在這個階段你沒有一定的代碼量的積累的情況下，
你猛勁研究你研究不下去，
對吧，你沒有積累，你沒有量變，所以你達不到質變。
在這一階段的目的，我們是通過一些簡單的例子。
也不用太多，寫太多沒有用。把原生js基本的寫熟練
，啊，就上面那些 基本的方法
唉，你不要有拼寫錯誤，對吧？然后呢，
并且基本的理解了基本的開發(fā)業(yè)務的啊，
這個邏輯和需求的分析，你比如說留言板，
呃，輪播圖、還有這個靜態(tài)留言板，
二維數(shù)組，這種東西寫簡單的話，幾行代碼就ok，
你要寫復雜的話，那一個輪播圖呢，
能擴展出好多功能，
這個目的，
就是想解決你開發(fā)時沒有思路的這個問題，
因為這個思路吧，它是一點一點，在你腦子里面生長出來的，
你像有些同學吧，他就跟我說，經(jīng)常跟我說，
網(wǎng)上好多例子特別特別簡單，就跟哄小孩一樣，為什么呢？
他說他想找一些個完整的啊，
全面的啊，跟實際生產(chǎn)環(huán)節(jié)一樣的，
線上的這種，全面的例子。
但是你說，網(wǎng)上為什么沒有這樣的例子呢？
這有二個原因
第1個呢，實際生產(chǎn)環(huán)境的例子它拿不下來，
它需要好多啊，前后端的支撐，
第2個呢，就是對于前端新人學習來講，
真給你一個生產(chǎn)環(huán)境的例子，
那里面的邏輯很復雜，你根本看不明白，
所以說前端新人吧，很多時候呢，它存在著眼高手低的情況，
甚至存在的眼不高，手還挺低，這么一個情況，
他分不出來哪個好或者是不好，
但是他只是覺得啊，
然后他也寫不了啥玩意，就這么一個階段，
然后還一直要找一些比較復雜的例子
這情況就陷入了一個怪圈，啊
這個說的，希望同學們能正確的理解啊，
不要曲解我的意思，
這是這個在原生js這個地方
原來js這里連，就語法、事件、基本的寫幾個例子啊，如果不出錯
有一些基本的思路，就可以了。然后呢？下一階段，nodeJs，
nodeJs的話呢，
你就看這個就可以，這個菜鳥教程??？看這個菜鳥教程
這個地方有一個，nodeJs
它也是很全面的，這個菜鳥教程，
真的這個nodeJs挺不錯的，淺顯易懂，
我當初，我不是在這學的
我是會nodeJs之后我回過頭來看，這個寫的真不錯，
然后nodeJs也不用深研究
，nodeJs是什么？安裝成功，npm，
nodeJs基本應用、使用
nodeJs在這一階段，
你能把這個vue-cli腳手架安裝成功運行就可以
然后其它的，
什么nodeJs的回調啊、事件啊、buffer、stream啊，
流啊，緩存啊等等文件哈，
你不要弄這些東西沒有用啊，沒有用
你在現(xiàn)在這個階段啊，就是剛剛自學到第4階段，
你可以研究什么，這個那個你根本不知道干嘛，
你就是，能成功安裝vue-cli腳手架，
讓它成功運行，就ok
第五階段vue啊，vue的話呢，它也很簡單的一個東西，
還是看這個菜鳥教程里面，你跟著它，把它這些個
常用的啊，語法指令啊，都過一遍就行了啊，
vue-cli安裝成功，模板語法，掌握
常用的一些指令，
show if bind onclick model v-for這些，
基本的路由、組件，
還是把之前的輪播圖、靜態(tài)留言板、二維數(shù)組
把之前啊，用原生js寫過的例子在用vue寫一遍，
因為之前你寫過了，所以業(yè)務邏輯你是知道的，
那么就是掌握熟練vue是一方面，另外呢？
對于這個業(yè)務邏輯會有一些，更啊，抽象一些的想法，
因為之前用原生js來寫是面向過程，
你用vue來寫，它是面向對象，這兩種開發(fā)思路，
你變成一個對比，會會有一些自己的感受，
這開發(fā)思路這東西，它是慢慢，我再說一遍啊，
是在你腦子里慢慢的長出來的，
那不是說你看了一篇文章，做了一個例子啊，
然后你就biu的一下，你就有了開發(fā)思路！
不是那樣啊，不是那樣，
然后呢，這個啊，這樣啊，然后，啊，
第6階段我們回到nodeJs，因為我們要做全棧，
剛才我們是視圖層這一邊的，
現(xiàn)在我們要把數(shù)據(jù)層這邊再搞一搞，
你要去看一下get、post請求啊，
很簡單，無非就是兩個事件而已，
你可以用一下啊，
安裝一下express或者是Koa2來用來響應get請求，
然后呢，你把axios這個玩意兒啊，
異步獲取數(shù)據(jù)的把它裝上，
那目的呢是我們要寫自己的接口啊，
響應get、post請求，變身為全棧開發(fā)
這邊是視圖，這邊是數(shù)據(jù)，
nodeJs變成一個中間件，兩邊連接起來，
這是這么一個東西
目的呢啊，是寫接口啊，變成全棧哈，
然后呢，你可以自己在網(wǎng)上找一些項目代碼來做，
也可以跟著我在b站的全棧項目來做，
目的就是擁有全棧的開發(fā)，思想啊，
你比如說這個，我在b站有這個，啊在這兒啊，
你可以跟著我這個，
這有一個網(wǎng)易嚴選的APP啊這個應用，
這個應用啊，有同學說沒有寫完啊，就太短了啊，
但是，雖然它只有短短的7節(jié)啊，短短的7節(jié)，
不是這個哈，這個是一個只完成一個視圖層，
好在這啊，在這個地方，
網(wǎng)易嚴選移動端app，這個剛剛更新到第5節(jié)，
但它它會是一個全棧的這么一個東西，
從前到后包括mysql數(shù)據(jù)持久化，
都會有，啊，都會有
然后呢，或者是這個高仿的boss直聘，
這個boss直聘的話呢，
噢，他也是一個視圖層，
這我有一些例子都沒寫完哈，然后呢，
但是這個呢，這個視頻教程呢，
它是一個完整的一個東西，
它是我這個收費課程里面的一部分，
這個例子呢，我并沒有把它完整的放出來啊，
我也只放了7節(jié)課，這個實例教程啊，
它是我一對一零基礎課的內容，
然后呢，如果說你覺得不太夠你也可以呢，在網(wǎng)上，
找一些全棧的demo來做，這類的網(wǎng)上有很多，
然后呢，自學學到這一步，
相應的知識點結構啊，就已經(jīng)有了，
接下來，就要向縱深的方向去發(fā)展，
首先第一個啊，就是es6啊，
你看，就一件事情，es6呢，
它的語法很簡單啊，它就是一個es5的一個語法糖，
那么掌握es6最好的辦法就是，
上面剛才提到的實力demo，都用es6重新再實現(xiàn)一遍，
目的是掌握es6的使用，然后接下來把這些例子啊，
你比如說那幾個什么啊，輪播圖啊什么啊，導航條啊，
留言板啊，這些東西
因為留言板你可以加上數(shù)據(jù)
輪播圖的話，你也可以加上數(shù)據(jù)的生成，
對吧自動的更新、獲取，
你把這個玩意或擴展一下這個，很多東西可做了，
你比如說靜態(tài)留言板你可以改加上數(shù)據(jù)改成動態(tài)的啊，
留言板你加上登錄注冊呀，
對吧，留言你可以加上修改啊，
這就變成了一個數(shù)據(jù)的增刪改查crud，
你這個東西慢慢擴展，可以做的很復雜，
然后到這一階段，
你已經(jīng)在網(wǎng)上找了一些個demo來做，
不用太多，你找兩個就可以，做熟了就可以了，
接下來啊，es6剛才說了要寫，
接下來就是第8階段相關的理論，
那相關的理論呢，這個呢，
它都是要在代碼量的基礎之上進行抽象，
然后你才能在腦子里面，對他們有一個相應的理解，
然后形成你自己的前端知識體系，
并且不斷的去豐富它，擴展它，
那么這里面有哪些呢？
首先是一個設計模式有23種啊，常用的16種，
但是呢，我們在前端用的比較多的就是單例、工廠、觀察者，
然后，
OO是面向對象，然后呢，而且是http、Tcp/Ip協(xié)議，
http最起碼你要了解HTTP它是無狀態(tài)的，對吧？
Tcp/Ip呢，七層網(wǎng)絡三次握手
這個基本的東西，
然后呢原型鏈、函數(shù)、prototype、constructor
new一個函數(shù)，被new的函數(shù)就是構造器，
對吧？繼承有幾種方式啊，prototype原型繼承，
call、apply的this轉移的繼承
有很多種，
es6里的 class A extends B，對吧es6的繼承，很多的
模塊化啊，
模塊化的前世今生，這個模塊化呢，你要要是有時間的話，
你可以看一下我這個，
我這個里面講模塊化，我覺得講的還不錯，
那簡單講解這個啊，簡單講解，前端模塊化，很簡單，
其實我的標題寫的很明白，這個好像只有10、12分鐘，
你只需要十多分鐘的，這個玩意很簡單的，
那個*子都能聽懂，我相信同學們都能聽懂啊，
然后呢，公共方法、私有方法，什么叫公共方法呀？
函數(shù)，構造器里邊個this，它是公共方法
私有方法是函數(shù)里面的子函數(shù)，這個私有方法這怎么用啊？
它是放在了函數(shù)的公共屬性上，對吧？
嗯，因為時間的關系，我就不去演示了啊，
然后呢，數(shù)據(jù)結構啊，數(shù)據(jù)結構的話呢，
你最起碼你要了解什么??？啊，
隊列啊，數(shù)組啊什么啊，棧啊，
什么這個這些東西啊，先入后出啊，
后入先出啊，先入先出啊，對吧唉，基本的一些東西哈，
常用算法啊，快排對吧？插值啊，還有什么換？
他常用的算法的話呢，
你最起碼你要知道js里面那個sort，
sort它是一個排序函數(shù)啊，他接受一些排序的函數(shù)，
這些東西都怎么用，然后相關的理論呢，
還包括這個瀏覽器渲染原理與機制，
我這個地方有個視頻，上在哪里呢？在這個地方，
發(fā)個呆的功夫瀏覽器渲染原理和打開機制就搞懂了，
你要不要試一試？
這個視頻我說了66分鐘啊，時間挺長的，
同學們可以看一看啊，我覺得這個說的還可以，
而且這不是我自夸呀，
你剛才同學們覺得都覺得還不錯的啊，都覺得還不錯，
這評論什么都覺得還不錯啊，
再往下javascript性能優(yōu)化、移動端適配方案，
它的性能還有它的優(yōu)化啊，
這個呢，就要求你對js本身了解非常深入，
這些東西你在網(wǎng)上一搜就有，
移動端的適配方案的話呢，其實無非就是那4種
那個meta瀏覽器的適配，要么就是rem的那個適配，
要么就是修改viewport視口的那個適配，
移動端的設備方案呢，你可以看一下我這個，第2版網(wǎng)易嚴選
這個里邊啊，我著重的講解了適配的方案，在這個地方啊啊，
這是一個介紹，這是一個實現(xiàn)，有兩節(jié)的東西啊，
專門的去講了這個移動端的適配，
還可以啊，從這個同學們的反應來看還可以，
你再來看來看一html5、css3、前端工程化的相關知識，
為什么放在這兒呢，因為html5、css3啊，
看起來好像很新的很潮啊，
其實這兩個東西啊，
在前端開發(fā)里邊沒有什么太多好說的，
html5呢，它是有很多新的東西，
websocket，頁面數(shù)據(jù)庫啊等等的一些新的API，
但是同學們啊，但是html5在前端開發(fā)實際業(yè)務當中啊，
咱不把話說死啊，
有大多數(shù)情況下，就是一些新標簽，然后css3呢，
它在實際工作當中，
要么就是圓角，要么就是陰影，
要么就是什么transform變形，
要么就是animation動畫，
這些個東西他們都跟業(yè)務邏輯沒關系，你看一看你就會了，
然后呢，前端工程化的話，
那無非就是webpack，這些打包的一些東西啊，
很簡單，所以呢，咱們說啊，你怎么樣的說前端自學？
達到工資12,000塊是吧，
你就按照我大概說的這么一個路徑來搞，
基本問題不大啊，問題不大，
當然了，這里面也需要一些個，自律對吧，自律
就是，你看我這個方案吧，
我這里邊包含的知識點是非常的有限的，
那我這里邊貫徹了一個什么思想呢，就是，
學習東西啊，在不同的階段要講究不同的深度，
不是說你剛一開始學就要把，
某一個或者某幾個點一直學到最深，一直學到最多
不是那樣的啊，不是那樣的，
學到一定程度，然后呢，你就可以進入下一個階段啊，
就是這樣啊，那當然，這也需要相當?shù)淖月砂。?/p>
我相信同學們都能做到，
我相信自學的同學們都能做到，
因為我當初我就是自學的，
然后呢，如果說看書的話呢，
也不用看什么書啊，不用看什么書，
這些資料網(wǎng)上都有，你哪里不會？搜哪里，就ok
時間的關系就說到這吧，
祝同學們，學有所成，再見
]]>
你好，我是宇哥。某天不經(jīng)意間打開了知乎，看到有人在我三年前寫的文章下留言。
不禁感嘆：一個機械專業(yè)的?？粕瑳]有參加過培訓班，全憑自學，竟然能夠轉行程序員，工作三年依然沒被辭退。
你是不是也很好奇我的個人經(jīng)歷呢？
?？粕厴I(yè)進了工廠
2012 年，我的高考成績 444 分，差一分上當年的二本線。因為各種原因沒有選擇復讀，加上三本學院費用高昂，無奈之下只好選擇了讀?？?。沒有專業(yè)填報指導的我，在親戚長輩的建議下，選擇機械專業(yè)數(shù)控技術。
大一上學期，我報名了自考本科，當上了班里的學習委員，還參加了社團。隨著時間的推移，我漸漸以各種理由安慰自己：今天這堂課不用上，自考前再復習也來得及。正因為當時懶惰成性，后面為了這個自考本科文憑付出得更多（PS：文章后面會提到）。
轉移三年過去了，2015 年?？飘厴I(yè)的我一心只想著早點出來掙錢，于是跟幾個同學去了位于上海的一家蘋果代工廠。前期做著一些打雜和跑腿的工作，負責把技師們做好的樣品送到量儀室，等結果出來再把樣品取回來供他們分析數(shù)據(jù)。還要做的一件事是幫白班（夜班）負責人統(tǒng)計這一班生產(chǎn)樣品的數(shù)量、合格率、報廢原因等等。
這樣的情況一直持續(xù)了三個月，我才有機會跟著一位老師傅學習機床知識，了解一塊物料到成品需要經(jīng)歷哪些步驟，慢慢的有機會去實際操作機床。
待了半年之后，我與幾個同學跳槽去了福建泉州的一家工廠，開始獨立負責手機后殼生產(chǎn)工序中的某個環(huán)節(jié)。
但是這種小工廠如果沒有接到單子做，工資就會特別少。3 個月后我與同學又跳槽去了廈門一家工廠，做的還是技術含量較低且重復的工作。
為什么選擇轉行做前端開發(fā)？
在新工廠的待遇比盡管剛入行那會兒提升了不少，但每天需要工作 12-14 個小時，且常年無休，大部分時間都在上夜班。
閑暇時間我開始思考：除了工作我完全沒有生活，無法出去正常社交，也沒有多余的時間去提升自己，只能從這個工廠換到下一個工廠，或者待在一個工廠熬工齡。
經(jīng)歷過社會的毒打，我明白了年輕人還是應該多學習、多思考、用技能武裝自己。內心深處有一個念頭：我一定要做朝九晚六、正常雙休、不可替代性高的工作。
碰巧我的一位大學同學畢業(yè)后就在成都做運營工作，他在電話里說：“你要不要試試轉行當程序員？我好幾個朋友都去參加培訓了，而且最近 Web 開發(fā)很火?！?/span>
于是我拿起手機，打開了知乎，搜索“怎樣成為一名程序員”、“程序員的工資待遇”、“零基礎怎么學習編程”等相關話題。在糾結選擇前端還是后端，iOS、Android 還是 Web，培訓還是自學……嘗試了入門后端語言，了解開發(fā)程序原生應用需要的設備和環(huán)境之后，我的智力和經(jīng)濟條件告訴我：你沒得選，自學 Web 前端吧。
于是我就開啟了一段長達 8 個月的自學經(jīng)歷。
我的自學規(guī)劃和路線
對于每一位零基礎自學 Web 前端的人來說，最難的是什么？
1、不知道學什么、怎么學
2、遇到問題誰幫我解決
3、想認識一些在職工作的前端程序員
起初，通過搜集網(wǎng)上的一些信息，我明白了想要找到一份前端工作，至少要掌握四門技術（我當時的理解）——HTML、CSS、JavaScript、AJAX。因為沒錢上培訓班，我的學習資料來源于百端云盤和一些免費的視頻教程，但都不夠系統(tǒng)，我也區(qū)分不了難易程度。
然后我接觸到了 https://codecombat.163.com/play 這個網(wǎng)站，用游戲的方式學習編程。
但是礙于費用問題，試學完免費課程之后我就放棄了。
那么，有沒有一個組織或網(wǎng)站可以幫助到我這樣的萌新呢？
有！freeCodeCamp.org，簡稱 FCC。
偶然間我在知乎大佬余博倫的回答下看到了這個網(wǎng)站，他推薦說非常適合小白自學 Web。在此之前我始終未能找到一個合適且免費的平臺，可以幫助零基礎想學習編程的人，于是我抱著試一試的態(tài)度就點了進去。
我使用的是志愿者協(xié)同翻譯的中文版（最新中文版在 learn.freeCodeCamp.one，即將上線到官網(wǎng) freeCodeCamp.org）。哇，我整個人都驚呆了，HTML 基礎，CSS 基礎、布局、視覺設計，JS、ES6 基礎、數(shù)據(jù)結構、算法基礎、框架……而且每一個章節(jié)都帶有項目實戰(zhàn)，這不正是我所需要的嗎？
在工廠打工是不可能的，這輩子都不可能打工。培訓費又貴，只有靠在 FCC 自學前端，才有未來。喔喲，我超喜歡在里面學習的，全球學員線上聊天互相鼓勵，國內多個城市有志愿者發(fā)起的線下社區(qū)，經(jīng)常分享流行的前沿技術，里面?zhèn)€個都是大佬，又喜歡自稱“萌新”，熱心解答你的每一個問題。
自學有太多的困難，有時候朋友會叫你出去玩，網(wǎng)友發(fā)來游戲邀請，三天打魚兩天曬網(wǎng)，無法長期堅持。
自學的過程也是孤獨的，找不到志同道合的伙伴分享解決問題的那種喜悅，遇到難題也沒人提供思路。感謝 FCC 提供了這樣一個良好的學習氛圍，我可以和每一位自學的小伙伴交流，并且結識了一群志同道合的朋友。
FCC 深圳社區(qū)的小伙伴
自學那會兒有受到過前同事的嘲笑，身邊的朋友也不看好我能夠學完，找到工作。好在家里人非常支持我，為我提供一個舒適安靜的學習環(huán)境。我給自己訂的規(guī)劃是保證每天學習 8 小時。
早上一般是 10:00 – 12:00
下午 1:00 – 6:00
晚上 8:00 – 睡前（大部分實際在凌晨以后）
四個月的時間，我剛好學完了 FCC 上 HTML、CSS、JS 大部分基礎內容，并跟著 FCC 的設計完成對應項目編寫。感覺沒理解的知識點，回頭又補看了一些視頻。
這期間我總共讀了四本書：《CSS權威指南》、《JavaScript DOM 編程藝術》、《鋒利的 jQuery》，粗讀了《JavaScript 高級程序設計》前 14 章，差不多 450 頁，看不懂的地方都先跳過了。
經(jīng)過這段時間的學習，我已基本掌握常見的頁面布局、樣式編寫，和用 JS 實現(xiàn)簡單的特效。
自學過程中的焦慮和迷茫
焦慮的原因一方面是看著很多培訓班的畢業(yè)生，要準備找工作了，怕自己錯失良機，另一方面裸辭在家經(jīng)濟壓力挺大。
9 月份我去了當?shù)匾患覚C構給小學生輔導作業(yè)，一直要做到他們放假，差不多 2017 年 1 月中旬的樣子。沒辦法這么快出去找工作，就有點迷茫不知道學啥了。
也在思考：如果我簡單自學 4 個月就能找到工作，那么科班生通過學習之后豈不是更容易？何況在學歷和計算機基礎都不占優(yōu)勢的情況，HR 很大概率不會選擇錄用我。加之在打聽到培訓班一般不會講算法和數(shù)據(jù)結構之后，索性就沉下心來去繼續(xù)學習前端以外的知識，比如數(shù)據(jù)結構和算法，HTTP 協(xié)議，設計模式等。
跟著 FCC 刷完它的初、中、高級算法之后，我對 JS 很多的 API 有了更深刻的理解，并把全部題解寫成了文章發(fā)到知乎和簡書上，雖然現(xiàn)在看來屬實寫得不怎樣，效率太低。原因是我缺少一些前置知識，便買了一本《學習 JavaScript 數(shù)據(jù)結構與算法》，再去有名的刷題網(wǎng)站 LeetCode 刷題。
從 10 月份開始一直到 12 月底，我看完了《JavaScript 設計模式與開發(fā)實戰(zhàn)》與《HTTP 權威指南》中跟 Web 相關的部分，了解到真實的前端開發(fā)工作是要跟后端人員通過接口的形式進行數(shù)據(jù)傳遞，也明白企業(yè)級項目并不是我之前寫的那種面向過程式代碼，會思考怎么封裝、復用。
再回過頭看自己以前寫的代碼，恍惚間感覺自己提升了不少，也消除內心的迷茫，更加堅定要走軟件開發(fā)這條路。
項目與簡歷
從完成自學到工作還有最后一道檻，那就是做一個拿得出手的項目，寫一份漂亮的簡歷。其實 FCC 準備項目已經(jīng)很出色，同時百度前端學院也有許多不錯的項目可供選擇。我做過一些 demo, 包括 2048、貪吃蛇、飛機大戰(zhàn)等小游戲。
2017 年可以稱得上前端三大框架崛起的一年，你不會其中一個，都不好意思去面試，所以我不得不抽時間看看 Vue 官方文檔，并完成了一個簡單的案例——Vue ToDoList。
盡管做了以上這些，離真正意義上的前端開發(fā)還是缺點味道，于是我找到了我的大學朋友。經(jīng)過半年他已經(jīng)從 UI 轉崗到了產(chǎn)品經(jīng)理，在我三番五次要求之下，他給我看了一些他們以前外包的項目，有完整的需求說明、UI 設計稿，有些還能直接訪問。這就是我想要的真實項目。
于是我對著設計稿自己實現(xiàn)，盡量把自己想象成一位真正的開發(fā)人員：這個特效我會怎么實現(xiàn)？這里的布局為什么不用這樣？遇到不會的地方，我就記錄下來，然后通過搜索來解決。這樣如果面試官問我自學過程中，或者項目中有遇到什么最難的問題，我也能對答如流。
完成了項目的準備，這里簡單說下簡歷。對于沒有做過什么項目的小伙伴來說，我強烈建議你用前端代碼寫一份響應式簡歷，然后通過 GitHub Pages（一種網(wǎng)頁寄存服務，可以讓任何人看你做的頁面） 讓面試官可以訪問到，這樣既能展示你的個人信息，也側面讓面試官康康你的代碼實力，一舉兩得?。≒S：更多關于項目與簡歷的詳細細節(jié)，請關注我的 B 站個人賬號：宇哥在學習）
持續(xù)學習與成長
前端真的是一個看上去簡單，實際上知識點復雜且多樣的職業(yè)，如下圖：
我當初找到第一份工作的時候，干活用到的技術真的就只有 HTML、CSS、jQuery、Bootstrap，連 ES6 都很少用到。到了 17 年中旬， Boss 直聘前端崗位技能要求 Vue、React 二者至少掌握一個，且熟悉其生態(tài)。
為了以后能有更好的就業(yè)機會，在公司技術體系已經(jīng)穩(wěn)定的情況下，我主動向領導申請，采用當時流行的 Vue + Vuex 技術開發(fā)單頁應用，并利用空閑時間和周末，去一些技術平臺（掘金、Segmentfault）看教程文章，按照樣例代碼一行一行地敲。
在半個月內，我做了一個簡易版的 demo，并向同事們和領導演示其效果，講明白這套技術相比之前的方案有了哪些改進和提升。得到老板的肯定后，我的方案被應用到新項目。
得益于這段經(jīng)歷，我成功跳槽，直接漲薪資 4K。我清晰記得第三輪的面試官問過一個問題：“你自學了 8 個月，現(xiàn)在才工作了半年多一點，就獨立負責過公司項目的技術選型，是什么在支撐著你？”
我回答到：“堅持學習和自信”。
在轉行學習程序開發(fā)之前，我內心是比較自卑的，也不太敢在公眾場合發(fā)表自己的觀點，怕被質疑和嘲笑。但是這段自學的經(jīng)歷給我?guī)砹朔浅４蟮母淖儯瑥臎]有像自學編程一樣堅持一件事情長達 8 個月，收獲了別人的肯定，最重要的是我變得更自信。
在 18 年初，我嘗試去一些大廠面試，但因為?？茖W歷被拒絕了，這時才想起大學時我報名了一個自考本科。那會兒我人在深圳，為了拿到這個畢業(yè)證，除了學習工作上用到的知識，還要拾起自考課程和尋找一些考試相關資料，于是我每個周末都去圖書館，和那些考研的奮斗小伙伴們一起學習。
因為自考的院校在成都，所以每年的 4 月、10 月，我都要坐飛機回成都參加考試。終于在 19 年 5 月考完了所有課程，拿到了我夢寐以求的本科畢業(yè)證，同年參加了學位英語考試，算是彌補了我一生的遺憾吧。如果后面有機會我希望能再去讀一個在職研究生，認識更多優(yōu)秀的人。
最后想說的話
這就是我零基礎轉行 Web 前端開發(fā)的經(jīng)歷。
我現(xiàn)在也嘗試做一名 UP 主，這個決定從 19 年中旬就有了，現(xiàn)在終于邁出了第一步。
這是我做的一個視頻，我在視頻中留了三個問題，希望小伙伴們可以想一想。
不管你是否想要從事編程工作，想做什么就全力以赴去做，不斷學習，分享你的成長。即使大多數(shù)人不看好你的決定，你也要堅持，用結果證明給他們看。
]]>