028-86261949

COURSE OUTLINE
2023年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、微信小程序等当前互联网开发最热最新的技术内容

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

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

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

第一阶段 第二阶段 第三阶段 第四阶段 第五阶段
第六阶段 第七阶段 赠送课程

Web编程基础

· HTML5+CSS3基础入门

课程内容

掌握HTML5入门基本内容:文件目录结构、语义化标签、注释、编码规范等; 掌握CSS3的基础入门知识:内联式与外联式、各类选择器;掌握IDE的使用及基本的浏览器调试;

项目实战

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

· HTML5+CSS3进阶

课程内容

选择器的继承与优先级、盒子模型、浮动布局、相对定位、绝对定位等布局方案;能够熟练进行网站布局的实现。

项目实战

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

· Photoshop

课程内容

熟练使用Photoshop进行位图处理:常用工具、图层处理、切图等,并结合商业案例练习。学习后能够独立进行网站切图工作,与设计师无缝协作。

项目实战

项目实战- 企业网站(HTML5+CSS3+Photoshop+PxCook) 企业网站作为一家公司的互联网名片,是每家企业必备。该项目强化学员对HTML+CSS+PS(切图)等知识的综合应用; 作为第一个企业级项目,更侧重体验项目研发协作流程以及培养问题定位能力和调试能力。

Web编程进阶

· JavaScript基础

课程内容

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

项目实战

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

· BOM+DOM编程

课程内容

理解BOM和DOM模型:掌握各浏览器API的使用、熟练操作元素节点、理解网站事件类型与机制

项目实战

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

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

课程内容

熟练掌握JQuery生态下的网站研发:选择器操作、属性与样式操作、DOM节点操作、事件处理、动画特效等; 了解JQuery社区优质框架和插件的使用,培养学员前端库的使用意识和能力。

项目实战

案例实践-楼层跳动&轮播&表单验证 (HTML5+CSS3+jQuery) 体味JQuery对原生JS封装后带来的诸多好处。首次接触社区轮子库(如Swiper)的使用,感受社区生态对项目研发效率上的提升。思维上初现组件化思想的萌芽。

· 版本控制工具GIT&SVN

课程内容

使用GIT/SVN进行代码版本控制。熟练使用各指令操作,授课中渗透分支概念,模拟实际的企业协作场景,图解Git分支协作流程Git Flow。培养学员的版本控制意识及研发协作能力。

项目实战

项目实战 -电子购物网站(HTML5+CSS3+jQuery+UI插件库) 通过本阶段的学习,学员具备熟练操作元素节点及实现动画的能力;熟悉社区库、插件的使用流程;培养良好的代码版本控制意识,并在实战中锻炼学员的协作研发能力。

响应式布局与项目自动化构建部署

· JavaScript进阶

课程内容

掌握最新语言标准下的数组、对象操作方法;深入探索浏览器history历史堆栈;使用正则表达式进行表单验证;DOM事件流解析等。

项目实战

案例实战-天猫品牌墙 / H5动效简历 (HTML5+CSS3+动画框架) 网站品牌墙是网页商铺吸流的利器。本项目实战过程中分析常见动画实现原理,封装动画框架,并结合H5与CSS3标准下的诸多特性,实现天猫品牌墙动效。

· HTML5+CSS3进阶

课程内容

多媒体操作-音频、视频;Web存储技术LocalStorage、SessionStorage、Cookie;LBS地理定位技术;高德地图、百度地图API应用;数据可视化基础:Canvas画布绘图;Echarts进行数据可视化及地图应用开发;CSS3选择器;响应式布局原理及CSS3媒体查询;多列布局、Flex布局;Web字体、渐变、过渡动画等;

项目实战

案例实战-天猫品牌墙 / H5动效简历 (HTML5+CSS3+动画框架) 网站品牌墙是网页商铺吸流的利器。本项目实战过程中分析常见动画实现原理,封装动画框架,并结合H5与CSS3标准下的诸多特性,实现天猫品牌墙动效。

· Bootstrap4

课程内容

响应式布局框架BootStrap的最新版本:基础样式、栅格系统、UI控件和JavaScript插件等;

项目实战

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

· 依赖管理+ CSS预处理(Less+Sass)

课程内容

使用bower管理库依赖,一个命令搞定所有依赖;使用CSS预处理框架Less/Sass,简单代码实现复杂样式功能;

项目实战

项目实战-运动健身移动站 (Webpack+Less+原生JS+移动端布局适配) 完全手写Webpack配置,深入理解前端编译构建阶段的流程与内容。项目涵盖诸多经典交互场景来锻炼学员原生JS的运用能力。CSS布局样式方面更侧重移动端布局、动效、适配能力的锻炼。

