怎么制定Web前端学习计划？ _经验知识

一个非常好的问题。先解释下Web前端开发的新发展。
随着移动互联网的发展。前端开发成为重点。移动端有多个平台。Android 。iOS 。微信小程序。支付宝小程序。还有不断出现的新操作系统。比如阿里YunOS 。华为鸿蒙。等等。
为了支持这些平台和系统。越来越多的应用开始使用H5跨平台架构。现在有个新名词叫做“大前端” 。
一。H5跨平台开发
这时的H5前端开发已经不再是单单的网页开发了。而是前端应用开发。具体到H5 Hybrid架构。常用三剑客：HTML, css, JavaScript
1) HTML和css是页面设计。没有代码逻辑
2) JavaScript编程。还有其它衍生语言。比如常用的TypeScript
JavaScript是一种脚本语言。由解释器加载执行。常用在网页前端动态展示、和服务后端交互等场景。接下来重点介绍JavaScript开发。
二。学习阶段和时间计划
1）编程基础。一到两周
学习JavaScript语言基础。掌握基本的编程方法。如果对着课本教程学习比较枯燥。难以坚持。那么可以使用网上的一些学习练手资源。边学习边动手。比如HackerRank

文章插图
2）开发框架。一到两月
JavaScript前端开发有很多成熟的框架可用。比如JQuery, AngularJS 。React 。还有前后端都跑通的NoteJS 。阿里开源框架Ant Design Pro是一个功能完善的脚手架。推荐新学者练手。
新手学习时。推荐当前普遍使用的Top3开发框架。太新或者太旧的都不适合用来学习练手。
3）项目经验。一到两年
学习的最终目的是学以致用。在实际项目中积累经验。不断提升。有了一定技术基础后。推荐尝试参与开源项目。在开发功能、提交代码的过程中。提升非常快。而且开源项目经验。和工作经验一样。应聘时非常受欢迎。

文章插图
我是工作多年的Web应用架构师。欢迎关注我。了解更多IT专业知识。
其他观点：
第一阶段
HTML+CSS核心基础
· HTML,CSS核心基础· CSS过渡
· HTML5语义化标签· 线性渐变。径向渐变
· HTML新增标签属性· CSS动画Animation
· 表单项新增属性· 弹性盒模型
· CSS选择器· 经典布局练习(双飞翼。
· CSS3伪类品字布局) + 案例
· CSS伪元素· 响应式布局
掌握技能
1熟练HTML, CSS核心语法
2熟练H5,CSS3新特性
3掌握多种布局技巧
4能够独立绘制前端静态页面
第二阶段
JavaScript
· JavaScript基础
· JavaScript操作DOM
· JavaScript面向对象(js高级)
掌握技能
1熟悉JavaScript核心语法
2熟练DOM 。BOM操作
3熟练面向对象编程
第三阶段
PC端整栈开发
· PC项目
· jQuery
· jQuery项目
· less
· bootStrap
掌握技能
1掌握前端必备框架jQuery
2掌握前端UI框架bootStrap
3掌握css预编译语言less
4针对前边所学知识进行综合性项目练习
第四阶段
ES6+Node+工程化
· ES6/7/8· promise
· npm常用命令· git基础（常用操作）
· git高级· Node.js基础
· git基础（常用操作）
· http协议 & cookie & session
· MongoDB· Express框架
· ajax(原生。jQuery,axios,fetch)
· ajax库基本封装使用 promise封装
· 模块化
· 构建工具gulp 。webpack4.0基础
掌握技能
1熟练ES6/7/8/9/10/11新特性
2掌握npm,git等前端必备技能
3掌握NodeJs开发
4掌握数据库MongoDB使用
5掌握Ajax及Ajax类库使用
6掌握工程化工具webpack,gulp等使用
第五阶段
React技术栈
· React基础语法
· react-router
· React Antd使用
· Redux
· React移动端项目
掌握技能
1熟练React核心语法
2掌握React扩展库使用：router 。Antd
3掌握React高级Redux状态管理库使用
4掌握React项目开发技能
第六阶段
Vue技术栈
· Vue基础
· VueRouter
· Vuex
· Vue源码(v-model, 双向数据绑定)
· VuePC项目-电商
· Vue后台管理
掌握技能
1掌握Vue核心语法
2掌握Vue扩展库使用：router 。Vuex 。ElementUI等
3掌握Vue底层实现。如：v-model 。双向数据绑定等
4Vue企业级项目开发。Vue前台项目。Vue后台管理项目
第七阶段
小程序
· 小程序
· UniApp