H5前端培训

导读 武汉源码时代Web前端学习路线图是最新Web前端详细课程大纲,让学员学到最新最实用的高薪前端技术。
400-888-4851 114
JAVA H5前端培训 UI设计培训 产品经理培训 软件测试培训 新媒体+短视频培训 全栈培训 Python+人工智能培训 PHP培训 大数据培训

课程详情

2022-12-20
武汉源码时代推出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
课程内容
  第1阶段

  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预处理技术实现样式重用和扩展。锻炼工程构建和高效布局能力。
上一篇: JAVA精英班 下一篇: UI设计培训

推荐课程

查看全部课程
武汉源码时代

武汉源码时代

光谷校区

查看全部校区 进入官方主页