適合普通大學生的前端學習路線

帥地 發表於 2021-07-25
前端

假如你沒有明確的目標,或許可以按照我說的學習路線來學習一波,我寫的每一份學習路線,不會很全面,因為我認為,東西列的太多,反而不利於新手的學習,所以我列舉的,都是比較必要的知識,當你把這些知識學了的時候,我相信你不需要別人的學習路線,也能知道自己接下來需要學啥了。

一、入門前端三劍客

前端和後端相比,需要學習的知識還是要少很多,如果你要入門後端,你可以要學習一大堆只是,但是你入門前端,只要把 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/

書籍這裡看這裡

image-20210611114857332

少走彎路,必讀計算機經典書籍推薦(含下載方式)

二、框架

目前前端用的比較多的主要有 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 的刷題筆記:

圖片

兩個月斬獲 70k star,前位元組大神刷題筆記

四、計算機網路

無論是前端開發還是後端開發,說到底都是資料通過網路在多臺主機之間的互動,而且對於前端,計算機網路的知識,用的可能比後端還多,特別是 HTTP 這塊,所以呢,計算機網路必須好好學,而且還得重點學。

入門我推薦《圖解 HTTP》,不過看完這本我覺得還不夠,可以看《計算機網路:自頂向下》這本書,多看兩遍,以後面試就可以和麵試杆上了。

一邊看一邊犯困怎麼辦?

我的建議是,硬著頭皮死磕一邊,因為根據讀者的反饋,確實有挺多人跟我說這玩意看著好睏,不過我當時學習的時候,看著好帶勁,就是了解了很多原因,很爽,然而事實是,有些人,看著卻是一種煎熬,,,,學計算機網路,就一條主線:理解一臺計算機是如何找到另外一臺計算機,並且把資料交付給他的,或者你可以看我這篇科普文章:一文讀懂一臺計算機是如何把資料傳送給另一臺計算機的

書籍都整理好了:少走彎路,必讀計算機經典書籍推薦(含下載方式)

我也寫過一份計算機網路的入門教程:

0. 計算機網路入門簡介

1. 計算機網路五層模型入門

2. 通訊雙方如何保證訊息不丟失?

3. 集線器、交換機與路由器有什麼區別?

4. 什麼是 TCP 擁塞控制?

5. 什麼是 TCP 流量控制

6. 什麼是 TCP 三次握手?

7. 什麼是 TCP 四次揮手?

8. 什麼是 HTTP?

9. 什麼是 HTTPS?

10. 什麼是 SSL/TLS 協議?

11. 什麼是 DNS?

12. 什麼是 DHCP ?

13. 什麼是廣播路由演算法?

14. 什麼是數字簽名?

15. 什麼是 SQL 注入攻擊?

16. 什麼是 XSS 攻擊?

五、瀏覽器工作原理

學前端,基本天天和瀏覽器打交道,因為網頁上的各種介面,都是由瀏覽器來渲染的,所以還是非常有必要學習一下瀏覽器相關的知識。

如果你在瀏覽器按 F12,會出現一個「除錯」的介面

image-20210409131708209

裡面有很多東西,例如各種網路請求資料,各種指令碼資料,感興趣的話,可以去研究研究。

那麼具體要學習哪些呢?

我覺得至少得了解一下本地 cookie ,localStorage,SessionStorage 儲存吧,還有就是,如何檢視一個 http 的請求狀態,瀏覽器關閉後會做哪些處理之類的。

總的來說,就是,從我們發起一個 http 請求,到頁面展示如初,瀏覽器都經歷了哪些邏輯處理?

六、進階

學完了上面這些,可以學一些幫助我們更好著構建一個前端專案的工具,比較常見的有如下幾種:

Node.js:這個必須學,主要就是可以幫助我們很快著構建出一個 web 專案,一條命令就搞定了,入門可以在慕課網看視訊,我之前看過一個,順便推薦一下:

進階或者更甚層次瞭解,一般都得看書,自己網上搜一本吧。

Webpack:不同瀏覽器對 JavaScript 的特性支援的不一致,可以通過構建工具把 JavaScript 程式碼轉換成瀏覽器能支援的。使用構建工具也能夠做到效能優化,比如壓縮程式碼,這個 webpack 可以瞭解一下,在以後做專案的過程中,還是經常用到 node.js 和 webpack 的,我覺得剛開始會使用就好,後面遇到問題了,在通過問題驅動的方式去深入了家。

七、學習順序問題

這裡講一下學習順序的問題,就是說學習了 html + css + javascript 之後,我是先學習前端的一些框架好啊,還是學習資料結構與演算法好啊,還是學習計算機網路,瀏覽器工作原理好呢?

我覺得這個和你時間有關,假如你還是大一大二的話,學校會有資料結構,計算機網路的課程,我覺得跟著學校的順序學就行,然後的話,像刷題,我覺得有些東西同時做並不會存在矛盾,例如我就建議刷題這個時期,長期保持,然後一邊做其他的。

總的來說,我覺得也可以按照我說的這個學習順序來學,然後演算法那一塊,當你學習了 Javascript 之後,就可以穿拆整個過程了。

學完這些,都可以去面試了,當然,也別忘了刷一刷八股文,可以看看這些PDF,跟著學:圖解作業系統、網路、計算機組成 PDF 下載!

最後

再次強調,這篇文章不是讓你成為大神的,學完也不是多厲害,而是,給處於大學迷茫、不知道學啥的你,一個方向,無論你是否是科班,如標題所說,普通/大眾。不過我相信,當你學完了這些,你應該會有自己的學習方向了。

最後,是希望各位還在校的學生,大一可以好好浪,但也要保持應有的學習時間,之後,就好好學習吧。不管你是名校還是非名校,我覺得你在只要這幾年認真學,進大公司的機率,真的非常大,這絕對不是雞湯。

還有就是,以上說到的書籍,都可以在這個 GitHub 上無套路下載到:程式設計的優質書籍整理