我是如何從零開始學習前端的

首先，我是個文科生，大學裏只學過vb，以爲計算機編程這東西太玄乎，不是我玩得轉的。

後來機緣巧合去作了一家互聯網創業公司的HR，閱了上千份程序員的簡歷，面了上百個不一樣水平不一樣領域的程序員。跟程序員接觸得越多，我越以爲編程是一件頗有挑戰、頗有趣的事情。尤爲是前端這一塊，結識了好幾位前端大牛。其中一位告訴我，若是你真的感興趣，那就先去寫幾個

HTML靜態頁面

吧。

可當時我連個HELLO WORLD都不會寫，更不知道HTML是個啥?

因而我花了一個晚上在慕課網上聽了幾節HTML+CSS基礎課，次日我把w3school在線教程上HTML+CSS的API所有過了一遍後，隨便在網上找了個簡單又漂亮的網頁，就開始仿寫個人第一個HTML靜態頁面了。

那幾天一連模仿寫了好幾個HTML靜態頁面（寫不出的地方我就直接打開chrome控制檯，copy那部分的樣式）。

當時白天要上班，只有晚上有時間能夠寫HTML。這對寫代碼上了癮的我來講實在不痛快，恰好當時公司人員配置基本完整，個人招聘任務也能夠告一段落了。我便暫時離開了公司開始了個人一個月前端自學生涯。

這一個月我作了什麼

看書

通過以前的仿寫網頁頁面的練習，我已經對經常使用的HTML標籤、css樣式比較熟練了，是時候開始系統的學習前端的各類技術了。但是，要從哪裏開始呢？

最後我決定先沿襲我大學時的學習方式————考期的最後兩週把要考試科目的教材從頭至尾預習一遍再複習一遍。這種方式可讓我在短期內瞭解這門科目包含的所有知識，而且發現這個科目的核心內容或可能的考點。

因而，我在圖書館找來了JavaScript DOM編程藝術 （第2版) 這本書，花了3、四天先後通讀了一遍，把其中的代碼事例也完整的本身敲了一遍。

這本書真的很是適合初學者，通俗易懂，講解詳細，讓我對javascript有了一個大概的瞭解，也讓我更有自信。因而，我立刻又從圖書館借了另一本書————JavaScript高級程序設計（第3版），打算趁熱打鐵花一個禮拜的時間把這本書攻克下來。

然而最終我只讀到三分之一的位置就讀不下去了，由於我以爲這本書不是很適合初學者。尤爲是第六、7章的面向對象的程序設計、閉包、繼承這些東西，雖然能讀懂但徹底不知道爲何要面向對象、爲何要使用閉包、爲何要繼承？

對於js的初學者來講，你的第一要務是把功能實現，把代碼寫出來，不要管代碼優不優美，放心大膽的repeat yourself。等將來你看別人優秀的代碼多了，天然而然會去模仿，不斷改進本身的代碼。

作題

讀了這一又三分之一本書後，我開始尋找練兵場。不少人建議直接去github上pull request作項目。個人天，這對初學者來講簡直太難了，別人的代碼連看都看不懂更別談本身去寫了。

因而，我去quora中尋找答案，很快我就發現了一我的Quincy Larson——teacher at FreeCodeCamp.com，順着他的答案，我找到了他創辦的一個前端開源社區————Free Code Camp。當初我關注這個社區的時候，它的關注者才幾千人，截止到目前，它在github上已經有93661顆星星了...

我能夠確定地告訴每個前端初學者，FCC是大家最佳入門前端的地方，沒有之一。它爲前端初學者設計了一套詳細的前端進階路線，而且每一步都提供詳實的講解和針對性的實踐練習。具體的介紹FCC裏面都有，基本上把它的全部課程都通關後在國內找份前端的工做不成問題。

FCC中對我最有用的部分是它的初級算法和中級算法這兩部分，能夠做爲對你前面js語法學習成果的一個檢驗。全部題目都是沒有答案的。

課程

寫代碼這活思路很重要，不過對初級前端來講，熟能生巧更重要。因此接下來我混跡在各類國外網絡前端學習社區：Code School、Code Cademy、Khana Cademy等等，把其中我能看懂的部分幾乎所有看了一遍，代碼也都敲了一遍，紮紮實實的鞏固了幾遍前期我學到的各類前端知識。

我真誠建議英語水平還能夠的前端初學者不要去看國內的視頻教學網站，都直接看國外的。

我真誠的建議理解能力還能夠的前端初學者不要去參加任何前端培訓課程，網上的優秀的資源多的都學不過來了，爲何還要花錢去被填鴨式教育？高中還沒被填鴨夠嗎？

我一直在作的事情

