不知道樓主是從什么行業轉行到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小程序開發框架
? 小游戲開發
以上就是前端的學習路線圖，不知道為什么這個圖放上來就不清楚了，如果想要清楚的，或者是配套的學習資源，可以后臺回復“前端”即可。
我目前在深圳的平安科技擔任高級前端開發工程師,我來回答一下吧,我也是自學而來的.
我在此之前的工作是淘寶美工,但是做的久了工資一直上不去,就覺得前端還不錯,好像也不難,就開始自學.
接下來講一下我是怎么學習的,希望可以幫到你們:
1.首先語言基礎學習前端就只有三門語言要學習,html,css,和JavaScript.
html是超文本標記語言,這個學起來好簡單,包含的內容如下圖,學習方法就是去菜鳥教程網站
https://www.runoob.com/
上學習,每一個知識點都有示例.學起來很快.css是樣式語言,這個更簡單,包含的內容如下圖,也是去菜鳥教程上學習
JavaScript的內容要相對難一點,菜鳥教程上也有,JavaScript的基礎用法包括很多函數,需要全部掌握,在工作的時候才會得心應手.
2.框架學習現在主流的框架有三大,react,vue,angular,國內現在用的最多的是react和vue,react是Facebook出的,vue是我國的一個著名程序員尤雨溪開發的,react和vue在國際上地位不相上下,在國內小公司主要以vue用的最多,react主要以大公司用的最多,比如阿里,平安.其實也要看項目的,一般小項目用vue更加輕量快速,react相對較重.
這兩個框架隨便選一個就行了.我個人的建議是學vue,因為我學的react,發現國內都是大公司在用,去中小公司找工作vue還是居多,所以建議學習vue,而且vue最容易上手,通過vue的官方網站就可以學習了
https://cn.vuejs.org/.
3.性能安全這個是面試中常會遇到的,也是工作中會遇到的內容.
4.運用前端主要用來開發網站,開發app,微信小游戲,微信小程序等等.
總結以上是我個人的學習總結,圖片都是截取自我自己的百度腦圖,展開內容非常豐富,都是我多年總結出來的,如果需要的,可以聯系我,免費發給你們,希望給從事前端開發的你們有幫助,少走彎路.
分享個開源項目快速開發框架，采用spring cloud alibaba +nacos +vue的 技術棧，實現了大部分
釘釘宜搭的快速開發功能，很值得借鑒下。這是在git上開源的快速開發項目，項目采用微服務為基礎的腳手架，包括流程、表單、列表、圖表、應用等多個界面化的配置引擎。項目介紹：**JVS的核心目標：**讓中小型開發團隊過得輕松一點，優化開發團隊人力成本高、交付效率低、質量不可控、周期不確定、基礎技術投入不足、高端技術支持不夠等JVS是面向軟件開發團隊可以快速實現應用的基礎開發框架，采用微服務分布式框架，提供豐富的基礎功能，集成眾多業務引擎，它靈活性強，界面化配置對開發者友好，底層容器化構建，集合持續化構建。項目標簽低代碼、微服務、支持SaaS、私有化部署、DevOps、開源項目地址框架前端地址：https://gitee.com/software-minister/jvs-ui框架后端地址：https://gitee.com/software-minister/jvs快速安裝地址：JVS/jvs-docker-compose體驗地址：http://frame.bctools.cn/#/login登陸可以通過微信掃碼登陸，對于配置數據，請各位技術同學手下留情。部署文檔https://gitee.com/software-minister/jvs-docker-compose/blob/master/readme.md**物理拓撲：技術文檔地址（微信登陸可查看）：技術棧說明：系統部分截圖：登陸頁面配置化首頁系統基礎信息設置框架基礎功能應用創建列表配置流程配置表單配置圖表配置邏輯配置demo環境：http://frame.bctools.cn/#/login開源地址：https://gitee.com/software-minister/jvs如果還有其他的疑問，可以私信