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

發表於2018-04-14

我是怎麼走上前端開發這條路?

首先,我是個文科生,大學裡只學過vb,覺得計算機程式設計這東西太玄乎,不是我玩得轉的。

後來機緣巧合去做了一家網際網路創業公司的HR,閱了上千份程式設計師的簡歷,面了上百個不同水平不同領域的程式設計師。跟程式設計師接觸得越多,我越覺得程式設計是一件很有挑戰、很有趣的事情。尤其是前端這一塊,結識了好幾位前端大牛。其中一位告訴我,如果你真的感興趣,那就先去寫幾個HTML靜態頁面吧。

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

於是我花了一個晚上在慕課網上聽了幾節HTML+CSS基礎課,第二天我把w3school線上教程上HTML+CSS的API全部過了一遍後,隨便在網上找了個簡單又漂亮的網頁,就開始仿寫我的第一個HTML靜態頁面了。

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

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

這一個月我做了什麼

看書

經過之前的仿寫網頁頁面的練習,我已經對常用的HTML標籤、css樣式比較熟練了,是時候開始系統的學習前端的各種技術了。可是,要從哪裡開始呢?

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

於是,我在圖書館找來了JavaScript DOM程式設計藝術 (第2版) 這本書,花了三、四天前後通讀了一遍,把其中的程式碼事例也完整的自己敲了一遍。

這本書真的非常適合初學者,通俗易懂,講解詳細,讓我對javascript有了一個大概的瞭解,也讓我更有自信。於是,我馬上又從圖書館借了另外一本書————JavaScript高階程式設計(第3版),打算趁熱打鐵花一個禮拜的時間把這本書攻克下來。

然而最終我只讀到三分之一的位置就讀不下去了,因為我覺得這本書不是很適合初學者。尤其是第6、7章的物件導向的程式設計、閉包、繼承這些東西,雖然能讀懂但完全不知道為什麼要物件導向、為什麼要使用閉包、為什麼要繼承?

對於js的初學者來說,你的第一要務是把功能實現,把程式碼寫出來,不要管程式碼優不優美,放心大膽的repeat yourself。等未來你看別人優秀的程式碼多了,自然而然會去模仿,不斷改進自己的程式碼。

做題

讀了這一又三分之一本書後,我開始尋找練兵場。很多人建議直接去github上pull request做專案。我的天,這對初學者來說簡直太難了,別人的程式碼連看都看不懂更別談自己去寫了。

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

我可以肯定地告訴每一個前端初學者,FCC是你們最佳入門前端的地方,沒有之一。它為前端初學者設計了一套詳細的前端進階路線,並且每一步都提供詳實的講解和針對性的實踐練習。具體的介紹FCC裡面都有,基本上把它的所有課程都通關後在國內找份前端的工作不成問題。

FCC中對我最有用的部分是它的初級演算法和中級演算法這兩部分,可以作為對你前面js語法學習成果的一個檢驗。所有題目都是沒有答案的,如果你實在解答不出的話,可以參考我當時寫的一些答案(當時的我很稚嫩…答案寫的很糟糕,但至少能解決那些問題)
初級
中級(部分)
高階(部分)

課程

寫程式碼這活思路很重要,不過對初級前端來說,熟能生巧更重要。所以接下來我混跡在各種國外網路前端學習社群:Code SchoolCode CademyKhana Cademy等等,把其中我能看懂的部分幾乎全部看了一遍,程式碼也都敲了一遍,紮紮實實的鞏固了幾遍前期我學到的各種前端知識。

我真誠建議英語水平還可以的前端初學者不要去看國內的視訊教學網站,都直接看國外的。

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

我一直在做的事情

基本上做完上面三步我就去找工作了,最終去了一家創業公司,成了公司唯一的前端開發。我非常感謝這家公司CEO對我的認可,願意接納一個前端的初學者進公司,獨立負責前端方面的需求。我非常感謝CTO對我的信任,放心讓我自己去學習各種新的技術並運用到公司實際專案當中去。

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

解惑

對初學者來說,寫程式碼的過程會遇到各種各樣奇葩的bug,當你身邊空無一人,自己又苦苦找不出bug的原因的時候,誰能幫助你?

答案是: Stack OverflowGoogle

我可以很肯定的告訴你們,你學習過程中遇到的一切問題都能在google和stackoverflow上找到答案。如果找不到,說明你問題描述的有問題。

說起關於【學會提問】這個話題,我在stackoverflow上還被紮紮實實地上過一課。我在stackoverflow上提的第一個問題見下圖:4273042042-56ef6caacaacb_articlex
然後這個話題就被踩了三次,得到的回答是這樣的:851774905-56ef739b3f2e5_articlex
這位仁兄說的很對,這種找bug的提問不應該丟到stackoverflow來,自己仔細的去debug肯定能找到問題所在的。之所以會提這種問題,只有一個原因————懶,自己懶得花時間去debug。現在我偶爾有空上來segmentfault看一些提問,還是會看到很多諸如『你能幫我看看哪裡有問題嗎?』、『不知道哪裡錯了』之類的伸手黨問題。

我相信segmentfault問答版塊的定位跟stackoverflow應該是差不多的,既獎勵優質的回答,也鼓勵優質的提問。所以下次當你有問題的時候,先嚐試用一句通俗的話去概括你的問題,再去google。無法用一句話通俗概括出來的問題,不是一個好問題。拒絕做伸手黨,從我做起。

前沿

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

雖然初級前端的基本功很差,但這並不妨礙你去跟蹤前沿。千萬不要關著門研讀經典,前端技術發展那麼快,很多過去奉為經典的東西現在可能已經過時了。

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

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

這些週報裡既有前沿的技術分享,又有大量優質的tutorial,非常適合前端的學習。大家看週報讀文章儘量讀國外的,畢竟國內的文章很多都是翻譯國外的,甚至直接抄襲…

如果還有富裕的時間,我還會去這幾個網站上吸金…
https://www.smashingmagazine.com/
https://css-tricks.com/
https://medium.com/

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

其實很多文章都是科普性質的,非常容易看懂,大家放開膽去看吧,看不懂也沒關係,有個大概的印象就行了。

寶器

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

這個大寶器就是https://www.youtube.com/
我簡直無法用語言來形容它對我的幫助有多麼大。

對於初學者來說最頭疼的就是直接閱讀API或者原始碼了,很多文件寫的都不是給初學者看的。而youtube上有大量優秀的前端工作者上傳了他們對新技術新框架新庫的講解視訊,不僅幫助了我弄懂API, 更重要的是讓我看到這些API在實際專案當中到底應該怎麼用。

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

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

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

最後的坦白

最後我得承認這一次我又標題黨了…無非是想吸引更多前端初學者進來,希望大家都能少走一些彎路,也希望那些從零開始自學前端的同學更有勇氣去面對自己的選擇。

大家如果有任何問題,可以直接回復或者給我私信。

相關文章