admin 发表于 2017-10-17 18:33:52

爱创课堂—web 前端视频教程

第一阶段:页面制作基础

从这一基础阶段开始,正式学习 Web 前端开发需要的编程语言 HTML,CSS 和 JavaScript。HTML 和 CSS 用于 Web 静态内容的展示,JavaScript 用于 Web 动态交互。完成这一阶段前端开发的学习,你就可以独立实现一个动静结合的 Web 前端项目啦!


第二阶段:主流框架应用

优秀的 Web 前端开发工程师一定都是追求高效率的” 懒人 “。这一框架阶段就是教你如何使用当今流行的 Web 前端框架,包括 bootstrap、Angularjs 等,来提高前端开发效率。在学习前端框架本身的同时,也希望你能掌握任意一种快速上手的 web 前端框架的方法!?


第三阶段:前端技术进阶

web 前端开发进阶阶段的学习,主要是让大家快速掌握当今流行、实用、最新的技术,比如:less、sass、json、ajax 等,并将这些前端技术快速用于实践,开发出更加符合客户体验度的 web 前端页面。


第四阶段:前端技术拓展

web 前端技术发展日新月异,因此前端技术的拓展学习及实践对于 web 前端工程师来说非常重要。本阶段就是基于、Backbone、bootstrap 等技术的拓展学习和 web 前端项目的实战开发演练。


课程包含部分:


第一部分 html 与 css 入门 共 100 课时

课时 名称

1 html 简介

2 html 骨架

3元标签 - 编码

4元标签 - 关键字与描述

5标签空白符

6标题标签

7段落标签

8注释

9块元素与行内元素

10超链接

11图片标签

12绝对路径与相对路径

13无序列表

14有序列表

15列表嵌套

16定义列表

17表格

18单元格拆分与合并

19表格头尾

20表单元素

21下拉框与文本输入框

22表单分组

23常见字符实体

24文字标签

25语义化标签

26废弃标签

27 css 简介

28 css 三种书写方式

29 css 常见选择器

30 id 选择器与类选择器注意事项

31选择器组合

32后代选择器

33交集选择器与并集选择器

34选择器通配符

35腾讯新闻列表

36选择器权重

37就近原则

38样式引入方式权重比较

39权重计算练习

40 important 提升权重

41盒模型

42 IE 盒模型

43内边距与外边距

44边框属性

45盒子居中

46外边距重计算盒子宽度

47文字属性

48 css 常见单位

49文字修饰属性

50文字属性继承性

51文字水平居中与垂直居中

52图片元素排版

53超链接标签默认样式

54腾讯体育

55超链接标签伪类

56伪元素

57背景样式与图片

58背景平铺与背景位置

59背景在 SEO 中的应用

60块元素设置背景

61行内元素设置背景

62伪元素设置背景

63水平精灵图

64垂直精灵图

65定点精灵图

66 hao123

67四种箭头

68 hao123 箭头

69 css 绘制集合图形

70块元素与行内元素特性

71块元素与行内元素转化

72浮动元素

73浮动元素与文档流

74浮动元素特性

75浮动元素与边距

76浮动元素父元素高度丢失

77清除浮动

78清除浮动的 7 中方式

79新浪布局

80列表布局

81双飞翼布局

82圣杯布局

83排查错误

84相对定位

85表单对齐

86新浪 tab 栏

87绝对定位

88子绝父相

89 jd 轮播图

90文本居中,行内元素居中与块元素居中

91优酷

92固定定位

93遮盖

94拼爹

95 html 注释 hack

96 css 属性 hack

97 IE6 - 交集选择器与 DTD 内减盒模型

98 IE6 - 最小高度与盒子位置

99 IE6-overflow 与透明度

100 IE6 - 双倍 margin 与 3 像素 bug





第二部分 源生 javascript 共 150 课时

课时 名称

1前端输出语句

2 javascript 的三种引入方式

3 javascript 注释

4数字

5字符串

6变量定义与变量提升

7数据类型

8加法运算与字符串拼接

9数据类型转换

10算术运算符

11算术一元运算符

12赋值运算符

13比较运算符

14逻辑运算符

