028-86261949

COURSE OUTLINE
2020年H5精英班课程大纲
H5
课程简介

源码时代H5学科,历经多年行业沉淀,推出H5混合式开发课程。旨在让每一位学员, 能在这个发展迅猛的互联网时代,学会最前沿的前端开发技术,高薪起航。如今的大前端时代,前端开发者不光可以使用Node.JS技术涉及后端领域。 同时,在当初一个应用我们还在纠结选择Android还是IOS开发的时候,Web前端一套代码就实现了多种平台的兼容。

适学

人群

1.热爱互联网,追求极致互联网体验,想从事 网页开发、Web前端开发的学员;

2.原从事后IT台开发,想完美转型全栈开发的工程师;

3.没有计算机基础,愿意从事IT开发,改变生活现状,改变命运的学员;

4.开发人员转型HTML5移动开发的学员。

课程

特色

1、课程知识专注:完全专注于前端知识, 全面、深入的讲解HTML5、CSS3、JavaScript、jQuery等内容,将这些核心知识学到极致。

2、紧跟时代潮流:课程在全面渗入传统互联领物域的同时,新课程直指当下最火的移动互联,涉及全栈和移动混合式开发,让学员成为大前端时代的佼佼者。

3、项目驱动教学:引导式项目教学,每一个阶段项目都取自行业经典,让学员具备编写互联网系统的前端页面、交互代码、后台通信代码的能力。在前端领域无所不能。

4、高薪课程体系:高阶课程内容全面覆盖响应式布局、Bootstrap、AngularJS、Node.js 、Mongodb、Less、Sass、ReactJS、ReactNative、微信小程序等当前互联网开发最热、最新、最炫、最酷的技术内容。不仅有PC端,还包括移动端的开发。不仅要做前端的交互,还要用JS做后台

培训周期
5个月(部分校区可能会根据实际情况有所调整,详情可询咨询老师)
培训方式:全日制面授,每周5天上课,上三天课休息一天、上两天课自习一天的上课方式(实际培训时间可能
因法定节假日等因素发生变化),
早9:00-晚20:00

源码时代所有校区、学科最新开班及学费查看

课程内容
全栈型H5前端工程师课程体系

Web网页基础

· HTML5+CSS3基础入门

课程内容

熟悉HTML5入门基本内容(代码文件、基本结构、注释、编程问题、规范、基本标签等);掌握CSS3的基础入门知识;

项目实战

京东登录注册案例 (HTML+CSS) 登录界面指的是需要提供帐号密码验证的界面,有控制用户权限、记录用户行为,保护操作安全的作用。登录界面是所有在线系统的入口。

·HTML5+CSS3基础进阶

课程内容

掌握继承与优先级;选择器、盒子模型、布局样式等使用方法;能够进行合理的网页布局。

项目实战

项目实战- 个人博客 (HTML5+CSS3) 个人博客是学员涉足前端领域的第一个项目,运用前端基础知识,培养项目思维,在入学2周内搭建属于自己的个人信息分享平台。

·Photoshop

课程内容

采用商业案例来学习Photoshop使用,掌握Photoshop基本操作;能够独立的进行网页切图。

项目实战

项目实战- 企业网站(HTML5+CSS3+Photoshop+PxCook) 企业网站作为一家公司的互联网名片,是每家企业必备。强化学员对HTML+CSS+PS(切图)、各种布局等初期所学全部知识的综合应用,由于是第一个企业级项目,着重熟悉项目开发流程和培养使用HTML+CSS遇到问题时的分析和调试能力。

Web编程基础

· JavaScript基础 

课程内容

了解最前沿JavaScript知识。掌握JS基础基本语法和基本语句以及ES6&ES7新特性,培养编程逻辑思维,实现网页的动态交互。

项目实战

案例实践-H5音乐播放器、H5小游戏(HTML+CSS+Javascript)通过游戏应用开发,培养学员开发兴趣和参与感,强化Javascript基础、DOM操作和事件机制在实际场景的应用

· BOM+DOM编程

课程内容

认识和了解BOM和DOM模型;掌握window、location、history、navigator、document、 Form、Table等对象的使用;掌握事件处理和DOM节点。

项目实战

案例实践-H5音乐播放器、H5小游戏(HTML+CSS+Javascript)通过游戏应用开发,培养学员开发兴趣和参与感,强化Javascript基础、DOM操作和事件机制在实际场景的应用

· JavaScript交互及动画效果

课程内容

掌握运动框架的封装(匀速运动 缓冲运动 多物体运动) 分享到案例 右侧边栏滚动案例 透明度运动 轮播效果案例。

项目实战

