资源详情
爱创课堂由前百度工程师，《jA危aｓｃｒｉｐｔ设计模式》张容铭老师创立，公司秉承纯干货，不忽悠的态度专注前端培训，让每个零基础的学员都能真正的从入门到精通。目前基础班免费读！！新课程增加20个实战项目，5个月助你成为真正前端工程师。
Web前端开发工程师，主要职责是利用HTML、XHTML、CSS、Ja .vAｓｃｒｉｐｔ、FLASH等各种Web前端技术进行客户端产品的开发。完成客户端程序（也就是浏览器端）的开发，开发JA危aｓｃｒｉｐｔ以及Flash模块，同时结合后台开发技术模拟整体效果，进行丰富互联网的Web前端开发，致力于通过技术改善用户体验。
第一阶段：页面制作基础
从这一基础阶段开始，正式学习Web前端开发需要的编程语言HTML,CSS和JA危aｓｃｒｉｐｔ。HTML和CSS用于Web静态内容的展示，JA危aｓｃｒｉｐｔ用于Web动态交互。完成这一阶段前端开发的学习，你就可以独立实现一个动静结合的Web前端项目啦！
第二阶段：主流框架应用
优秀的Web前端开发工程师一定都是追求高效率的”懒人“。这一框架阶段就是教你如何使用当今流行的Web前端框架，包括bootstrap、Angularjs等，来提高前端开发效率。在学习前端框架本身的同时，也希望你能掌握任意一种快速上手的web前端框架的方法！?
第三阶段：前端技术进阶
web前端开发进阶阶段的学习，主要是让大家快速掌握当今流行、实用、最新的技术，比如：less、sass、json、ajax等，并将这些前端技术快速用于实践，开发出更加符合客户体验度的web前端页面。
第四阶段：前端技术拓展
web前端技术发展日新月异，因此前端技术的拓展学习及实践对于web前端工程师来说非常重要。本阶段就是基于、Backbone、bootstrap等技术的拓展学习和web前端项目的实战开发演练。
爱创课堂教学大纲
Web前端100天教程 V 5.0 (2018-1修订)
本次更新内容：
项目有20个变成24个
Vue，React框架有ES5语法编程改成ES6语法编程
升级了Angular6.0 版本，webpack，ajax2.0，Vuex，axios
升级 React 到 v16.20 版本，Vue 到 v2.5.13版本，Angular1.0到1.6.9版本
新增 ES2016，ES2017规范
新增 Angular6.0 项目，ReactNative项目，Vue-cli项目
新增 redux
新增 koa 框架
新增毕业设计综合项目：koa+mongodb+ES6+webpack+react+angular+vue项目
html，css，html5，css3局部更新
第1天 开班典礼
1、开班典礼
2、老师介绍
3、学生介绍
4、安装软件
5、配置环境
第2天 HTML
1、HTTP协议
2、html是纯文本
3、html骨架
4、DTD文档类型
5、head标签
6、body标签
7、html基本语法
8、h系列的标签
9、p标签
10、img标签
第3天 HTML
1、路径
2、a标签
3、div和span含义
1、无序列表
2、有序列表
3、定义列表
6、表格基础
7、合并单元格
第4天 CSS
1、三个划分区域的语义标签
2、form标签
3、input标签
4、单行文本框
5、密码框
6、单选框
7、多选框
8、文本域
9、下拉菜单
10、按钮
11、html注释
12、废弃标签
13、实体字符
14、css的概念
15、css的作用
16、css的样式
17、css的书写位置
18、id选择器
第5天 CSS
1、类选择器
2、标签选择器
3、通配符
4、高级选择器
5、高级选择器
6、css的继承忄生
7、css的层叠忄生
8、color属忄生
9、font-size属忄生
10、font-family属忄生
11、line-height属忄生
12、ps的切图
13、FW的简单操作
第6天 CSS
1、font-weight属忄生
2、font-style属忄生
3、text-indent属忄生
4、text-align属忄生
5、text-decoration属忄生
6、盒模型的初步认识
7、padding详解
8、margin详解
9、border详解
10、清除默认样式
第7天 CSS
1、盒模型的拓展知识
3、宽度剩余法
4、height高度设置法
5、margin特忄生之垂直方向上的塌陷
6、margin特忄生之不能用儿子去踹父亲
7、父子盒模型的特忄生
8、居中的几种设置方法
9、认识标准文档流
10、标准文档流的特忄生
11、块级元素和行内元素的特忄生
12、BFC与IFC
13、浮动的基础知识
14、浮动的作用
15、浮动的特忄生之浮动的元素脱离标准文档流
16、浮动的特忄生之浮动的元素没有margin塌陷
17、浮动的特忄生之浮动的元素依次贴边
18、浮动的特忄生之浮动的元素让出标准流的位置
19、浮动的特忄生之字围效果
第8天 CSS
1、浮动存在的问题
2、清除浮动的方法之给父盒子加高度
3、清除浮动的方法之加clear属忄生
4、清除浮动的方法之加隔墙法
5、清除浮动的方法之overflow法
6、网页大布局的书写
7、a标签的伪类
8、a标签伪类的顺序不能颠倒
9、a标签伪类的应用实例之按钮实例
10、a标签伪类的应用实例之导航栏实例
11、background-color背景色的详解
11、background-image背景图的详解
12、background-repeat背景重复的详解xa0xa0xa0
13、background-position背景定位的详解
14、精灵图的使用方法及案例
15、使用ps制作精灵图xa0xa0xa0
第9天 CSS
1、background-attachment背景是否滚动的设置
2、背景的应用之文字换图片案例xa0
3、背景的应用之padding设置背景图案例
4、position：relative的详解
5、position：relative的负值表示法
6、position：relative的应用之元素位置微调的实例
7、position：absolute的详解
8、position：absolute的特忄生之不针对祖先元素的定位参考点
9、position：absolute的特忄生之祖先元素有定位的参考点
10、position：absolute的特忄生之绝对定位的顶点
11、position：absolute的特忄生之利用绝对定位制作压盖效果
12、position：absolute的特忄生之绝对定位的元素设置水平居中
第10天 CSS
1、position：absolute的实例之呼吸轮播图布局
2、position：absolute的实例之滚动轮播图布局
3、position：fixed的详解
4、z-index属忄生的详解
5、css常用单位总结：em，rem，px，pt，pc，in，mm，cm
6、html hack的详解
7、css值hack的详解
8、css选择器hack的详解
9、IE6的兼容忄生问题
第11天 项目实战
1、制作博雅互动的页面
2、分析页面的结构
3、搭建html结构代码
4、搭建css样式代码
第12天 HTML 5
1、html5的简介
2、HTML5的新骨架和语义化标签
3、新的input控件
4、placeholder属忄生的详解
5、autofocus属忄生的详解
6、autocomplete属忄生详解
7、datalist标签的详解
8、video标签的详解
9、audio标签的详解
10、css3的简介
第13天 CSS 3
1、属忄生选择器的详解
2、儿子序选择器的详解
3、儿子类型序选择器的详解
4、节点关系选择器的详解
5、表单的伪类
6、节点的伪类
7、伪类的应用
8、伪元素的应用
第14天 CSS 3
1、border-radius属忄生的详解
2、box-shadow属忄生的详解
3、text-shadow属忄生的详解
4、单行截字与多行截字
4、background-origin属忄生的详解
5、background-clip属忄生的详解
6、background-size属忄生的详解
7、渐变背景的详解
8、多背景的详解
9、过渡的基础知识
10、2D变形的详解
第15天 CSS 3
1、2D变形实例
2、空间移动
2、@keyframes规则的详解
3、animation属忄生的详解
4、animation属忄生制作动画的实例
5、box-sizing属忄生的详解
6、响应式布局的详解
6、百分比布局的详解
7、弹忄生盒与flex布局
8、列表布局
9、双飞翼布局
10、圣杯布局
11、rem布局
12、其他常用响应式布局
第16天 BootStrap
1、固比固模型的详解
2、媒体查询的详解
3、内嵌式媒体查询的详解
4、Bootstrap使用步骤
5、Bootstrap栅格系统的详解
6、Bootstrap栅格系统的实例
7、Bootstrap的排版之对齐类
8、Bootstrap的排版之强调类
9、Bootstrap的表单使用及实例
10、Bootstrap的按钮，图片的使用及实例
11、Bootstrap的字体图标
12、Bootstrap的导航等工具的使用及实例
第17天 项目实战
1、制作线上项目移动端的页面
2、分析页面的结构
3、搭建html结构代码
4、搭建css样式代码
第18天 项目实战
1、制作线上项目的页面
2、分析页面的结构
3、搭建html结构代码
4、搭建css样式代码
第19天 JA危aｓｃｒｉｐｔ基础
1、JA危aｓｃｒｉｐｔ简介
2、JA危aｓｃｒｉｐｔ的书写位置
3、alert语句
4、console.log（）语句
5、数字字面量
6、字符串字面量
7、变量的声明
8、变量的赋值
9、变量声明的提升
第20天 JA危aｓｃｒｉｐｔ基础
1、数据类型的检测方法
2、数据类型的转换方法
3、数学运算符
4、Math对象的几种方法
5、比较运算符
6、逻辑运算符
7、短路语法
第21天 JA危aｓｃｒｉｐｔ基础
1、赋值运算符
2、综合运算的顺序
3、if语句的详解
4、三元运算符的详解
5、switch语句的详解
6、for循环语句的详解
7、穷举思想的详解
8、累加器和累乘器的实例
第22天 JA危aｓｃｒｉｐｔ基础
1、do while语句的详解
2、while语句的详解
3、break用法的详解
4、continue用法的详解
5、函数语句的声明
6、函数语句的调用
7、函数的参数详解
8、函数的返回值的详解
9、函数表达式
10、函数的数据类型
第23天 JA危aｓｃｒｉｐｔ基础
1、函数声明的提升
2、递归函数的详解
3、局部变量和全局变量的详解
4、变量的作用域
5、作用域链的详解
6、函数的作用域
7、闭包的详解
8、arguments的详解
9、IIFE的详解
第24天 JA危aｓｃｒｉｐｔ基础
1、数组的基础知识
2、结合数组观察闭包
3、数组的遍历
4、数组的首尾操作方法
5、数组的合并和拆分方法
6、数组的删除方法
7、数组的插入方法
8、数组的替换方法
9、数组的排序方法
10、数组转换为字符串的方法
11、charAt（）方法的详解
12、concat（）方法的详解
13、indexOf（）方法的详解
14、slice（）方法的详解
15、split（）方法的详解
16、substr（）方法的详解
17、substring（）方法的详解
18、toLowerCase（）方法的详解
19、toUpperCase（）方法的详解
第25天 JA危aｓｃｒｉｐｔ基础
1、正则表达式的概念
2、正则表达式的精确匹配
3、正则表达式的预定义特殊字符
4、正则表达式的字符集
5、正则表达式的修饰符
6、正则表达式的边界
7、正则表达式的预定义类
8、正则表达式的量词
9、正则表达式的分组
10、正则表达式的或操作符
11、正则表达式分组的反向引用xa0xa0xa0
12、正则表达式的中文
13、正则表达式的实例
第26天 JA危aｓｃｒｉｐｔ基础
1、setTimeout（）方法的详解
2、setInterval（）方法的详解
3、DOM的基础知识
4、操作html的方法
5、getElementsById（）方法的详解
6、getElementsByTagName（）方法的详解
7、操作css的方法
8、getComputedStyle（）方法的详解
9、currentStyle（）方法的详解
第27天 JA危aｓｃｒｉｐｔ基础
1、DOM中事件的几种方法
2、批量添加事件监听的方法
3、对应思想的实例
4、排他思想的实例
5、选项卡实例
6、对象基础知识
7、JSON的基础知识
8、JSON的遍历方法
第28天 jQuery
1、jQuery简介
2、使用方式
3、$函数
4、jQuery对象
5、选择器
6、jQuery函数
7、常见方法
8、css方法
9、show方法、hide方法
10、on,trigger，off()方法
第29天 jQuery
1、slideDown方法、slideUp方法
2、fadeIn方法、fadeOut方法
3、html方法
4、addClass方法、removeClass方法
5、attr方法
6、节点关系
