零基础开始学 Web 前端开发，有什么建议吗？

时间过得是真快，不知不觉已经在这个行业摸爬滚打近十年了。看到有很多人被网上的一些言论误导，基础不扎实的情况下就直接上手框架，最终只能成为框架使用者、代码搬运工，得不到好的发展，于是趁着周末写下这篇文章，给各位初学者提供一些学习建议。

同时，文末也会给各位初学者分享一份高质量的大前端学习路线，零基础以这一套学习路线上手，打好基础，掌握到应用开发层面，熟悉其中关键规则原理，能够进行开发实践，找一份10-15K的工作是非常简单的，在工作中用几年去消化吸收这些知识点，更进一步的掌握，年薪拿个三十万是没有任何问题的。

给初学者一些学习建议

建议一：零基础看视频教程更有效率

很多零基础的人，都喜欢问零基础看什么书学前端比较好。这里我想告诉大家，零基础直接看视频教程就好。看书学编程对于一个啥都不懂的初学者来说是很痛苦的，因为书上都是一些专业性比较强的词汇，比较枯燥难以理解，而视频教程则是有老师把知识点给你进行拆分讲解，会更加便于理解吸收。就跟学数学一样，你自己看书学习跟有老师给你讲例题对比，肯定是有老师给你讲例题学起来会更有效率。

视频教程也同样有优劣之分，普通教程ajax前后端交互会在学完js后直接讲XML Http的API方法和使用, 跨域和封装也都是只限于前端代码部分的讲解和库的使用,而一份好的教程教程则会在这基础上拓展HTTP理论、交互通信原理、服务端http服务器搭建、MIME、报文端口、监听抓包、网络业务模型、代理缓存、cookie session 鉴权认证、安全加密、Token、JWT、oauth、session管理、RESTful接口设计、协商合约、资源标识等原理规则性知识，能够让你真正清楚整个交互的来龙去脉 而不只是单纯的抄方法跟着教程写代码而已。如果你找不到一份系统的好教程，我这里整理了一套，有需要的话可以通过文末的插件加入到这个WEB前端群，932   112   117，我免费分享给大家。

建议二：看视频的时候一定要记笔记

看视频教程的时候专心的看，不要浮躁，不要快进或者倍速播放，有时候没注意遗漏的知识点可能会造成致命的bug。看视频的时候一定要记笔记，记笔记的时候可以暂停，把笔记做好再往下学。千万不要照着视频抄代码，很容易让自己误以为会了。要能够脱离视频自己把案例敲出来，敲不出来可以看笔记，实在写不出来再看一下视频。

建议三：写代码的时间要比看视频的时间长

学习编程很容易出现一看就会，一做就废这种情况。所以学习的过程中一定要多练习敲代码。假设每天学习时间是6个小时，那你至少要拿出3个小时的时间来用来练习敲代码、做练习，只有练得够多，你才能记得深刻，才能理解运用。不自己敲出来，你永远不知道实际操作时候会出现什么问题。

学习编程技术就跟学习打篮球、游泳一样，只有通过大量的实战练习，你才能真正掌握。

建议四：提前做好学习规划，保障每天的学习时间

文末我会给大家分享系统的大前端学习路线，每个阶段大概需要学多久，我都会在上面注明，可以根据这份学习路线制定学习规划。

制定的学习规划，要符合自身情况，是自己能长期坚持下去的。个人认为每天最佳的学习时间是每天6-8个小时，学习时间太长了容易走神，也会比较累，无法长期坚持下去。同时每天的学习时间也最好不要低于4个小时，每天的学习时间太短的话，学习周期就会拉很长，没法在工作中实践，很容易就出现学了后面的忘了前面的这种情况。

建议五：不懂就要问，别自己钻牛角尖

