因爲我本身在的學校屬於三本野雞大學，所以幾乎環境都是封閉的，感覺回到了十年前，幸虧有互聯網。基本都是靠着課餘時間東找西湊，所以基本都是摸索着學習，之前搞過安卓，在最後的五個月轉行了前端，馬上面臨就業了，也是非常的着急，所以不得不規劃了一下這五個月的前端學習路線，最終功夫不負有心人，拿到了自己滿意的 offer，所以有很多經驗分享給在做的初學者和自學者，希望能夠用這大學四年總結的經驗分享給你們。
-------------------------------------------- 一下是正文 -----------------------------------------------------------
今天我想分享這五個月從只會 HTML 到面試拿到自己滿意的 offer，要學習哪些前端知識，我是如何學習的？有什麼樣的方法？踩過哪些不該踩的坑以及要掌握知識點到什麼程度？如何準備面試？統統都分享給學習前端的每一位讀者。
如果你不是學習前端的，小鹿也建議看一下，因爲裏邊總結到的方法都適用，所謂換湯不換藥。
我努力的的回想我當初學習前端的過程，從簡單基礎到項目經歷，然後到深入原理，再到準備面試，這一系列前端系列，我想更詳細的寫一下，這篇文章可能會很長，所以請做好長時間閱讀的準備，也希望能夠從中幫到你。
一、前端學習路徑規劃
其實還有很多的技術導圖中沒有涉及到，對於初學者來說，能夠掌握上邊的知識點已經很不錯了。
二、入坑前的三問
想要入前端的坑，首先做好思想準備。第一，你確定以後三年之內做前端嗎？第二，你是對前端是真感興趣還是爲了畢業之後爲了找工作纔去學習前端的？第三，無論遇到什麼樣的困難，你真的能夠堅持下去嗎？
這三問很有必要，當初我學前端之間就是沒有這三問，所以學學數據分析，又去學學爬蟲和前端，不知道主攻什麼纔好。有了這三問，必定能確定你的方向，如果前兩問落實了，最後一問對於會中途放棄的人，有時遇到解決不了的問題，心想這個前端真難，還是去學 python 吧，其實到了 python 還會有這種心理，所以說，目標要堅定，船杆要牢靠，船纔會走正道，都是一個道理的。
三、從最簡單的 HTML、CSS 入手
在說 HTML、CSS 之前，先說一個很多人認爲的誤區。當有人問你熟悉什麼編程語言時，有人回答我熟悉 HTML + CSS，這時候有人笑着說，HTML、CSS 不是編程語言，而是標記性語言，並不和 Java、JavaScript 這樣編程語言一樣。怎麼去理解？標記性，就是用標籤來表示頁面的元素，他並沒有涉及到面向對象之類的抽象的東西，很簡單很易懂的理解方式。
我們聽別人最常說的一句話就是，前端太簡單了，傻子看了都會，是的，前端入門那就是照葫蘆畫瓢。怎麼說，
這個標籤就代表一個頁面的元素，那好，你記住了，下次用就直接用就可以了，就是這麼簡單。還有很多標籤也是這麼去學習的，用多了就記住了。對於 CSS 就相當於樣式，什麼樣式？比如我們給朋友寄快遞，比如要寄一個玻璃的禮物，直接放到快遞盒子裏可能會在運輸的途中碰碎，所以在盒子的內壁塞上軟綿綿的墊子，防止與和內壁接觸碰碎。如果 HTML 是盒子和玻璃禮物的話，那麼 CSS 就是處理玻璃與盒子內壁的軟綿綿的墊子。如果我想把禮物包裝的更精美一些，加上蝴蝶結，這都是 CSS 來處理的，可以稱 CSS 爲"裝扮師"。稱 HTML 爲"搭建師"。
上邊小鹿舉的例子非常易理解，那麼學到什麼程度我們的 HTML 和 CSS 算合適呢？在網上隨便給你個網站，你能通過 DIV + CSS 搭建出靜態頁面，那麼你的 HTML + CSS 就算合格了。如果再讓我詳細給你個學習方法，那就是我推薦一個大一學習的網站，這是我一直跟着我做項目的老師搭建的學習網站，裏邊有十個簡單的網站，素材什麼的都可以自行下載，做完這是個靜態網站，那麼你的 HTML + CSS 就夠格了，大一跟着他也是這麼學過來的（PS：此時我該不該和老師要波廣告費，哈哈）。
網址：http://www.125jz.com/special/webproject。
四、如何自學徹底瞭解 JavaScript
說起 JavaScript 大家並不陌生，這門語言很強大，它可以完成任何你想不到的事情。做 PC 頁面交互、微信小程序、移動端、後臺Node.js、網頁爬蟲、公衆號開發，你可能會很驚奇，我咋不知道 js 能做那麼多事情，因爲初學者一開始學習瞭解到的少，所以並不知道 JS 的強大之處，既然那麼強大，那麼我們就分析一下怎麼在短短時間內掌握住它的命脈，然後融會貫通，一氣呵成。
無論你學習編程，都跑不了學習面向對象編程，學了這麼多年的編程，說實話，剛剛領會到面向編程的精髓所在，有了之前 JAVA 的基礎，學 JS 那就是和玩一樣，你可能說我吹B，那我就教給你怎麼去理解去把握住它的精髓。
先說面向對象，只需理解三個概念（對象、類、實例）我想打開文章的朋友，有可能你已經工作了，也有可能你是個學生，面向對象對你來說可能再簡單不過了，但是你是否瞭解到了其中的奧祕。面向對象，首先知道什麼是對象，女朋友？不，你單身想對象想瘋了吧。都說“萬物皆對象”，起初好像這句話也就這麼淺層面理解了，但是回過頭來想想，萬物，所謂世界上存在的東西都可以作爲對象，你看到的，你聽到的、你聞到的統統都是。這樣基本都理解了吧？
那麼什麼是類，這個好理解，他其實是一種抽象，還是不怎麼明白，將物品分類這個都清楚，那麼就這樣理解。所謂的“實例”，就是分類中的個體，比如水果類中的蘋果、香蕉、橘子都是“實例”。你會發現你學了幾年編程，面向對象就那麼簡單，是的，本質上就是這麼簡單，只不過增加了一些新的特性，比如封裝、多態、繼承，這也很好理解，所謂的繼承就好比兒子繼承父親的財產，父親有的，兒子會繼承過來可以花費父親的金錢。面向對象的思想也是這樣的，不用想的太過於複雜，只不過是將現實中存在的東西進行抽象化，也導致了初學者很難去理解。
那麼 JS 就學完了，你在逗我嗎？沒逗你呀，面向對象理解了，JS 就是學完了。沒錯，跟着小鹿繼續往下說，JS 屬於弱類型語言，它不想Java 這種強類型一樣，裏邊埋下了好多的坑，也包括小鹿自己。既然知道了是怎麼回事了，還是不知道怎麼去學 JS ，別急，舉個例子：
4.1 創建一個空對象
JS 就兩大基本類型，對象類型和原始類型，原始類型是字符串類型、布爾類型之類的，剩下的都是對象類型，就連函數也叫做對象，所以研究好 JS 重的對象是學習 JS 的第一步。
4.2 展開空對象
展開對象，看看這個對象有什麼屬性，不料，發現一個 proto 屬性，這個屬性指向的就是“原型的對象”，不瞭解原型沒關係，這就是它“爸爸”。
4.3 它的“爸爸”
他“爸爸”也是一個對象，裏邊有很多“財產”（屬性），所以“兒子們、孫子們”都可以共享這些財產。既然它“爸爸”是對象了，那肯定還有“爺爺”、“祖宗”，你可以順着 proto 往下依次類推，連接着它的整個家族，這條鏈就是“原型鏈”。
這種關係理解了，那麼學 JS 真的不再話下， JS 所謂的很多方法，其實就是“爸爸”、“爺爺”、“祖宗”的財產（屬性）。對，沒錯，所有的自帶方法如：toString、valueOf、等常用的 JS 方法都在這條家族原型鏈上。如果你知道 DOM 結點對象，也是這樣的關係，子繼承父，然後調用父的方法，哇，這對於你來說沒難度了。講的這麼詳細，你還認爲 JS 難嗎？給你兩個星期，你就掌握了學習 JS 的技巧了。
書籍推薦，去老老實實啃完《JavaScript 高級程序設計》這是最基礎的一本入門 JS 的一本書。（一定老老實實踏踏實實去學完）進行多遍學習你會受益匪淺。
還有一本比較全面的書籍，這個書籍主要用來學習當做字典用的，裏邊涉及到的知識點特別的全面，那就是《權威指南》，可以說是前端的一大神器。
五、ES6 是什麼鬼東西？
四個月前，我傻到 ES6 不知道是啥東西，前端有 JS 、HTML、CSS 了怎麼蹦出來個 ES6？納尼！我太難了，別再折磨我了，學的東西已經夠多了。
好吧，ES5(ECMAScript5) 是 Javascript 的一個標準，可以理解爲是 JavaScript 的一種規範，JS 所作所爲要準守 ES5 規範的，那麼 ES6 毫無疑問就是 ES5 標準的升級版，裏邊增加了很多 JavaScript 用法上的規範。
5.1 ES6 如何自學？
很多 ES6 是在 ES5 上“進化”而來的，高效的學習 ES6 不是單純的看視頻，去使用它，而是去了解它。如何瞭解它？
首先 ES6 的知識點基本解決了 ES5 中的一些缺點，1、也就是所謂的 ES6 的這個知識點出現的原因是什麼？2、爲什麼要替換它？3、以後要超哪個方向去發展？那麼你學習 ES6 基本沒任何問題了。
5.2 舉個例子
JS 中的異步編程，一開始用 ES5 中的回調函數解決，但是回調函數有很大的缺點，比如 AJAX 多個請求之間存在依賴性，用回調函數出現回調地獄問題，那麼 ES6 怎麼解決這個問題呢？Promise 和 Genertor 出場了，你有可能不瞭解這兩個是什麼，但是他要解決的問題就是解決回調函數的回調地獄問題。怎麼解決的就涉及到怎麼使用 Promise 以及 Promise 的原理，這不，一個知識點貫穿起來了，就是這麼簡單。
第三個問題，那麼 JS 異步編程朝着什麼方向發展呢？其實說白了就是想要難寫的異步寫起來更像是同步代碼一樣簡單，比如：ES7 又出來 async、awite，其實你瞭解原理的話，就是一種 ES6 中 promise 和 Genertor 的語法糖形式，儘管你不會用，但是你瞭解了原理，那現學現用不在話下，不是我說的那麼輕鬆，學起來比我說的還輕鬆，這些都是我四個月來從零學習前端到拿到滿意 offer 的總結的經驗以及入過的深坑，沒有添油加醋，全是原汁原味。
前端東西涉及到的很多，這三個是考試中最常考的，而且是考的最深的，所以重點提到這三個技術。那麼你會發現我學到了，也理解了，但是面試就是回答不正確，回答不上來，我明明心裏很清楚，導致每一次面試自信心遞減。下邊就是小鹿的必殺技，如何根據知識點準備面試？
六、如何準備面試？
前端知識點系統龐大，零碎的知識點居多，我前幾天整理就花費了一個月的時間，但是這一個月想要掌握這些龐大的前端知識體系，那麼就根據我總結的“必殺技”—— 前端知識樹。
首先，我們要將前端想象爲一棵樹，我們所學的所有前端知識點就是樹的葉子和枝幹，不斷學習前端的過程就是不斷地往我們的樹上掛載葉子的過程，我們可以通過樹根，將龐大的前端知識體系串聯起來，面試官問你啥，你都能從樹根說到樹枝再到樹葉，從樹葉到樹根，躺着問、站着問、蹲着問，隨便你怎麼問我知識點，我都給你擴展，還可能會引着面試官在我們的知識樹上跑，那在這棵樹上，就是你的天下。
老樣子，還是舉例子，每個零碎的知識點都將匯聚成一顆樹枝上，每個樹枝都是不同的分類。比如下圖，有關 JS 的所有原型、原型鏈的零碎知識點，總結爲一個枝幹。
我們把瑣碎的知識點都歸類劃分爲枝幹，當枝幹多了起來之後，我們再匯聚成一顆主枝幹。
❤️ 獲取資料：
上邊很多的知識點，小鹿已經在面試的時候整理完了，包括思維導圖、前端的學習路線。還有更多的前端基礎文章，以動畫的形式進行總結整理，希望對你的學習有幫助。
關注公衆號：「小鹿動畫學編程」。後臺回覆“前端”，即可領取。
如：JS 中分爲幾大重點內容？我們會想到原型、閉包、this 上下文… 然後面試官問你，閉包是什麼，然後你的思維跳到有關閉包的枝幹上，去回答總結的閉包那些問題。
有一點需要注意，目前的枝幹與枝幹之間是由主枝幹相連接的，我們要把枝幹之間產生必要的連接，這樣，你會帶着面試官在這個龐大的前端知識樹上遨遊，我就不信它不給你 offer，offer 不到你家難道去別人家？我纔不信呢，哈哈哈！
每一次面試都是掛載、完善枝幹的過程，雖然可能一次兩次面試沒入取你，但是你的知識體系得到完善，那就說明下一次拿到 offer 的機率就大了。別以爲 BAT 很難，如果你有大學充足的時間去專攻一門，BAT 對你來說都是小 K 死，我不是在開玩笑，之前和一個華爲的講師聊過，他就是這麼說的，而且這種學習方法得到了他的認可，所以有 BAT 的夢你就按照這個方法去追，早晚有一天你會實現夢想的。
我…, 不知不覺寫了那麼多了，看了看錶，加上昨天晚上，前天晚上，總結 + 編輯共八個小時，這貨乾的硬邦邦的，但是還有很多沒分享，那屬於次要的，後續繼續分享，如果有什麼問題也可以和小鹿一起交流，畢竟每一種學習方法都是不斷的切磋總結出來的，沒有天才，就看你有沒有去用心“刻意練習”，今天的分享就到這，喜歡的朋友們點贊就是最大的支持。
❤️ 不要忘記留下你學習的腳印 [點贊 + 收藏 + 評論]
很多學習的經歷和方法都在這裏毫無保留的分享了，希望你動一動你的小手，點個贊，我寫這篇文章也是爲了讓更多的初學者看到，找到自己學習編程適合的方法。
作者Info：
【作者】：小鹿
【原創公衆號】：小鹿動畫學編程。
【簡介】：和小鹿同學一起用動畫的方式從零基礎學編程，將 Web前端領域、數據結構與算法、網絡原理等通俗易懂的呈獻給小夥伴。先定個小目標，原創 1000 篇的動畫技術文章，和各位小夥伴共同努力一起學習！公衆號回覆 “資料” 送一從零自學資料大禮包！
【轉載說明】：轉載請說明出處，謝謝合作！~