为什么要学习H5前端和微信小程序开发?

H5大前端时代来临,2016中国软件开发白皮书中提到,目前web开发群体5成以上为全栈开发者。预示着随着市场需求的不断变化,市场对开发者逐渐有了更高要求,精通前后端的全栈工程师将成为IT界新一代宠儿。而微信小程序开发,2017年是小程序发布的元年,它的市场广阔,提供了很多就业的机会,成为很多学子追捧的热门技术!所以在2018年小程序越发火爆的今天,拥有这项技术尤为重要,学完之后完全可以独当一面,找到专门的微信小程序开发工程师的工作,超高的学习性价比。值得在这个微信小程序时代分得一份红利!

课程设置:

  • 第一阶段:PhotoShop入门
  • 第二阶段:互联网基本原理和HTML
  • 第三阶段:CSS基础和高级技巧
  • 第四阶段:静态网站制作项目
  • 第五阶段:JavaScript基础
  • 第六阶段:JavaScript DOM编程
  • 第七阶段:jQuery页面特效
  • 第八阶段:JavaScript进阶
  • 第九阶段:HTML5和CSS3
  • 第十阶段:移动web和响应式网页
  • 第十一阶段:服务器知识和PHP入门
  • 第十二阶段:Ajax企业项目实战开发
  • 第十三阶段:JavaScript面向对象
  • 第十四阶段:canvas动画和手机游戏
  • 第十五阶段:Node.js企业项目开发
  • 第十六阶段:ES2016、2017、2018
  • 第十七阶段:微信小程序开发实战

技术要点

  • 图像处理基础知识
  • 分辨率
  • 图像的色彩模式
  • 常用的图像文件格式
  • 工作界面的介绍
  • 文件操作
  • 图像的显示效果
  • 图像和画布尺寸的调整
  • 绘制和编辑选区
  • 选区的操作技巧
  • 渐变工具
  • 图像合成
  • 图层
  • 蒙版
  • 配色
  • 切图
  • 色彩搭配原则

项目案例

  • 图标制作
  • 蔬菜人
  • 水果自由变换
  • 宣传海报

技术要点

  • 互联网基本原理
  • 服务器
  • 浏览器
  • HTTP请求的概念
  • 编程工具介绍
  • HTML简介
  • HTML语义化标签
  • HTML骨架
  • HTML和XHTML的区别
  • 元信息标记meta
  • 设置页面关键字
  • 字符集
  • 关键字
  • 页面描述
  • 相对路径
  • 绝对路径
  • 较不常用HTML标签简介
  • 表单、提交表单action
  • 传送方法method
  • 插入表单对象
  • HTML注释
  • HTML字符实体

项目案例

  • 百度百科布局
  • 表单布局
  • 列表布局
  • 表格布局

技术要点

  • CSS介绍
  • 选择器
  • 文字属性
  • 颜色属性
  • 继承性和层叠性
  • 权重计算
  • 盒模型
  • width、height、padding、border、margin属性
  • 父子嵌套模型
  • 使用Fireworks精确还原设计图
  • loat浮动属性
  • 浮动的意义
  • 清除浮动的方法
  • 浏览器兼容
  • CSS hack
  • background系列属性
  • css精灵图
  • 超级链接的伪类
  • 导航条
  • position定位
  • 定位小技巧
  • DIV+CSS布局

项目案例

  • 网易列表布局
  • 新浪列表布局
  • 北京大学首页布局
  • 当当网tab栏布局
  • 导航栏布局
  • CCTV图表布局
  • 京东底部布局
  • 轮播图布局

技术要点

  • 搜索引擎优化的概念
  • 页面常用SEO技巧
  • 有格调的制作页面
  • iconfont字体图标
  • CSS高级技巧,比如负margin
  • 压线技术
  • 滑动门
  • 列自撑技术
  • 复杂布局网站的学习
  • 通栏banner
  • 大背景
  • 精美企业站赏析、制作
  • 个人作品指导

项目案例

  • 博雅互动首页
  • 博雅互动二级页
  • 博雅互动三级页