初学者在自学的过程中，总是会遇见各种各样的问题。有些问题网上能够找到答案，有些问题则需要有个人帮你看一下。经常被一个小问题困扰半天，会打击到学习的信心，可能学着学着就放弃了。所以，遇见自己解决不了的问题，网上也找不到答案的话，可以看看身边有没有从事这方面的亲戚朋友可以问，身边没有可以问的朋友，可以借助网友的力量。可以多加一些前端学习交流群。这里给大家分享一个学习氛围非常好的前端学习群，  932   112    117，里面有很多刚开始学的人，也有很多已经从事前端工作了，平时遇见不懂的问题发出来，很快就会有人帮忙解答，学习氛围非常好，有人一起学会更有动力。感兴趣的话可以点击文末的卡片加入。我希望把这个学习群打造成一个非常好的前端圈子，有好的工作可以互相内推。

该学哪些内容，可以参考这份学习路线：

①HTML/CSS篇

这个阶段学习时长大概是15-20天左右

HTML

• 文档结构
• DTD
• 注释
• 网页三要素
• SEO
• 标签
• 属性
• 结构
• 规范
• 书写风格
• 语义化

CSS

• 选择器
• 优先级
• 权重
• 定位
• 浮动
• flex
• 盒子模型
• BFC
• 字符串类
• 包装类
• 渲染原理
• 代码规范
• 性能优化
• 布局思维
• CSS3动画特效

除上面这些知识点之外，还需要掌握一些实战技巧，例如量图规划、结构规划、类名分组、间距处理、样式复用这些。要做到熟练掌握HTML、CSS核心语法，掌握多种布局技巧，能够独立绘制前端静态页面。可以做一个企业内部的多页面的项目实战进行自我检测。

学习编程最重要的一点就是要多敲代码、多做项目练习，只有练习多了才能够理解运用，所以每个阶段学完之后都要找一到两个练手的项目做。如果你学完了HTML和CSS，缺少练手的项目，可以点击文末的卡片加入到这个WEB前端交流群，我把这个企业内部的多页面项目实战的素材和源码上传到了群文件，大家可以自行下载练习。

②JavaScript篇

这个阶段的学习周期在50天左右

ECMAScript

• 语言基础概念
• 语句语法
• 数据类型
• 隐式转换
• 运算符
• 运算规则
• 作用域解析
• JS解释引擎

控制流程

• for/for of/for in
• 短路运算
• 位运算
• 三目运算
• Switch
• 垂直过滤
• while do while
• 排序
• 去重
• 终止
• 返回

内置API

• 字符串API
• 数组API
• 对象API
• 日期API
• 正则表达式
• 工具类

机制原理

• 存储机制
• 深拷贝/浅拷贝
• 字面量
• 包装对象
• 同步/异步
• 闭包模块化
• 性能调优
• 工厂模式
• 执行上下文
• 垃圾GC
• 闭包
• debug方式方法

函数式编程

• 纯函数
• 偏函数
• 递归函数
• 柯里化函数
• 回调函数
• 缓存函数
• 组合函数
• 通道函数
• 防抖节流
• 高级函数
• IIFE函数

面向对象

• 构造函数
• 原型/原型链
• 原型指向
• 封装
• 继承
• 多重继承
• 包装对象
• this指向
• this偏移

DOM

• DOM概念
• 节点与遍历树
• GUI渲染行为
• 虚拟DOM
• 节点增删改查
• 位置与偏移
• 对象与标签
• Event时间
• 鼠标/键盘
• 定时器
• 监听器
• 事件委托
• 代理/分流
• 事件冒泡
• 默认行为
• 事件降频
• 行为锁
• 运动框架
• 物理模拟
• 碰撞检测
• 拖拽模组
• 重绘/重排

BOM

• window对象
• Navigator
• location
• history
• hash
• screen
• document

ES扩展

• 版本解读
• 兼容处理
• Let
• const
• 解构赋值
• 对象解构
• 箭头函数
• reset参数解构
• class面向对象
• set/get/extends
• super/static
• Symbol/promise
• async/await
• Defineproperty
• proxy代理
• 合并空值运算
• 链式询问
• 对象修饰
• 代理拦截
• Modules

