初学者学习前端比较常见的就是喜欢看书,这是编程入门的最大误区,前期肯定是动手练习而不是看书。
具体学习顺序可以按照我下面这个学习线路图进行:
一. 前端相关概念建立
学习目标: 建立起整个前端与后端的知识大体系,给之后的学习打好地基。
主要内容:
浏览器的概念介绍:
浏览器的作用、工作方式
浏览器的概念介绍:
浏览器的作用、工作方式
HTTP协议:
协议产生的原因、作用、及内容
页面加载流程:
当用户打开浏览器,输入地址栏并按下回车之后发生的事情
二. HTML-CSS-JS基础-jQuery
学习目标:
熟悉HTML布局、CSS样式、JS内容、jQuery的使用。
熟悉CSS盒模型、CSS的各种常见属性与属性值
熟悉页面的书写过程及简单的JS交互
熟悉一些较为常见的动态效果
学习内容:
HTML及HTML5:
理解浏览器如何解析HTML、基本的语法规则、不同标签的使用方式、嵌套方式
CSS:
理解层叠式样式表的语法规则、各种盒模型及常用布局
CSS3:
伪类、新选择器及高级盒模型
JavaScript:
理解JS的作用、运行规则、语法规则、数据类型、判定、循环
对象、数组、函数、日期、正则、异常
jQuery:
$函数、选择器、常用方法、链式调用、项目实战
三. JS进阶-面向对象-H5新特性
学习目标:
能够使用JS实现更加复杂的功能及动画
能够熟练操作DOM
能够理解面向对象的相关知识
能够使用HTML5的canvas进行小游戏的开发
主要内容:
DOM:
理解DOM的作用及使用规则
JS进阶:
快捷属性和尺寸、浏览器检测、事件流程
面向对象:
构造函数、原型、继承
H5新特性:
多线程、事件推送、前端存储、canvas、历史记录等
四. 设计模式-AJAX-NodeJS-数据库
学习目标:
能够理解函数的高级运用如闭包、IIFE、JS执行队列、垃圾回收机制
能够理解并会熟练运用设计模式
能够学会如何发送AJAX请求并处理响应
能够使用Express创建服务器应用程序
学会操作数据库
学习内容:
设计模式:
单例模式、工厂模式、闭包类、MVC思想、MVVM等
AJAX:
AJAX优缺点、异步请求、字符串模板、跨域
NodeJS:
Node服务器的相关知识、接口、文件操作、Express框架
数据库:
数据的概念、分类、使用Node操作数据库、MongoDB数据库
五. 工程化-CSS预编译-ES2016-小程序
学习目标:
能够使用工程化工具进行代码的压缩、编译、检测
能够使用Less、Sass进行CSS的开发
学会使用ES6语法、async、await等更高版本的ECMA内容
能够使用微信开发者工具进行小程序的开发
主要内容:
工程化:
Gulp使用、Webpack使用
CSS预编译:
Less使用、Sass使用
ES2016:
块级作用域、新的定义变量关键字、新的方法拓展、字符串模板与插值、新的数据结构、新的编程方式、类、继承、模块化
小程序 :
小程序注册、介绍、组件、API、开发跨平台通用程序
六. Vue-React
学习目标:
能够使用高级框架进行前端代码的开发
熟悉NodeJS全栈开发流程
归纳前端工作流程,重新认识前端,温故知新
学习内容:
Vue:
Vue详解、Vue插件、Vue脚手架、Vue项目实战
React与ReactNative:
React详解、React组件化、Redux状态管理、React项目实战
ReactNative详解、ReactNative创建移动端应用、ReactNative项目实战
在这里还是要推荐下我自己建的web前端学习交流群667376240,群里都是学前端的,如果你正在学习 ,欢迎你加入,大家都是软件开发党,不定期分享干货,欢迎进阶中和想深入的小伙伴加入。