怎么学习前端开发？求推荐学习路线？
不知不觉已经进入这个行业六年多了，不由感叹时间过的真快啊。回想起刚自学前端的时候，自己摸索走了很多的弯路。决定趁着周末的时间，用心写一篇回答，解答零基础该怎么去学习前端这个问题。全文五千余字，觉得有帮助请点赞收藏！ 只要按照我的路线坚持学下去，把我列出的知识点大致掌握，保底薪资在15K以上。（学完拿不到这个薪资，你来找我） 我是真不想列这一点，但也是真的遇见过零基础小白问我没有电脑可不可以学编程。学习编程最重要的就是多敲代码，只有通过大量的实践你才能理解代码运用。 只看教程，不敲代码就是在浪费时间。有一台自己的电脑用于练习是必须的！ 一般学生都有大量的课余时间用于学习前端，这一条主要说给转行者。见过很多人转行的人问我每天两个小时就不能学好前端吗？很抱歉，不能。学习技术不是一朝一夕的事情。对于转行者来讲，学到的东西没有办法实践，记得就不深刻，每天的学习时间过短就会导致学习周期拉很长，学习周期长了，很容易就出现学了后面的忘了前面的这种情况。 所以，对于零基础想要学好前端找到一份工作的人来讲，每天至少要保证4个小时以上的学习时间，把学习周期控制在六个月左右。 看到下面很多大佬的回答，都是给小白甩各种文档教程链接。其实对于小白来讲，这些文档上面都是一些生涩难懂的专业术语，根本就学不进去。能够通过看书、看文档学会前端的聪明人只是少部分。对于多数人来讲，看视频学习前端效率更高。 零基础视频教程可以在B站、慕课网、腾讯课堂、网易云课堂上找免费的。某宝和闲鱼上也有很多卖教程的，一杯奶茶钱就可以买到一份教程了。 我整理了一套零基础到就业的系统教程，作业+案例+项目都非常齐全，如果你找不到系统的教程，可以点击下方插件获取。与这套教程对应的学习路线我也放在文末了，把这些知识点掌握的应用开发层面，找一份工作很简单。 看到这也许很多人都会想到这张图，确实有很多学习群最后都变成了吹牛灌水群。但我还是建议零基础小白可以加一些学习群，一来可以了解行业情况，二来遇到网上找不到答案的情况，可以在这些学习群问。 前几天就见过一个刚学的小白写的代码没有出效果。 他一个单词一个字母的去和教程上对照，都没发现问题在哪，最后截图发到学习群里，大家一眼就看出他用的中文符号，但他自己就是找不到问题出在哪，也不知道用什么关键词在网上搜。 所以，加一些学习氛围比较好的学习群，对于初学者来讲还是很有帮助的。 这里给大家分享一个我创建的WEB前端学习交流群，如果你在自学过程中遇见有很多问题，不知道怎么解决，可以点击下面插件进入。都是从零基础学习前端为了就业的学生以及转行的人，遇见有不懂的可以随时在群里问，大家都会帮忙解答，学习氛围非常好。在一起学习会比较有动力，有人一起相互督促，互帮互助。 到这里，准备工作算是做完了，接下来就是系统的学习路线。我会把这份学习拆分成五个阶段，告诉你每个阶段需要学习哪些内容，以及学完之后做个什么样的项目测试自己是否已经成功掌握。 这个阶段的学习周期大概在20天左右 需要学习的内容包含：vscode开发工具使用、markdown文档工具使用、浏览器平台环境、标签基础、DTD与META、语义化、选择器、权重与优先级、匹配规则、浮动与清除、BFC、类名组合规则、SEO前端技巧、定位、叠加技巧、伪类、伪元素、盒子模型、代码规范、性能优化、渲染原理、CSS Sprites 、 iconfont字体图标、布局思路、布局定式css3动画、 css3选择器、 css3过渡、flex布局、背景渐变、css3实用动效、3D模块、css3变量、em/rem/vw JavaScript部分是前端的重点！到这一部分就可以结合书籍一起学习了，书籍推荐《JavaScript高级程序设计》《你不知道的JavaScript（上/中/下）》这几本书能够吃下，你JavaScript这门语言在语法层面就没有任何问题了。 这个阶段的学习周期大概在50天左右 需要学习的内容包含： JavaScript概念 基础认知、发展历史、应用范围。 ECMAScript 语言概览、语句语法、数据类型、运算符、隐式转换、运算规则、控制流程、作用域、作用域链、作用域解析、js解释引擎、字符串属性方法、for of/for in 数组属性方法、对象、广义对象概念、对象特性、存储机制、深拷贝、对象实际应用、工厂模式、构造函数、原型、原型链、原型指向、封装 多种继承、包装对象、this、this指向、js数据处理、垃圾GC、闭包原理与应用、debug方法论、浏览器控制台工具应用、面向对象开发、函数式开发 纯函数、递归函数、回调函数、组合函数、缓存函数、柯里化函数、偏函数、函数防抖与节流、高级函数、IIFE函数、模块化 数学对象、高级数组方法（reduce、filter、map、every、some、forEach、find、findIndex、include）等 高级对象方法（entires、defineProperty、freeze、fromEntries、assign、keys、create、hasOwnProperty）等 this通过bind、call、apply指向偏移、同步与异步、闭包模块化、数据形变处理、性能处理  DOM/BOM DOM对象与方法、节点与遍历树、DOM选择器、DOM节点增删改查、DOM样式操作、DOM位置获取与偏移、DOM对象与标签区别、DOM虚拟化、DOM事件、Event对象、定时器与监听器、事件委托、事件代理、事件分流、事件冒泡、默认行为、事件捕获、防抖、节流、滚动、键盘行为、事件降频、行为锁机制、拖拽模组、碰撞检测、距离判断、三角函数、方向判断、运动框架、弹性运动、重力加速度、DOM树、CSSOM树、渲染解析、加载、回流、重绘、浏览器线程与阻塞、BOM深入、window对象、navigator、history、screen、location、spa概念、本地传参、日期对象使用、日期格式化封装、随机封装、DOM分片容器  JS业务应用扩展 JSON对象、数据解析、JSON方法、模板渲染、缓存懒加载、正则表达式RegExp、元字符、修饰符、正向预查、贪婪模式、replace方法、分组与不分组、test、match与exec 正则库封装、表单校验、图片预存懒加载、自定义封装滚动组件、多重轮播（循环、视差、旋转木马）、选项卡切换、楼梯导航、吸顶导航、拖拽导航 JavaScript编码风格指南、console应用技巧  ECMAScript5 --- ECMAScript9扩展 版本解读、应用环境、let、const、解构赋值、箭头函数、对象解构、reset参数解构、class、set、get、extends、super、static、private实现、symbol、promise、proxy代理拦截、async/await 对象新增API、数组新增API、字符串新增API、原型属性、对象修饰、代理拦截、链式询问、空值合并运算符 学完以后最好就是找一个小项目进行练习，检验自己的学习情况。如果你学完js，缺少练手的项目，可以做一下这个泡泡龙面向对象小游戏，源码、素材这些我都上传到群文件了，可以点击下方插件加入到这个WEB前端学习交流群，自行下载练习。 这个阶段的学习周期在30天左右 需要学习的内容包含： HTML5标签与API HTML5概念、定义、新增特性、DTD对比、新增H5标签、新增语义化H5标签、H5表单 H5拖拽事件 video、audio、fullScreen、FileReader文件流、Blob对象、sessionStorage、localStorage、 网络状态、页面生命周期、网页状态监听、地理信息与定位、canvas画布、worker多线程、Notifications桌面通知 播放器开发 canvas交互特效开发 移动端适配/事件 移动端适配概念、尺寸与分辨率原理、PPI与DPI计算、DIP与DPR设备像素概念、视口viewport概念、布局视口、视觉视口、理想视口 视口适配方案（Meta viewport）缩放设置 、screen窗口大小API、媒体查询@media、rem适配、vw vh适配 移动端适配方案、flexible rem方案、 vh vw方案 、复合方案、高清适配方案、移动端字体缩放解决、1px边框问题解决、半像素线 图片高清适配、image-set、srcset、js拼接URL技巧、IPhonex刘海屏适配、安全区域、fit与env Meta权限管理、兼容优化、IOS头部底部闪屏回退输入框问题、输入法空格问题、默认首字母大写问题、滑动卡顿问题等 终端样式美化与访问判断 Touch事件组封装、click延迟处理、FastClick使用、禁用缩放设置理想视口  常用类库/工具 jquery: 元素选择、增删改差、事件处理、位置获取、动画过渡、高级方法、特效应用 zepto：移动端的jquery、DOM操作、移动端事件、click延迟处理、touch事件组 基础UI库: layerUI 、easyUI、bootStrap、UI模块化、UI库使用技巧、文档解读、案例调试、表单系统 iScroll、touchjs等移动端事件库使用 swiper：移动端网站触摸滑动、轮播图插件、模块化应用、源码解读 art-template: 模板引擎 模板语法、渲染方法、原生模板引擎实现 CSS预处理：sass、less使用 stylus深入学习 、预处理语法、css编程、 Minxin 、预处理函数、继承、嵌套 vscode高级插件与配置 liveserver sass 模板化应用 、预处理应用  date-picker移动端原生组件开发 需求分析、业务规则、技术栈选型、文件输出规则、技术分析 MVC模型概念与设计、业务逻辑分类 view层适配方案 原型布局搭建 模板化生成 工具函数开发、面向对象式业务设计 功能类日期对象开发 交互业务封装 模块对接 优化设计 面向对象高级程序设计  这个阶段的学习周期在50天左右 需要学习的内容包含： Node原生基础 Node基础概念、NPM命令、V8引擎概念、JavaScript模块化 CMD AMD UMD、EventLoop事件循环、同步异步、 阻塞非阻塞 、任务队列、宏任务、微任务、 原生Node模块、核心模块与require、module、触发器events与path模块、fs模块、Buffer对象、URL模块、HTTP模块 、stream流 Node原生封装HTTP与文件服务器  Node框架 express框架使用、中间件、核心对象、路由配置、模板引擎、数据脚本、Router核心、CORS配置、错误处理、校验封装、PM2管理、nodemoon管理 MORGAN日志处理、查询正则捕获、中间件开发、bodyParse等第三方中间件使用 、文件流上传下载、文件流切分  webpack工程化构建 工程化概念、工程化工具介绍、webpack基础知识、webpack配置与运行、plugin插件、loader使用、入口出口配置、模块modules、依赖处理、dev Server target 、文件切分、build打包、热处理、package管理、性能优化、测试处理 、第三方插件使用、babel等  前后端数据交互 HTTP通信交互原理、请求响应、MIME、URI地址、报文解析、端口、报文流、测试监听抓包、TCP/IP握手机制、网络业务模型 代理、缓存、网关、隧道等概念、method与请求头分类 基础XMLHTTPRequest对象方法属性、方法、ajax异步交互 、同源策略原理 原生js封装ajax交互、 jquery的ajax封装交互、jsonp跨域处理、cors跨域处理、携带cookie与跨域处理、代理服务器跨域处理、 cookie验证与通信 、axios库的使用 代理、封装、拦截、合并、二次封装 通信加密策略、数据对称加密、数据非对称加密、RSA加密实践、MD5加密实践 登录注册与鉴权机制、Authenticity认证、Token认证、JWT认证、session状态管理、 oauth认证  RESTful接口设计 RESTful设计原则、状态码设计与规范、服务器响应规则与格式、前后端接口协议制定、传统RESTful改进 API设计规范、 资源定位、JSON模式、合约说明、资源标识符、缓存友好API、HTTP头管理、文档定义、松耦合原则、一致性、重用、稳定性原则  数据库存储 MongoDB基础概念、NoSQL与SQL、CAP定理、RDBMS、MongoDB语法、指令、监控与GUI、MongoDb驱动、Mongoose应用 数据库创建、集合增删改查、文档增删改查、数据库查询、高级查询操作、通道查询、多条件查询、反向筛选、索引处理、aggregate聚合管道、 validation验证、population联表、middleware中间件处理、查询ERROR类二次封装  博客后台项目实战 数据库设计、服务端路由搭建、接口设计与API管理、通信交互管道封装、注册登录、路由导航、前端路由管理、权限管理、用户管理、分类管理、标签管理 、文章管理、模块化功能封装、校验库封装、promise链式行为封装、 异步模块处理、SPA单页面应用初级实现、原生集中行为控制器、模板化+模块化+预处理+工程化实现前端页面 组件化封装 组件化基础概念、组件设计原则、组件封装、组件耦合与解耦、工程化+模板化+模块化实现原生组件化功能、 这个阶段的学习周期大概在40天左右。 需要学习的内容包含： vue基础 vue开发准备、工具与插件、mvc mvp mvvm设计理念、原生js实现MVVM核心框架、vue设计模式、生命周期、命令与属性、组件化 数据驱动与双向绑定、虚拟DOM概念原理、模板语法、条件与列表、数组监测、计算属性、事件处理、修饰与表单、监听器、过滤器 methods watch computed filter对比、组件化开发、动态组件、组件通信、高级组件通信、插槽、vue动画 、实例对象、set、get、nextTick、vue插件  vue工程化 Babel、webpack配置vue、vue单文件组件、vue-cli、工程平台处理、postCss、animate、core、socket、lodash工具、vue-cli插件、preset、静态资源处理、 环境变量与膜还是切换、工程化部署、工程构建  vue Router vue路由概念、嵌套路由、路由视图、动态路由、路由匹配、编程式导航、history、hash模式管理、命名视图、重定向与别名、导航守卫、路由元信息、滚动与懒加载 导航故障处理  vuex vuex核心概念、EventBus对比、状态管理模式、Store、state、getter、mutation、action、moudule vuex辅助函数与API功能、vuex环境选择、vuex模块化处理规则与技巧、对象风格提交方式、模块重用等  vue项目实战 vue博客项目实战 PC + 移动端、 elementUI、vantUI、websocket聊天室、虚拟人偶、vueScroll、store、qs、nprogress、editor、 文章分类、词云效果、spa单页面应用、移动PC无缝切换、完整注册登录、vue加密鉴权、http封装管理、错误处理封装、vuex核心状态管理、本地存储状态更新、令牌处理、 文章富文本编辑、点赞、收藏、访问、评论、组件封装、组件复用、组件混合、高级组件开发、复合性组件通信、vue中处理原生DOM行为、vue常见错误处理、 重置vue数据响应、个人信息修改、头像上传、通知组件封装、postcss应用、项目打包优化 学完这些，你就是一名合格的前端工程师了。不要觉得罗列的知识点过多，用心的去学习，把基础打扎实了，你才能在这个行业走的更远。如果你对于学习前端还有什么疑虑，可以点击下方插件，加入我们的WEB前端学习交流群，我们一起沟通交流。 码字不易，看到这了就点个赞吧！ 更新： 有兄弟私信我，说上面这些内容他基本都学了，后面可以再学习一些什么东西，趁着今天比较闲，就和大家闲聊一些可以继续学习的内容。 首先就是TypeScript，TypeScript可以学习以下这些知识点： 然后就是React，React主要重点学习以下内容： 还有就是微信小程序，微信小程序可以学习一下： 今天先更新这些，这篇回答会持续更新，觉得有帮助记得点赞收藏！ 