技术要点

  • 语句执行顺序
  • 词法结构
  • 标识符
  • 关键字
  • 变量
  • 常量
  • alert语句和console控制台
  • 值和变量
  • 数字、文本、布尔值、null和undefined
  • 表达式和运算符
  • 运算符概述
  • 流程控制
  • 赋值语句
  • 条件判断语句
  • if语句
  • if语句的嵌套
  • switch语句
  • 循环控制语句
  • while语句
  • do…while语句
  • for循环
  • continue语句
  • break语句
  • 函数
  • 参数
  • 返回值
  • 递归
  • 作用域
  • 全局变量
  • 局部变量
  • 内部对象
  • 数组
  • 字符串
  • 递归

项目案例

  • 累加器
  • 累乘器
  • 水仙花数
  • 完美数
  • 约数
  • 质数
  • 哥德巴赫猜想
  • 倒置函数

技术要点

  • 事件与事件处理概述
  • 事件与事件名称
  • 常用事件
  • 事件处理程序的调用
  • DOM事件模型
  • 事件流
  • 事件对象
  • 注册与移除事件
  • 文档对象的常用属性
  • 方法与事件
  • 输出数据
  • 事件的三要素
  • DOM对象
  • DOM概述
  • DOM分层
  • DOM级别
  • DOM对象节点属性
  • 遍历文档树
  • 克隆删除替换
  • 动画基础知识
  • 定时器
  • setInterval和setTimeout
  • 运动效果
  • 实用的动画
  • 制作运动效果案例

项目案例

  • 京东logo移上动效
  • 干蹦轮播图
  • 无缝轮播图
  • tab栏切换
  • 图片加载
  • 封装运动框架

技术要点

  • jQuery对象和DOM对象
  • jQ选择器
  • CSS操作
  • 设置和获取HTML
  • 设置和获取文本和值
  • 事件
  • 加载DOM
  • 事件绑定
  • 合成事件
  • 事件对象的属性
  • 动画、自定义动画方法
  • 动画回调函数
  • 停止动画
  • 其他动画方法
  • jQuery对表单、表格的操作及更多应用
  • 表单应用
  • jQuery插件
  • jQueryUI
  • jQuery ease
  • jQuery mousewheel
  • 其他插件

项目案例

  • 手风琴效果
  • 折叠选项卡
  • tab栏切换
  • 淡入淡出轮播图
  • 突出显示效果
  • animate动画
  • 360依次进场动画
  • 腾讯影院通栏banner呼吸轮播
  • 跑马灯轮播图
  • 间歇模型
  • 三危之轮播

技术要点

  • 命名空间
  • 对象扩展
  • 数组化
  • 主流框架引入的机制——domReady
  • 无冲突处理
  • 语言模块
  • 字符串的扩展与修复
  • 数组的扩展与修复
  • 数值的扩展与修复
  • 函数的扩展与修复
  • 日期的扩展与修复
  • 浏览器嗅探与特征侦测
  • 判定浏览器
  • 事件的支持侦测
  • 样式的支持侦测
  • 类工厂
  • JavaScript对类的支撑
  • 各种类工厂的实现
  • 浏览器内置的寻找元素的方法
  • 属性模块
  • 自定义属性
  • 如何区分固有属性与自定义属性

项目案例

  • 冒泡排序
  • 快速排序
  • underscore
  • 拼图轮播
  • 拖拽效果
  • 侧边栏滑动
  • 百度新闻导航
  • 京东图片放大镜
  • 滚滚屏
  • 京东商城楼层导航
  • 评分功能
  • 返回顶部
  • 二级联动
  • 网易汽车
  • 坚果手机

技术要点

  • HTML5概述
  • HTML5新特性
  • HTML5组织
  • HTML5构成
  • HTML5页面的特征
  • HTML基础
  • HTML5全局属性
  • HTML5其他功能
  • HTML5元素分类
  • HTML5表单
  • 新增的input输入类型
  • HTML5音频与视频
  • HTML5多媒体技术概述
  • CSS3编码规范
  • 了解CSS3新增特性
  • CSS3选择器
  • 属性选择器
  • 结构伪类选择器
  • UI伪类选择器
  • 旋转动画
  • 缩放动画
  • 移动动画
  • 倾斜动画
  • q其他炫酷动画效果

