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

大家好，我是帥地，

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

雖然帥地的技術堆疊是后端開發，不過后端和前端顯然是一對的，還是經常要和前端打交道，所以在之前也學習過不少前端的知識，下面總結的這套前端學習路線，是我參考了別人大量的學習經歷 + 自己的思考 + 咨詢前端大佬后提取出來的，可能不會像別人一樣寫一大堆，但你按照這個路線學習之后，應該也不算太差，

下面推薦的所有書籍，都可以在這個 GitHub 上下載到，里面收集了挺多優質編程書籍：編程的優質書籍整理

一、入門前端三劍客

前端和后端相比，需要學習的知識還是要少很多，如果你要入門后端，你可以要學習一大堆只是，但是你入門前端，只要把 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 和 React 隨便選一個重點學習即可，我推薦 vue，不過學了 Vue 之后，有時間的話，我建議可以了解下 React，快入通過視頻了解，感覺幾個小時或者一兩天就夠了，

三、資料結構

無論你是走什么崗位，資料結構都是必須學習的一門課程，從面試的角度來講，面試基本比問，特別是校招；從個人的提升上來看，學好資料結構與演算法，可以讓你走的更遠，

但是，資料結構與演算法這玩意，可深可淺，不過我覺得至少得掌握如下基礎知識：

1、時間復雜度、空間復雜度

2、鏈表、佇列、堆疊

3、樹：初級：二叉樹，查找二叉樹，進階：AVL樹，紅黑樹等，至少掌握初級吧，

4、圖（圖有好多種演算法，深度/廣度搜索，最短路徑、最小生存樹等），對于圖，其實無論是面試還是作業，都挺少用到，學起來也有一定難度，假如你時間不多，我覺得可以先不學，

不過如果你是科班的，那么這些我覺得你大一第二學期把這些都學完是最好的了，沒學完也問題不大，有些人可能是先教《離散數學》這本課，為資料結構與演算法做鋪墊，

書籍推薦：你學過 JavaScript，所以可以用 Javascript 來寫這些資料結構，至于書籍，其實我也不知道推薦啥，網上根據目錄找一本：

把基礎資料結構學了之后，我覺得你要保持刷題，這個還是挺重要的，例如可以每天保持刷一兩道，剛開始刷會挺吃力，但后面熟練了，就會快很多，不過很多人在吃力的那會，就放棄了，所以也就有了人與人之間的差距，

我覺得至少把《劍指 offer》刷完吧，刷完之后，可以去把 leetcode 中 top 100 的熱門題做了，

當然，如果你想更加系統著學習演算法，可以看我之前寫的演算法學習路線：談一談演算法學習之路

四、計算機網路

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

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

一邊看一邊犯困怎么辦？

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

五、瀏覽器作業原理

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

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

里面有很多東西，例如各種網路請求資料，各種腳本資料，感興趣的話，可以去研究研究，

那么具體要學習哪些呢？

我覺得至少得了解一下本地 cookie ，localStorage，SessionStorage 存盤吧，還有就是，如何查看一個 http 的請求狀態，瀏覽器關閉后會做哪些處理之類的，

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

六、進階

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

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

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

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

七、學習順序問題

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

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

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

最后

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

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

還有就是，以上說到的書籍，都可以在這個 GitHub 上無套路下載到：[編程的優質書籍整理](

《程式員內功修煉》第二版強勢來襲

帥地肝了七天七夜，《程式員內功修煉》第二版強勢來襲，匯總了高質量的演算法、計算機基礎文章并且每一篇文章，要嘛是漫畫講解，要嘛是對話講解，一步步引導，要嘛是圖形并茂，例如講解樹的文章

例如講解演算法思想的文章

等等，如果你想學習演算法，學習計算機基礎，那么我決定這份 PDF，一定會讓你有所幫助，當然，如果一是一位有那么點迷茫的在校生，相信我的個人經歷，可以給你打一份雞血，讓你更好著去尋找自己的目標，

如何獲取？

百度云鏈接：https://pan.baidu.com/s/1ooaT8XzmcBApg7x_Tqo6jQ 密碼:lbco

最后，希望這本 PDF 能夠對各位起到實質性對幫助，我也會在后面不斷著去完善這本電子書，后面文章多了，可能也會把演算法和計算機基礎分出來，大家敬請期待，

作者簡潔

作者：大家好，我是帥地，從大學、自學一路走來，深知演算法，計算機基礎知識的重要性，公眾號「帥地玩編程」10萬粉絲作者，專業于寫這些底層知識，提升我們的內功，帥地期待你的關注，和我一起學習，