假如你沒有明確的目標,或許可以按照我說的學習路線來學習一波,我寫的每一份學習路線,不會很全面,因為我認為,東西列的太多,反而不利於新手的學習,所以我列舉的,都是比較必要的知識,當你把這些知識學了的時候,我相信你不需要別人的學習路線,也能知道自己接下來需要學啥了。
一、入門前端三劍客
前端和后端相比,需要學習的知識還是要少很多,如果你要入門后端,你可以要學習一大堆只是,但是你入門前端,只要把 HTML + CSS + JavaScript 這三門知識學習了,就基本差不多入門前端了,並且可以利用這三門知識,寫出很多漂亮的交互頁面,下面講一講這三門知識的學習。
1、HTML
html 學起來還是挺簡單的,無論你是否有編程基礎,我覺得都可以快速入門,對於新手,我推薦找個入門的視頻看一下,然后跟着視頻打代碼就可以了,入門教程隨便在慕課網啥找個免費的視頻就可以了,隨便搜索「html入門」即可,或者看菜鳥教程的一個入門教程也行.
看完視頻,也可以看一下文字版的教程,不知道大家有沒有看過阮一峰寫過的教程,我覺得他寫的教程都很棒,所以這里我也推薦下大家看一下阮一峰寫的這份 HTML 入門教程,可能可以讓你理解的更加透徹:https://wangdoc.com/html/
大家切勿眼高手低,一定要跟着視頻或者書籍上的案例打代碼,寫代碼的編輯器,我推薦 VS-Code,反正選一款你喜歡的編輯器就行,現在這些編輯器都有很多插件,像 VS-Code 這些編輯器,用好一款就可以寫各種語言的代碼了。
2、CSS
沒啥好說的,和 HTML 相輔相成,你在學習 HTML 的過程中,其實也一直都在接觸 CSS,所以你學了 HTML 之后,感覺幾個小時就可以學完 CSS 了,還是一樣,推薦找個視頻快速入門,不多說。
html 是一門標簽語言,里面有各種各樣的標簽,很多初學者學了之后可能就把這些標簽忘了,有人可能會問,老是忘了怎么辦?
忘了就忘了,沒事的,不需要強行記住這些標簽,你需要的是:腦子里有個印象,當你這實現某個功能的時候,你知道 HTML 有某個標簽可以實現這樣的功能就可以了,然后翻開對應的教程,你能夠根據教程使用這個標簽即可。
用的次數多了,也就記住了,所以學完 HTML 和 CSS,一定要多多實踐,隨便打開一個網頁,對着葫蘆畫瓢,自己寫一個和它類似的就可以了。
3、JavaScript
比起 HTML 和 CSS,JavaScript 會難一些,不過如果你有其他編程語言基礎,例如學過 C 語言,Python 或者 Java 啥的,那學期 JavaScript 也是分分鍾的事。
前面的 HTML 和 CSS,我的推薦大家找個視頻快速入門即可,但是對於 JavaScript,假如你時間不是很緊,那么我推薦你用書籍系統學一下,有些知識,趁着有時間,一定要系統學,這樣可以打下很深的底子,如果你覺得難的話,也可以先用視頻快速入門,之后再回過頭來鑽研書籍,系統過一遍,通過系統學習,你會明白很多原理,學到很多設計思想,我看過一本《JavaScript 高級程序設計》,感覺還好,就推薦這一本吧。
學了 JavaScript 之后,可以學一學 ES6,面試貌似也經常會問到,可以看一看阮一峰寫的一份入門教程:https://wangdoc.com/es6/
書籍這里看這里

二、框架
目前前端用的比較多的主要有 Vue 和 React ,在學習框架之前,一定要先用 HTML + CSS + JavaScript 這些做一些項目,因為這些框架的底層實現,其實就是 JavaScript 實現的,然而,居然還有人知道如何使用 Vue,但沒學過 JavaScript,這顯然不合適,只有你體驗過 HTML + CSS + JavaScript ,你才能更好着明白 Vue 和 React 的好處。
不過對於初學者,可以先學習 Vue,Vue 可能更好入門一些,之前實習的時候,被迫學習了幾天的 vue,我是在慕課網先快速入門看的,學起來不難,就是細節容易忘,入門課程直達: https://www.imooc.com/coursescore/980
或者百度雲我也搞好了一份,vue入門+實戰:Vue 入門教程
不過你看了課程之后,你去做項目的話,其實還是會遇到好多問題的,特別是在網絡請求那塊,在解決問題的過程中,你就能更加理解一些原理了。
學到什么程度?
對於初學者,我的一半建議就是,跟着一份教程,過一遍,然后做對應的項目即可,之后遇到啥,就去搜索啥,不用糾結這個學到什么程度。
Vue 和 React 隨便選一個重點學習即可,我推薦 vue,不過學了 Vue 之后,有時間的話,我建議可以了解下 React,快入通過視頻了解,感覺幾個小時或者一兩天就夠了。
三、數據結構
無論你是走什么崗位,數據結構都是必須學習的一門課程,從面試的角度來講,面試基本比問,特別是校招;從個人的提升上來看,學好數據結構與算法,可以讓你走的更遠。
但是,數據結構與算法這玩意,可深可淺,不過我覺得至少得掌握如下基礎知識:
1、時間復雜度、空間復雜度
2、鏈表、隊列、棧
3、樹:初級:二叉樹,查找二叉樹,進階:AVL樹,紅黑樹等,至少掌握初級吧。
4、圖(圖有好多種算法,深度/廣度搜索,最短路徑、最小生存樹等),對於圖,其實無論是面試還是工作,都挺少用到,學起來也有一定難度,假如你時間不多,我覺得可以先不學。
不過如果你是科班的,那么這些我覺得你大一第二學期把這些都學完是最好的了,沒學完也問題不大,有些人可能是先教《離散數學》這本課,為數據結構與算法做鋪墊。
書籍推薦:你學過 JavaScript,所以可以用 Javascript 來寫這些數據結構,至於書籍,其實我也不知道推薦啥,網上根據目錄找一本:
把基礎數據結構學了之后,我覺得你要保持刷題,這個還是挺重要的,例如可以每天保持刷一兩道,剛開始刷會挺吃力,但后面熟練了,就會快很多,不過很多人在吃力的那會,就放棄了,所以也就有了人與人之間的差距。
我覺得至少把《劍指 offer》刷完吧,刷完之后,可以去把 leetcode 中 top 100 的熱門題做了。
當然,如果你想更加系統着學習算法,可以看我之前寫的算法學習路線:談一談算法學習之路
另外就是強烈推薦這份 GitHub 80+K 的刷題筆記:

