零基础前端学习路线

零基础前端学习线路图，希望能帮到大家！希望大家都能顺利实现转行！
一． 前端相关概念建立

学习时长：约0.5天

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

主要内容：

浏览器的概念介绍：

浏览器的作用、工作方式

浏览器的概念介绍：

浏览器的作用、工作方式

HTTP协议：

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

页面加载流程：

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

二． HTML-CSS-JS基础-jQuery

学习周期：约23天

学习目标：

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

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

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

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

学习内容：

HTML及HTML5：

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

CSS：

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

CSS3：

伪类、新选择器及高级盒模型

JavaScript：

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

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

jQuery：

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

三． JS进阶-面向对象-H5新特性

学习周期：约16天

学习目标：

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

能够熟练操作DOM

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

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

主要内容：

DOM：

理解DOM的作用及使用规则

JS进阶：

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

面向对象：

构造函数、原型、继承

H5新特性：

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

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

学习周期：约14天

学习目标：

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

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

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

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

学会操作数据库

学习内容：

设计模式：

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

AJAX：

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

NodeJS：

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

数据库：

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

五． 工程化-CSS预编译-ES2015-小程序

学习周期：约11天

学习目标：

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

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

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

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

主要内容：

工程化：

Gulp使用、Webpack使用

CSS预编译：

Less使用、Sass使用

ES2016：

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

小程序 ：

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

六． Vue-React

学习周期：约18天

学习目标：

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

熟悉NodeJS全栈开发流程

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

学习内容：

Vue：

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

React与ReactNative：

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

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