成都Web前端开发工程师入门所需的技能-龙兵获客小程序

成都Web前端开发工程师入门所需的技能

龙兵科技 2017-03-03

成都Web前端开发工程师，主要职责是利用HTML、XHTML、CSS、JAVAScript、FLASH等各种Web前端技术进行客户端产品的开发。完成客户端程序（也就是浏览器端）的开发，开发JavaScript以及Flash模块，同时结合后台开发技术模拟整体效果，进行丰富互联网的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项目实战

上一篇：成都网站建设设计进本步骤

下一篇：2017爱奇艺效果推广中国行-成都站