如何優雅的自學前端

高能預警：

此文章不講API，不講屬性，不講知識點，只講最老生常談的，也是99%的人自學路上都會犯的錯誤！！！，想看知識點的請出門左拐各大前端論壇，這是只分享心得！！！

為什麼我要寫這篇文章？

之前在知乎上提問過為什麼總說要注重前端基礎這個問題獲得較多關注（看來是觸碰到了許多前端新人的痛點，有興趣的小夥伴可以點擊查看一下），在看了大家的回答分享結合我自身的學習體會寫一篇總結，希望能夠給剛入門前端的同學一點經驗分享，也是對我自己一年前端路程的總結。

我的情況你還不知道？

首先介紹一下本人背景：

17屆普通211計科專業畢業生，前端萌新，大四自學前端，在走過自學的N多彎路之後於天時地利人和順利入職B站，目前在B站前端開心的搬磚，相信你通過努力你也可以完成自己的目標~

這是我一年時間學習前端狀態路線：

以我現在的水平是100分為例： 前三個月（40分） => 再三個月（0分） => 再三個月（60分） => 再三個月（0分） => 再三個月（100分）

就是這樣，向過山車一樣。驚喜不驚喜？刺激不刺激？沒錯，人生總是充滿意外~

學習的這一年零三個月一句話總結： 學習，然後推倒重來。再學習，接著推到重來。再學習，再推倒。

然後，

就到了現在，沒了。

下面，乾貨來了！（敲黑板，咚咚咚

上面的狀態路線其實就是我精簡而來的最大總結：花10分鐘看完下面的乾貨獲取解鎖密碼，解鎖上面的信息獲取我的經驗，絕對物有所值。

我最不喜歡看長篇大論的回答，所以以下乾貨全部精簡，力求用最簡練的語言讓你快速獲取乾貨。

—————————————————我是做正事分割線————————————————

首先注意我的狀態路線的歷程，從40到0，從0開始再到60，再從60到0，再從0到100。你發現到了什麼信息？

A：每三個月學完再過三個月就清0了。

B：每次清0後，學習增量變多了，從開始的三個月40，再到3個月60，最後到現在的三個月100。

下面通俗的來講個故事：

我開始自學就相當於隨便撿了一本武功圖譜，學完感覺自己無敵了，卻發現是盜版的實戰中沒什麼用... 後來找到了小門派的正版秘籍，學的時候發現之前盜版的雖然大部分都是假的，可有的地方是基礎所以也有些可取之處。學了正版秘籍，又發現名門大派都學內功心法配套武功秘籍，你只有花架子，所以又去重新學了一套完整的武功最終修成正果。

如果我剛開始就進名門大派學豈不是省了很多事？基礎打的牢固而且還不用白白花費那麼多時間。

這就是我總結的第一點：選擇相對優質的學習資源進行學習（劃重點，要考

如果你選擇了一個靠譜的學習資源，恭喜你，跨過了第一個坑

有了資源，是不是該開始學了？好的，鼓起盡頭，開始學吧，HTMLCSSJS...一頓瘋狂輸出，我一天看10個小時教程，血拚！

當你瘋狂埋頭學習新知識AJAX的時候，一個人拍了拍你，然後

問：同學，我問問你塊級元素都有哪些啊？

我：好像是有...（已經忘了一大半

再問：同學，CSS裡面動畫怎麼定義的啊？

我：我想想... （其實已經忘了

最後問： 同學，要不然你給我講講你之前學的都是什麼吧？

我：？？？ （我學了什麼？我在幹嘛？我從哪裡來？我到哪裡去？

恭喜你，已經陷入了第二個坑：追新不求實，到頭一場空

好了，你這次踏踏實實學了，記了一本子的筆記，踏踏實實的完成了學習，這時候問你基礎什麼的，你也大概都能答得上來，一本子的筆記全是各種標籤，屬性。這時候你會發現，哇，怎麼前端東西這麼多啊，這怎麼記啊？（要瘋了！！！

恭喜你，已經陷入了第三個坑：知識碎片化，無體系，死記硬背

於是你翻開筆記開始整理，歸類，最後發現原來還是w3c的文檔更全面一些...

最後寫代碼的時候才發現，原來不是什麼都要記住的，忘了查文檔就好了

所以這裡就是我總結的第二點：良好的學習態度和方法

如果你已經跨過了上面的一個個深坑，相信你已經有了一套屬於自己的學習體系了，有了自己的學習知識體系，你距離目標就知識時間問題了。其實學習什麼都一樣，我個人認為：我們要學習不是屬性，API的名字，而是要了解記住他們的適用場景和使用方法，在使用的時候忘記了進行查閱就好，這裡也是提供給大家一個思路僅供參考。

更新：這只是我自己在這個初級階段的體會和心得，希望大家有條件和話可以和更多工作年限的大佬們多交流一下，畢竟職業規劃學習方向等一個工作一兩年的人所考慮的確實是不夠全面的，共勉

最後，希望各位小夥伴們都堅持的奔向自己的目標！！！