前端開發(fā)有很多方向，核心包括以下內(nèi)容：

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

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

前端開發(fā)最必不可少也是最經(jīng)常會使用到的（軟件和網(wǎng)站）：

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

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

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

第一階段，學(xué)習(xí)編程語言階段。

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

1）HTML，CSS：主要用于構(gòu)建UI界面，HTML負責(zé)定義界面元素（控件），CSS負責(zé)定義元素（控件）的顏色、樣式。這兩種語言工具都十分簡單，內(nèi)容都是由控件或?qū)傩詷?gòu)成，建議記憶力好的話盡量記到腦子里，扎實基礎(chǔ)。

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

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

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

第二階段，學(xué)習(xí)開發(fā)框架階段

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

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

2）獲取開發(fā)框架：從框架官方網(wǎng)站上下載框架的程序文件，在后續(xù)實踐活動中使用。

3）實踐學(xué)習(xí)：主要內(nèi)容包括使用編程工具建立項目，引用開發(fā)框架程序文件，找一個你認為很炫酷的PC網(wǎng)站成功案例，選取查詢?yōu)g覽頁、表單頁、詳細內(nèi)容查看頁、圖標(biāo)分析頁、登錄頁這些有代表性的頁面形式模仿制作。

第三階段，迭代提高階段

經(jīng)過第二階段的學(xué)習(xí)，應(yīng)該已經(jīng)可以做出簡陋的界面，這個階段就是：

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

2）接觸和學(xué)習(xí)更多的框架、組件；

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

其他建議：

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

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

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

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

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

切圖網(wǎng)，專注于 前端外包 和 前端培訓(xùn)