HTML5 就业班课程


一、课程特点及优势

      H5之所以能引发如此广泛的效应,根本在于它不再只是一种标记语言,它为下一代互联网提供了全新的框架和平台,包括提供免插件的音视频、图像动画、本体存储以及更多酷炫而且重要的功能,并使这些应用标准化和开放化,从而使互联网也能够轻松实现类似桌面的应用体验。   
      H5的最显著的优势在于跨平台性,用H5搭建的站点与应用可以兼容PC端与移动端、Windows与Linux、安卓与IOS。它可以轻易地移植到各种不同的开放平台、应用平台上,打破各自为政的局面。这种强大的兼容性可以显著地降低开发与运营成本,可以让企业特别是创业者获得更多的发展机遇。

二、课程适合的人群
· 有编程开发经验,准备从事Web前端开发的工程师。
· 有编程兴趣、有意向从事软件开发的人员。
· 应用电子技术、通信工程、信息工程、计算机应用、物联网等相关专业应届毕业生。

三、职业规划目标

Web前端开发工程师
全栈开发工程师
Node.js开发工程师


四、课程大纲
第一阶段 前端基础(课程时长:两周)

  了解什么是HTML5及HTML5可以做哪些事情;熟悉web前端的开发工具及流程; 熟悉常见的HTML标签及属性; 熟悉常见的各种CSS样式;掌握photoshop在前端开发的简单实用;熟悉DIV+CSS盒子模型深入理解BFC

序号 课程阶段 课程内容
1 HTML5简介 1.HTML的历史及出现
2.HTML的发展趋势
3.Web前端的开发者工具
2 HTML入门 1.创建HTML文档
2.HTML标签
3.标签属性
4.Meta标签
3 CSS入门
1.CSS样式表述
2.CSS样式基本使用
3.CSS选择器
4

HTML常用标签

1.HTML基础标签
2.图像超链接
3.清单列表
4.Table标签
5 前端UI基础
1.网页规范
2.css重制样式表
3.photoshop的简单使用
4.使用PS对源文件标注和切图
6 DIV和CSS布局 1.无意义的HTML元素
2.W3C盒子模型
3.SIV和CSS对页面的优势
4.页面布局CSS相关属性
5.BFC布局规则
6.盒子区块的定位
7.使用盒子模型的浮动布局
7

阶段项目

仿”SOHOchina”官网
http://www.sohochina.com/

第二阶段 前端进阶 (课程时长:一个月)
  能够使用JavaScript进行基础编程; 熟悉DOM编程; 熟练掌握JQuery框架的使用
序号 课程阶段 课程内容
1 JavaScript 入门 1.javascript基础语法(标签,注释)
2.变量和基本数据类型,数据类型转换
3.运算符,语句(语句块,with,条件判断语句,循环语句)
4.函数(声明,执行,作用域,变量提前,参数,arguments,return,递归)字符串(创建,属性,方法),Math对象属性方法
5.Date对象属性和方法(GMT,UTC,时间戳,日期的处理)
6.setInterval,setTimeout使用
2 JavaScript 基础 1.复合类型数组(概念,创建,特性,属性,方法,多位数组)
2.值类型与引用类型的区别[内存,深浅拷贝]
3.对象的特性基础(创建,属性增删查改,for...in)
4.排序算法(选择,冒泡,快排)
3 DOM编程

1.BOM(window,location,navigator,history)
2.DOM文档对象模型简介
3.DOM结构(节点操作方法)
4.data-*属性
5.NodeList
6.事件绑定与时间分类,this关键字
7.Event对象(冒泡/捕获)

4 javascript 进阶 1.面向对象编程
2.stack栈,heap堆
3.js 垃圾回收机制
4.线程与任务队列
5.闭包,封装,继承
6.工厂模式,构造函数模式,原型模式
7.正则表达式
8.cookie,webstorage特点操作
9.webworker多线程
5 JQuery框架 1.jquery对象JQuery(document).ready()
2.选择器,jquery对象方法
3.循环及链式操作,jq对象与原生对象转换
4.JQuery对象筛选,过滤,查找,事件方法
5.元素添加,删除,复制,替换
6.事件方法及事件委托
7.动画(基本动画,自定义动画,动画队列)
8.on的高级用法,事件命名空间
9.、JQuery插件的使用及其编写(jquery-ui,jquery-validate)
6 阶段案例 js入门案例
[案例]封装计算平方与立方的方法
[案例]封装获取某个范围内随机数的方法
[案例]封装递归实现斐波那契额数列
js进阶案例
[案例]随机点名程序(简单版)
[案例] 有一个从小到大排序的数组。现输入一个数,要求按原来的规律将它插入数组中,并打印出新的数组
[案例]注册页面的简单数据校验,并在页面上显示输入的内容
[案例] 秒杀活动倒计时
DOM编程案例
[案例]页面换肤
[案例]制作跟随鼠标移动拖拽效果
[案例]利用事件监听、冒泡原理实现可编辑table表格
[案例]表单提交前数据验证
[案例]编写函数封装,解决addEventListener和attachEvent
[案例]模拟QQ发送消息快捷方式
[案例]无缝轮播图
javascript进阶案例
[案例]面向对象飞机大战
[案例]添加购物车cookie
[案例]webstorage实现OA后台页面
[案例]正则实现表单的验证
jQuery案例
[案例]购物车飞入效果
[案例]放大镜
[案例]城市列表
[案例]多动画无缝轮播图
[案例]无缝轮播图插件编写