基本上作完上面三步我就去找工做了，最終去了一家創業公司，成了公司惟一的前端開發。我很是感謝這家公司CEO對個人承認，願意接納一個前端的初學者進公司，獨立負責前端方面的需求。我很是感謝CTO對個人信任，放心讓我本身去學習各類新的技術並運用到公司實際項目當中去。

下面的部分是我一直堅持在作的，它們對我過去一年多的成長起了相當重要的做用。

解惑

對初學者來講，寫代碼的過程會遇到各類各樣奇葩的bug，當你身邊空無一人，本身又苦苦找不出bug的緣由的時候，誰能幫助你？

答案是: Stack Overflow 和 Google。

我能夠很確定的告訴大家，你學習過程當中遇到的一切問題都能在google和stackoverflow上找到答案。若是找不到，說明你問題描述的有問題。

提及關於【學會提問】這個話題，我在stackoverflow上還被紮紮實實地上過一課。我在stackoverflow上提的第一個問題見下圖:

而後這個話題就被踩了三次，獲得的回答是這樣的：

這位仁兄說的很對，這種找bug的提問不該該丟到stackoverflow來，本身仔細的去debug確定能找到問題所在的。之因此會提這種問題，只有一個緣由————懶，本身懶得花時間去debug。如今我偶爾有空上來segmentfault看一些提問，仍是會看到不少諸如『你能幫我看看哪裏有問題嗎？』、『不知道哪裏錯了』之類的伸手黨問題。

我相信segmentfault問答版塊的定位跟stackoverflow應該是差很少的，既獎勵優質的回答，也鼓勵優質的提問。因此下次當你有問題的時候，先嚐試用一句通俗的話去歸納你的問題，再去google。沒法用一句話通俗歸納出來的問題，不是一個好問題。拒絕作伸手黨，從我作起。

前沿

當你越深刻地瞭解前端，越會發現它的美妙。這兩年前端領域的發展很是快，各類有趣的新技術、框架、庫層出不窮，有無數優秀的前端都在爲前端技術在更廣更深的領域變得更牛逼而努力。

雖然初級前端的基本功不好，但這並不妨礙你去跟蹤前沿。千萬不要關着門研讀經典，前端技術發展那麼快，不少過去奉爲經典的東西如今可能已通過時了。

最好的跟蹤前沿的方式就是訂閱一些前端方面的週報，它們把一週前端各個領域的一些優秀的文章、教程、代碼整理成一份週報，你要作的僅僅是從一堆標題的列表中找出標題你能看懂或者感興趣的，然而再去讀。

我先列出部分我訂閱的週報：
Javascript Weekly
Mobile Web Weekly
HTML5 Weekly
訂閱以上三個就足夠了，必定要看國內的週報的話，碼農週刊還能夠。

這些週報裏既有前沿的技術分享，又有大量優質的tutorial，很是適合前端的學習。你們看週報讀文章儘可能讀國外的，畢竟國內的文章不少都是翻譯國外的，甚至直接抄襲...

若是還有富裕的時間，我還會去這幾個網站上吸金...
網頁連接
網頁連接
網頁連接

基本上天天早晨上班前，我就會大概瀏覽一下郵箱和以上三個網站，看到跟我最近作的工做相關領域的文章，用Readability直接send to kindle，然而空閒時間或者晚上再好好研讀它們。

其實不少文章都是科普性質的，很是容易看懂，你們放開膽去看吧，看不懂也不要緊，有個大概的印象就好了。

寶器

最後我要祭出真正的大寶器，說實話我前端學習時間的30%都花在這個大寶器上了...

這個大寶器就是網頁連接
我簡直沒法用語言來形容它對個人幫助有多麼大。

對於初學者來講最頭疼的就是直接閱讀API或者源碼了，不少文檔寫的都不是給初學者看的。而youtube上有大量優秀的前端工做者上傳了他們對新技術新框架新庫的講解視頻，不只幫助了我弄懂API, 更重要的是讓我看到這些API在實際項目當中到底應該怎麼用。

推薦的頻道：
LevelUpTuts
The New Boston
LearnCode.academy

除了以上幾個tutorial性質的頻道外，你們還要關注一些jsconf的頻道。國外常常會舉行js的研討分享會，邀請的嘉賓都是在各個領域研究比較深的，他們分享的東西大可能是比較前沿同時有趣的東西，你們必定要按期跟蹤一下。

conf相關頻道:
JSConf
React.js Conf 2016

最後的坦白

最後我得認可這一次我又標題黨了...無非是想吸引更多前端初學者進來，但願你們都能少走一些彎路，也但願那些從零開始自學前端的同窗更有勇氣去面對本身的選擇。

你們若是有任何問題，能夠直接回復或者給我私信。