1.夯實基礎，html、css、js(es6)

2.原生擼個web小專案，如部落格、小商城

3.學習一兩個主流框架，如bootstrap、jquery、lodash等

4.結合框架和外掛，擼一個小專案

5.工程化學習，如node、webpack、vue、react、ci等

6.擼個小的移動專案、單頁等專案

7.全棧之路，koa、mongodb、redis、微服務

8.演算法學習

9.進階之路，github原始碼學習

10.大神之路，擼個框架求star

1. 學習基礎: HTML, CSS, Javascript

2. 掌握流行框架: Vue, Bootstrap, Webpack, EasyUI, ...

3. 上GitHub學習優秀開源專案和程式碼

4. 多總結經驗寫部落格，上GitHub開專案

5. 多混圈子，保持技術更新，交換心得

不知道樓主是從什麼行業轉行到web前端工程師，如果是從開發工程師轉到web前端工程師，那相對來說是很好轉的，容易成功。如果不是計算機相關專業，那就需要一點點從基礎來學了！

web前端基礎：

HTML 語義化

CSS3 基本語法規範

CSS常見佈局技巧大全

網頁開發規範以及流程

CSS企業級網頁開發

CSS初始化技術選擇

CSS3基本變換特效

HTML、css是前端學習最基本的知識，你要學習前端，首先要把這些基礎知識學好才可以！

第二階段：

核心知識點

• CSS3 2D、3D 變換

• CSS3 animation 動畫

• H5C3 炫酷頁面開發

• Flex伸縮佈局

• 移動端主流適配方案

• 常見移動端樣式相容方案

• 預處理器Less

第三階段：

核心知識點

• JavaScript 語言基礎

• BOM操作大全

• DOM操作大全

• 封裝動畫函式

• JavaScript高階

• 正則表示式

• ECMAScript 2015（ES6）新語法

• jQuery 快速開發

• jQuery 外掛開發

第四階段：

核心知識點

• 能夠建立客戶端伺服器互動模型，熟悉網路通訊相關概念

• 能夠使用 Node.js 進行 Web 服務端開發

• 基於Node.js開發Web應用

• Express

• RESTFul API

• 原聲AJAX、jQuery的AJAX相關API使用

• 跨域請求及解決方案

• 前端模板引擎

第五階段：

核心知識點

• 大資料視覺化

D3.js

•

Vue.js/Vue Router/Vuex/axios/Element-UI

• Vue CLI腳手架工具

• 使用Git、Github管理專案原始碼

• webpack

• React.js / React Router / Redux / axios / Ant Design

• create‑react‑app 腳手架工具

• 專案打包及最佳化

• 專案部署與開發

第六階段：

核心知識點

• 人工智慧

• 小程式開發

• 小程式應用及頁面的生命週期

• 小程式執行機制

• WePY小程式開發框架

• 小遊戲開發

以上就是前端的學習路線圖，不知道為什麼這個圖放上來就不清楚了，如果想要清楚的，或者是配套的學習資源，可以後臺回覆“前端”即可。

有句話叫“跳槽窮半年，跨行窮三年”，不知道您有沒有聽說過。

跨行意味著要放棄之前積攢的人脈和經驗，在另一個陌生的領域從頭開始。不知道您在之前的行業工作了多久，也許經過許多不為人知的日日夜夜的奮鬥，也不知道您對前端行業瞭解多少，是想踏入高薪的程式設計師行列而找了一個相對容易的職位？還是其他？更不知道您的年齡等。

如果因為工資高，那其實也是用了很多的加班換來的，如果把所有加班時間算上計算下時薪，那未必有多誘惑，只是單純的說月薪多少多少的時候覺得挺高。如果因為前端比後端相對容易些，那其實前端需要學的非常多，就拿庫和框架來說，什麼jquery react angular vue還有這ui那ui，時不時冒出一個新東西，學起來簡直不要太累，後端用一門後臺語言可以使用很久，比前端技術更新相對慢了不少。

上面說的只是想讓您認真的考慮一下跨行的原因。如果已經想好並決心入行前端，那具體的學習路線，我給的建議是:如果想跟著老師學，那就找幾家線上或者線下的培訓機構，如果自信有能力自學那也找培訓機構，不報培訓班只是找他們要教學大綱，他們為了招生都會做的很不錯，面面俱到應有盡有（實際報了班老師能不能完全按照教學大綱講出來並講明白那就另說了），而且會提供給你的。

知識點掌握了那就在網上找些小專案練練手，畢竟敲程式碼這東西還是要多寫的，寫多了也容易出感覺，最重要的是積累學習和做專案過程中處理問題的經驗。