建站
咨詢
售后
建站咨詢
新聞中心
假如你沒有明確的目標(biāo)，或許可以按照我說的學(xué)習(xí)路線來學(xué)習(xí)一波，我寫的每一份學(xué)習(xí)路線，不會(huì)很全面，因?yàn)槲艺J(rèn)為，東西列的太多，反而不利于新手的學(xué)習(xí)，所以我列舉的，都是比較必要的知識(shí)，當(dāng)你把這些知識(shí)學(xué)了的時(shí)候，我相信你不需要?jiǎng)e人的學(xué)習(xí)路線，也能知道自己接下來需要學(xué)啥了。
一、入門前端三劍客
前端和后端相比，需要學(xué)習(xí)的知識(shí)還是要少很多，如果你要入門后端，你可以要學(xué)習(xí)一大堆只是，但是你入門前端，只要把 HTML + CSS + JavaScript 這三門知識(shí)學(xué)習(xí)了，就基本差不多入門前端了，并且可以利用這三門知識(shí)，寫出很多漂亮的交互頁面，下面講一講這三門知識(shí)的學(xué)習(xí)。
1、HTML
html 學(xué)起來還是挺簡單的，無論你是否有編程基礎(chǔ)，我覺得都可以快速入門，對(duì)于新手，我推薦找個(gè)入門的視頻看一下，然后跟著視頻打代碼就可以了，入門教程隨便在慕課網(wǎng)啥找個(gè)免費(fèi)的視頻就可以了，隨便搜索「html入門」即可，或者看菜鳥教程的一個(gè)入門教程也行.
看完視頻，也可以看一下文字版的教程，不知道大家有沒有看過阮一峰寫過的教程，我覺得他寫的教程都很棒，所以這里我也推薦下大家看一下阮一峰寫的這份 HTML 入門教程，可能可以讓你理解的更加透徹： https://wangdoc.com/html/
大家切勿眼高手低，一定要跟著視頻或者書籍上的案例打代碼，寫代碼的編輯器，我推薦 VS-Code，反正選一款你喜歡的編輯器就行，現(xiàn)在這些編輯器都有很多插件，像 VS-Code 這些編輯器，用好一款就可以寫各種語言的代碼了。
2、CSS
沒啥好說的，和 HTML 相輔相成，你在學(xué)習(xí) HTML 的過程中，其實(shí)也一直都在接觸 CSS，所以你學(xué)了 HTML 之后，感覺幾個(gè)小時(shí)就可以學(xué)完 CSS 了，還是一樣，推薦找個(gè)視頻快速入門，不多說。
html 是一門標(biāo)簽語言，里面有各種各樣的標(biāo)簽，很多初學(xué)者學(xué)了之后可能就把這些標(biāo)簽忘了， 有人可能會(huì)問，老是忘了怎么辦？
忘了就忘了，沒事的，不需要強(qiáng)行記住這些標(biāo)簽，你需要的是：腦子里有個(gè)印象，當(dāng)你這實(shí)現(xiàn)某個(gè)功能的時(shí)候，你知道 HTML 有某個(gè)標(biāo)簽可以實(shí)現(xiàn)這樣的功能就可以了，然后翻開對(duì)應(yīng)的教程，你能夠根據(jù)教程使用這個(gè)標(biāo)簽即可。
用的次數(shù)多了，也就記住了，所以學(xué)完 HTML 和 CSS，一定要多多實(shí)踐，隨便打開一個(gè)網(wǎng)頁，對(duì)著葫蘆畫瓢，自己寫一個(gè)和它類似的就可以了。
3、JavaScript
比起 HTML 和 CSS，JavaScript 會(huì)難一些，不過如果你有其他編程語言基礎(chǔ)，例如學(xué)過 C 語言，Python 或者 Java 啥的，那學(xué)期 JavaScript 也是分分鐘的事。
前面的 HTML 和 CSS，我的推薦大家找個(gè)視頻快速入門即可，但是對(duì)于 JavaScript，假如你時(shí)間不是很緊，那么我推薦你用書籍系統(tǒng)學(xué)一下，有些知識(shí)，趁著有時(shí)間，一定要系統(tǒng)學(xué)，這樣可以打下很深的底子，如果你覺得難的話，也可以先用視頻快速入門，之后再回過頭來鉆研書籍，系統(tǒng)過一遍，通過系統(tǒng)學(xué)習(xí)，你會(huì)明白很多原理，學(xué)到很多設(shè)計(jì)思想，我看過一本《JavaScript 高級(jí)程序設(shè)計(jì)》，感覺還好，就推薦這一本吧。
學(xué)了 JavaScript 之后，可以學(xué)一學(xué) ES6，面試貌似也經(jīng)常會(huì)問到，可以看一看阮一峰寫的一份入門教程： https://wangdoc.com/es6/
二、框架
目前前端用的比較多的主要有 Vue 和 React ,在學(xué)習(xí)框架之前，一定要先用 HTML + CSS + JavaScript 這些做一些項(xiàng)目，因?yàn)檫@些框架的底層實(shí)現(xiàn)，其實(shí)就是 JavaScript 實(shí)現(xiàn)的，然而，居然還有人知道如何使用 Vue，但沒學(xué)過 JavaScript，這顯然不合適，只有你體驗(yàn)過 HTML + CSS + JavaScript ，你才能更好著明白 Vue 和 React 的好處。
不過對(duì)于初學(xué)者，可以先學(xué)習(xí) Vue，Vue 可能更好入門一些，之前實(shí)習(xí)的時(shí)候，被迫學(xué)習(xí)了幾天的 vue，我是在慕課網(wǎng)先快速入門看的，學(xué)起來不難，就是細(xì)節(jié)容易忘，入門課程直達(dá)： https://www.imooc.com/coursescore/980
或者百度云我也搞好了一份，vue入門+實(shí)戰(zhàn)： Vue 入門教程
不過你看了課程之后，你去做項(xiàng)目的話，其實(shí)還是會(huì)遇到好多問題的，特別是在網(wǎng)絡(luò)請(qǐng)求那塊，在解決問題的過程中，你就能更加理解一些原理了。
學(xué)到什么程度？
對(duì)于初學(xué)者，我的一半建議就是，跟著一份教程，過一遍，然后做對(duì)應(yīng)的項(xiàng)目即可，之后遇到啥，就去搜索啥，不用糾結(jié)這個(gè)學(xué)到什么程度。
Vue 和 React 隨便選一個(gè)重點(diǎn)學(xué)習(xí)即可，我推薦 vue，不過學(xué)了 Vue 之后，有時(shí)間的話，我建議可以了解下 React，快入通過視頻了解，感覺幾個(gè)小時(shí)或者一兩天就夠了。
三、數(shù)據(jù)結(jié)構(gòu)
無論你是走什么崗位，數(shù)據(jù)結(jié)構(gòu)都是必須學(xué)習(xí)的一門課程，從面試的角度來講，面試基本比問，特別是校招；從個(gè)人的提升上來看，學(xué)好數(shù)據(jù)結(jié)構(gòu)與算法，可以讓你走的更遠(yuǎn)。
但是，數(shù)據(jù)結(jié)構(gòu)與算法這玩意，可深可淺，不過我覺得至少得掌握如下基礎(chǔ)知識(shí)：
1、時(shí)間復(fù)雜度、空間復(fù)雜度
2、鏈表、隊(duì)列、棧
3、樹：初級(jí)：二叉樹，查找二叉樹，進(jìn)階：AVL樹，紅黑樹等，至少掌握初級(jí)吧。
4、圖（圖有好多種算法，深度/廣度搜索，最短路徑、最小生存樹等），對(duì)于圖，其實(shí)無論是面試還是工作，都挺少用到，學(xué)起來也有一定難度，假如你時(shí)間不多，我覺得可以先不學(xué)。
不過如果你是科班的，那么這些我覺得你大一第二學(xué)期把這些都學(xué)完是最好的了，沒學(xué)完也問題不大，有些人可能是先教《離散數(shù)學(xué)》這本課，為數(shù)據(jù)結(jié)構(gòu)與算法做鋪墊。
書籍推薦：你學(xué)過 JavaScript，所以可以用 Javascript 來寫這些數(shù)據(jù)結(jié)構(gòu)，至于書籍，其實(shí)我也不知道推薦啥，網(wǎng)上根據(jù)目錄找一本：
把基礎(chǔ)數(shù)據(jù)結(jié)構(gòu)學(xué)了之后，我覺得你要保持刷題，這個(gè)還是挺重要的，例如可以每天保持刷一兩道，剛開始刷會(huì)挺吃力，但后面熟練了，就會(huì)快很多，不過很多人在吃力的那會(huì)，就放棄了，所以也就有了人與人之間的差距。
我覺得至少把《劍指 offer》刷完吧，刷完之后，可以去把 leetcode 中 top 100 的熱門題做了。
當(dāng)然，如果你想更加系統(tǒng)著學(xué)習(xí)算法，可以看我之前寫的算法學(xué)習(xí)路線： 談一談算法學(xué)習(xí)之路
另外就是強(qiáng)烈推薦這份 GitHub 80+K 的刷題筆記：
兩個(gè)月斬獲 70k star，前字節(jié)大神刷題筆記
四、計(jì)算機(jī)網(wǎng)絡(luò)
無論是前端開發(fā)還是后端開發(fā)，說到底都是數(shù)據(jù)通過網(wǎng)絡(luò)在多臺(tái)主機(jī)之間的交互，而且對(duì)于前端，計(jì)算機(jī)網(wǎng)絡(luò)的知識(shí)，用的可能比后端還多，特別是 HTTP 這塊，所以呢，計(jì)算機(jī)網(wǎng)絡(luò)必須好好學(xué)，而且還得重點(diǎn)學(xué)。
入門我推薦《圖解 HTTP》，不過看完這本我覺得還不夠，可以看《計(jì)算機(jī)網(wǎng)絡(luò)：自頂向下》這本書，多看兩遍，以后面試就可以和面試桿上了。
一邊看一邊犯困怎么辦？
我的建議是，硬著頭皮死磕一邊，因?yàn)楦鶕?jù)讀者的反饋，確實(shí)有挺多人跟我說這玩意看著好困，不過我當(dāng)時(shí)學(xué)習(xí)的時(shí)候，看著好帶勁，就是了解了很多原因，很爽，然而事實(shí)是，有些人，看著卻是一種煎熬，，，，學(xué)計(jì)算機(jī)網(wǎng)絡(luò)，就一條主線：理解一臺(tái)計(jì)算機(jī)是如何找到另外一臺(tái)計(jì)算機(jī)，并且把數(shù)據(jù)交付給他的，或者你可以看我這篇科普文章： 一文讀懂一臺(tái)計(jì)算機(jī)是如何把數(shù)據(jù)發(fā)送給另一臺(tái)計(jì)算機(jī)的
書籍都整理好了： 少走彎路，必讀計(jì)算機(jī)經(jīng)典書籍推薦（含下載方式）
我也寫過一份計(jì)算機(jī)網(wǎng)絡(luò)的入門教程：
0. 計(jì)算機(jī)網(wǎng)絡(luò)入門簡介
1. 計(jì)算機(jī)網(wǎng)絡(luò)五層模型入門
2. 通信雙方如何保證消息不丟失？
3. 集線器、交換機(jī)與路由器有什么區(qū)別？
4. 什么是 TCP 擁塞控制？
5. 什么是 TCP 流量控制
6. 什么是 TCP 三次握手？
7. 什么是 TCP 四次揮手？
8. 什么是 HTTP？
9. 什么是 HTTPS？
10. 什么是 SSL/TLS 協(xié)議？
11. 什么是 DNS？
12. 什么是 DHCP ？
13. 什么是廣播路由算法？
14. 什么是數(shù)字簽名？
15. 什么是 SQL 注入攻擊？
16. 什么是 XSS 攻擊？
五、瀏覽器工作原理
學(xué)前端，基本天天和瀏覽器打交道，因?yàn)榫W(wǎng)頁上的各種界面，都是由瀏覽器來渲染的，所以還是非常有必要學(xué)習(xí)一下瀏覽器相關(guān)的知識(shí)。
如果你在瀏覽器按 F12，會(huì)出現(xiàn)一個(gè)「調(diào)試」的界面
里面有很多東西，例如各種網(wǎng)絡(luò)請(qǐng)求數(shù)據(jù)，各種腳本數(shù)據(jù)，感興趣的話，可以去研究研究。
那么具體要學(xué)習(xí)哪些呢？
我覺得至少得了解一下本地 cookie ，localStorage，SessionStorage 存儲(chǔ)吧，還有就是，如何查看一個(gè) http 的請(qǐng)求狀態(tài)，瀏覽器關(guān)閉后會(huì)做哪些處理之類的。
總的來說，就是，從我們發(fā)起一個(gè) http 請(qǐng)求，到頁面展示如初，瀏覽器都經(jīng)歷了哪些邏輯處理？
六、進(jìn)階
學(xué)完了上面這些，可以學(xué)一些幫助我們更好著構(gòu)建一個(gè)前端項(xiàng)目的工具，比較常見的有如下幾種：
Node.js：這個(gè)必須學(xué)，主要就是可以幫助我們很快著構(gòu)建出一個(gè) web 項(xiàng)目，一條命令就搞定了，入門可以在慕課網(wǎng)看視頻，我之前看過一個(gè)，順便推薦一下：
進(jìn)階或者更甚層次了解，一般都得看書，自己網(wǎng)上搜一本吧。
Webpack：不同瀏覽器對(duì) JavaScript 的特性支持的不一致，可以通過構(gòu)建工具把 JavaScript 代碼轉(zhuǎn)換成瀏覽器能支持的。使用構(gòu)建工具也能夠做到性能優(yōu)化，比如壓縮代碼，這個(gè) webpack 可以了解一下，在以后做項(xiàng)目的過程中，還是經(jīng)常用到 node.js 和 webpack 的，我覺得剛開始會(huì)使用就好，后面遇到問題了，在通過問題驅(qū)動(dòng)的方式去深入了家。
七、學(xué)習(xí)順序問題
這里講一下學(xué)習(xí)順序的問題，就是說學(xué)習(xí)了 html + css + javascript 之后，我是先學(xué)習(xí)前端的一些框架好啊，還是學(xué)習(xí)數(shù)據(jù)結(jié)構(gòu)與算法好啊，還是學(xué)習(xí)計(jì)算機(jī)網(wǎng)絡(luò)，瀏覽器工作原理好呢？
我覺得這個(gè)和你時(shí)間有關(guān)，假如你還是大一大二的話，學(xué)校會(huì)有數(shù)據(jù)結(jié)構(gòu)，計(jì)算機(jī)網(wǎng)絡(luò)的課程，我覺得跟著學(xué)校的順序?qū)W就行，然后的話，像刷題，我覺得有些東西同時(shí)做并不會(huì)存在矛盾，例如我就建議刷題這個(gè)時(shí)期，長期保持，然后一邊做其他的。
總的來說，我覺得也可以按照我說的這個(gè)學(xué)習(xí)順序來學(xué)，然后算法那一塊，當(dāng)你學(xué)習(xí)了 Javascript 之后，就可以穿拆整個(gè)過程了。
學(xué)完這些，都可以去面試了，當(dāng)然，也別忘了刷一刷八股文，可以看看這些PDF，跟著學(xué)： 圖解操作系統(tǒng)、網(wǎng)絡(luò)、計(jì)算機(jī)組成 PDF 下載！
最后
再次強(qiáng)調(diào)，這篇文章不是讓你成為大神的，學(xué)完也不是多厲害，而是， 給處于大學(xué)迷茫、不知道學(xué)啥的你，一個(gè)方向，無論你是否是科班 ,如標(biāo)題所說， 普通/大眾 。不過我相信，當(dāng)你學(xué)完了這些，你應(yīng)該會(huì)有自己的學(xué)習(xí)方向了。
最后，是希望各位還在校的學(xué)生，大一可以好好浪，但也要保持應(yīng)有的學(xué)習(xí)時(shí)間，之后，就好好學(xué)習(xí)吧。不管你是名校還是非名校，我覺得你在只要這幾年認(rèn)真學(xué)，進(jìn)大公司的幾率，真的非常大，這絕對(duì)不是雞湯。
還有就是，以上說到的書籍，都可以在這個(gè) GitHub 上無套路下載到： 編程的優(yōu)質(zhì)書籍整理
當(dāng)前標(biāo)題：適合普通大學(xué)生的前端學(xué)習(xí)路線
標(biāo)題來源：http://fisionsoft.com.cn/article/coocdge.html
