前言
從大三（三年前了吧）開始學的前端，市面上各類視頻，收費，免費，正版，盜版的都看過，平臺看極客學院，慕課網，騰訊課堂。後來出國了，就看 YouTube，Udemy 啥的。看了這麼多的學習視頻也有點心得，今天又是被困在美國的一天，就總結一下吧。
學習過程
很多人其實很想通過看視頻去學習某個技術，但是看完就跟沒看一樣。好像自己學了一點東西，但是用起來又不會用，打擊感很大。那我們不妨說一說比較良性的學習過程，因爲你得知道你爲什麼要看學習視頻，到底看了視頻要學哪些東西。
我總結自己的學習過程是這樣的
- 看視頻學最基本的概念，如 API 使用，語法（if-else, for, while, class），IDE 怎麼用，（npm, node，React...）是什麼。
- 熟悉語法，將上面學到的東西用一用。比如用 Pyhon/Java/Go/Ruby 寫寫 leetcode。
- 跟別人的視頻做第一個項目。比如寫個小商城，小記賬應用。
- 模仿市面上的項目，見一個抄一個。前面覺得自己學得不錯的可以抄網站，比如抄個知乎，抄個簡書，再不行抄個學校網頁總行吧。覺得還有很多不瞭解的，就抄組件，如登錄表單，表單驗證，按鈕等。
- 深入技術，思考，總結。比如爲什麼要有XX，XX怎麼來的，爲什麼用 XX不用YY。
- 創新，解決生活問題，寫輪子。
- 縱向/橫向發展，比如軟件工程，每個步驟瞭解一下。
- 自我感覺我還沒到這個層次。。。
呼，7個學習層次總算寫完了，是不是感覺很多？很難呢？沒錯，學習就是這麼的難。不要那麼多浮躁，總想一步登天。
從上面的學習過程，也可以看出看視頻只是在前期佔比較重要的位置，在後期個人發展佔的地位並不多。所以看視頻僅僅是爲了讓你去快速瞭解某個事物，並不能讓你提升很多，關鍵還是在於自己多練習和創新。
學習平臺
在分層去討論前想先說說學習平臺。對比一個國內和國外的兩個平臺。
視頻
- 國外：一般都是很入門的，比較喜歡拉長每個知識點，你看的時候總把你當三歲小孩，但是體驗很好，聲音，視頻質量都是很好的。
- 國內：參差不齊，體驗一般，看到還用 windows xp 系統講課的都吐了，命令行還是白底黑字的都是垃圾。但是畢竟說國語，至少讓你注意力比較集中，還有一個好處是，如果遇到比較操蛋，喜歡說騷話的老師，你的學習效率會直線上升，嘿嘿嘿。
博客
- StackOverflow: 一般查 problem
- Medium: 一般學一些基礎用法和概念
- 掘金: 小白東西比較多，但是闡述的概念會很全
- 簡書，知乎：解決問題爲主，主要爲了好看
- 博客園：垃圾
總結一下，兩邊的平臺都是有好資源的，不過國外的普遍好一點，國內要是好的話就特別好。所以爲什麼中國工程師一定比國外牛逼呢？就是因爲我們有兩個學習平臺呀。
下面就分層去討論吧。
1. 基本概念
這裏可以看一些很基礎入門的視頻，標題如《三天學會 XXX》，《零基礎學XXX》，《XXX Tutorial》，《XXXX Beginner》。
關於這類視頻不要太要求質量，因爲講得都是很基礎的，學完不會的可以回家種田了。看完你只需要
1. 知道 XXXX 是什麼
2. XXX 有哪些語法
3. 如果他有小實例那更好，你就是打字員，跟着敲就行了，別問那麼多爲什麼，因爲你還是個菜鳥，問了你也不懂。不信可以從“如何學習前端”這個問題DFS下去，看看你能搜出多少名詞？
4. 視頻最好要短，短到一天我就瞭解了所有東西，因爲你的時間應該放在後面的項目上，而不是這些概念
這裏可以稍微記一下筆記，但是不要寫得特別全，以截圖，代碼和一兩句話爲主。我附一些我在這個階段學一些東西的筆記。
別總想記成高考那樣的筆記，密密麻麻的，沒啥用，筆記的目的是爲了讓自己一看就知道那時發生了什麼，不了會了供起來的。後面有的是時間讓你寫密密麻麻的博客。
2. 使用基本概念
這個階段可以和上面結合，一般視頻介紹基本概念也會讓你寫點簡單的 hello world 代碼。一般是夠用的。
如果你覺得不夠的話可以用新學的編程語言 去寫寫 leetcode，就寫最最最簡單的，比如這種
多寫幾次，基本語法啥的就會了，別去記，因爲你記不住。
3. 項目視頻
可能這個階段是最多人比較困惑的點，當然我也曾經這裏的一員。處在這個階段，感覺自己懂了一點，就想秒天秒地秒宇宙了，覺得只要我看個項目視頻我就可以搞個類似的。要不是就是想看完這個視頻我就有東西寫在簡歷上了。所以在這個階段的人會去找一些大而全的視頻，比如《XXX商城》，《寫個Facebook》，《XXX+YYY+ZZZ+AA+BB 完成新浪》。
不要去選這種做大而全，複雜的項目視頻，下面是我的觀點：
- 那些你看起來的複雜項目，並不複雜，而是很無聊的項目。爲什麼？你想想複雜的定義是什麼。那不就一個頁面寫成一千個頁面，一個組件寫一千個組件唄。那還不如寫好一個頁面，一個組件，慢慢 follow up。
- 上面已經說了寫一個千個頁面其實很無聊，所以我敢保證你看完寫第二個頁面的時候，你就沒有看下去的慾望了。你會覺得不就是增，刪，改，查麼。
- 就算你真的寫完整個項目，你會更迷茫：寫了個複雜的商城，別人讓你再寫一個感覺很虛。這裏最大的問題就是你並不清楚學習重點是什麼。JS的 class，async/await，原型鏈，React 的受控和非受控，redux 原理，你會了多少呢？
說了那麼多，哪種項目比較適合你的第一個項目呢？我比較推薦 Todo App/記賬App。你可能會覺得驚訝，就這？？？？下面是我的觀點：
- 頁面不多，想都想得到：查看 todo 頁面，登錄，個人頁
- 資源不多，只有 todo，就是對基增，刪，改，查
- 有着大項目的特點：登錄，資源管理。你覺得簡單，那你下個 split-wise，自己實現一下
- 可拓展：
4.1 登錄：JWT？refresh token？權限管理？郵箱註冊？密碼加密？OAuth？reCaptcha？驗證碼？你都想到了多少？
4.2 資源：可參考 App Store 上的 App，添加分組, 圖片，圖表，notification, tag。資源的關係，單單統計這塊的 sql 就夠你想的了，想好了再做個可視化唄。
4.3 樣式：再參考 App Store 上的 App，做個一模一樣的。做完再做個響應式的，mobile 和 PC 都適用的樣式，PWA 瞭解一下？
4.3 縱向：Sketch 設計？Figma？Webpack打包？Jest 單元測試？Cypress 集成測試？Travis CI？Coverallas？HTTPS？AWS部署？MySQL？Mock Server？Logger？SSR？你又想到了多少呢？
4.4 橫向：如果上面你都挑戰成功，那麼試試 TODO MVC 吧：http://todomvc.com/，Vue，React，Angular 都實現一下？ - 省時間：有更多的時候去思考，比如，爲什麼要 Redux，Redux 到底怎麼來的，爲什麼要前端去實現 Router，後端實現 Router 不行麼？LocalStorage 和 cookie 存用戶信息？MySQL 要怎麼設計？思考好了，寫篇博客吧。如果你寫商城，我相信你是隻會疲於追趕課程的進度，真的只是做個打字員，沒時間去思考，總結，寫博客。
當然這個階段的目的是爲了讓你起步第一個項目，而不是去完成我上面說的。這裏只想說一個簡單項目已經夠用了，儘量去減法。所以一個 Todo App/記賬 App 絕對是夠你用已有的基礎去起步你的第一個項目的。
另一個目的是起步你的第一篇博客，當你寫完一個 todo list 相信是有很多體會的，此時可以寫一些很爛的博客，比如 JS class 怎麼用，JS 閉包是什麼。你別覺得自己不行，或者看不起這些很爛的博客，博客只有寫多了纔會深入淺出，這個階段你還沒深入，所以只能淺入淺出。
這算是我第一個比較“成功”的項目了https://yanhaixiang.com/yan-xuan/#/home/recommend，樣式還可以，但是可以看出有特別多的問題，代碼寫的也很亂，沒有後端，只有前端的 Mock Data。
這是我很久之前寫的一篇博客https://www.jianshu.com/p/e0941d5cc7ac，就是那麼的小白，圖片，思路也不那麼好。
4. 抄
這個階段就一個字——抄。抄知乎，抄簡書，抄 github。反正你看到什麼就抄什麼。抄到吐爲止。我以前抄過簡書，有譜麼，和嚴選。
有譜麼：
https://haixiang6123.github.io/guitar-editor/#/
嚴選：
https://yanhaixiang.com/yan-xuan/#/home/recommend
簡書項目好像被我刪了。。。
如果抄不了網站就抄小組件，像這些
如果想練 Node.js，那麼用 JS 去實現 cp, ls, mv 這些命令吧。當然我也寫了一個這樣的 repo，只是後面又被我刪了。。。不過我特別喜歡命令行工具，所以也有這個項目https://github.com/Haixiang6123/awesome-cli。
如果覺得自己很彳亍，那麼打開 https://dribbble.com/，上面的設計都挺好看，也很炫，抄吧。
5. 總結你的知識
抄了那麼多網站，也會學到很多小 tricks，如7種居中方法，如何拖拽組件，css 的定位等等。這個時候我覺得最好可以看一些比較宏觀，或者專精某個技術的視頻，如《XXX新特性》，《XXX最佳實踐》，《XXX發展史》。
此時你還會接觸到很多相似的工具或解決方案，如 Glup vs Grunt vs Webpack vs Parcel，Vue vs React vs Angular，this.$refs vs document.getElementById vs document.querySelector，text-align vs flex等等，所以，你還應該要去對比這些東西，從根本去理解這些所謂的“技術”，“術語”。
這方面博客是比較多的，這裏比較推薦 掘金 上面的博客比較小白，但是講某個技術是比較全的。英文的可以看 Medium。
YouTube 可以搜 《why XXX》，《XXX vs YYY》等。其實此時視頻對你來說幫助並不大，因爲很少視頻會講很深入的。。。一般視頻還是偏向給小白看的。
當然看視頻，博客只是學習手段，只有寫博客才能讓自己真正去掌握一門知識，所以，這時候就是你寫密密麻麻“筆記”的時候了，請開始你的表演。
6. 創新
曾經很多人問我要去哪裏找好項目做，我說去解決生活的問題呀，這就是創新。這裏創新並不讓你搞一些“新”東西來，而是用代碼去解決生活上的問題，當然新東西是錦上添花。
做創新項目的目的應該是這樣，如果你的實力有 60 分就去做 70 分的創新項目，而做完這個創新的項目，你的學習能力應該是達到 80 分的。。比如你學了爬蟲，那就爬一下學校的課表；學了 CSS 就用 CSS 畫個皮卡丘。不要總想着我學了 JS，直接寫刷票軟件，這是個好的創新，但是與你實力不符。
但是看到這裏的你也知道創新這一步是多麼的靠後，創新不僅僅需要技術的積累，也需要你對技術的熟練，熟練到一想到需求就有個大概框架的程度。實現項目不過是找資源和花時間去寫代碼。
當然，在生活中也要多用編程的思維去想問題，不要覺得很 nerd，我覺得這是一件很 cool 的事。如果別人覺得很 nerd，那就問他只會寫 leetcode 除了面試有什麼用。只要你用這種思路去想的話，遍地都是可以寫的項目。比如知乎這麼多廣告，怎麼一鍵去廣告？一畝三分地每次都登錄，怎麼自己起服務器去自動簽到？學校的課程這麼亂，能不能自己實現一個國外版的超級課程表？
你看，這些都是你每天遇到的問題，但是你選擇了吐槽，而不是去解決它。
7. 縱向/橫向發展
縱向發展的話就是將你的小項目做大，比如個人網站，你的第一個項目，完完全全去跟着軟件工程（需求 -> 設計 -> 代碼 -> 測試 -> 部署/發佈）這一套搞下來。會再次發現自己的渺小，東西多得學不完。
當然這裏並不是先學再用，而是先用再學。要做的就是實現，不要管最佳實踐。如果非要去學的話，上面每個步驟可以再次參照我的 7 步學習思路，從第一步入門即可。
橫向發展暫時我還沒有時間開始，所以這裏就不說了。
8. 未知
等你們在評論裏說吧。。。
最後總結
可以看到真正去學習一門技術是多麼的費時間和費精力，絕對不是網上的3天入門，或者看個視頻就可以速成的。一定是經過：入門 -> （重複 -> 總結 ）X3 -> 創新 -> 擴展。
所以，當你覺得學不下去都是很正常的，我也經常會放棄。放棄了 Go，放棄了 ruby on rails，放棄了 Flutter，放棄了 angular，放棄了 Django，放棄了 Spring。。。但是，我對於前端還是一如既往的熱愛，會在這方面去深耕，和分享。
Anyway，如果你喜歡前端並堅持下去的話，我會在路上等你❤️