项目案例

  • 360音乐导航
  • 圆环立体轮播图
  • 空间矩阵
  • 视觉差效果
  • 切片轮播
  • 3D轮播
  • 爆炸轮播
  • 3D拼图轮播
  • coverFlow轮播图
  • zepto
  • velocity使用
  • 优酷异型轮播
  • 仿手心输入法官网
  • 仿QQ浏览器官网

技术要点

  • 视口
  • 缩放
  • 分辨率
  • 物理分辨率
  • 设备像素比
  • dppx和dpi
  • meta视口
  • 百分比布局
  • 流式布局
  • CSS3新的流式盒模型
  • 触摸和指针事件
  • 触摸事件
  • 手势事件
  • 其他事件
  • 拖放
  • 滚动层
  • 事件和交互模式
  • 移动端交互综合实战
  • zepto.js
  • jQuery Mobile动端常见框架
  • HTML5速成移动端框架
  • Bootstrap栅格系统
  • 栅格系统原理
  • Bootstrap中的JS交互
  • Bootstrap敏捷开发
  • 调整响应式导航条断点
  • 移动优先

项目案例

  • 手机端拖拽
  • 手指滑动轮播图
  • 原生JS圆周运动
  • 抛掷运动
  • swiper版tab栏切换
  • swiper版滚滚屏
  • 原生版滚滚屏
  • 仿聚划算
  • 仿携程
  • 仿淘宝
  • 仿京东
  • Bootstrap使用

技术要点

  • 后台语言和前台语言的区别
  • 初识PHP
  • PHP语言的优势
  • PHP的新特性
  • PHP的发展趋势
  • PHP的应用领域
  • PHP环境搭建和开发工具
  • PHP语言基础
  • PHP变量
  • PHP运算符
  • PHP的表达式
  • PHP编码规范
  • 流程控制语句
  • 字符串操作
  • PHP数组
  • PHP与Web页面交互
  • 数据库技术概述
  • 增删改查

项目案例

  • 留言本
  • 学员管理系统

技术要点

  • Ajax概述与Ajax初体验
  • Ajax技术介绍
  • XMLHttpRequest对象详解
  • 动态加载和显示数据
  • XMLHttpRequest对象概述
  • 方法
  • 属性
  • 发送请求
  • GET和POST请求
  • 运行周期
  • 使用JSON响应
  • Ajax实用包的封装
  • JSON的解析
  • Underscore模板引擎
  • 模板技术
  • 动态组装页面
  • 电话号码归属地查询
  • 验证码
  • Ajax高级表单验证程序
  • Ajax动态联动菜单
  • 瀑布流

项目案例

  • 网易登录验证
  • 学员管理系统升级版
  • 百家号
  • 聊天
  • 京东评论

技术要点

  • 创建对象
  • 属性的查询和设置
  • 删除属性
  • 检测属性
  • 枚举属性
  • 属性getter和setter
  • 属性的特性
  • 对象的三个属性
  • 序列化对象
  • 类和模块
  • 类和原型
  • 类和构造函数
  • 类的扩充
  • 类和类型
  • 子类
  • 原型
  • 实例化和原型
  • 对象实例化
  • 通过构造器判断对象
  • 继承与原型链
  • 构造函数和原型对象
  • 构造函数
  • 原型对象
  • [[Prototype]]属性
  • 在构造函数中使用原型对象
  • 改变原型对象
  • 内建对象的原型对象

项目案例

  • 打气球小游戏
  • 炫彩小球
  • 角色行走
  • 红绿灯
  • 小球反弹
  • 贪吃蛇
  • 俄罗斯方块
  • 京东商城评论

