前端技术学习路线：

1.html+css

2.移动端布局

3.js+jq

4.ajax+git

5.vue+react

6.微信小程序

7.选学node.js

总结一下就是：

1.       前端页面重构，写一些页面，电脑、手机、平板都能用。

2.       前后端网页交互。

3.       Node.js+前端框架，成熟的技术能够大幅度提高工作的效率。

主要的前端技术：

1.css布局基础知识（rem、viewport（vw vh）、less / sass、清除浮动、BFC、自适应/响应式布局、如何实现纵横比布局、flex理解和用法等...）

2.JS语言基础知识（继承都有哪些方法、什么叫闭包及应用场景、函数防抖&函数节流、异步promise、async/await、xmlHttpRequest / ajax / fetch / axio请求数据、文件及二进制数据操作、TypeArray、websocket详细知识、canvas一些api知识、正则表达式等...）

3.常用框架（vue、vue-router、vuex、react、react-router、redux、mobx、mobx-state-tree、elementUI、iVeiw、materialUI、Ant Design等...）

4.测试框架（jest、mocha等...）

5.构建与部署（webpack、gulp等...）

6.Git版本控制使用（git基础命令，GitHub Actions工具等...）

7.动画相关知识(css animator 、requstAnimationFrame、动画库等...)

8.算法知识相关内容（冒泡排序、快速排序、各种排序、字符串模糊查询等...)

进阶的前端技术：

1.多端小程序（微信小程序基础开发、公众号jssdk、Wepy、Taro、mp-vue、等...）

2.数据可视化（Echart、D3等...）

3.Native App原生开发（react navtive、flutter等...）

4.eletron（桌面开发）

5.微前端知识（多项目共同组件、多项目通信、多项目集合等...）

6.视频直播相关（WebRTC、ffmpeg、rtsp、Rmmv直播等...）

7.3D开发（webGL、three.js等...）

8.设计模式(工厂模式、单例模式、观察者模式、订阅模式等...)

9.SEO搜索相关知识（sitmap、roobot、关键词密度工具、模拟蜘蛛工具、预渲染/无头浏览器/Puppeteer、Nuxt、Next服务端渲染等...）

10.pwa相关知识（次要，目前没有太大的需求）

11．数据结构知识（队列、栈、链表、集合、hash表、树、图等...），不过这个是次要的，不用花费太多精力，但是脑中要理解和实战中能够运用。

以上就是一个简单的梳理，如果自学费力可以考虑报前端培训班。拿不定主意可以移步我们官网看看，上面有很多免费在线课程资源。