· 自动化构建部署

课程内容

手写配置,使用Webpack/Gulp/Grunt进行预编译,实现代码的压缩、合并、混淆,结合各加载器Loader进行编译优化,启动本地服务与接口代理;了解前端自动化构建工具的执行原理;

项目实战

项目实战-运动健身移动站 (Webpack+Less+原生JS+移动端布局适配) 完全手写Webpack配置,深入理解前端编译构建阶段的流程与内容。项目涵盖诸多经典交互场景来锻炼学员原生JS的运用能力。CSS布局样式方面更侧重移动端布局、动效、适配能力的锻炼。

· Mysql

课程内容

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

项目实战

项目实战-运动健身移动站 (Webpack+Less+原生JS+移动端布局适配) 完全手写Webpack配置,深入理解前端编译构建阶段的流程与内容。项目涵盖诸多经典交互场景来锻炼学员原生JS的运用能力。CSS布局样式方面更侧重移动端布局、动效、适配能力的锻炼。

Web高级编程与框架原理

· JavaScript高级编程

课程内容

执行环境与作用域、闭包、面向对象编程、原型与原型链、变量类型检测、浅拷贝与深拷贝、ES6新特性(模板字符、箭头函数、解构赋值、class、模块化等)、异步编程(Axios库、Promise、Async与Await等)

项目实战

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

· jQuery插件开发

课程内容

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

项目实战

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

· 模块化组件开发

课程内容

了解模块化编程的历史和演变;自己动手来实现模块化管理;了解当下流行的AMD和CMD规范,并掌握基于客户端的RequireJS框架。

· WebSocket

课程内容

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

项目实战

案例实战-在线聊天室 (HTML5+CSS3+JS+WebSocket) 打造多人聊天互动的在线聊天室。

· MVVM架构源码解析

课程内容

掌握MVC、MVP和MVVM架构的演变历史,掌握分层开发思想,学习双向绑定原理,实现基于MVVM架构的miniVue框架。

项目实战

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

Vue全家桶与多端项目管理

· VUE2&VUE3

课程内容

掌握Vue技术栈各框架特性:模板语法、生命周期、SFC单文件组件、高阶组件、计算属性、插槽、消息通讯。学习使用Vue-cli脚手架,vue-router路由跳转,vuex数据状态管理。ElementUI库,以及Vant、iView、MintUI移动端框架。

项目实战

项目实战1-外卖商家管理系统 (ElementUI+Koa2+Mysql) 通过最热门的Node+Koa2+Mysql开发模式独立完成网站开发。通过NPM生态圈通过分享和实践编码进行自我提升。成为一名真正的全栈工程师。
项目实战2-超市管理系统 (Element+Koa2+MySql) 熟练使用基于Vue的饿了么前端视图框架ElementUI,高效打造大型复杂应用。使用Koa2打开更前沿的服务端开发模式,使用Mysql关系数据库管理大型并发数据。

· TypeScript

课程内容

掌握静态类型机制、类型注解和类型推断,元组、接口、枚举等注解类型的使用。在编译阶段发现和解决编码问题,使项目的编码质量进一步提升。

项目实战

项目实战-外卖APP、源码旅游App (TS+Vue+Vuex+Vant+axios) 熟练掌握Vue技术栈下的开发,满足企业级研发的能力要求,成为合格的高效、高产前端工程师

· Webpack5项目构建打包工具

课程内容

深入学习Webpack5构建打包配置:文件的压缩、合并、混淆,加载器、babel、代码质量检测ESlint、本地服务、Proxy代理等。

项目实战

项目实战-外卖APP、源码旅游App (TS+Vue+Vuex+Vant+axios) 熟练掌握Vue技术栈下的开发,满足企业级研发的能力要求,成为合格的高效、高产前端工程师

· Uniapp/Taro微信小程序

课程内容

掌握Web跨平台研发理念; 深入微信小程序框架的应用: 掌握uni-app跨平台开发,一套代码编译到iOS、Android、H5、小程序等多端平台; 掌握京东凹凸实验室多端开发框架Taro的使用,打通WebApp、微信/支付宝/百度/字节跳动等小程序的多端编译。

项目实战

项目实战-源码电影小程序/四海香美食小程序 (WXML + WXSS + JS + 豆瓣开放接口API)通过本阶段学习,掌握微信/支付宝/百度/字节跳动小程序的研发,具备熟练进行Web跨平台研发的能力。

React移动混合式开发

· React技术栈

课程内容