技术要点

  • Canvas绘图
  • 基本知识
  • 理解canvas坐标系
  • 获取canvas环境上下文
  • 理解路径
  • 路径操作API
  • 绘制线条
  • 绘制矩形
  • 绘制圆弧
  • 绘制贝塞尔曲线
  • 线条属性
  • 线条颜色
  • 填充
  • 绘图状态
  • 图像API
  • canvas绘制图像
  • 坐标变换
  • 绘制文字
  • 游戏原理
  • 制作2D游戏引擎
  • 理解游戏循环
  • 渲染引擎实现
  • 使用引擎构建游戏实例
  • 游戏常用算法

项目案例

  • flappybird
  • 开心消消乐
  • 俄罗斯方块
  • 坦克大战

技术要点

  • Node的特点
  • 异步I/O
  • 事件与回调函数
  • 单线程
  • 跨平台
  • 应用场景
  • I/O密集型
  • CommonJS规范
  • Node的模块实现
  • 路径分析和文件定位
  • 模块编译
  • 核心模块
  • JS核心模块的编译过程
  • 网络编程
  • 构建TCP服务
  • 构建HTTP服务
  • 网络服务与安全
  • MongoDB
  • Express
  • Mongoose
  • socket.io

项目案例

  • 因数计算器
  • mongodb
  • mongoose
  • RESTful风格路由
  • 爱前端问答平台
  • 小型微博系统

技术要点

  • let和const命令
  • 变量解构赋值
  • 字符串的扩展
  • 正则的扩展
  • 数值的扩展
  • 数组的扩展
  • 函数的扩展
  • 对象的扩展
  • Symbol、Set和Map数据结构
  • Proxy
  • Reflect
  • Iterator和for...of循环
  • Generator函数
  • Promise对象
  • 异步操作和Async函数
  • Class
  • Decorator
  • Module
  • 编程风格
  • 读懂规格
  • 二进制数组
  • SIMD

技术要点

  • 微信公众平台介绍
  • 服务器部署
  • 开发接口的认
  • 基础接口
  • 回复消息
  • 高级开发
  • 各接口的调用频次限制
  • 客服接口
  • 二维码开发
  • scroll-view组件
  • button组件
  • radio组件
  • 各组件详解
  • wx.connectSocket
  • wx.request
  • 查看系统信息wx.getSystemInfo
  • 获取位置wx.getLocation
  • 文件上传下载
  • 授权登录
  • 微信支付
  • 自定义组件

项目案例

  • 累加器
  • 调色板
  • 小型微博系统
  • 班级小相册
  • 班级说说系统
  • 摇一摇

学习目标

可以达到高级前端工程师的水平

可掌握的核心能力:

1、能够掌握JavaScript基本语法,运算符,函数的属性或使用方法;

2、掌握DOM的各种操作;

3、掌握JavaScript的高级语法;

4、熟练掌握jQuery制作网页特效的思想和方法;

5、熟练使用和编写jQuery插件;

6、独立完成网站的页面搭建(包括HTML结构、CSS样式、JavaScript特效);

7、熟练使用HTML5&CSS3实现网页特炫效果

8、能够建立客户端服务器交互模型,熟悉网络通信相关概念;

9、熟悉PHP基础语法,能够开发简单的后台接口;

10、能够理解HTTP协议;

11、掌握原生Ajax以及JQ中Ajax请求流程与细节,并掌握常见跨域技巧;

12、能够独立开发基于后台接口的动态网站、Ajax数据交互的项目;

13、掌握常用移动端调试适配方法;

14、掌握移动端整站开发架构搭建、项目开发、性能优化等整站开发能力。

15、了解项目开发的流程;

16、掌握Express的使用;

17、能够使用NodeJS开发后台接口,打通前后端;

18、能够使用Git,SVN版本管理工具管理项目;

19、掌握 ES5 、ES 6 的新特性;

20、熟练使用工程化编程,熟练使用webpack+babel进行模块化开发 ,熟练 Less预处理语言;

21、能够开发微信小程序的应用;

22、能够完全胜任公司项目框架从0到1的搭建;

就业薪资:
8000-15000元/月
查看课程详情
加群交流学习:137503198
加群交流学习:137503198
每期开班限额50名,预报名可优先享受占位特权
  • *真实姓名
  • *QQ号码
  • *联系手机
  • *上课地址