15三元运算符

16其他运算符

17运算符优先级

18 if 条件语句

19 switch 多分支判断语句

20 for 循环语句

21绘制九九乘法表

22棋盘与大米

23寻找质数

24寻找水仙花数

25数 7 游戏

26循环关键字

27 while 循环

28 do while 循环

29猜数字

30定义函数的两种方式

31函数参数

32函数返回值

33寻找约数

34哥德巴赫猜想

35斐波那契数列

36递归

37函数声明提升

38函数引用类型

39函数作用域

40函数内部作用域与变量

41闭包

42闭包与作用域

43循环中的闭包

44数组类型与属性

45遍历数组

46解析数组 pop 与 push 方法

47解析数组 shift 与 unshift 方法

48解析数组 concat 与 reverse 方法

49解析数组 slice 与 splice 方法

50解析数组 join 与 sort 方法

51字符串属性与转化方法

52解析获取子字符串方法 indexOf 与 lastIndexOf

53解析截取子字符串的三个方法 slice,substring,substr

54冒泡排序算法与快速排序算法

55解析数组 sort 方法

56解析拼接字符串与大小写转化方法

57获取字符位置 charAt 与 charCodeAt 方法与比较方法 localCompare

58正则表达式与创建方式

59字符串截取转化数组方法 split

60检索字符串方法 search

61匹配字符串方法 match

62替换字符串方法 replace

63正则匹配方法 exec

64正则检测方法 test

65正则表达式 - 特殊字符

66正则表达式 - 预定义特殊字符

67正则表达式 - 字符集

68正则表达式 - 分界

69正则表达式 - 预定义类

70正则表达式 - 量词

71正则表达式 - 修饰符

72正则表达式 - 其他

73正则表达式 - 分组

74正则表达式 - 验证手机号

75正则表达式 - 验证邮箱

76 arguments 与函数重载

77 IIFE 即时执行方法

78 document 对象

79获取元素的几种方法

80元素类名与 id 设置

81元素属性设置

82修改或者获取元素内容

83元素类型

84创建元素

85元素添加子节点

86删除元素

87复制元素

88获取 css 样式

89设置 css 样式

90事件流

91 html 处理程序

92传统事件处理程序

93 HTML 与 DOM0 级事件

94 DOM2 级事件处理程序

95 IE 事件处理程序添加与移出

96跨浏览器事件处理程序封装

97事件对象

98事件类型与目标元素

99阻止默认行为与阻止事件冒泡

100跨浏览器事件对象

101 UI 事件

102 UI 事件实战

103键盘事件

104键盘事件实战

105焦点事件

106焦点事件实战

107鼠标事件

108鼠标事件实战

109滚轮事件

110滚轮事件实战

111 javascript 获取盒子位置

112 javascript 获取盒子宽高

113定时器与异步操作

114计时器

115简单动画

116动画启停控制

117轮播图连续动画

118多属性变化

119运动框架

120运动框架实战

121缓冲函数

122缓存函数公告切换

123缓存函数表单滚动

124缓存函数轮播图

125 JSON 对象

126 JSON 对字符串解析

127 JSON 对对象反解析

128 JSON 对象遍历

129更改函数作用域

130 call 与 apply 区别

131对象

132日期对象

133日立

134时钟

135数字对象

136最大值与最小值

137数字四舍五入

138数字对象其他方法介绍

139求几何形状面积

140类的创建

141类的属性以及方法

142闭包类

143绘制图形

144构造函数式继承

145类式继承

146组合继承

147寄生式继承

148寄生组合式继承

149继承实战一

150继承实战二





第三部分 jquery 与 bootstrap 共 60 课时

课时 名称

1 jQuery 对象

2 id 选择器效率

3 tagName 选择器效率

4 class 选择器效率

5常规筛选

6层级筛选

7基本筛选

8内容筛选

9可见筛选

10属性筛选

11子元素筛选

12表单筛选

13属性获取与设置

14表单元素值

15 css 样式方法

16判断,添加与删除类

17宽高获取

18获取坐标方法 offset

19获取坐标方法 position

20滚动条方法

21元素属性数据方法