企业网站交互进阶(HTML5+CSS3+JavaScript) 掌握动画原理,利用原生JS技术编写动画交互效果,实现企业站的轮播,选项卡,楼层跳转等常规功能

· jQuery+交互及动画+jQuery优质插件

课程内容

认识jQuery;熟悉选择器;属性与样式;jQuery基本DOM操作;事件处理;文档处理;数组和对象操作。学会使用jQuery和JavaScript和DOM编程的动画效果制作。掌握jQuery生态圈的流行框架使用;培养学员利用前端工具解决开发过程中问题的能力。

项目实战

案例实践-楼层跳动&轮播&表单验证 (HTML5+CSS3+jQuery) jQuery的流行得益于他庞大的插件生态圈,掌握jQuery插件的使用,将是前端开发者网站开发的利器。

· 版本控制工具SVN&GIT

课程内容

掌握SVN/GIT版本控制工具来维护项目的整个蓝图;熟练使用github来管理云端代码仓库,快速项目组成员多人协作。

项目实战

作。 项目实战 -电子购物网站(HTML5+CSS3+jQuery+EasyUI) 通过本阶段的学习,具备常见动画需求的开发能力;常用插件的使用及开发;逐步培养良好的编程习惯,强化企业项目开发流程,培养团队协作能力。

· jQuery EasyUI

课程内容

熟悉jQueryEasyUI框架环境搭建,掌握EasyUI常用插件,使用EasyUI快速搭建后台

项目实战

作。 项目实战 -电子购物网站(HTML5+CSS3+jQuery+EasyUI) 通过本阶段的学习,具备常见动画需求的开发能力;常用插件的使用及开发;逐步培养良好的编程习惯,强化企业项目开发流程,培养团队协作能力。

响应式网站与项目自动化开发

· HTML5、CSS3高级进阶

课程内容

掌握HTML5时代多媒体、Web存储技术及基于浏览器的(LBS)地理定位技术, 熟悉基于高德地图、百度地图等地图API的应用开发;介绍了H5图形技术SVG和Canvas;能够动手编写图形报表和使用百度echarts地图API的能力。掌握CSS3新选择器,响应式原理及CSS3媒体查询, 移动端流行的伸缩布局,Web字体、渐变、过渡动画等技术;使用动画库实现基于网页的酷炫动画效果。

项目实战

项目实战 -H5动效简历/H5原生移动商城 (HTML5+CSS3+Swiper+动画框架) H5动效简历是每一个H5er的个性化名片, H5原生移动商城和适配调试是面向前端是时代的必须技术。

· Bootstrap4

课程内容

掌握来自Twitter工程师开发的目前流行度很高的前端响应式框架,包括内置样式、组件和JavaScript插件;掌握基于Bootstrap打造的电影主题页设计。

项目实战

项目实战 -电影主题页设计 (HTML5+CSS3+Bootstrap) 快速打造能够适应多端的信息展示网站

· 前端依赖管理+CSS预处理语言(Less+Sass)

课程内容

熟练使用bower来管理前端库,达到一个命令搞定所有项目依赖。掌握基于CSS的预处理框架Less/Sass,以最简单的代码实现复杂样式;目前主流的前端框架都是基于css预处理语言搭建,学会后具备Bootstrap等框架的阅读和使用能力。

项目实战

项目实战 -响应式股票交易平台(Bootstrap4+Sass+PHP+Mysql+GIT) 通过本阶段学习,通过Bootstrap等框架具备响应式开发能力;并使用多种版本控制工具,进行企业项目的迭代;同时使用预处理框架完成样式重用和扩展。具备高效快速开发企业项目的能力

· Grunt/Gulp自动化构建工具

课程内容

了解前端自动化构建工具的原理;掌握基于Node平台的Grunt和Gulp两大自动化构建工具。

项目实战

项目实战 -响应式股票交易平台(Bootstrap4+Sass+PHP+Mysql+GIT) 通过本阶段学习,通过Bootstrap等框架具备响应式开发能力;并使用多种版本控制工具,进行企业项目的迭代;同时使用预处理框架完成样式重用和扩展。具备高效快速开发企业项目的能力

· Mysql

课程内容

了解Mysql背景,快速搭建Mysql环境,熟悉Sql基础语法,实现对数据的CRUD操作。

项目实战

项目实战 -响应式股票交易平台(Bootstrap4+Sass+PHP+Mysql+GIT) 通过本阶段学习,通过Bootstrap等框架具备响应式开发能力;并使用多种版本控制工具,进行企业项目的迭代;同时使用预处理框架完成样式重用和扩展。具备高效快速开发企业项目的能力

