前端课程t-学习路线

培养企业最需要的前端工程总版本：V7.0日期：20192月培养企业最需要的前端工程零基础辅导部版本：V7.0日期：20192月培养企业最需要的前端工程基础版本：V7.0日期：20192月培养企业最需要的前端工程进阶版本：V7.0日期：20192月培养企业最需要的前端工程高级版本：V7.0日期：20192月培养企业最需要的前端工程框架版本：V7.0日期：20192月培养企业最需要的前端工程就业部版本：V7.0日期：20192月培养企业最需要的前端工程项目实战与测版本：V7.0日期：20192月第一部分基础辅导第二部分课程大纲第三部分就业指导第四部分项目实战第五部分测试考核011、配置2、使用开发工3、HTTP协议概4、Html骨5、DTD文档类6、了解用法02天HTML1、有序列表序列表自定义2、表格3、Frominput03天1、了解2、CSS的书写3、CSS础选选择4、CSS继承性叠04天1、color2、Font3、Text05天1、margin2、父子盒模型特3、居中的4、标准文档流特5、块级和行内元6、浮7、了解8、使用JS语句操作元第01天典1、为学生配置02HTML1、HTTP协2、html是纯文3、html骨4、DTD文档类6、body8、h列的9、p11、a12、divspan含03HTML1、无序2、有序3、自定义列4、表格5、合并单元6、三个划分区域的语义7、form8、input9、单行10、11、单12、多13、文14、下拉菜15、按16、html注17、废弃18、实体字04CSS1、css的概5、css作6、css的常用样式7、css的书写位置11、css的层叠05CSS1、color属2、font-size属6、font-style性8、text-align属11、padding解12、margin详13、border详06CSS1、盒模型的拓展知2、清除默认样3、宽度剩余4、height高度设5、margin特性之垂直方向上的6、margin特性之不能用儿子去踹父7、父子盒模型的特8、居中的几种设置方9、认识标准文10、标准文档流的特11、块级元素和行内元素的12、浮动的基础知07CSS1、浮动的作2、浮动的特性之浮动的元素脱离标准文档3、浮动的特性之浮动的元素没有margin塌4、浮动的特性之浮动的元素依次贴5、浮动的特性之浮动的元素让出标准流的位6、浮动的特性之字围7、浮动存在的8、清除浮动的方法之给父盒子加高9、清除浮动的方法之加clear属10、清除浮动的方法之加隔11、清除浮动的方法之overflow12、a的伪13、a伪类的顺序不能颠14、a伪类的应用实例之按钮实15、a伪类的应用实例之导航栏实16、background-color背景色的17、background-image背景图的18、background-repeat背景重08CSS1、background-position背景定2、精灵图的制3、精灵图的应用4、background-attaent背景固定的详5、背景的应用之文字换案6、背景的应用之padding设置背景图案7、position：relative的详8、position：relative的负9、position：relative的应用之元素位置10、position：absolute的详11、position：absolute的特性之不针对祖先元素的定位参考09CSS1、position：absolute的特性之针对祖先元素的定位参2、position：absolute的特性之绝对定位的参考3、position：absolute的特性之利用绝对定位制作压盖4、position：absolute的特性之绝对定位的元素设置水平居5、position：absolute的实例之滚动轮播6、position：fixed的详7、z-index属性的详8、常用CSS单9、htmlhack详10、csshack的详11、css选择器hack详12、IE6的兼容性101、制作博雅互动页3、css入4、header区域的详解5、banner区域的详解111、html5的简2、HTML5的新骨架和语义化3、新的input控4、placeholder属性的详6、required性的详解7、multiple性的详解8、datalist的详解9、的详解10、audio的详11、css3的简12、属性选择器的13、儿子序选择器的详14、儿子类型序选择器的15、节点关系选择器的详12CSS31、伪类的应2、伪元素的应3、border-radius属性的详4、box-shadow属性的5、text-shadow属性的详6、background-origin属性的详7、background-clip属性的详解8、background-size属性的详解10、多背景的详11、过渡的基础知13CSS31、2D变形的详2、@keyframes规则的详3、animation属性的详4、animation属性制作动画的实5、box-sizing属性的详6、百分比布局的详7、圣杯8、双飞翼布9、flex局10、固比固模型的详11、查询的详15、Bootstrap版之标题19、Bootstrap格使用20、Bootstrap的按钮使21、Bootstrap的字体图标使22、Bootstrap的导航使141、制作移动端项目的3、css入4、搜索框的详5、banner区域的6、主导航的详7、内容区域的15JavaScript1、Javascript简2、Javascript的书写位3、alert语4、console.log语5、数字字6、字符串字面7、变量8、变量的9、变量的提10、数据类型的检测方11、数据类型的转换方16JavaScript基础第二1、数算6、逻辑运7、短路语8、赋值运算9、综合运算的顺10、if语句的11、多分支的if语句的详17JavaScript基础第三2、switch语句的详解3、break关键字的4、default键字的详解6、for语句的详解7、for循环语句的8、for句嵌套if的详9、for嵌套for语句的详10、for语句嵌套for句的18JavaScript基础第四1、dowhile的详2、while语句的详3、break用法的详4、continue用法的详5、穷举思想的详6、穷举思想的应用7、函数语句的8、函数语句的调9、函数的参数10、函数的返回值的详19JavaScript基础第五1、函数表2、函数的数据类3、函数的提4、递归函数的详5、变量的作用6、局部变量和全局变量的详7、作用域链的详8、函数的作用9、闭包的10、闭包的20JavaScript基础第六1、数组的基础1、数组的首尾操作方2、数组的合并和拆分方3、数组的删除、插入、替换方6、数组的排序方8、charAt法的详解9、concat法的详解11、slice法的详解12、split法的详解13、substr的详解14、substring法的详解18、正则表达式的精确匹19、正则表达式的预定义特殊字20、正则表达式的字符21、正则表达式的修饰22、正则表达式的23、正则表达式的预定义24、正则表达式的25、正则表达式的26、正则表达式的或操作27、正则表达式分组的反向28、正则表达式的21JavaScript基础第七1、arguments的详2、模拟函数重3、IIFE的详4、结合数组观察5、DOM的基础5、操作html的方6、操作css的方7、DOM中事件的几种9、onmouseleave()方法的使10、window.onload()方法的22JavaScript基础第八1、geementsByTagName方法的详2、批量添加事件的方3、对应思想的4、排他思想的实 putedStyle方法的详6、currentStyle方法的详7、对象基础知8、JSON的基础9、JSON的遍历231、制作优品汇项目的2、项目3、导航栏区域4、侧边栏区域5轮播图区域的讲6、内容区域的241、制作优品汇项目的二级分类页2、项目3、商品分类列表的4、内容区域的251、jQuery简2、使用方3、$函4、jQuery对5、选择6、jQuery函数8、css方法9、show方法、hide方10、slideDown方法、slideUp方11、fadeIn方法、fadeOut方12、html方13、addClass方法、removeClass方14、attr方法20、连续22、jQuery中的序号26天1、each()方2、animate()方3、animate()方法概4、哪些属性能够参与动5、动画的8、stop()方9、动画积累的防10、交叉淡入淡出轮11、分12、龙溪13、呼吸轮播图14、呼吸轮播图27天2、布局和css3、按钮4、小圆点事5、三位置法滚动轮播6、间歇模7、手风琴8、篮球计分系9、普通思10、数组12、布局和css13、右按14、左按钮事15、异型滚动多元素参28天1、项目实3、搭建html结构4、书写css样式5、书写页面交互效29JavaScript12、DOM深2、DOM组3、节点的4、childNodes属5、造统一浏览器表4、节点属5、节点6、节点操7、创建节点和上8、移动节9、删除节点removeChild()方法10、替换节点replaceChild()方法11、克隆节点cloneNode()方法12、jQuery中的节点操作13、上树的8种方14、wrap()和unwrap()、20、replaceWith()replaceAll()方法21、empty()remove()方法22、clone()方23、call方法与apply方24、animate函25、事件26、事件流30JavaScript1、DOM0级事件方2、DOM2级事件3、低版本IE的事件4、Dom0级和Dom2级之间的5、移除事6、事件绑定小7、event事件对象8、事件对象的兼容9、通用属10、拖11、事件冒12、默认事13、限制14生JS的元素位置和15clientWidth、clientHeight、offsetWidth、offsetWidth16、jQuery中的快捷尺寸18、认识offsetParent19、在页面中的净31JavaScript1、淘宝放大镜案例3、onscroll事件46、7、火狐中的鼠标滚轮8、滚轮的滚动方向与910、滚动轮播11、键盘13、小钢14、面向15、修改面向过程为面向对32JavaScript1、构造函2、构造函数的四3、气球4、气球游5、原型推7、hasOwnProperty方8、安全910、类式11、构造函数式12、组合式继13、寄生式继承、寄生组合式14、原型式继承的缺15、内置构造函16、内置构造函数之间的关33JavaScript1、游戏分2、贪吃蛇3、游戏4、蛇5、食物6、34JavaScript1、2、JSON对3、数组方4、判断数5、indexOf方法和lastIndexOf方法并实6、forEach并实7、map方法解并实8、fill方法解并实9、some方法讲解并实现10、every方法解并实现11、filter方法讲解并实现12、reduce方法解并实现reduceRight方13、addNum解并15、bind方法的讲解并实16、日期35JavaScript1、严格模2、全局严格模3、局部严格模4、8进5、6、delete关键9、10、同名11、函数11、特殊字符13、对象15、密封对象seal16、冻结freeze17、对象的创建363、横坐标4、纵坐标5、提示6、数据点的细789、数据10、天11、导出13、安装git14、linux常见指令15、git文件状态16、git指令17、建立信任关18、上传20、seajs简介21、seajs定义模22、Require模23、使用具有id的模371、异步加载模23、加载css文件5、requirejs简介5、体验9、模块对10、使用具有id的模11、模块12、接13、配14、Css插382、 ove事3、touchend事4、touchcancel事5、事件对7、webkit-transitionend事件8、webkit-animationstart事件9、webkit-animationend事件10、zepto介绍11、地图39天CSS1、复习2d知2、3DtranslateZ4、transform-stylepreserve-3d6、背面不可见属7、改变旋转中8、3d碎片轮播图动画9、3d碎片轮播图布10、3d碎片轮播图11、3d碎片轮播图40天1、本地2、会话2、评测系统案4、http协议5、多线程8、事件推11、拖拽删除案56、41天2、坐标系的概3、路径的4、常用7、绘制8、绘制9、绘制10、平移坐标11、旋转坐标12、星13、多个14、星星15、保存+恢复状16、绘制14、操作15、融合42FlappyBird1、布局和2、背景3、管子4、绘制管5、管子移67、渲染8、鸟的升降旋9、碰撞检431、设计模式简2、设计模式分3、简单工厂模4、寄生增强工5、工厂方6、原型、7、安全8、闭包9、惰性单10、静态11、命名空间函441、命名空间函数提取数2、观察者3、4、DOM2级观察者模5、观察者模式的注销事6、观察者模式实7、单次消息once方法实8、jQuery中的策略模9、表单正则策10、委托模式一少事件数11、委托模式二未来元12、委托模式三止内存泄451、节流器模式为什么要存2、节流器模式的实现（使用和停止3、最终节4、jQuery中的迭代5、underscore中的迭6、ES5中的迭代7、自己的迭代8、小型代9、适配器10、组合11、jQuery实现-工厂12、jQuery实现-拓展13、jQuery-链模、命令的定、命令的调 天进阶课部分项目实、优品汇项目详情、导航条的布局讲、左侧商品图轮播的布局、右侧商品详情内容的布局讲、内容区域的布局471、优品汇项目购物车页2、购物车列表布局的讲3、内容区域的布局4、商品价格计算的48HTTP、HTTPS与服务1、服务器概念2、如何服务器3、HTTP协4、HTTPS协5、URL流6、NodeJS介8、NodeJS特9、NodeJS模块10、11、HTTP模块搭建简单服12、HTTPS模块搭建简单服务13、FS模14、PATH模块、URL模块、QueryString模15、静态服务16、491、接2、Node处理GET接3、Node处理POST接4、AJAX简5、AJAX四6、AJAX要的是JSON以及字符串转对象的三种7、AJAX发送GET请8、AJAX发送POST请9、jQuery中的10、jQuery中的序列化表501、AJAX封2、表单序列3、登录和4、瀑布流简5、瀑布流布局6、花瓣网布7、花瓣网数据8、发送ajax请求抓取数据并分9、如何将ajax请求回来的数据放入界面511、格式化函2、最终3、AJAX分4、本地优化AJAX分5、域和同源策6、JSONP跨7、JSONP10、AJAX2.011、懒12、AJAX分521、MVC介2、M层的3、V层的4、C层的5、MVC内6、模块7、创建视图的8、Background模块一9、Background模块二10、Header块一11、Header模块12、Header模块531、Home2、Home4、Carousel块一5、Carousel块二6、Carousel块三9、Portfolio模块10、MVVM模11、MVVM封装组54NodeJS02、Express03、Express静态化文件04、Express模板（后端渲染05、文件上08、MongoDB常用命令09、MongoDB用命令二10、NodeJS连接MongoDB5501、布02、检测用户03、逻辑04、逻辑05、登录逻06、的介绍及使07、Session的介绍及使5601、主02、管理页03、创建相册04、展示相册05、删除相册06、删除07、上5701、权限操作02、修改状03、全部相册04、我的相册05、GM模块的简单06、头像裁剪07、头像裁剪08、退出功5801、聊天室功能介02、AJAX轮询聊天室（布局03、AJAX轮询聊天室（功能04、Socket.io模块简05、Socket.io模块测06、Socket.io模块聊天室（布局07、Socket.io模块聊天室（功能一实时聊天08、Socket.io模块聊天室（功能二用户进入之后显示欢迎09、Socket.io模块聊天室（功能三用户离开之后显示欢送10、Socket.io模块聊天室（功能四全体禁言第59天Gulp与Wck工程1、体验gulp2、Task4、文5、Globs语6、重命名插7、压缩js插8、压缩css件11、文件打12、语法检13、压14、W15、Wck-dev-60ECMAScript1、压缩js插2、加载4、Hotmodule5、编译6、ES6类与继承的7、Let8、常9、字符串位10、多行字符11、重复字符12、原始字符13、数字对象14、数学对象61ECMAScript1、From方2、Of方3、获取数组成4、数组5、对象字面6、Is判断8、Assign法9、Symbol类10、11、默认参12、获取剩余62ECMAScript1、对象2、数组3、箭头4、箭头函数作5、Set对6、Weakset对7、Map对8、Weakmap对9、迭代10、Generator函11、Promise对631、koa简2、安装5、HTTP求6、静态资源与重定7、网页8、配置9、中间件与配10、错误处11、和session13、文件上14、数据15、对比KOA64LESS与SASS预编3、混4、方5、条件6、内置7、导入文件与JS语8、插值11、属性嵌12、混13、混合传参与获取剩余参14、继15、运16、插值语17、If条件语句与三元语18、For循环语句与栅格化系19、While循环与枚举循第65 开1 小程序简介、账号 结2、测试3、全局配置与项目配4、应用构造器，页面构造器，应用程序生命周5、页面生命周期，常见事件，常见全局方6、渲染原理，数据驱动，数据绑定与插7、修改数据与数据丢10、ViewText组11、富文本组12、Icon组件与组13、canvas组14、地图组15、多组件（组件，相机组件，与录播组件第66 开1、指令，条件指令与循环指2、容器组件(scroll-viewswippermovable-viewcover-3、引入文件，城市切换结构4、城市切换样5、城市切换交6、表单组件一(InputLabelBottonCheckbox7、表单组件二(PickerPicker-viewProgressSliderSwitchTextarea8、模板组件与导入组9、路由导航组10、wxsscss、rpxflex布第67 开1、明信片项2、开放组件open-data、web-viewhttps协4、wxs件5、路由6、本地7、城市切换-历史城8、明信片-信9、指南针工10、11、getLocationchooseLocationopenLocation第68 开1、项目2、首页头部，购物车，网络3、商品详情样式和布4、首页交互逻5、更新商品数6、订单7、获取订单信8、订单消息页9、个人10、打卡工11、上线小程691、优品汇管理系统商品添加功能实2、项目部3、商品分类、基本信息、库存规格、其它信息、特殊商品属性、商品相册、规格4、完成上701、优品汇管理系统商品添加功能与前台页面通2、商品分类布局讲3、获取数据、展示上传数71Vue1、vue简2、体验4、wck编译5、数据6、插值表达7、属性8、自定义过滤9、数据变10、计算属性11、数据双向12、避免插值13、DOM事14、事件修饰15、类的三种绑定方16、样式的三种绑定72Vue1、条件模板指2、显隐3、循环模板指4、模板5、支付宝登录6、支付宝登录7、过8、单选框元素数据双向绑9、多选框元素数据双向绑10、下拉框的数据双向绑11、自定义指12、表单校14、slot件 ponent组73VueXVue1、keep-live组2、组件生命周3、父组件到子组件通4、vue中观察者模5、子组件到父组件通6、FluxVuex组件通信问7、Vuex同步消息8、Vuex异步消息10、模块切11、前端路由实现原12、使用路13、路由参14、默认路15、路由重定16、子17、路由导74Axios、VueMintUIElement1、异步请求--axios2、安装axios3、wck跨域请求4、wck编译Vue组件5、CSS6、ShadowDOM式8、使用MintUI9、MintUICSS10、MintUIJS11、MintUI单12、使用Element13、ElementUI础库14、ElementUIForm第75天VueCli+Router+VueX+ES6+Wck项目1、VueCli构分2、Vuecli搭建美团项目并配置3、Wck配置VueCli项5、header件6、icons模7、模8、首页商品列9、商品10、列表页视11、列表页交12、详13、路由守卫--路由变76React1、浏览器渲染3、React性能优化4、创建虚拟5、组6、jsx语法与编7、插值与注8、特殊元素属性，自定义数据属性，元素属性，元素9、非元素属性：dangerouslySetInnerHTML,ref,key与渲染列9、组件属性，默认属性与属性的约10、事件绑11、无状态组件与有状态组件，初始化状态与状态更77React1、换2、组件创建3、父组件向子组件通4、组件存在5、组件销毁6、非约束性组7、约束性组8、单选下拉框组件的约束10、使用非react库11、使用侵入式类12、子组件到父组件13、兄弟组件间通78React16、Redux1、项目需求分析与架构分3、header航模块4、首页5、首页第一个6、首页第二个7、拆分组件：banner组件、article组件与aside组8、起步页组9、混合10、抽象page面组13、redux实现通79React16ReactRouterReduxcreate-react-1、React使用Redux通2、使用3、默认路由与路由重5、路由中使用redux7、state展9、异步action10、antd-mobileUI11、element-reactUI14、测试虚拟15、发布项目与输出1、项目需求分析与架构分2、create-react-app创建项目，引入less与安装3、header模4、首页5、卡片组件与按钮组6、详情页组7、评论页组8、提交10、安装SDK11、配置环境12、Android真机13、IOS真机测试14、安装虚拟测试设15、调试工16、组件开发与组件17、数据双向18、常见组件：Image,ScrollView,FlatList20、flex布81TypescriptAngular1、ES6，Typescript与工程化编2、ts数据3、数组、元组、类型4、枚举5、函数定义6、泛型、联合7、类的定义与8、继承的实11、Angular6.0简12、Angularcli建项目13、npm指令与wck配置15、ShadowDOM样式与设置样式17、css预编译技术与样式指16、动态绑定类指82Angular1、插2、事件3、事件修饰5、change件6、自定义组7、父组件向子组件通8、子组件向父组件通9、模板10、条件模板11、多分支条件模板12、循环模板13、自定义指14、指令到组件的通15、组件到指令的通16、服务与参数注17、实现icktShow自定义显隐指18、实现icktBind自定义设置元素内容指19、实现icktClass自定义动态设置元素类指20、组件生命83Angular8.0与1、内置2、自定义管3、数据双向绑4、表单5、表单元素的四个属6、表单8、http9、自定义服10、Angular6.0由15、按钮、字体图标与栅格16、选项卡组件与弹框服84React，Vue，NodeJS1、项目需求分2、pc端 wck配置ReactJS3、pc css3动4、pc 加载5、pc 路由模6、pc header模块与withRouter高阶组7、pc swiper组7、pc 首页组件与接口文8、pc 课程卡片组85React，Vue，NodeJS1、pc 分类页与搜索2、pc 商品组3、pc 商品交4、移动 搭建vue环 header模块7、移动 首页组8、移动 课程卡片组9、移动 购物车组10、移动 页面组11、移动端课程逻12、移动端搜索组86React，Vue，NodeJS1、服务器 服务器端环境搭2、服务器 封装mongoDB数据3、服务器 home接4、服务器 search接5、服务器 type接6、pc端配置pc端管理系统项目环7、pc端路由配8、pc端首页布9、pc端登录页面组10、服务器 登录接87React