22事件绑定

23事件对象,默认行为与冒泡

24节点拷贝方法 clone

25父节点与子节点

26兄弟节点

27内部插入节点

28外部插入节点

29节点删除

30 animate 方法

31筛选子元素方法 eq 与 get

32获取子元素索引方法 index

33遍历方法 each

34 jquery 实例化对象 size 方法与 length

35元素显隐方法 show,hide,toggle

36上拉下拉显隐动画 slideDown,slideUp

37渐变动画 fadeIn,fadeOut

38动画队列方法 stop 与 finish

39动画延迟方法 delay

40元素判定方法 is

41 bootstrap 体验

42字体图标

43按钮组

44栅格布局

45代码样式

46工具类

47按钮与图片

48排版

49表单

50表格

51导航与路径导航

52分页,标签与徽章

53缩略图,警告框,进度条

54模态框

55下拉菜单

56滚动监听

57标签页

58轮播图

59工具条与弹出框

60警告框与按钮




第四部分 HTML5 CSS3 与移动端开发 共 50 课时

课时 名称

1 HTML5 新增标签与语义化标签

2 HTML5 对表单元素拓展

3 HTML5 制作钢琴

4 HTML5 播放视频

5 CSS3 关系选择器与属性选择器

6 CSS3 伪类选择器与伪对象选择器

7 CSS3 色彩与尺寸拓展

8 CSS3 边框拓展

9 CSS3 圆角拓展

10 CSS3 背景拓展

11 CSS3 渐变拓展

12 CSS3 文本特效

13 CSS3 字体

14 CSS3 多列

15 CSS3 用户界面

16 CSS3 盒模型

17 CSS3 弹性盒子

18 CSS3 响应式与媒体查询

19 CSS3 响应式与媒体查询实战

20 CSS3 过渡

21 CSS3 2d 变换

22 CSS3 3d 变换

23 CSS3 动画

24 CSS3 3d 动画

25 CSS3 3d 轮播图一

26 CSS3 3d 轮播图二

27 CSS3 3d 轮播图三

28 CSS3 动画事件

29百分比布局

30 HTML5 页面布局

31移动端响应式

32移动端 em 与 rem 布局

33移动端触屏事件

34移动端拖拽

35移动端手指滑动轮播图

36移动端 zepto 体验

37移动端 zepto 触屏事件

38移动端项目实战一

39移动端项目实战二

40 HTML5 - 上传图片

41 HTML5-Cookie

42 HTML5-sessionStorage

43 HTML5-localStorage

44 HTML5-websql

45 HTML5-EventSource

46 HTML5-web worker

47 HTML5 - 地图定位

48 HTML5 - 拖拽

49 HTML5 - 拖拽插件

50 HTML5 - 拖拽实战





第五部分 canvas 游戏开发 共 30 课时

课时 名称

1 canvas 检测

2 canvas 绘制矩形与描边矩形

3 canvas 绘制路径

4 canvas 绘制文字

5 canvas 移动绘制点

6 canvas webgl

7 canvas 旋转

8 canvas 方法

9 canvas 历史记录

10 canvas 绘制时钟

11 canvas 掷骰子游戏

12 canvas 运动小球与边界检测

13 canvas 绘制混沌的宇宙

14 canvas 游戏运动框架

15 canvas 愤怒的小鸟一

16 canvas 愤怒的小鸟二

17 canvas 自由落体欲动与抛物线运动

18 canvas 力

19 canvas 碰撞检测

20 canvas 愤怒的小鸟

21 canvas 躲避小行星

22 canvas 投影

23 canvas 渐变

24 canvas 模式与刮刮乐

25 canvas 图像数据

26 canvas 滤镜

27 canvas 透明度与三原色

28 canvas 弹性碰撞与能量守恒

29 canvas 台球游戏一

30 canvas 台球游戏二




第六部分 微信与百度地图 共 30 课时

课时 名称

1成为微信开发者

2创建菜单

3菜单查询

4删除菜单

5菜单事件

6接收消息

7消息事件

8被动回复

9客服消息

10群发消息

11模板消息

12网站开发

13设置元素类型

14按钮