Web高级编程与框架原理

· JavaScript高级编程

课程内容

掌握jJavaScript面向对象思想;原型设计原理及使用。了解JavaScript程序的编译原理;掌握递归、惰性载入、匿名、闭包及回调等高级函数的使用。掌握ES6前沿新特性

项目实战

案例实践-jQuery对联插件、jQuery表单验证插件 (HTML5+CSS3+ES6) 能够通过面向对象思想开发jQuery插件,学习实践JS设计模式,具备初级JS框架的编写能力。

· jQuery插件开发

课程内容

学习插件开发模式,并自己动手实现动态表格查询和表单验证等插件。

项目实战

案例实践-jQuery对联插件、jQuery表单验证插件 (HTML5+CSS3+ES6) 能够通过面向对象思想开发jQuery插件,学习实践JS设计模式,具备初级JS框架的编写能力。

· NodeJS

课程内容

掌握Node服务端编程技术,Expres搭建服务器,基于Express框架编写后端代码,实现前端和后端全栈开发。

项目实战

案例实战 -在线聊天室 (HTML5+CSS3+JS+WebSocket) 快速打造能够多人在线聊天的聊天室案例。

· WebSocket

课程内容

掌握掌握HTTP协议、客户端数据传输方式,掌握WebSocket 在HTML5 领域的应用场景,用于实现客户端和服务器的长链接

项目实战

案例实战 -在线聊天室 (HTML5+CSS3+JS+WebSocket) 快速打造能够多人在线聊天的聊天室案例。

· MVVM架构源码解析

课程内容

掌握MVC、MVP和MVVM架构的演变历史,掌握分层开发的思想,了解双向绑定原理,实现基于面向对象方式实现一个基于MVVM架构的minVue框架。。

项目实战

案例实践-迷你MVC框架、迷你Vue框架 (面向对象编程) 动手打造第一款属于自己的前端主流框架。

Vue全家桶与多端项目管理

· VUE2,VUE3

课程内容

掌握Vue2框架的环境搭建,指令,表达式,计算属性、侦听器、生命周期和组件开发,掌握主流的VUE2组件高阶、消息通讯,熟悉Vant、iView、MintUI移动端框架,使用Vue-cli来搭建工程和开发Vue项目。

项目实战

项目实战 -大型超市管理系统、外卖后台管理系统 (ElementUI+Koa2+Mysql+GIT) 通过最热门的Node+Koa2+Mysql开发模式独立完成网站开发。通过NPM生态圈通过分享和实践编码进行自我提升。成为一名真正的全栈工程师。

· ElementUI+Koa2(Node.js)+Mysql

课程内容

熟练使用基于Vue2的饿了么前端视图框架ElementUI,高效打造大型复杂的用户界面。Koa是Express 原班人马打造 更小、更健壮、更富有表现力Node框架,使用Koa2打开更前沿的后台开发模式,使用甲骨文公司的Mysql关系数据库来管理更为大型并发的数据。

项目实战

项目实战 -大型超市管理系统、外卖后台管理系统 (ElementUI+Koa2+Mysql+GIT) 通过最热门的Node+Koa2+Mysql开发模式独立完成网站开发。通过NPM生态圈通过分享和实践编码进行自我提升。成为一名真正的全栈工程师。

· TypeScript

课程内容

TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。

项目实战

项目实战 - 外卖APP、源码音乐App (TS+Vue+Vuex+Vant+axios+GIT) 熟练掌握Vue全家桶项目架构。

· webpack模块加载器&打包工具

课程内容

掌握最前沿模块化打包工具,形成组件化开发思想,极大简化项目开发的成本。

项目实战

项目实战 - 外卖APP、源码音乐App (TS+Vue+Vuex+Vant+axios+GIT) 熟练掌握Vue全家桶项目架构。

· uniapp/Taro微信小程序

课程内容

微信小程序作为引爆H5时代的标识技术,通过学习了解视图层、逻辑层相关知识,深入小程序框架、组件的使用和支付接口等。 uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架,开发者编写一套代码,可编译到iOS、Android、H5、小程序等多个平台。 Taro是来自京东凹凸实验室的多端统一开发框架Taro,可以让你使用一套代码打通WebApp、微信小程序、支付宝小程序、百度智能小程序、字节跳动小程序等。

项目实战

项目实战 -源码电影小程序、四海香美食小程序 (uniApp + 开放接口API)通过本阶段学习,具备微信、支付宝小程序、百度智能小程序和字节跳动小程序的开发能力。

React移动混合式开发

· React

课程内容