把JS的这些知识掌握，就可以接着往下学了。这阶段的达标水准就是能够使用原生javascript进行业务开发，能实现常见的DOM库和工具库，能够修改第三方库源码以供业务特殊需求使用。学完之后可以做一个泡泡龙游戏自我检测。这个项目的源码、素材我也上传文末这个WEB前端学习群的群文件了，需要可以点击文末卡片加群下载。

③H5移动端篇

这个阶段的学习周期大概在30天左右

移动端开发

• 移动端适配概念
• 尺寸与分辨率
• PPI/DPI/DIP/DPR
• 布局视口
• 理想视口
• 视觉视口
• rem适配方案
• vw/vh适配方案
• 高清适配方案
• Meta权限管理
• 刘海屏适配
• 图片高清适配
• 1px像素适配
• 移动端事件
• 默认行为处理

H5API

• 新增标签
• 新增属性
• 多媒体
• 页面生命周期
• 状态监听
• Blob/FileReader
• sessionStorage
• localStorage
• fullScreen全屏
• Notifications通知
• worker多线程
• 网络状态
• 地理信息开发
• canvas交互
• 默认行为处理

预处理

• sass语法
• less语法
• stylus语法
• css编程
• css模块化
• css表达式
• css循环判断
• 继承
• 嵌套
• 混入

模板引擎

• art-template模板语法
• handlebars模板语法
• 原生js模板引擎
• 渲染机制

UI库

• 学习快速上手UI库
• 文档学习
• 案例调试
• layerUI
• easyUI
• bootstrap
• WEUI
• Vonic
• mintUI
• elementUI
• Vant

DOM与其他库

• jQuery/zepto
• touchjs/iScroll/swiper
• validator/Lodash
• axios/babel
• wangEditor
• store/qs/cy

开发管理

• 原生库开发
• 第三方库hack
• 需求分析
• 业务规划
• 技术栈选型
• 文件输出规则
• 模型设计
• 底层搭建
• MVC设计模式
• 业务逻辑分类
• 数据分离
• 交互业务封装
• 模块对接
• 面向对象式业务设计

到这里移动端的内容就可以告一段落了，这个阶段的达标水平是能够独立实现移动端H5开发适配各种移动设备，并且能够处理各种兼容问题，能够利用原生js结合H5新特性实现各种功能组件，例如 音频视频播放器、懒加载、下拉刷新等业务组件。这个阶段可以做一个H5播放器进行自测。这里给大家准备了一些H5移动端的学习笔记，学习过程中常见的一些问题在这些学习笔记上都有讲解，有需要可以点击文末卡片加入到这个WEB前端群免费获取。

④Node服务端开发

这个阶段的学习周期大概是50天左右

NPM

• npm安装
• npm配置
• npm包管理
• npm本地包安装
• npm依赖管理
• npm版本控制
• npm项目初始

Node

• V8引擎概念
• AMD/CMD/UMD
• fs文件操作
• IO流
• 异常处理
• 中间件
• HTTP模块
• URL/PATH模块
• EventLoop事件轮询
• 同步/异步
• 阻塞/非阻塞
• 宏任务
• 微任务
• 模块管理
• 模块应用
• stream流
• Buffer对象
• Static静态封装
• 路由封装

前后端交互

• HTTP通信交互
• 请求响应、
• MIME
• URI解析
• TCP/IP协议
• socket协议
• 代理/缓存
• 网关/隧道
• ajax异步交互
• 跨域处理
• ajax封装
• axios使用
• 请求拦截
• 请求预验
• Method
• content-type
• cookie/session
• 通信加密RSA/MD5
• 登录注册

接口设计