15列表

16对话框

17进度条

18信息页与消息提示

19文章与按钮

20添加素材

21删除素材

22用户管理

23获取用户信息

24获取用户列表

25成为百度地图开发者

26控件

27覆盖物

28事件

29地图图层

30工具



第七部分 nodejs 共 80 课时

课时 名称

1安装使用 nodejs

2 REPL 模式

3全局对象

4 util 模块

5 url 模块

6 querystring 模块

7事件模块

8事件对象

9 os 模块

10 net 模块

11 DNS 模块

12 Domain 模块

13 domain 模块绑定

14引入 path 模块

15引入自定义模块

16 buffer 对象

17 stream 流

18 npm 介绍

19安装外部模块

20使用外部模块

21搭建服务器

22单线程应用

23非堵塞应用

24非堵塞应用

25请求对象

26解析请求

27 get 请求与 post 请求

28响应对象

29响应状态码

30设置响应头

31设置响应数据

32配置路由

33同步,异步判断文件存在

34同步,异步读文件

35同步,异步写文件

36同步,异步追加文件内容

37同步,异步修改文件名

38文件上传

39对上传文件处理

40对上传文件处理

41 expres 运行原理

42 express - 中间件

43 express-use 方法

44 express-set 与 get 方法

45 express-response 对象

46 express-requst 对象

47 express - 配置路由

48 express - 静态文件

49 express - 模板

50 express-cookie

51 express-session

52 express - 上传文件

53 express - 实战一

54 express - 实战二

55 express - 实战三

56安装 mongoDB

57 mongoDB - 库操作

58 mongoDB - 写入数据

59 mongoDB - 查询数据

60 mongoDB - 修改数据

61 mongoDB - 删除数据

62 mongoose 安装

63 mongoose - 模型

64 mongoose - 插入操作

65 mongoose - 更新操作

66 mongoose - 删除操作

67 mongoose - 查询操作一

68 mongoose - 查询操作二

69项目实战一

70项目实战二

71项目实战三

72项目实战四

73项目实战五

74项目实战六

75项目实战七

76项目实战八

77项目实战九

78项目实战十

79项目实战十一

80项目实战十二



第八部分 设计模式 共 80 课时

课时 名称

1设计模式概论

2工厂模式 - 简单工厂模式

3工厂模式 - 工厂模式

4工厂模式 - 寄生增强工厂

5工厂模式 - 安全工厂模式

6工厂模式 - 创建对象

7工厂模式 - 工厂方法

8原型模式 - 继承

9原型模式 - 原型模式

10单例模式 - 静态变量

11单例模式 - 惰性单例

12单例模式 - 闭包类

13单例模式 - 管理命名空间

14适配器模式 - 适配器模式

15适配器模式 - 数据适配器

16适配器模式 - 参数适配

17组合模式一

18组合模式二

19组合模式三

20观察者模式

21观察者模式数据传递

22观察者模式总结

23观察者模式应用

24 jquery 中观察者模式

25 jquery 中的策略模式

26策略模式 - 淘宝价格

27策略模式 - 表单验证

28策略模式 - 策略模式算法拓展

29模板模式 - 模板字符串

30模板模式 - 匹配拓展

31模板模式 - 格式化字符串

32模板模式 - 正则分组

33命令模式 - 渲染视图

34命令模式 - 渲染页面

35命令模式 - canvas 绘图一

36命令模式 - canvas 绘图二

37命令模式 - canvas 绘图三

38迭代器模式 - 数组迭代器

39迭代器模式 - 对象迭代器

40迭代器模式 - 面向对象中的应用

41 canvas 滤镜

42迭代器模式 - 算法优化

43迭代器模式 - 同步变量

44迭代器模式 - dom 迭代器

45迭代器

46委托模式 - 事件数量优化

47委托模式 - 为未来元素绑定事件

48委托模式 - 避免内存外泄

49委托模式 - 数据分发

50节流模式 - 函数节流

51节流模式 - 节流器

52节流模式 - 节流器应用

53节流模式 - icon 浮层

54节流模式 - 统计节流

55 MVC-MVC 原理

56 MVC-M 模型

