前端開發有很多方向，核心包括以下內容：

JavaScript編程語言本身，需要多閱讀一些書籍來深化了解以及JavaScript在瀏覽器里的各種API，這個可以多翻閱MDN文檔；工程化：可以通過一些腳手架以及開發一些腳手架來提升開發效率；可以通過對功能的拆分實現模塊化與組件化，降低分組開發的難度；可以通過工具鏈規劃、測試、部署代碼，實現自動化；模塊化、組件化、規范化、自動化，這就是工程化；Vue或React框架，學會其一即可，這兩個框架都有自己的生態，路由、狀態管理、UI、服務端渲染；計算機科學知識：Linux、計算機網絡、數據庫、簡單的數據結構和算法、云服務等；補充項：工作的時候再學沒有關系，前端的跨端實現、typescript等

為啥你提了這么多，沒有說UI的Web實現，什么布局、樣式、動畫、切圖、實現一個商城...這是基礎，不是核心，你可以用UI框架來做，前端開發可以先不必深究。

前端開發最必不可少也是最經常會使用到的（軟件和網站）：

VS Code，支持前端開發各種文件格式以及自帶emmet語法、代碼提示、自動補全、格式化文檔，以及擁有強大的調試功能，適配所有（應該是所有）前端必備工具鏈；Node.js以及前端工具鏈，前端開發離不開強大而Node生態，無論是git、webpack、lodash、gulp等，還是Vue、React框架，亦或是vuepress、gatsby等開源項目，這些都是前端開發需要掌握的；Chrome瀏覽器，前端開發離不開Chrome的開發者工具，從了解DOM、終端適配、JavaScript調試、頁面加載到性能優化等；MDN文檔，MDN文檔是前端開發人員最經常翻閱的JavaScript技術文檔，一定要長期翻閱

你好，我主要擅長Java后端，JQuery+Metro4前端的技術路線，且完全是基于多年工作經驗的自學成才。

我認為學習成本最低，效率最高的方法，從入門到實踐大體有三個階段：

第一階段，學習編程語言階段。

這個階段主要是對前端開發的編程語言工具有一個宏觀的認識。了解前端開發用到哪些語言工具，分別實現什么作用，以及基礎知識即可。

1）HTML，CSS：主要用于構建UI界面，HTML負責定義界面元素（控件），CSS負責定義元素（控件）的顏色、樣式。這兩種語言工具都十分簡單，內容都是由控件或屬性構成，建議記憶力好的話盡量記到腦子里，扎實基礎。

2）JS：主要用于編寫前端程序邏輯。JS想要學會只有靠代碼量堆，現階段記住基本語法和windows，document對象就行。實踐編程中都會用到框架，不一定會直接使用原生的JS語法，所以現階段不必深究。

3）正則表達式：主要用于字符串的高效處理（包括驗證、替換、截取），這個工具非常有用，建議記憶力好的話盡量記到腦子里，扎實基礎。

4）界面設計理論：UI界面不只是功能，最重要是用戶的可使用性，界面布局、色彩搭配、人機互動方法，看似跟編程無關，實際上這是前端設計的靈魂之處，也是前端工程師跟前端程序員的區別，所以請多學習相關設計知識。

第二階段，學習開發框架階段

前面講過實踐編程中都會用到框架，這個階段主要是對前端開發的框架工具進行實踐學習。目前比較熱門的框架推薦Vue，Element，Uni-app，EChart都可以學一學。這個階段的學習靠看是沒用的，動手是最有效的學習方法。

1）選擇順手的編程工具：前端開發的編程工具可以選用HBuilderX，功能強大，適用度廣泛（PC網站，移動端的網站、app、微信公眾號、微信小程序、百度小程序等很多）。

2）獲取開發框架：從框架官方網站上下載框架的程序文件，在后續實踐活動中使用。

3）實踐學習：主要內容包括使用編程工具建立項目，引用開發框架程序文件，找一個你認為很炫酷的PC網站成功案例，選取查詢瀏覽頁、表單頁、詳細內容查看頁、圖標分析頁、登錄頁這些有代表性的頁面形式模仿制作。

第三階段，迭代提高階段

經過第二階段的學習，應該已經可以做出簡陋的界面，這個階段就是：

1）在不斷的實踐中體會前端的設計方法和編程技巧；

2）接觸和學習更多的框架、組件；

3）掌握多種客戶端類型（如：PC網站、H5路線的網站、app、微信公眾號、微信小程序、百度小程序等很多）的開發方法。

其他建議：

1、編程是操作型技能，動手第一、思考第二、眼看沒用；

2、編程技術最大的特點就是門類、概念、工具、框架又多又復雜，剛入門的時候經驗不足難以找到主干的學習路線，看起來好像不知道該學什么，多久才能學會，但是如果認真梳理，漸進學習，其實也沒有那么困難，反而可以從不斷的成就感中獲得樂趣。

3、無論是多么牛逼的培訓學校、網課、書籍，一般只能幫助你完成第一階段的學習，極少數能夠深入的幫助你完成第二階段的學習，第一階段我更傾向于自學，第二階段我更傾向于尋找有實際工作經驗的大神教你，這樣性價比較高。

關于前端就寫到這里，全棧開發的其他建議后續有機會再補充，希望可以幫助到你。

react，vue，angular 目前這三大框架用的最多。推薦學習vue ，算是里面比較容易學的，精通一個，了解其他兩個。

切圖網，專注于 前端外包 和 前端培訓