第三阶段 HTML5进阶(课程时长:五周)
  能够熟练掌握HTTP协议与AJAX技术; 熟练掌握JQuery插件的使用及其编写;JavaScript高级特性以及ES6新语法;熟悉HTML5及CCS3新特性; 使用media query针对浏览器调整布局; 掌握CSS 预处理语言LESS,SASS,stylus; 熟悉Bootstrap CSS,组件,插件的使用
序号 课程阶段 课程内容
1

Ajax/JSONP

1.初识AJAX
2.AJAX事件原理和封装
3.对象的创建和兼容处理
4.读取及设置Http头部
5.open方法和表单
6.发送JSON数据
7.发送文件数据及上传进度检测
8.瀑布流布局原理
9.跨域AJAX限制问题
10.jQuery的Ajax方法
11.JSONP获取json数据
12.[案例]豆瓣电影,百度搜索框

2

HTML5新特性

1.Canvas绘图 与 SVG
2.音视频支持
3.GeoLocation
4.WebGL
5.WebSocket
6.本地存储
7.拖放API
8.表单验证
3

CSS3新特性

1.属性选择器伪类选择器及伪元素
2.CSS3新增样式属性
3.文字与字体相关样式
4.盒相关样式背景和边框相关样式
5.CSS3变形处理
6.CSS3中动画功能
7.贝塞尔曲线
4

CSS3布局相关样式

1.flex布局
2.stick footer
5

响应式布局media query

定制不同的分辨率和设备

6 Bootstrap、zepto 1. 掌握CSS 预处理语言less sass stylus
2. 安装和使用
3. 基本用法 :变量 计算功能 嵌套
4. 代码重用 :继承 Mixin 函数 插入文件
5. 高级用法: 条件语句 循环语句 自定义函数
6. Bootstrap CSS,组件,插件的使用自定义 bootstrap
7.zepto实现触屏焦点图,触屏tab切换,等常用效果
7 阶段项目 模仿DD打车
京东手机商城首页

第四阶段 HTML5提高(课程时长:一个月)
  掌握两种MVVM框架进行网站的开发Vue.js和React.js/Angularjs; 熟悉与node.js相关的服务器开发技术; 熟悉webpack/gulp/grunt等构建工具;掌握ESlintQA工具,避免低级错误和统一代码风格; 熟悉git/svn等代码管理工具;微信小程序开发;全栈安全。
序号 课程主题 课程内容说明 课程目标
1 Node.JS开发后台程序 1.node.js安装,环境变量配置,命令行工具,包管理工具npm,package.json配置,模块封装及require引包机制。
2.Node.js简介及三大特点原理。
3.Node.js的元素api以及相关核心模块,http模块,fs模块,querystring模块,url模块,path模块,net模块等。
4.熟练使用Express,认知express的路由能力,静态服务能力,理解中间件与路由之间的关系,了解里面提供的app.use,app.get等方法。
5.安装mongodb数据库以及相关配置,熟悉使用命令行工具,了解sql数据库与no-sql数据库。
6.学习Mongodb模块的使用,熟练运用模块提供的api以及根据业务逻辑需要封装dao层。
7.认识session与cookie,结合所学知识,如ajax等,完成node web开发。
8.学习mongoose模块,认知schema与对象,学会创建模型,以及模块提供的api使用或者封装自己的静态方法,内嵌文档等。
9.Node.js进阶,了解websocket协议,学会socket.io的应用,熟悉相关api,如emit,on等。
2 git/svn操作 1. git的常见操作
2. svn的常见操作
3 webpack打包工具的使用 1.webpack安装与使用
2.Entry File
3.loader的功能和使用
4.常用的webpack插件
5.热加载技术
6.环境声明
7.代码分割
8.webpack chunk
9.暴露全局变量
10.Webpack router
4 React Native开发手机app 1.React.js的使用
2.react router 搭建
3.react native 安装环境配置
4.react native - cil 的使用
5.网易新闻客户端
5 Vue开发手机app 1.Vue 2.0 安装与使用
2.vue基础
3.生命周期
4.模版语法
5.单文件组件
6.动画效果
7.vue-router
8.Axios
9.vue-cli搭建与使用
10.饿了么webapp
6 微信公众号开发及微信接口开发
7 阶段项目
8 学生毕业大项目开发


五、各阶段项目示例图




1.小说阅读器




2.react Native开发项目(网易新闻客户端)




3.仿“支付宝”官网




4.门户网站开发




5.模仿DD打车项目




6.node阶段项目




7.饿了吗/vue2.0




8.大型商城app