2017年最新版前端与移动开发学科课程大纲

目前课程版本:3.0   升级时间:2017.03.01   查看详细

前端与移动开发课程设计理念

  •  

    夯实基本技能

    了解网页的结构组成;分析页面的布局;会使用前端常用工具如:Photoshop,cutterman,Sublime, WebStorm;能够熟练的将PSD图转为HTML静态页面,并且处理浏览器常用的兼容问题;同时能够使用JavaScript和Jquery完成页面常见特效;能够独立制作企业官网,让小白初入前端职场

  •  

    与服务器端交互

    能够理解客户端/服务器、动态网站以及网络通信等前后端开发相关概念,并且能够熟悉后台编程语言PHP的基础语法,能够开发简单的动态页面和后台接口,从而能够快速适应与后台协作开发的工作场景;此外,对Ajax相关概念进行了系统分析并通过实际案例强化实践能力,最后通过综合项目整合前面所有的知识点,结合实际的工作场景进行实战训练,使学员能够完成企业的后台管理功能

  •  

    移动端开发技能

    让学员全面掌握HTML5、CSS3、Viewport、rem、、Bootstrap主流适配方案、移动端布局、媒体查询,设备尺寸划分、主流响应式布局框架、touch事件、手势封装以及移动端常用框架iScroll,swiper,fastclick,zepto,framework7。总之涵盖企业常用移动端页面在内,让学员学完之后能独立制作和开发移动端网站

  •  

    模拟企业真实开发

    完全模拟企业中的真实开发,从交互稿、设计稿、接口文档,到项目打包工具,源代码管理工具,团队式开发,让学员在学习的过程中,真实体会企业开发完整过程,直至项目上线。

  •  

    引入三大流行框架

    让学员由原来的面向过程编程转变到面向对象编程、模块化编程、组件化编程上来,使代码更优雅,更好维护。Vue.js与React.js和AngularJS构成了当前前端最热门的三大开发框架,我们全部引入到课程中来,对学员来讲,只要掌握其中之一,其他两个就可以很轻松掌握;授课方法上我们按照公司项目开发协作流程开发项目,项目框架也贴切企业的需求,让学员了解到公司一个项目开发的整个生命周期

前端与移动开发基础班课程大纲

学习对象

1.0基础0经验的小白人员,想转型到高薪编程行业或对此行业有浓厚兴趣的人员;
2.在校大学生,希望充实自身技能,毕业后能顺利就业并有更强的市场竞争力;
3.不满足目前工作现状,想要得到更好的发展空间。

上课方式

全日制脱产,每周5天上课(实际培训时间可能因法定节假日等因素发生变化)早9:00-晚 20:30

培训时间

15天

培训要求

自带笔记本

 

前端与移动开发基础班课程大纲
所处阶段主讲内容技术要点学习目标
第1阶段:HTML5&CSS3
基础课程
HTML5常用浏览器与浏览器内核、HTML的语义化、HTML中常用的标签以及每个标签的语义。HTML5新特性及新增常用标签可掌握的核心能力:
(1)了解常用浏览器和浏览器内核;
(2)了解语义化的概念;
(3)能够掌握HTML,CSS使用技巧;
(4)能够掌握DIV+CSS布局模式 ;
(5)能够掌握HTML5新特性与常用标;
(6)能够完成动画效果。

可解决的现实问题:
与美工对接,完成网站静态页面的开发,为后期编写页面动态效果打基础。

市场价值:
了解网页的组成,能够实现静态页面编写,可以使用CSS3完成简单的页面动画。 
CSS3CSS语法、选择器、字体样式、边框、背景、图片格式详解、定位、浮动、盒模型。CSS3新增选择器及新增属性、圆角、阴影、伸缩布局、变形、过渡、动画。CSS使用的高级技巧
Photoshop使用Photoshop将美工设计的PSD图转成静态页面,了解网站前台页面的开发
京东综合项目代码分离原则,使用div+css布局完成一个完整的页面,使用CSS3完成动画效果

前端与移动开发就业班课程大纲

学习对象

学习本课程需要具有一定的前端网页设计(html+css+javascript)与开发基础,或者自学过一些PHP书籍与视频资料,想进一步提高成为PHP网站开发工程师的有关人员。

上课方式

培训时间及周期:全日制脱产,每周5天上课(实际培训时间可能因法定节假日等因素发生变化),早9:00-晚 20:30

培训要求

自带笔记本

培训时间

4个半月

 

