前端很火，想自学前端的人也多。作为过来人，知道自学的辛苦。制作这份学习路线图的初心，就是让想自学前端的小伙伴们有一份系统专业的学习资源和学习指导。于是，在为时将近两个月的整理之后，就有了这份全面的前端学习资源大礼包！无论你是刚入门的小白，还是已经工作的前端开发者都能从中获取到你想要的资料！（下载链接见文后）
前端线路总图：
一． 前端相关概念建立
学习时长：约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项目实战
关注VX公众号“icketang” 免费领取全套前端视频教程
网友评论