技術的路
從零開始學習前端開發：完整的前端自學指南
前言
這篇文章我一直在思考該不該寫，因為每個人的學習方式都不一樣，這篇文章提到的內容是我學習前端開發的最佳方法，可能並不適用於其他人，所以就隨心所欲寫自己的前端學習之旅吧。
關於我：熟練的Vue、React 的API 用戶以及會寫一點後端的前端頁面仔。
希望這篇文章對前端有興趣的同學有用，它不是一篇前端進階的文章，更適合小白獨立學習前端技術的指南。
TL;RD
如果不想讀這麼長的文章，可以直接讀這一小節。
從零開始學習HTML/CSS 和。
關於JS 可以看書《JS 權威指南》、《JS 高級程式設計》、《JS 忍者秘籍》三本書裡面選一本，然後邊看邊實踐即可。
然後就是學習Css，可以先簡單的菜鳥教程Css，熟悉了一些語法之後，推薦去看張鑫旭大佬的《Css 世界》這本書，這本書需要經常翻。
如果學習過程覺得比較枯燥，也可以同時看看試試這個倉庫50 天每天一個小項目，可以透過Js + Css 就實現一個小東西，挺不錯的，不管學什麼東西都需要有正面回饋。
上面完成之後可以看看Vue/React，Vue/React 可以看看官方文檔，寫的挺不錯的，如果看文檔比較困難的話，可以去中國大學搜Vue/React 視頻，一大把，通過用Vue/ React 寫一個簡單的小東西，在學習過程中有什麼不懂一定要去看Vue/React 文檔，不懂的時候是進步最快的時候。
在這個過程中，建議每天看看30s code，了解一個常用的陣列、物件、Date、、 的API，也可以在專案中使用這些片段。
同時如果你對Vue、React 專案比較有興趣時，也可以去看別人寫得好的開源函式庫。
我就列舉幾個倉庫，記得常去看。
Vue:
vue---vue
React:
-react
這時候，寫完一個小東西後，可以選擇去看書《你不知道的JS》上中下，鞏固一下JS 基礎知識以及看相對應的CSS 世界。
Ts 可以看看TS 官方文件以及每個版本的變更日誌，如果想加深了解可以看相對應的知識點，嘗試做一做即可。
此外，我也可推薦你可以刷一刷演算法題，鍛鍊邏輯思考能力，可以刷一刷Hot 100 題，這些剛好也是面試常考的題目。
後面的話可以去看看Next.js(React 的ssr)/Nuxt.js(Vue 的ssr)項目，這裡就靠自己自由發揮了。
我的前端學習之旅與安卓的愛恨情仇
在學前端之前，我有半年的安卓經驗，也學過、 等相關知識, 那時候我為了實現界面每天在圖書館待到很晚，寫出來之後很有成就感，當時想著能不能實現一個左滑刪除的功能，在那之後的事情記不清楚了，但是我印像中的是安卓我學不明白，對於它我一無所知，我不知道怎麼學習, 各種自定義視圖等操作要我望而卻步, 簡稱對於學習曲線比較陡, 可能是我的學習方法不對, 也漸漸的對安卓失去了興趣.
跟前端來一場jsp 的邂逅
前端是一個緣分，當時在軟體協會學長學姐佈置了一個關於登錄註冊的jsp 任務，我當時覺得用一個很簡陋的登錄註冊實現了功能，但是我看到別人的登錄註冊那麼好看，我就開始了美化之旅，當然現在的我再來看之前的頁面、代碼，那絕對是醜不堪言，不過在那個時候已經是我的巔峰了，就因為這樣子，我走上了前端之旅，而這個時間是在2018 年, 因為jsp 跟前端來了一場邂逅~。
那時候vue 很火，（那時候說vue3 要出來了，結果到現在才出來），所以我沒有什麼js、css 基礎，就直接上手的框架(Vue)，然後基本上是用到啥搜尋啥。
跌跌撞撞的前段之旅
學習Vue 當時看的是黑馬程式設計師、尚矽谷Vue、 的課, 但是看完之後的感覺就是：懂了，沒有完全懂。
現在如果要我去學習一個東西，我不會選擇看視頻，對我來說有兩個缺點：
即使全部看完之後，自己去寫一個東西的時候完全無法下手就很苦惱，完全沒有成就感。挺浪費時間的，一系列的課程就幾十個小時，真的理解消化到實際運用這個週期很長。
但是那時的我並不懂，如果是前端小白不知道從哪裡下手的時候，可以嘗試一下看看相關的視頻，至少對新的東西有一個整體的把握和了解。
最終我回到了文檔，開始啃MDN、Vue 的官方文檔，那時我發現文檔比看視頻進度快很多，而且要容易吸收和理解。
加上一看到知識點我就直接直接動手實踐，有什麼問題就依靠強大的谷歌，它總能解決我的問題，我的問題解決能力就是在這裡得到了鍛煉。
如果你有一定的程式碼能力之後，我比較推薦你去看別人的程式碼。元件可以這麼抽象、類型可以這麼用、陣列API 有這麼多。
我比較喜歡學習的時候去看看別人寫的程式碼，開拓自己的視野。
有自己的產品嘛?
如果你問我，我有什麼產品，第一時間會說博客，當然我們也可以選擇拿得出手的其他產品。
部落格是我一直在用心去寫的一個網站，一個簡單的部落格專案形成了我的命名規範、目錄規格以及相關的開發規範。
你有自己的產品嘛，它是你的名片，它不一定要是博客，它也可以是論壇、商城等其他項目，但是它一定是你可以自信滿滿可以分享出來的項目。
輸出
有一點是我沒做好的，每天花了很多時間就感覺啥也沒學，直到現在才發現，我那時只有輸入，沒有輸出也沒有自己的反思和複盤。
之前就停留在"抄"筆記與實踐這一層，這樣子看起來比較快，但是少了最重要的一步，把"抄"的筆記用自己的話語寫成文章，結合自己的所思所想去表達出來。
很多東西看似自己懂了，但如果要寫成文章或說跟別人去表達，還是不能清晰準確的表達，我最近在看一本書，也在強調，知識的輸入和輸出，這一點真的很重要。
如果要學一個什麼知識點，就帶著我能把這個知識點跟別人說清楚嘛？
與開源的碰撞
在想要不要寫這個章節，因為自己開源經驗並不是很多，只有幾個，不過我覺得大家有時間可以去嘗試參與開源項目，就從我個人說起吧。
上一次做貢獻已經是20 年的事了
在20 年的時候，當時有兩個月時間的暑假，然後在長沙準備履歷就找了一份React 相關的工具，進去之後發現使用Antd3 搭建的後台管理系統，有很多很多相同的表格。
我當時就無意之間看到了一個Antd 的一個子倉庫：Pro-Table，現在已經改名成pro- 了，當時這個倉庫只兼容Antd4，所以我就在想，能不能自己"抄一抄"它的代碼，向下相容Antd3 在公司內部使用呢？
所以就開始研究這個倉庫之旅，當時也是直接讀源碼啥的，後面自己在研究的時候發現了幾個bug，就提了issue，作者()也是很積極的說，可以來一個Pr？
提交完Pr 會採用之後，很有成就感，我寫的程式碼被合併了！就開始在issue 裡面找我可以實現的功能和bug，然後後面也是成功的投稿了幾個pr。
為什麼要參與開源社群建構呢?
一個好的倉庫有好的規範和代碼風格, 光是看他們代碼, 才發現原來React 可以這麼寫, 原來Ts 類型可以這麼用, 直到現在我一直都保持著多看看別人倉庫代碼的習慣, 我們總是會在裡面學到一些東西.
pr 的提交遠不止寫兩個那麼簡單, 涉及到多人合作, 如何快速和別人說清楚, 當前Pr 做了啥, 要做啥, 怎麼做的, 這些都是代碼之外的軟實力, 也是需要好好提升的.
pr 需要涉及到前期討論、代碼實現、單測和文檔編寫, 這些都是我們要去完善的, 我當時懶並沒有寫文檔，寫代碼只是其中的一環.
提升自己的影響力, 在面試或經歷都是濃墨重彩的一筆, 後面校招很大一部分機會就是因為這幾次的pr.
怎麼樣參與開源社群呢?
我沒有好的辦法, 不過我推薦你可以去看看自己比較熟悉UI 組件、功能包, 我們在使用的時候可能會有bug, 我們能不能看源碼去修復他們呢? 這不貢獻就來了嗎?
實在不行, 可以看看自己對那個倉庫感興趣, 直接找issue, 看看自己可以修復哪一個, 動手修復, 這不貢獻就來了嗎?
學習資源
最後我就列一下資料把，希望對大家有用，學習不是三分鐘熱度哦，需要不斷持續的學習、輸出和反思。
然後之後可以先看看Vue 的東西。
看書《 權威指南》、《高級程式設計》、《 忍者秘笈》三選一30s code：碎片化時間可以學習的片段Css看書：《Css 權威指南》、《Css 世界》二選一張鑫旭大佬的博客Css 簡稱Ts 類型體操官方手冊Notes，主要說了每個版本Ts 的功能變更Deep 官方文件Vue -vue
Vue 我已經很久沒用了，推薦在-vue 中找好的學習資源和程式碼倉庫
文件Beta 版寫了很多關於React 的文章React + 指南Dan 的部落格都是精品-react寫在最後
不管學什麼東西，都需要時間，每天堅持學一點點，量變引起質變，一起努力，共勉。