57 MVC-V 视图一

58 MVC-V 视图二

59 MVC-C 控制器

60 MVC-MVC 补充

61 MVC 项目实战 - 侧边栏一

62 MVC 项目实战 - 侧边栏二

63 MVC 项目实战 - 侧边栏三

64 MVC 项目实战 - 头部模块一

65 MVC 项目实战 - 头部模块二

66 MVC 项目实战 - 邮箱浮层

67 MVC 项目实战 - 邮箱浮层样式

68 MVC 项目实战 - 邮箱浮层交互

69 MVC 项目实战 - 打开关闭浮层交互

70 MVC 项目实战 - 邮箱列表

71 MVC 项目实战 - 换肤视图部分

72 MVC 项目实战 - 换肤控制器

73 MVC 项目实战 - 换肤控制器打开关闭

74 MVC 项目实战 - 换肤保存图片

75 MVC 项目实战 - 换肤交互

76 MVVM-progressbar

77 MVVM-MVVM 模式

78 MVVM - 滚动条

79 MVVM - 滚动条事件

80 MVVM - 滚动条渲染




第九部分 模块化开发 共 20 课时

课时 名称

1文件引入与文件依赖

2 seajs 获取与使用

3 seajs - 定义模块

4 seajs - 引用模块

5 seajs - 接口暴漏

6 seajs - 模块与异步模块

7 seajs - 提示框项目

8 seajs - 别名配置与路径配置

9 seajs - 其他配置项

10 seajs - 预加载插件

11 seajs-css 加载插件

12 seajs-hao123 项目实战

13使用 requirejs

14 requirejs - 定义模块

15 requirejs - 接口暴漏

16 requirejs - 根路径配置

17 requirejs-path 路径配置

18 requirejs-map 映射配置

19 requirejs-shim 配置

20 requirejs-css 插件




第十部分 大数据可视化 共 15 课时

课时 名称

1体验 Highchars

2标题模块

3坐标轴模块

4提示框模块

5格式化模板

6图例模块

7署名模块

8数据列模块

9色彩模块

10数据列细节模块

11天气预报案例

12图形分类

13图形组合

14异步绘图

15动态渲染




第十一部分 Backbone 共 60 课时

课时 名称

1体验 backbone

2创建模型

3模型默认属性

4模型构造函数

5模型转化 json 对象

6模型获取属性

7模型设置属性

8模型事件

9模型属性修改判断

10模型删除属性

11模型属性删除验证

12视图创建

13绑定视图元素

14外部修改视图容器元素

15模板方法

16视图渲染方法

17淘宝商品案例

18集合创建

19集合添加模型

20集合转化 json 对象

21获取集合中模型实例化对象

22集合删除模型实例化对象

23集合事件

24集合构造函数

25淘宝商品案例一

26淘宝商品案例二

27集合 forEach 遍历方法

28集合 map 遍历方法方法

29集合 sortBy 排序方法

30集合 groupBy 分组方法

31集合获取最小值 min 方法

32集合获取最大值 max 方法

33淘宝商品模型案例

34淘宝商品集合案例

35集合 filter 过滤方法

36淘宝商品搜索

37集合 some 断言方法

38集合 every 断言方法

39获取集合中模型位置方法

40获取集合长度方法

41 underscore 对模型方法的拓展

42观察者模式

43 event 自定义事件

44命名空间与事件注销

45多对象间事件监听

46多对象间事件注销监听

47路由一

48路由二

49异步获取数据方法

50项目实战 - 项目搭建

51项目实战 - 配置路由

52项目实战 - 视图部分

53项目实战 - 列表集合

54项目实战 - 渲染视图

55项目实战 - 搜索功能

56项目实战 - 加载图片

57项目实战 - 图片分类

58项目实战 - 返回顶部

59项目实战 - 大图页

60项目实战 - 大图页交互




第十二部分 vue 共 40 课时

课时 名称

1试用 vue

2选择器

3数据绑定

4单次插值

5过滤 html 标签

6插值表达式

7插值过滤器

8动态插值

9数据双向绑定

10类的三种绑定方式

11样式的三种绑定方式