前端与移动开发就业班课程大纲
所处阶段主讲内容技术要点学习目标
第2阶段:
前端基本功
JavaScript基础JavaScript基本语法、算法基础、常用数据结构、企业编程规范、JavaScript内置对象常用方法、对象的创建方式和this讲解可掌握的核心能力:
(1)能够掌握JavaScript基本语法;
(2)掌握DOM的各种操作;
(3)熟练使用面向对象思想进行DOM编程;
(4)掌握JavaScript的高级语法;
(5)掌握使用jQuery操作DOM;
(6)熟练使用和编写jQuery插件;
(7)独立完成电商网站的页面搭建(包括HTML结构、CSS样式、JavaScript特效组件);
(8)掌握应对业务编程的能力。

可解决的现实问题:
学生具备JavaScript开发能力,能够完成常见页面效果开发,为就业班后期课程打下基础。

市场价值:
具备JavaScript语言编程思想,但是还不能达到企业的用人标准。
Web APIBOM操作 、DOM操作大全 、 特效实现、页面布局、事件处理、浏览器兼容性处理
JavaScript高级面向对象思想、JavaScript中的对象、JSON、闭包、原型、作用域链、函数的调用方式及this指向、正则表达式 、面向对象理论与实践
jQueryjQuery的优势、jQuery选择器、jQuery中的动画、链式编程和隐式迭代、jQuery插件使用和制作
第3阶段:
后端开发
PHP+Ajax+
前端模块化
PHP后台开发php基础语法(变量、数据类型、分支循环语句、数组、函数、参数传递get/post)、动态网站、后台接口开发。数据库基本概念、基本SQL语句、php连接数据库进行基本增删改查、HTTP协议、表单传值、会话技术可掌握的核心能力:
(1)能够建立客户端服务器交互模型,熟悉网络通信相关概念;
(2)熟悉PHP基础语法,能够开发简单的后台接口;
(3)能够使用PHP操作MySQL数据库;
(4)能够理解HTTP协议;
(5)熟悉原生Ajax请求流程与细节,并掌握常见跨域技巧;
(6)能够基于jQuery的Ajax相关API熟练开发常见的前端功能;
(7)能够独立开发基于后台接口的动态网站、AJAX数据交互的项目。

可解决的现实问题:
学生能够建立起客户端服务器交互模型,熟练使用Ajax实现前端功能点、能够进行前后端协作开发、能够独立开发基于后台接口的数据管理平台项目。

市场价值:
掌握前后端协作开发相关知识点、能够快速融入实际的工作场景。
Ajax同步与异步概念、原生Ajax、jQuery的Ajax相关API使用、低层原理分析、缓存问题及处理方式、跨域请求及解决方法
前端模块化模块化开发基本概念、模块化演变过程分析、设计规范、RequireJS
综合项目后端渲染页面,使用会话技术实现登录,PHP操作MySQL数据库,开发接口,使用AJAX技术,模板引擎ArtTemplate完成页面功能的实现
第4阶段:
移动web开发
H5C3CSS3选择器、CSS3新属性、2D转换与过渡、3D转换、动画、Web字体、Flex弹性布局、HTML5多媒体
、HTML5音频播放、HTML5视频播放、HTML5DOM扩展、HTMl5自定义属性、HTML5data-*配套dom语法地理定位、文件读取、元素拖拽、多媒体加强、应用缓存、历史管理、web存储

可掌握的核心能力:
(1)熟练使用HTML5&CSS3实现网页特炫效果;
(2)掌握常用移动端框架使用方法;
(3)掌握常用移动端调试方法;
(4)掌握常用移动端适配方法;
(5)熟练使用移动端touch事件及手势封装;
(6)掌握响应式布局的写法;
(7)掌握CSS预处理器less的使用;
(8)掌握使用GIT对比文件差异、还原、合并,能够解决远端仓库与本地仓库合并时的冲突;
(9)掌握移动端整站开发架构搭建、项目开发、性能优化等整站开发能力。

可解决的现实问题:
学生具备移动端web开发能力,拥有根据设计图转化为对应的web,同时处理移动设备适配问题。能够掌握工作中多人开发的操作方式。

市场价值:
备移动web开发能力,能够和后台交互,独立开发移动端的交互网站。
H5C3综合案例能够利用CSS3技术完成常见专题页特效、能够缩合利用3D转换和过渡实现网页特效
canvas绘图命令、非零环绕原则、绘制形状、文字、图片,平移变换/缩放变换/旋转变换、ECharts数据报表
移动Web 移动端屏幕介绍、移动端浏览器介绍、移动端操作系统介绍、Chrome模拟调试、真机调试 、Viewport、rem、主流适配方案、触屏touch事件、手势封装、CSS预处理器LESS、移动端框架
CSS框架案例能够通过bootstrap完成响应式页面的开发,能够了解常见的移动端UI框架
Git命令行、Git的基本使用、对比文件差异、还原、合并 ,回滚操作,远端仓库操作、使用github创建远端仓库,gitlab创建远端私有仓库、gitlab与github区别,生成ssh key 并添加到github上和gitlab上
第5阶段:
全栈式开发
NodeJS开发 NodeJS历史、发展、特征与现状、ES6常用语法、同步与异步、环境安装, 文件操作、网络操作、模块化思想及操作、 npm、异步编程、Express可掌握的核心能力:
(1)了解项目开发的流程;
(2)能够熟练开发移动端和PC端的交互式网站;
(3)能够用目前热门JavaScript框架Vue.js来开发项目;
(4)掌握Express的使用;
(5)能够使用NodeJS开发后台接口,打通前后端;
(6)掌握源代码管理软件的使用。