掌握来自Facebook工程师开发的流行前端框架-ReactJS;熟练使用ReactJS基本语法、声明周期、React-Router及基于ES6的React组件开发;掌握React Redux架构在实际项目中的应用。掌握基于ReactJS衍生出来的本地化跨平台框架。

项目实战

ERP、CRM 项目实战 - 源码房产App、源码电影App (TS+React+Redux+Webpack+Antd-mobile+GIT) 熟练掌握React全家桶项目架构。

· React Native/Flutter

课程内容

熟练搭建ReactNative环境、掌握本地化布局和常见组件。 Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面(原生应用)。 Flutter可以与现有的代码一起工作。在全世界,Flutter正在被越来越多的开发者和组织使用,并且Flutter是完全免费、开源的。

项目实战

ERP、CRM 项目实战 -源码生活APP (ReactNative/Flutter+AntD+DVA+高德地图API+GIT) 通过本阶段学习,具备与移动端开发人员的合作完成低成本、高性能、高健壮的App应用的能力。

就业与服务

· 就业指导

课程内容

企业通用面试技巧、知识点面试技巧、模拟面试、项目面试技巧、语言表达练习、互面总结、总结和复习面试题。

· 面试直通车

课程内容

面试经验交流、面试技术解惑、面试项目跟踪

· 售后服务

课程内容

随时随地为同学们提供全方位工作问题解决方案!源码时代是独家具有售后的服务机构!

赠送课程

· Canvas

课程内容

掌握HTML5绘图API-Canvas,熟练绘制直线、矩形,圆型等图案,能够手动绘制折线图、饼状图、柱状图等常见报表图形,能够实现H5小游戏。

项目实战

项目实战 - 报表&飞翔小鸟游戏 (HTML5+CSS3+Canvas) 熟练掌握手写H5报表和H5小游戏

·HTML+CSS入门

课程内容

掌握HTML、CSS的基础语法,并能够把布局思想和浮动定位熟练引用到项目中实践到项目。

项目实战

项目实战 - 品一思格城官网 (HTML5+CSS3+Canvas) 熟练掌握品一思格城官网设计和前端代码规范

·Angular1.X

课程内容

掌握emmet语法,angular简介,angular脚手架,angular入门,angular架构,angular模块,angular作用域,angular控制器,angular常见&自定义指令。

项目实战

项目实战 -源码商城App (TypeScript+Angular7+Webpack+Ionic) 熟练使用Angular6框架完成大型项目开发,并配合自动化构建工具及打包工具简化开发成本;完全具备中、高级前端工程师的素养和要求。

·Angular7.X

课程内容

掌握Angular7.x环境搭建、知识预备、项目目录结构分析 Angular6x 创建组件 、声明属性 、Angular6绑定数据、Angular6 绑定属性 、Angular6条件判断、Angular6事件、 Angular6表单处理、Angular6双向数据绑定。

项目实战

项目实战 -源码商城App (TypeScript+Angular7+Webpack+Ionic) 熟练使用Angular6框架完成大型项目开发,并配合自动化构建工具及打包工具简化开发成本;完全具备中、高级前端工程师的素养和要求。

·AJAX+Expres(Node.js)+Mongodb

课程内容

掌握HTML、CSS的基础语法,并能够把布局思想和浮动定位熟练引用到项目中实践到项目。。

项目实战

项目实战 - 品一思格城官网 (HTML5+CSS3+Canvas) 熟练掌握品一思格城官网设计和前端代码规范

·NodeJS

课程内容

掌握Node服务端编程技术,Expres搭建服务器,基于Express框架编写后端代码,实现前端和后端全栈开发

项目实战

案例实战 -NodeJS爬虫实战 (NodeJS+Express) 快速打造Node爬虫案例。

.PHP

课程内容

了解PHP历史,快速搭建PHP运行环境,熟悉PHP语法,文件加载,使用PHP操作mysql数据库。

项目实战

项目实战 -响应式金融借贷平台(Bootstrap4+Sass+PHP+Mysql) 通过本阶段学习,通过Bootstrap等框架具备响应式开发能力;并使用多种版本控制工具,进行企业项目的迭代;同时使用预处理框架完成样式重用和扩展。具备高效快速开发企业项目的能力。

.React

课程内容

掌握来自Facebook工程师开发的流行前端框架-ReactJs;熟练使用ReactJs基本语法、声明周期、React-Router及基于ES6的React组件开发;掌握React Redux架构在实际项目中的应用。掌握基于ReactJS衍生出来的本地化跨平台框架。

项目实战

项目实战 - 源码房产App (React+React Router+Redux+Webpack+AmazeUI) 熟练掌握React全家桶项目架构