12 v-if 条件判断指令

13 v-for 循环指令

14支付宝登录页面

15多选框

16单选框

17下拉框

18 hao123 邮箱

19表单特性

20自定义指令

21京东注册验证

22自定义过滤器

23价格过滤器

24自定义事件

25淘宝支付宝登录一

26淘宝支付宝登录二

27淘宝支付宝登录三

28回车键

29过渡

30 vue 组件一

31 vue 组件二

32创建子页面

33 vue 项目实战 - 自定义路由

34 vue 项目实战 - header 模块

35 vue 项目实战 - 首页按钮

36 vue 项目实战 - 首页广告

37 vue 项目实战 - 列表页组件

38 vue 项目实战 - 列表页交互

39 vue 项目实战 - 商品页组件

40 vue 项目实战 - 搜索交互





第十三部分 angular 共 70 课时

课时 名称

1体验 angular

2 ng-init 初始化变量

3获取应用程序

4控制器定义作用域

5使用事件

6显隐页面

7插值表达式

8插值过滤器

9 filter 过滤器

10日期过滤器

11新闻日期案例

12字符串过滤器

13数字过滤器

14数组过滤器

15自定义过滤器

16脏值检测

17注册系统

18 disabled 指令

19 readonly 指令

20 checked 指令

21 change 指令

22 submit 事件指令

23 run 方法与全局作用域

24 href 动态绑定

25 src 动态绑定

26类的绑定三种方式

27样式的三种绑定方式

28 ng-if 条件判断指令

29 ng-switch 多分支条件判断指令

30 repeat 循环指令

31 include 异步加载模板指令

32自定义指令

33自定义指令作用域

34自定义指令模板作用域

35自定义指令 @作用域修饰符

36自定义指令 = 作用域修饰符

37自定义指令 link 方法

38内置指令的实现一

39内置指令的实现二

40自定义指令 compile 编译方法

41自定义指令 transclude 引入未知模板

42自定义指令 require 引入指令

43定时器服务

44作用域丢失

45活动倒计时

46 http 服务

47 http 服务 get 请求

48 http 服务 post 请求

49自定义服务

50观察者模式封装

51指令路由

52指令路由动态参数与默认路由

53路由参数服务

54 location 服务

55 ui 路由

56 ui 路由参数配置

57 ui 路由多视图渲染

58 ui 路由子路由

59路由事件

60项目实战 - 项目搭建

61项目实战 - 登录判断

62项目实战 - 登录模块

63项目实战 - 首页模块

64项目实战 - 路由配置

65项目实战 - 创建用户

66项目实战 - 用户列表

67项目实战 - 用户详情

68项目实战 - 新闻创建

69项目实战 - 新闻列表

70项目实战 - 新闻详情





第十四部分 前端工程化 共 30 课时

课时 名称

1安装 gulp

2 gulp 中 task 建立任务

3 gulp 中读写文件

4 gulp 文件监听

5 gulp 中 globs 语法

6 gulp 中重命名

7 gulp 中 js 压缩

8 gulp 中 css 压缩

9 gulp 中 html 压缩

10 gulp 中 vue 项目实战

11 gulp 中文件合并

12 gulp 中 js 检测

13 fis3 介绍

14试用 fis3

15 fis3 中 globs 语法

16 fis3 中指令

17 fis3 中压缩 css

18 fis3 中压缩 js

19 fis3 中压缩 png

20 fis3 中精灵图制作

21 fis3 中时间戳

22 fis3 项目实战

23 fis3 中 css 中嵌入资源

24 fis3 中 html 嵌入资源

25 fis3 中 js 嵌入资源

26 fis3 中资源打包合并

27 fis3 中 cmd 规范

28 fis3 中 amd 规范

29 fis3 中 commonjs 规范

30 fis3 中 backbone 项目实战

**** Hidden Message *****

gogery 发表于 2019-4-1 10:39:16

不管你信不信,反正我是信了。支持吾爱编程网!

chenliuyangyan 发表于 2019-4-3 15:20:44

沙发: 爱创课堂—web 前端视频教程
页: [1]
查看完整版本: 爱创课堂—web 前端视频教程