可解决的现实问题:
(7)能够完全胜任公司项目框架从0到1的搭建;
(8)能够读懂公司已有的利用webpack搭建好的框架结构或者是使用vuejs开发的项目;
(9)能够利用webpack提高项目团队的开发效率;
(10)能够使用现在市场上流行的框架进行开发常见项目;
(11)能够进行团队合作开发项目。

市场价值:
学完以后能够一个人胜任前端项目的独立开发,从项目框架搭建开始到业务功能的实现,以及后台api的调用均能胜任,使课程不仅仅只有教还有练,让学生能够快速上手企业项目开发。
Vue实战项目常用系统指令、数据绑定、指令、过滤器、生命周期、组件化、路由、Vue组件、Vue过渡效果(动画)、路由(vue-router库)、vue-resource、es6语法、webpack的使用、项目打包和发布、包管理与维护、实战项目开发
第6阶段:
扩展技术
Angular实战项目单页应用、MVC、常用指令、双向绑定和单向绑定、模块、控制器controller、$watch、自定义指令、jqLite、过滤器、格式化过滤、数据过滤、服务$http,前端路由、http拦截器可掌握的核心能力:
(1)了解常见的设计模式;
(2)掌握Angular框架的使用;
(3)掌握微信小程序;
(4)掌握ReactNative;
(5)掌握React框架的使用;
(6)能够利用webpack、gulp打包工具实现网站资源的打包。
可解决的现实问题:
(7)能够开发微信小程序的应用;
(8)能够使用ReactNative开发WebApp,打包安装;
(9)使用inoic打包app。

市场价值:
具有开发简单的小程序的能力, 能跟上最新技术的脚步,具有前后端开发能力的前端开发者。 能熟练使用各种前端工具, 具有开发WebApp并打包上线的能力, 能与其他开发者合理沟通协作开发项目, 符合企业高端需求。
豆瓣一刻综合项目能够利用CSS3技术完成常见专题页特效、能够缩合利用3D转换和过渡实现网页特效
React实战项目快速入门、JSX 语法、es6语法书写组件、组件复用、生命周期、React操作dom元素、React绝对路由、webpack和gulp集成构建项目、重定向组件、代理方式进行跨域、按需加载
React Native环境搭建、快速入门、属性与状态、使用fetch进行数据请求、Promise、列表组件、常用控件、网络处理
移动App混合app的优缺点、app开发的常见平台、使用inoic打包app
微信公众号开发(页面)用JS-SDK技术做分享、拍照、支付、登录等功能
微信小程序 小程序入门概念及演示、小程序开发工具介绍与创建quick_start项目、小程序文件结构、wxml、wxss、常用组件(view,image,text,navigator,swiper等)、小程序常用api

基础差? 可免费学基础班

申请试读名额

基础过关? 可直接就读就业班

基础测试