• 传统接口设计
• 接口文档
• 文档定义
• 数据接口概念与标准
• 状态码设计
• 响应格式
• 协商协议
• 合约说明
• 资源定位符
• 缓存机制
• HTTP头管理
• 松耦合实现
• RESTful设计原则
• RESTful实现

数据库

• 基础概念
• NoSql行为操作
• CAP
• 基础语法
• shell/MongoDB驱动
• 增删改查
• 高级查询操作
• 通道查询
• 多条件查询
• 索引处理
• 聚合管道
• population联表
• validation验证
• 异常处理

服务端项目

• 数据库设计
• 服务端路由设计
• API管理分类
• 注册登录
• 原生路由开发
• 权限/用户/分类
• 模块化功能封装
• 校验库封装
• 行为中控

Node部分掌握这些知识点就OK了，这个部分的达标水准是能够理清完整的WEB应用情景和交互行为,从理论到实践掌握常规数据库设计、路由设计、工程化、模块化、组件化、权限、鉴权、加密、跨域、认证，能够完成从前端到后台到数据库一整条线路的注册、登录、查询、修改、管理等功能。可以尝试做一个博客项目后台实战。

同样的，学习node过程中常见的一些问题，我也整理成学习笔记了，需要可以点击文末卡片加入这个学习群，我免费分享给大家。

⑤VUE框架篇

这个阶段的学习周期大概在40天左右

webpack

• 工程化概念
• webpack配置运行
• plugin插件
• loader使用
• 出入口配置
• 模块依赖处理
• devServer使用
• 文件切分
• 动态加载
• package管理
• 性能优化
• 测试处理

Vue基础

• 工具与插件
• mv*设计模式
• mvvm原生实现
• 生命周期
• 命令属性
• 组件化
• 虚拟DOM
• 数据驱动
• 模板语法
• 条件列表
• 计算属性
• 修饰表单
• 监听过滤
• 组件通信
• 动画动效
• 高级组件

Vue工程化

• webpack配置vue项目
• vue单文件组件
• vuecli命令服务
• 工程平台
• animate
• 兼容处理
• socket/loadsh
• preset
• 静态资源
• 环境变量
• 工程部署
• 打包优化
• 模式转换
• 构建目标

VueRouter

• 路由概念
• 嵌套路由
• 动态路由
• 路由试图
• 编程式导航
• History
• hash模式
• 命名视图
• 重定向/别名
• 导航守卫
• 路由原信息
• 路由拦截
• 滚动懒加载
• 故障处理
• 路由带参

Vuex

• Store
• state
• getter
• mutation
• action
• module
• EventBus对比
• 状态管理模式
• vuex辅助函数
• vuexAPI
• vuex模块化处理规则
• 对象风格提交
• 模块重用

项目开发

• PC+mobile无缝切换
• websocket聊天室
• 第三方组件
• 工具库使用
• 令牌管理
• 文章分类
• 登录注册
• 路由权限管理
• 加密校验
• Auth认真
• HTTP封装
• 富文本编辑
• 文章查询
• 分页管理
• 懒加载
• 组件分类封装
• 组件混合
• 高级组件开发
• ERROR封装
• 重置数据响应
• 通知组件封装
• 工程平台应用
• 项目打包
• 体积优化
• 速度优化

把这些知识点掌握，你就具备找一份工作的实力了。这个阶段的达标水平是能够熟练运用vue、vuex、vuerouter、vue-cli、webpack、postcss、babel以及各种第三方库，实现项目开发需求，独立完成完整的前端现代化工程项目，并且深入框架原理掌握mvvm核心，能够用原生javascript模拟实现vue的内核双向绑定响应式模型。vue这部分的学习笔记，我也帮大家整理好了，有需要也可以点击文末卡片获取。

这些内容学完之后，可以做一个Vue博客项目实战进行自测，做完之后就可以准备简历进行投递了。

能够到这一步，就是一名优秀的前端开发工程师了，找工作非常简单。