掌握React基本语法、JSX、生命周期、React Hooks 钩子函数、React-Router路由处理、Redux数据状态管理。 掌握蚂蚁金服AntDesign库的使用。

项目实战

项目实战-源码房产App、源码电影App (TS+React+Redux+Webpack+Antd-mobile+Koa2+MongoDB) 熟练掌握React技术栈项目架构下的业务研发。配合着行业主流UI库AntDesign,高效进行应用布局、样式及交互的功能实现。

· Flutter/React Native

课程内容

Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面(原生应用)。 Flutter可以与现有的代码一起工作。在全世界,Flutter正在被越来越多的开发者和组织使用,并且Flutter是完全免费、开源的。 掌握ReactNative技术栈,进行跨平台应用开发:构建部署流程、文本输入、滚动视图、各桥接控件等;

项目实战

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

就业与服务

· 就业指导

课程内容

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

· 面试直通车

课程内容

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

· 售后服务

课程内容

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

赠送课程

· HTML+CSS快速入门

课程内容

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

项目实战

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

· Canvas实战

课程内容

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

项目实战

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

· Vue3+TS+AntDesign项目实战

课程内容

继Vue3发布后的前沿应用技术栈应用。课程中可以体验使用Vue3进行业务编码的诸多新特性:CompositionAPI、Suspense、Fragments等;AntD作为UI层框架,首先提供对Vue3的支持,Vue3+TypeScript+AntD势必成为最新的主流技术栈应用架构。

项目实战

项目实战-运动健身社区 (Vue3+TypeScript+AntDesign)

· Vue3源码解析系列课程

课程内容

2020年9月Vue团队发布3.0正式版,随后国内各企业陆续进行技术栈升级。本系列课程除具体源码的讲解外,还更加侧重于功能背后的设计思想、知识运用的讲解,帮助同学们深入理解工作中经常用到的框架特性。随着学习的不断深入,你将领略到Vue3框架背后的组件化系统、响应式原理、编译过程、常用特性甚至Vue生态中Vue Router和Vuex的实现原理等各领域独有的技术魅力,感受前端学科的技术底蕴。

项目实战

系列课程配套实战

· React进阶实战项目

课程内容

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

项目实战

项目实战 - 智慧社区App (React+React Router+Redux+Webpack+AmazeUI) 熟练掌握React全家桶项目架构

· React+Dva+AntDesign新闻发布系统

课程内容

Dva可以有效提高React技术栈项目的研发能效。Dva通过 reducers, effects 和 subscriptions 组织 model,简化 redux 和 redux-saga 引入的概念。

项目实战

项目实战-新闻发布系统 (Dva+React+AntD)

· 疫情大数据可视化动态分布

课程内容

掌握AntV数据可视化方案中G2图形语法的使用,相比于Echarts、HighCharts这类配置式图表库,G2图形语法面向图表的生成过程,点、线结合着坐标系的映射逐步地完成图表渲染,具有更强的灵活性、可定制性以及元素事件的支持性。

项目实战

(AntV-G2+大数据服务)

· Angular

课程内容

掌握Angular环境搭建、知识预备、项目目录结构分析。 掌握Angular 创建组件 、声明属性 、数据绑定、属性 、条件判断、事件系统、 表单处理、指令等诸多框架特性。

项目实战

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

· Expres(Node.js)+Mongodb

课程内容

掌握node.js环境的搭建及基于服务端模块化编程;了解node.js基础知识、特性。掌握NPM生态圈搭建及使用。掌握NodeJS作用域、事件编程、异步编程及文件操作。掌握HTTP协议、客户端数据传输方式;熟练使用网页模板模板技术来简化开发。掌握Express路由及使用请求、响应对象完成客户端及服务端的交互;了解Express中间件的使用。了解分布式文件存储的数据库MongoDB;让大家学会搭建和使用属于前端开发者自己的数据库,成为一个真正的全栈工程师。

项目实战

项目实战 ——学校食堂安全管理系统 (AntDesign+NodeJS+MongoDB) 通过最热门的Node+Express +MongoDB开发模式独立完成网站开发。通过NPM生态圈通过分享和借鉴代码进行自我提升。致力于成为一名真正的全栈工程师。

· PHP

课程内容

快速构建PHP运行环境,熟悉PHP语法、文件操作流程以及对mysql数据库的连接与操作

项目实战

项目实战-响应式金融借贷平台(Bootstrap4+Sass+PHP+Mysql) 使用Bootstrap4进行响应式布局开发;使用Git进行版本控制,模拟企业真实协作场景。使用CSS预处理技术实现样式重用和扩展。锻炼工程构建和高效布局能力。