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

時間 2021-07-26

標籤 javascript css html 前端 vue java node webpack es6 web 欄目悠閒生活简体版

原文原文鏈接

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

1、入門前端三劍客

前端和後端相比，須要學習的知識仍是要少不少，若是你要入門後端，你能夠要學習一大堆只是，可是你入門前端，只要把 HTML + CSS + JavaScript 這三門知識學習了，就基本差很少入門前端了，而且能夠利用這三門知識，寫出不少漂亮的交互頁面，下面講一講這三門知識的學習。css

一、HTMLhtml

html 學起來仍是挺簡單的，不管你是否有編程基礎，我以爲均可以快速入門，對於新手，我推薦找個入門的視頻看一下，而後跟着視頻打代碼就能夠了，入門教程隨便在慕課網啥找個免費的視頻就能夠了，隨便搜索「html入門」便可，或者看菜鳥教程的一個入門教程也行.前端

看完視頻，也能夠看一下文字版的教程，不知道你們有沒有看過阮一峯寫過的教程，我以爲他寫的教程都很棒，因此這裏我也推薦下你們看一下阮一峯寫的這份 HTML 入門教程，可能可讓你理解的更加透徹：https://wangdoc.com/html/vue

你們切勿眼高手低，必定要跟着視頻或者書籍上的案例打代碼，寫代碼的編輯器，我推薦 VS-Code，反正選一款你喜歡的編輯器就行，如今這些編輯器都有不少插件，像 VS-Code 這些編輯器，用好一款就能夠寫各類語言的代碼了。java

二、CSSnode

沒啥好說的，和 HTML 相輔相成，你在學習 HTML 的過程當中，其實也一直都在接觸 CSS，因此你學了 HTML 以後，感受幾個小時就能夠學完 CSS 了，仍是同樣，推薦找個視頻快速入門，很少說。webpack

html 是一門標籤語言，裏面有各類各樣的標籤，不少初學者學了以後可能就把這些標籤忘了，有人可能會問，總是忘了怎麼辦？es6

忘了就忘了，沒事的，不須要強行記住這些標籤，你須要的是：腦子裏有個印象，當你這實現某個功能的時候，你知道 HTML 有某個標籤能夠實現這樣的功能就能夠了，而後翻開對應的教程，你可以根據教程使用這個標籤便可。web

用的次數多了，也就記住了，因此學完 HTML 和 CSS，必定要多多實踐，隨便打開一個網頁，對着葫蘆畫瓢，本身寫一個和它相似的就能夠了。

三、JavaScript

比起 HTML 和 CSS，JavaScript 會難一些，不過若是你有其餘編程語言基礎，例如學過 C 語言，Python 或者 Java 啥的，那學期 JavaScript 也是分分鐘的事。

前面的 HTML 和 CSS，個人推薦你們找個視頻快速入門便可，可是對於 JavaScript，假如你時間不是很緊，那麼我推薦你用書籍系統學一下，有些知識，趁着有時間，必定要系統學，這樣能夠打下很深的底子，若是你以爲難的話，也能夠先用視頻快速入門，以後再回過頭來鑽研書籍，系統過一遍，經過系統學習，你會明白不少原理，學到不少設計思想，我看過一本《JavaScript 高級程序設計》，感受還好，就推薦這一本吧。

學了 JavaScript 以後，能夠學一學 ES6，面試貌似也常常會問到，能夠看一看阮一峯寫的一份入門教程：https://wangdoc.com/es6/

書籍這裏看這裏

少走彎路，必讀計算機經典書籍推薦（含下載方式）

2、框架

目前前端用的比較多的主要有 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，快入經過視頻瞭解，感受幾個小時或者一兩天就夠了。

3、數據結構

不管你是走什麼崗位，數據結構都是必須學習的一門課程，從面試的角度來說，面試基本比問，特別是校招；從我的的提高上來看，學好數據結構與算法，可讓你走的更遠。

可是，數據結構與算法這玩意，可深可淺，不過我以爲至少得掌握以下基礎知識：

一、時間複雜度、空間複雜度

二、鏈表、隊列、棧

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

四、圖（圖有好多種算法，深度/廣度搜索，最短路徑、最小生存樹等），對於圖，其實不管是面試仍是工做，都挺少用到，學起來也有必定難度，假如你時間很少，我以爲能夠先不學。

不過若是你是科班的，那麼這些我以爲你大一第二學期把這些都學完是最好的了，沒學完也問題不大，有些人多是先教《離散數學》這本課，爲數據結構與算法作鋪墊。

書籍推薦：你學過 JavaScript，因此能夠用 Javascript 來寫這些數據結構，至於書籍，其實我也不知道推薦啥，網上根據目錄找一本：

把基礎數據結構學了以後，我以爲你要保持刷題，這個仍是挺重要的，例如能夠天天保持刷一兩道，剛開始刷會挺吃力，但後面熟練了，就會快不少，不過不少人在吃力的那會，就放棄了，因此也就有了人與人之間的差距。

我以爲至少把《劍指 offer》刷完吧，刷完以後，能夠去把 leetcode 中 top 100 的熱門題作了。

固然，若是你想更加系統着學習算法，能夠看我以前寫的算法學習路線：談一談算法學習之路

另外就是強烈推薦這份 GitHub 80+K 的刷題筆記：

兩個月斬獲 70k star，前字節大神刷題筆記

4、計算機網絡

不管是前端開發仍是後端開發，說到底都是數據經過網絡在多臺主機之間的交互，並且對於前端，計算機網絡的知識，用的可能比後端還多，特別是 HTTP 這塊，因此呢，計算機網絡必須好好學，並且還得重點學。

入門我推薦《圖解 HTTP》，不過看完這本我以爲還不夠，能夠看《計算機網絡：自頂向下》這本書，多看兩遍，之後面試就能夠和麪試杆上了。

一邊看一邊犯困怎麼辦？

個人建議是，硬着頭皮死磕一邊，由於根據讀者的反饋，確實有挺多人跟我說這玩意看着好睏，不過我當時學習的時候，看着好帶勁，就是了解了不少緣由，很爽，然而事實是，有些人，看着倒是一種煎熬，，，，學計算機網絡，就一條主線：理解一臺計算機是如何找到另一臺計算機，而且把數據交付給他的，或者你能夠看我這篇科普文章：一文讀懂一臺計算機是如何把數據發送給另外一臺計算機的

書籍都整理好了：少走彎路，必讀計算機經典書籍推薦（含下載方式）

我也寫過一份計算機網絡的入門教程：

5、瀏覽器工做原理

學前端，基本每天和瀏覽器打交道，由於網頁上的各類界面，都是由瀏覽器來渲染的，因此仍是很是有必要學習一下瀏覽器相關的知識。

若是你在瀏覽器按 F12，會出現一個「調試」的界面

裏面有不少東西，例如各類網絡請求數據，各類腳本數據，感興趣的話，能夠去研究研究。

那麼具體要學習哪些呢？

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

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

6、進階

學完了上面這些，能夠學一些幫助咱們更好着構建一個前端項目的工具，比較常見的有以下幾種：

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

進階或者更甚層次瞭解，通常都得看書，本身網上搜一本吧。

Webpack：不一樣瀏覽器對 JavaScript 的特性支持的不一致，能夠經過構建工具把 JavaScript 代碼轉換成瀏覽器能支持的。使用構建工具也可以作到性能優化，好比壓縮代碼，這個 webpack 能夠了解一下，在之後作項目的過程當中，仍是常常用到 node.js 和 webpack 的，我以爲剛開始會使用就好，後面遇到問題了，在經過問題驅動的方式去深刻了家。