前端与移动开发学科项目介绍

  • 京东项目

    项目简介:

    京东项目是通过电子商务模式为主导开展起来的项目。该项目涵盖了基本的DOM操作、面向对象思想和事件处理及特效内容。

    项目特色:

    项目基于HTML+CSS+JavaScript搭建动态页面实现,包含网页布局,网页特效,浏览器兼容性处理。其中包括JavaScript基本操作和DOM基本元素操作及常见事件处理,涵盖页面常见效果轮播图、放大镜、tab栏切换等基本特效实现,完成此项目基本可以独立

  • 博学谷后台管理系统

    项目简介:

    该项目主要实现在线教育平台相关资源数据的管理功能,主要实现讲师、课程等数据资源的增删改查等相关操作。

    项目特色:

    该项目紧密联系实际工作场景,整合了很多常用的前端插件,融入真实的业务场景,并且包含了前端相关的jQuery、Ajax,文件上传、后台接口对接等大量的知识点,可以在强化知识点掌握的同时进一步培养实践能力

  • 移动端宣传页

    项目简介:

    如何快速抓住用户眼球:二维码扫描->跳转,朋友圈分享->跳转。移动设备这类操作在频繁不过了.跳转之后看到的都是一个酷炫的宣传页面,有声音,有动画,可能还会有定位等功能,那么这个页面在移动端如何通过HTML5 & CSS3等技术去实现呢

    项目特色:

    使用HTML5原生技术实现媒体播放功能,结合第三方地图API实现定位及地图绘制,使用CSS3实现酷炫的过渡,动画效果,运用动画框架来制作一些更有灵性的动画;页面之间的滑动切换效果,原生跟框架的实现方式,咱们都来一遍,让大伙真实体验到公司中此类页面的开发“姿势”

  • 乐乎(轻博客)

    项目简介:

    人们沟通的方式增多了,但是如何找到志同道合的人呢,轻博客正越来越受到咱们年轻人的欢迎,可以分享生活,分享心得,通过发现以及创建圈子快速找到感兴趣的话题.如果不想分享内容,也可以做一个安静的观众,静静地看着他人分享的精彩生活;无论哪种方式都能够让你收获精彩的内容.

    项目特色:

    :体验移动端webAPP的开发方式,掌握如何在种类繁多的屏幕中实现显示效果统一,如何在不同的移动操作系统下处理诸如字体设置,图片设置等问题.喜欢原生,没问题,我们一起来手写页面;想要快速开发,没问题,我们一同体验框架开发的简单与高效。CSS代码增多,维护与编写成本增加,我们有CSS预处理程序来帮忙。多角度,多方向让大伙感受移动端webAPP的开发"姿势"

  • 电商项目

    项目简介:

    该项目是基于鞋类的垂直电商平台,改项目包含整个电商核心模块,用户模块,购物车模块,分类模块,商品模块,产品模块。报表模块.. 系统前台是面向网站用户访问的,用户可以通过移动端进行注册,修改个人的一些信息,商品搜索,把商品保存到自己的购物车。系统后台是面向电商后台管理人员使用的,主要功能包含用户管理,分类管理,品牌管理,商品管理,报表统计等功能。

    项目特色:

    1:该项目移动端采用当前流行的mui移动框架搭建而成,使移动端的开发变得简单高效;2:独立页面里面采用流式布局,rem,以及伸缩布局来搭建内层网页;3:该项目所有的交互都采用前后端分离,移动端使用各种交互特效,下拉刷新,滚动加载等特效; 4:后台采用bootstrap 进行页面布局,后台开发迅速方便维护,使用bootstrap 的常见的插件;5:后台使用jQuery fileupload 上传组件,支持多文件上传,以及预览的功能;6:使用echart 技术做相关的报表统计技术"

  • cms系统

    项目简介:

    整个项目使用webpack打包工具集合Vue.js框架完成一个移动版的webapp,整个项目完全从0起步一步步带领学员完成脚手架的搭建,单页程序的架构以及新闻资讯,图片分享,商品购买,购物车,登录等功能,并且整个项目开发流程完全模拟团队协作,使用git进行版本管理

    项目特色:

    纯手工实现一个个功能,主要逻辑拒绝拷贝代码。以真实项目作为原型来实现其中的一部分功能,业务都是公司常用的。教会学员如何去查找开源组件,并且用在项目中满足业务的开发,授人以鱼不如授人以渔。项目的讲解过程几乎接近于公司真实项目的开发和协作流程,例如:交互稿,UI设计稿都有

 

前端与移动开发面授视频试听

  • 二维码图片的方式(上)

  • 二维码图片的方式(下)

  • ifelse和代码的调试

  • 表单元素(一)

  • 表单元素(二)

  • 数组

申请免费线下基础班试听名额

教学服务

  • 每日测评

    每晚对学员当天知识的吸收程度、老师授课内容难易程度进行评分,老师会根据学员反馈进行分析,对学员吸收情况调整授课内容、课程节奏,最终让每位学员都可以跟上班级学习的整体节奏。

  • 技术辅导

    为每个就业班都安排了一名优秀的技术指导老师,不管是白天还是晚自习时间,随时解答学员问题,进一步巩固和加强课上知识。

  • 学习系统

    为了能辅助学员掌握所学知识,黑马程序员自主研发了6大学习系统,包括教学反馈系统、学习难易和吸收分析系统、学习测试系统、在线作业系统、学习任务手册、学员综合能力评定分析等。

  • 末位辅导

    为了能辅助学员掌握所学知识,黑马程序员自主研发了6大学习系统,包括教学反馈系统、学习难易和吸收分析系统、学习测试系统、在线作业系统、学习任务手册、学员综合能力评定分析等。

  • 生活关怀

    从学员学习中的心态调整,到生活中的困难协助,从课上班级氛围塑造到课下多彩的班级活动,班主任360度暖心鼓励相伴。

  • 就业辅导

    小到五险一金的解释、面试礼仪的培训;大到500强企业面试实训及如何针对性地制定复习计划,帮助学员拿到高薪Offer。