成都2021年web前端学习路线

成都2021年web前端学习路线。随着前端的发展，各个技术也在不断交替更新，下面小编为你精心整理了2021年前端线路图，希望对你的前端发展有所帮助。

前端线路总图：

学习时长：约0.5天

学习目标： 建立起整个前端与后端的知识大体系，给之后的学习打好地基。

主要内容：

浏览器的概念介绍：

浏览器的作用、工作方式

浏览器的概念介绍：

浏览器的作用、工作方式

HTTP协议：

协议产生的原因、作用、及内容

页面加载流程：

当用户打开浏览器，输入地址栏并按下回车之后发生的事情

前端相关概念建立

学习周期：约23天

学习目标：

熟悉HTML布局、CSS样式、JS内容、jQuery的使用。

熟悉CSS盒模型、CSS的各种常见属性与属性值

熟悉页面的书写过程及简单的JS交互

熟悉一些较为常见的动态效果

学习内容：

HTML及HTML5：

理解浏览器如何解析HTML、基本的语法规则、不同标签的使用方式、嵌套方式

CSS：

理解层叠式样式表的语法规则、各种盒模型及常用布局

CSS3：

伪类、新选择器及盒模型

JavaScript：

理解JS的作用、运行规则、语法规则、数据类型、判定、循环

对象、数组、函数、日期、正则、异常

jQuery：

$函数、选择器、常用方法、链式调用、项目实战

学习周期：约16天

学习目标：

能够使用JS实现更加复杂的功能及动画

能够熟练操作DOM

能够理解面向对象的相关知识

能够使用HTML5的canvas进行小游戏的开发

主要内容：

DOM：

理解DOM的作用及使用规则

JS进阶：

快捷属性和尺寸、浏览器检测、事件流程

面向对象：

构造函数、原型、继承

H5新特性：

多线程、事件推送、前端存储、canvas、历史记录等

学习周期：约14天

学习目标：

能够理解函数的运用如闭包、IIFE、JS执行队列、垃圾回收机制

能够理解并会熟练运用设计模式

能够学会如何发送AJAX请求并处理响应

能够使用Express创建服务器应用程序

学会操作数据库

学习内容：

设计模式：

单例模式、工厂模式、闭包类、MVC思想、MVVM等

AJAX：

AJAX优缺点、异步请求、字符串模板、跨域

NodeJS：

Node服务器的相关知识、接口、文件操作、Express框架

数据库：

数据的概念、分类、使用Node操作数据库、MongoDB数据库

设计模式-AJAX-NodeJS-数据库

学习周期：约11天

学习目标：

能够使用工程化工具进行代码的压缩、编译、检测

能够使用Less、Sass进行CSS的开发

学会使用ES6语法、async、await等更高版本的ECMA内容

能够使用微信开发者工具进行小程序的开发

主要内容：

工程化：

Gulp使用、Webpack使用

CSS预编译：

Less使用、Sass使用

ES2016：

块级作用域、新的定义变量关键字、新的方法拓展、字符串模板与插值、新的数据结构、新的编程方式、类、继承、模块化

小程序 ：

小程序注册、介绍、组件、API、开发跨平台通用程序

学习周期：约18天

学习目标：

能够使用框架进行前端代码的开发

熟悉NodeJS全栈开发流程

归纳前端工作流程，重新认识前端，温故知新

学习内容：

Vue：

Vue详解、Vue插件、Vue脚手架、Vue项目实战

React与ReactNative：

React详解、React组件化、Redux状态管理、React项目实战

ReactNative详解、ReactNative创建移动端应用、ReactNative项目实战

Angular：

Angular详解、Angular特性、Angular项目实战

设计模式-AJAX-NodeJS-数据库

学习周期：约11天

学习目标：

能够使用工程化工具进行代码的压缩、编译、检测

能够使用Less、Sass进行CSS的开发

学会使用ES6语法、async、await等更高版本的ECMA内容

能够使用微信开发者工具进行小程序的开发

主要内容：

工程化：

Gulp使用、Webpack使用

CSS预编译：

Less使用、Sass使用

ES2016：

块级作用域、新的定义变量关键字、新的方法拓展、字符串模板与插值、新的数据结构、新的编程方式、类、继承、模块化

小程序 ：

小程序注册、介绍、组件、API、开发跨平台通用程序

学习周期：约18天

学习目标：

能够使用框架进行前端代码的开发

熟悉NodeJS全栈开发流程

归纳前端工作流程，重新认识前端，温故知新

学习内容：

Vue：

Vue详解、Vue插件、Vue脚手架、Vue项目实战

React与ReactNative：

React详解、React组件化、Redux状态管理、React项目实战

ReactNative详解、ReactNative创建移动端应用、ReactNative项目实战

Angular：

Angular详解、Angular特性、Angular项目实战