四、計算機網絡
無論是前端開發還是后端開發,說到底都是數據通過網絡在多台主機之間的交互,而且對於前端,計算機網絡的知識,用的可能比后端還多,特別是 HTTP 這塊,所以呢,計算機網絡必須好好學,而且還得重點學。
入門我推薦《圖解 HTTP》,不過看完這本我覺得還不夠,可以看《計算機網絡:自頂向下》這本書,多看兩遍,以后面試就可以和面試桿上了。
一邊看一邊犯困怎么辦?
我的建議是,硬着頭皮死磕一邊,因為根據讀者的反饋,確實有挺多人跟我說這玩意看着好困,不過我當時學習的時候,看着好帶勁,就是了解了很多原因,很爽,然而事實是,有些人,看着卻是一種煎熬,,,,學計算機網絡,就一條主線:理解一台計算機是如何找到另外一台計算機,並且把數據交付給他的,或者你可以看我這篇科普文章:一文讀懂一台計算機是如何把數據發送給另一台計算機的
書籍都整理好了:少走彎路,必讀計算機經典書籍推薦(含下載方式)
我也寫過一份計算機網絡的入門教程:
五、瀏覽器工作原理
學前端,基本天天和瀏覽器打交道,因為網頁上的各種界面,都是由瀏覽器來渲染的,所以還是非常有必要學習一下瀏覽器相關的知識。
如果你在瀏覽器按 F12,會出現一個「調試」的界面

里面有很多東西,例如各種網絡請求數據,各種腳本數據,感興趣的話,可以去研究研究。
那么具體要學習哪些呢?
我覺得至少得了解一下本地 cookie ,localStorage,SessionStorage 存儲吧,還有就是,如何查看一個 http 的請求狀態,瀏覽器關閉后會做哪些處理之類的。
總的來說,就是,從我們發起一個 http 請求,到頁面展示如初,瀏覽器都經歷了哪些邏輯處理?
六、進階
學完了上面這些,可以學一些幫助我們更好着構建一個前端項目的工具,比較常見的有如下幾種:
Node.js:這個必須學,主要就是可以幫助我們很快着構建出一個 web 項目,一條命令就搞定了,入門可以在慕課網看視頻,我之前看過一個,順便推薦一下:
進階或者更甚層次了解,一般都得看書,自己網上搜一本吧。
Webpack:不同瀏覽器對 JavaScript 的特性支持的不一致,可以通過構建工具把 JavaScript 代碼轉換成瀏覽器能支持的。使用構建工具也能夠做到性能優化,比如壓縮代碼,這個 webpack 可以了解一下,在以后做項目的過程中,還是經常用到 node.js 和 webpack 的,我覺得剛開始會使用就好,后面遇到問題了,在通過問題驅動的方式去深入了家。
七、學習順序問題
這里講一下學習順序的問題,就是說學習了 html + css + javascript 之后,我是先學習前端的一些框架好啊,還是學習數據結構與算法好啊,還是學習計算機網絡,瀏覽器工作原理好呢?
我覺得這個和你時間有關,假如你還是大一大二的話,學校會有數據結構,計算機網絡的課程,我覺得跟着學校的順序學就行,然后的話,像刷題,我覺得有些東西同時做並不會存在矛盾,例如我就建議刷題這個時期,長期保持,然后一邊做其他的。
總的來說,我覺得也可以按照我說的這個學習順序來學,然后算法那一塊,當你學習了 Javascript 之后,就可以穿拆整個過程了。
學完這些,都可以去面試了,當然,也別忘了刷一刷八股文,可以看看這些PDF,跟着學:圖解操作系統、網絡、計算機組成 PDF 下載!
最后
再次強調,這篇文章不是讓你成為大神的,學完也不是多厲害,而是,給處於大學迷茫、不知道學啥的你,一個方向,無論你是否是科班,如標題所說,普通/大眾。不過我相信,當你學完了這些,你應該會有自己的學習方向了。
最后,是希望各位還在校的學生,大一可以好好浪,但也要保持應有的學習時間,之后,就好好學習吧。不管你是名校還是非名校,我覺得你在只要這幾年認真學,進大公司的幾率,真的非常大,這絕對不是雞湯。
還有就是,以上說到的書籍,都可以在這個 GitHub 上無套路下載到:編程的優質書籍整理
