1、走进前端的世界
html语言、浏览器、IDE、photoshop切图、第一个hello world页面、标签、语义化、css基本语法、CSS常见样式:width/height/border/background/margin/padding/font/line-height/color/text-align...、超链接、相对路径与绝对路径、盒模型...
2、浮动
块级元素、内联元素、标签嵌套、浮动的表现、清除浮动的方法、BFC
3、定位
absolute、relative、fixed、z-index、让div绝对居中在浏览器中央
4、表格与表单
表格详解、thead、tbody、tfoot、tr、th、td、表单、input类型及属性、文本框、密码、单选、复选、提交、重置、按钮、图片、上传、隐藏、label、select/option 下拉选框、textarea 文本域、表单常用属性、name、disabled与readonly的区别、checked/selected、label的for属性...
5、兼容性问题
css优先级、css reset、Css Hack、调试的各种技巧
6、Css Sprite
Sprite讲解、Sprite技巧、优缺点分析
7、html5+css3基础
新增标签:nav/header/figure/article/section/audio/video...、input的类型:number/telphone/time/date/mail/range...、box-shadow、border-radius、text-shadow、text-transform、calc()、background新的用法...
8、css3高级
css渐变、translate、scale、rotate、skew、CSS3遮罩、transform-origin、transform-style、perspective、transition、animation、立方体盒子...
9、自适应屏幕与移动端页面
媒体查询、viewport、rem、vw、vh...
1、Sass
用sass实现css工具库
2、其它预处理器:Less和Stylus
功能跟Sass类似
1、javascript基础
鼠标事件、获取元素、getElementById、getElementsByTagName、querySelector、函数、变量、数据类型、NaN、undefined、null、类型判断、typeof、instanceof、循环语句、if判断、变量运算、变量比较...
2、实战技巧
作用域、arguments、返回值、递归、闭包、字符串、数组、数组排序、对象引用、json、命名空间、Math对象、image对象、new、delete、定时器、函数节流、requestanimationframe、日期对象、时间戳...
3、DOM和BOM
DOM结构、DOM节点、属性操作、getAttribute、dataset、classList、节点类型、childNodes、children、nodeType、nodeName、appendChild、removeChild、perviousElementSiblings、parentNode、clientWidth、offsetWidth、表格操作、表单操作;窗口操作、窗口尺寸、可视区尺寸、滚动距离、文档内容高度、location、navigation、浏览器类型判断、js设置div绝对居中、返回顶部...
4、javascript事件
鼠标事件、键盘事件、表单事件、事件绑定、addEventListener、鼠标右键contextmenu、默认行为、事件流、阻止冒泡、阻止默认事件、event、event.clientX、event.target、鼠标跟随、自定义事件、事件委托、事件代理
5、事件的高级应用
自由拖放、拖动排序、鼠标缩放、滚轮缩放、框选元素、碰撞检测、匀速运动、减速运动、运动框架、移动端运动框架
6、面向对象
Object、对象属性、对象方法、对象创建方法、实例化、this、原型与原型链、__proto__、prototype、constructor、hasOwnProperty、继承、apply、call、深拷贝、浅拷贝...
7、ajax
XMLHttpRequest、get、post、responseText、json、异步与同步、ajax组件封装、formdata、postmessage、跨域的方法
8、cookie和localStorage
设置cookie、获取cookie、删除cookie、cookie有效期、localStorage和sessionStorage、cookie和localStorage的区别、localStorage和sessionStorage的区别
9、javascript正则表达式
test、search、match、replace、贪婪匹配、修饰符、转义、捕获与非捕获分组、惰性匹配、前向匹配、电话号码匹配、email匹配、网址匹配、敏感词过滤...
10、js常见算法
排序、求和、去重、二分法...
11、html5音频与视频
audio和video的事件、制作简陋的钢琴、制作视频播放器
12、移动端touch事件
手机横屏与竖屏检测、touch事件、touchstart、touchmove、touchend、targetTouches、changedTouches、touch检测pc或移动端、手势事件、touch组件封装、滑屏切换、移动端轮播图
13、file文件api
文件拖拽、读取文件、图片缩略图、拖拽上传、上传进度...
15、webworker多线程
多线程介绍、斐波那契数列、webworker局限性...
14、canvas
canvas介绍、getContext('2d')、画线、画弧、矩形、文字、canvas旋转/移动/缩放、canvas事件、canvas载入图像、canvas转为图片、柱状图、饼图、自由铅笔...
1、ES6变量与赋值
let、const、块级作用域、没有变量提升、暂时性死区、暂时性死区、数组解构赋值、对象解构赋值、字符串解构赋值、数值解构赋值、布尔值解构赋值、函数参数解构赋值...
2、ES6数据扩展
字符串的扩展、codePointAt、for of、at、includes, startsWith、endsWith、repeat、padStart、padEnd、数组的扩展、Array.from、Array.of、find、findIndex、keys、values、entries、数值的扩展、Number.isFinite、Number.isNaN、Number.parseInt、Number.parseFloat、函数的扩展、rest参数、扩展预算符、箭头函数、函数绑定、对象的扩展、Object.is、Object.assign、Symbol、Symbol.for、Symbol.keyFor、Set、Map...
3、ES6高级api
promise介绍、异步编程、then、resolve、reject、面向对象之Class、类的创建方法、Class与面向对象的区别、ES6模块化编程、export、export default、import...
1、webpack
模块化、CommonJS规范、自动化构建配置、watch监听、loader:jsx/es6/tpl/style/css/less/sass/img/font...
2、gulp
配置文件、gulp.src、gulp.dest、gulp.task、gulp.watch、autoprefixer、concat、htmlmin、imagemin、less、sass、livereload、rev、uglify...
1、Vue基础
vue的属性与方法、数据绑定语法、双向绑定、过滤器、指令、修饰符、Class与Style绑定、数据渲染、vue事件、vue表单操作、vue动画...
2、Vue组件
vue组件、组件注册语法糖、组件模版、Slot插槽、组件通信、单页组件、动态组件...
3、vue-router路由
单页面、动态路由匹配、嵌套路由、编程式导航、命名路由、重定向和别名、路由参数、路由钩子函数...
4、vuex模块化Store
state、getters、actions、mutations、mapState、mapAction、mapGetter、vuex-persistedstate状态持久化...
5、框架
vue-cli、vux、element-ui...
1、React基础
虚拟DOM、单向数据流、JSX、双向绑定、结构渲染、数组储存结构、map、事件规则、ref、refs、组件状态、getInitialState、state、setState、Pub、Sub...
2、React组件
受控组件、非受控组件、组件通信、props、组件嵌套...
3、react-router路由
动态路由匹配、嵌套路由、编程式导航、路由钩子函数...
4、react-redux
state、reducer、effects、subscription...
5、框架
dva、umi、ant-design...
1、nodejs基础
CommonJS规范、http模块、createServer、request、response.write、response.end...
2、nodejs框架koa
koa开发环境搭建、async/asait、get/post请求、koa-bodyparser中间件、koa-router、koa-static...
3、koa2+vue结合实例
1、微信小程序的安装
微信小程序安装与预览
2、微信小程序的配置文件app.json
配置页面路径、窗口样式、底部tab导航条、网络超时时间等
3、微信小程序的逻辑层
通过App注册程序、通过Page注册页面、支持commonjs规范、支持ES6标准、调取微信原生api...
4、微信小程序的视图层
wxml和html的异同、wxss和css的异同、类似MVVM的数据操作(事件、双向绑定、条件渲染、遍历数组、模版、引用等)、各种组件:容器、表单、音频视频、导航、地图、canvas、会话等
1、毕业总结
学习内容梳理、实用技巧总结
2、毕业内测
内部前端题测试
3、面试题与面试技巧
前端开发常见面试题讲解、面试技巧、职业规划...