建站
咨詢
售后
建站咨詢
新聞中心
我經(jīng)常會看到很多同學(xué)在學(xué)習(xí)前端的時候比較迷茫，不知道到底應(yīng)該以怎樣的學(xué)習(xí)路線來入門和進(jìn)階前端領(lǐng)域。每次遇到這種問題我也會分享一下自己的學(xué)習(xí)經(jīng)驗，但是發(fā)現(xiàn)這是一個問得非常多的一個共性問題。
成都創(chuàng)新互聯(lián)公司服務(wù)項目包括蒼梧網(wǎng)站建設(shè)、蒼梧網(wǎng)站制作、蒼梧網(wǎng)頁制作以及蒼梧網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，蒼梧網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到蒼梧省份的部分城市，未來相信會繼續(xù)擴大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！
作為程序員，肯定是不能容忍重復(fù)無味的勞動的，因此我就系統(tǒng)地總結(jié)分享一下我的前端學(xué)習(xí)路線，希望對你能夠有所幫助。
前言
前端學(xué)習(xí)是一個螺旋上升的過程，既要反復(fù)地看書，也要抓緊時間進(jìn)行實戰(zhàn)。只看書，看了就會忘，所以必須將看書和寫代碼相結(jié)合。只要你認(rèn)真學(xué)，入門前端的話三個月左右就可以了。之后我還給出了前端進(jìn)階路線，幫助你提升前端技能水平。我把前端入門和前端進(jìn)階一共分為六個階段，并對相應(yīng)階段所需要的大致的學(xué)習(xí)時間進(jìn)行了標(biāo)注。
前端入門
入門前端開發(fā)主要需要學(xué)習(xí) HTML，CSS 和 JavaScript 三大件。之后學(xué)習(xí)前端主流框架的使用，并基于已學(xué)內(nèi)容開發(fā)一個小項目進(jìn)行實戰(zhàn)。當(dāng)你把這些學(xué)習(xí)并理解透徹以后，也就算真正地入門前端了。
階段一：HTML + CSS
前端對于入門者相當(dāng)友好，因為開始學(xué)習(xí)的時候你只需要一個瀏覽器，推薦 Chrome。HTML 和 CSS 可以直接運行在瀏覽器中，瀏覽器就是它們的運行環(huán)境。你也可以使用編輯器，推薦 VSCode，這是前端開發(fā)使用最多的編輯器。
HTML (HyperText Markup Language) 和 CSS (Cascading Style Sheets) 其實并不是編程語言。HTML 中文名叫做超文本標(biāo)記語言，其實就是一些標(biāo)簽。CSS 中文名為層疊樣式表，也就是一些樣式的配置。
首先學(xué)習(xí) HTML，非常簡單。HTML 有非常多的標(biāo)簽，剛?cè)腴T的時候不要沉浸在記住這些標(biāo)簽中，你也記不住。你只需要整體瀏覽一遍，知道有哪些標(biāo)簽，各自的作用是什么，整體有一個印象就行了。
學(xué)習(xí)css過程中千萬不要剝離HTML學(xué)習(xí)。當(dāng)你什么時候理解了html的重要性（從頁面開發(fā)角度而言，它可以視為是后續(xù)良好css和js編碼得以實施的基礎(chǔ)，相當(dāng)于程序中的數(shù)據(jù)結(jié)構(gòu)，設(shè)計好了可以讓你事半功倍），你才可以稱得上是一個合格的頁面開發(fā)對于新人，我建議除了幾個關(guān)鍵概念，如布局、盒模型、單位等等，都不應(yīng)該花大量去扣細(xì)節(jié)，甚至背書記憶，瀏覽性學(xué)習(xí)知道有這個東西就行，在實際應(yīng)用時再去加深記憶。
階段二：JavaScript
學(xué)習(xí)了 HTML 和 CSS，可以開始學(xué)習(xí) JavaScript 了。這也是至關(guān)重要的階段。JavaScript 主要包括語言基礎(chǔ)（ECMAScript）、DOM 和 BOM 三部分，如果你是初學(xué)者，會想這到底是啥，咋還三個東西。那就開始學(xué)起來，學(xué)完你就知道啦，其實沒那么難。
JavaScript這幾年變化很快，但是對于初學(xué)者來說要摒棄浮躁的氣氛，靜下心來打好基礎(chǔ)。記住：自己是初學(xué)者，玩的東西就是：JavaScript和jQuery，工具就用一個編輯器和一個瀏覽器，這些就夠了，別的不要碰
階段三：入門前端框架
學(xué)完前端三大件，打好了大樹的根基，就可以開始擴展技能樹了，開始學(xué)習(xí)前端框架。前端的主流框架目前主要為 React，Vue 和 Angular。選擇哪個框架呢？你可以去知乎或者其他網(wǎng)站搜一搜，然后根據(jù)你的個人喜好進(jìn)行選擇。一般是在 React 和 Vue 中選一個。React 的開發(fā)體驗更類似于寫原生的 JavaScript，要求你有較好的 JavaScript 基礎(chǔ)。Vue 則引入了模版，將很多實現(xiàn)封裝成了 API，你需要記住并調(diào)用 API 來進(jìn)行開發(fā)，因為很多都是封裝好的，所以學(xué)習(xí)起來較為簡單，只是編程的感覺稍微弱了一些。
這兩個都是非常優(yōu)秀的框架，新人不必糾結(jié)于選擇哪個框架，學(xué)了一個，另一個也很容易學(xué)。如果你不知道選擇哪個，我推薦你先學(xué)習(xí) React。
前端進(jìn)階
成功入門前端開發(fā)之后就要開啟進(jìn)階部分了，主要是加深對各個知識的理解程度，打牢計算機領(lǐng)域基礎(chǔ)知識，擴展技能樹，提升項目開發(fā)和宏觀理解及把控能力。前端進(jìn)階是需要終生學(xué)習(xí)的，活到老學(xué)到老
階段四：語言基礎(chǔ)進(jìn)階
這個階段就是加深對編程語言的理解，多閱讀進(jìn)階書籍.
進(jìn)階必讀書籍：
《你不知道的 JavaScript 上/中/下卷》：必買書籍，將 JavaScript 的疑難問題，細(xì)節(jié)知識一網(wǎng)打盡。原版是 GitHub 上開源的電子書，英語水平高的可以去讀英文原版。
《JavaScript 忍者秘籍》：深入講解 JavaScript 的核心知識點，必買書籍。
《了不起的 JavaScript 工程師》：從宏觀來看 JavaScript 語言，以及前端工程師所需要掌握的一些技能，推薦閱讀。
《JavaScript 函數(shù)式編程指南》：學(xué)習(xí)函數(shù)式編程思想
《JavaScript 函數(shù)式編程》：也是一本函數(shù)式編程思想的好書
《JavaScript 設(shè)計模式》：學(xué)習(xí) JavaScript 設(shè)計模式，推薦閱讀
《JavaScript 設(shè)計模式與開發(fā)實踐》：另一本同等分量的設(shè)計模式書籍，推薦閱讀
《鋒利的 jQuery》：jQuery 現(xiàn)在已經(jīng)很少有人用了，除非是很老的項目或者寫小東西。不過這本書值得買，學(xué)習(xí) jQuery 的優(yōu)秀思想，還可以去學(xué)習(xí)一下它的源碼，對你進(jìn)階很有幫助。
階段五：框架和學(xué)習(xí)邊界進(jìn)階
通過階段三，你已經(jīng)掌握了前端框架的基本使用，開發(fā)一個完整項目的流程。那么在框架和學(xué)習(xí)邊界進(jìn)階階段，你就可以：
學(xué)習(xí)框架周邊的生態(tài)，社區(qū)總結(jié)出來的優(yōu)秀組件，以及各種好用的工具庫。
造一些自己的輪子，使用框架搭建自己的開源項目
學(xué)習(xí) Webpack，Gulp，Babel，ESLint 等工具的使用、思想和原理
帶著問題去閱讀框架源碼，學(xué)習(xí)性能優(yōu)化
養(yǎng)成良好的編程習(xí)慣
擴展技術(shù)邊界，學(xué)習(xí) Node.js 等后端相關(guān)技能
……
推薦閱讀書籍：
以下推薦的書籍都是比較出名的書籍，你可以根據(jù)自己的技能樹，選擇所需要的書籍進(jìn)行閱讀。并不是一字不差地整本閱讀，而是在每本書中學(xué)習(xí)自己所需要的部分。很多都是非常著名的好書，有精力盡量買來學(xué)習(xí)。
Webpack 相關(guān)：
《深入淺出 Webpack》
《Webpack 實戰(zhàn)：入門、進(jìn)階與調(diào)優(yōu)》
React 相關(guān)：
《深入 React 技術(shù)?！?/p>
《深入淺出 React 和 Redux》
《Redux 實戰(zhàn)》
《React 學(xué)習(xí)手冊》
《React 快速上手開發(fā)》
《React 設(shè)計模式與最佳實踐》
Vue 相關(guān)：
《Vue.js 實戰(zhàn)》
《Vue.js 開發(fā)實戰(zhàn)》
《深入淺出 Vue.js》
《Vue.js 權(quán)威指南》
《Vue.js 從入門到項目實戰(zhàn)》
《Vue.js 前端開發(fā)基礎(chǔ)與項目實戰(zhàn)》
《Vue.js 項目開發(fā)實戰(zhàn)》
《Vue.js 快速入門》
《Vue.js 前端開發(fā)》
Node.js 相關(guān)：
《狼書卷1》
《狼書卷2》
《Node 學(xué)習(xí)指南》
《了不起的 Node.js》
《深入淺出 Node.js》
《Node.js 實戰(zhàn)》
《Node.js 開發(fā)指南》
《Node 即學(xué)即用》
《Node 與 Express 開發(fā)》
樣式和布局相關(guān)：
《Bootstrap 實戰(zhàn)》
《Bootstrap 用戶手冊》
《響應(yīng)式 Web 設(shè)計：HTML5 與 CSS3 實戰(zhàn)》
性能相關(guān)：
《Web 性能權(quán)威指南》
《高性能網(wǎng)站建設(shè)指南》
PWA 相關(guān)：
《PWA 開發(fā)實戰(zhàn)》
《PWA 實戰(zhàn)：面向下一代的 Progressive Web APP》
其他：
《SVG 精髓》
《深入理解 SVG》
《前端架構(gòu)設(shè)計》
《重構(gòu)：改善既有代碼的設(shè)計》
《同構(gòu) JavaScript 應(yīng)用開發(fā)》
階段六：計算機基礎(chǔ)知識進(jìn)階
編程編程，萬變不離其宗，那就是計算機基礎(chǔ)知識，算法、數(shù)據(jù)結(jié)構(gòu)、計算機原理、網(wǎng)絡(luò)等內(nèi)容。在這里我只推薦最經(jīng)典的好書，每一本都是必讀書籍。學(xué)好這些內(nèi)容，大廠任你選。
數(shù)據(jù)結(jié)構(gòu)和算法：
《劍指offer》
《程序員面試金典（第 6 版）》
《編程之美》
《漫畫算法》
《算法圖解》
《程序員代碼面試指南》
《大話數(shù)據(jù)結(jié)構(gòu)》
《趣學(xué)算法》
《學(xué)習(xí) JavaScript 數(shù)據(jù)結(jié)構(gòu)與算法》
《數(shù)據(jù)結(jié)構(gòu)與算法：JavaScript 描述》
計算機網(wǎng)絡(luò)：
《HTTP/2 基礎(chǔ)教程》
《HTTPS 權(quán)威指南》
《計算機網(wǎng)絡(luò)：自頂向下方法》
《圖解 HTTP》
《圖解 TCP/IP》
《TCP/IP 詳解》
《UNIX 網(wǎng)絡(luò)編程》
操作系統(tǒng)：
《深入理解計算機系統(tǒng)》
《現(xiàn)代操作系統(tǒng)》
《UNIX 環(huán)境高級編程》
《The Linux Programming Interface》
總結(jié)
至此，你已經(jīng)完成了前端開發(fā)從入門到進(jìn)階，已然成為了一個巨佬，之后再學(xué)什么已經(jīng)了如指掌。希望我的分享對你有幫助，如果你覺得有用，可以收藏本文，并分享給你有需要的朋友。讓我們一起學(xué)習(xí)，共同進(jìn)步！
標(biāo)題名稱：前端開發(fā)從入門到進(jìn)階完全指南，不用再迷茫前端要怎么學(xué)啦！
URL分享：http://m.fisionsoft.com.cn/article/dpopipg.html
