Web前端实战班-CSS实战课程 - 课程大纲(基础)

返回查看课程
章节名称 课程内容 培训目标 项目实战
初识HTML+CSS 浏览器语言:HTML、CSS、JS
开发工具:DW、FW、PS介绍及使用
第一个HTML页面(含详解)
CSS基础样式
标签详解:div、h1~h6、p、span、storng、em、a、img、
什么是css?
css基本语法、选择器(部分)、width、height、border、background、margin、padding、基础样式
文字操作、颜色写法
HTML书写规范
了解目前行业情况,课程入门基础的工具使用,掌握HTML语法基础及CSS基础样式,达到老师上、下课所布置的任务。 各大互联网公司的精品页面局部内容的制作。包括布局和样式、根据情况设定的针对性练习
样式重置与选择符 如何初始化(重置)样式、选择符、选择符优先级、ID和Class区别、细节标签 掌握浏览器之间的样式默认样式差异化,掌握如何进行样式的重置及选择器的使用。问题等 BAT及其他网站的小模块内容制作。
块和内嵌、浮动 块和内嵌特点、块和内嵌转换、标签嵌套规范、浮动详解、浮动的各种问题、如何清除浮动、清浮动的原理、为什么要清浮动 掌握块和内嵌的特点,为后面的课程打基础。 分页、导航、彩票、360新闻、360应用排行榜、淘宝女装、土豆、网易云音乐、花瓣瀑布流
定位与JS布局 相对定位、相对定位特点、绝对定位、绝对定位特点、固定定位、透明度、透明度问题、透明度的使用、透明度复杂案例、Js布局 掌握定位和一些技巧,熟练掌握js布局,为网页中的js内容打好基础。 时间轴、优酷土豆登陆、焦点图制作、树形导航菜单、支付宝、携程旅游、优酷音乐、酷我音乐热门歌手
表格、表单 表格详解、应用、表单(input、select、textarea、radio、checkbox、password、text、file...)、表单样式、表单兼容性、表单应用、丰富的表单制作、模拟file框 了解表格和表单在网页中的应用,熟练使用自定义表单。 QQ注册、新浪微博注册、360问答、个人资料页
Css Sprite Css Sprit详解 (精灵/雪碧 -。- No No 不是可口可乐那个)、拼图的技巧、对滑动门的拼图、Sprite样式写法、优缺点分析 熟练使用图片合并,并掌握图片合并的各种方法和技巧。 QQ旋风、淘宝帮助中心、淘宝首页导航、腾讯软件、腾讯应用宝、新浪微博分类
CSS 样式中的兼容性、滑动门 调试兼容性的方法、兼容性汇总、overflow问题、Css Hack、条件注释语句、调试的各种技巧、滑动门详解、优缺点分析、实战应用 熟练掌握css中的各种兼容性,并了解滑动门的原理
一线互联网公司面试题 内部测试题(至少70道)、面试题、等高布局、三列布局、未知宽高图片在容器内水平垂直居中、文本水平垂直居中、多行文本水平垂直居中、兴趣题解答(大家感兴趣的布局或面试题) 了解各种面试题,各种布局的原理、思想。为以后的面试打基础,并且内部有很多测试题。

Web前端实战班-CSS实战课程 - 课程大纲(高级及移动端 - HTML5课程CSS部分)

返回查看课程
章节名称 课程内容 培训目标 项目实战
CSS3基础 新增的标签(nav、header、figure、article、section、audio、video等)、input新的可用type、新的“可用”选择器、属性选择器、伪类选择器、伪元素、box-shadow、border-radius、text-shadow、text-transform、calc()、background新的用法、CSS3 遮罩、线性渐变、渐变 – 圆形(径向)、渐变应用、Box-sizing、Box-sizing的问题、弹性布局、弹性布局对齐方式、弹性布局应用、box-reflect、-webkit-filter、@font-face等... 掌握HTML5+CSS3新增标签及基础的样式 基础样式练习,微信App、微博App、微信公共账号底部菜单
transform
transition
animation
translate、scale、rotate、skew、transform-origin、transform-style、perspective、transition(各种详细参数)、animation(各种详细参数)、各种实战项目、手机动画专题页面制作 掌握CSS3的各种变化,了解景深是什么。并熟练使用。 各种变幻练习
ihover库效果逐一实现
响应式和移动页面 viewport、IOS设备专用meta、媒体查询(Media Query)、媒体类型、响应式布局技巧及注意事项、移动端布局注意事项、移动页面制作技巧及如何适应不同分辨率,真实工作案例分享 了解viewport及ios的各种应用,能够使用响应式写出真实的案,并且对移动页面有独立的制作能力。 微软中国官网、微软中国电商、手机淘宝HTML5版,京东、医药网站、苏宁易购
Less Less是什么?、编译工具、浏览器中调用、Less中的注释、变量、参数、@arguments 变量、!important关键字、模式匹配、Guard表达式、嵌套规则、运算、函数、插值、导入、zless库的应用、作用域、避免编译、命名空间 掌握less的基本语法和在工作中的实际应用。 Less版新浪微博和优酷淘宝任选其一
Sass 安装环境、编译工具、注释、变量、变量范围、嵌套、混合(mixin) 、继承、运算、函数、循环、SassCore库、其他 熟练使用Sass编写页面 Sass版淘宝
栅格化 如何使用栅格化、栅格化对web的作用、栅格化在工作的实际应用。 了解栅格化在网页中的应用 360热搜、优酷首页
BootStrap
Pure
Puerh
Animated
讲解各种库的核心思想,给大家真正有价值的东西。 了解各种库或框架的核心原理和思路
组件化 组件化课程包含如何使用Less或Sass或原生CSS封装自己的组件。以及封装组件的注意事项,思想等。 掌握组件化的封装原理,使用Less或Sass封装组件。
Gulp gulp安装、插件管理、版本控制、postcss 使用gulp管理自己的项目,压缩CSS、js、图片合并等,以及postcss的使用
综合实战 微软中国、淘宝HTML5版本、网易新闻、zaker新闻 平时积累的小型项目+整站,和最后的这个项目实战内容,构成了整体课程。

JavaScript高级实战课程

返回查看课程
章节名称 课程内容 培训目标 项目实战
Js基本功 什么是JavaScript、什么是事件、alert、document.getElementById、Js编写流程、onmouserover / out、函数、函数的定义、函数的调用、函数添加括号与不加括号的区别、if、else、属性操作、变量、变量赋值、提取行间样式、换肤的三种方式、函数、className、cssText、传参、形参、实参、作用域、闭包、局部变量、全局变量、字符串、字面量、匿名函数、window.onload、循环、自增 前期准备,了解JavaScript的基础功,为后面的课程打下基础。 百度个性首页、鼠标移入菜单
基础语法 表达式,变量命名规范、变量类型、typeof,undefined,null,字符串、字符串分割、字符串大小写转换、数组、push、pop、shift、unshift、slice、indexOf、splice的妙用、条件、循环、for,while,switch case,break,continue,算术运算、逻辑运算、关系运算、深入理解函数返回值、作用域、时间对象、获取月份的时候应该注意哪些?时间戳、getTime,getDate,getMonth,getFullYear,第一版日历、倒计时、arguments、随机数、随机换背景图、随机颜色、定时器、setTimeout、setInterval、柯里化、惰性求值 变量、函数和三大语句结构是所有类C程序设计语言的基础,字符串、对象和数组是所有编程语言都需要处理的最重要的两种数据结构,实际工作中我们也是时时刻刻离不开字符串和数组,面试中经常会遇到结合这三者的面试题像数组去重等,字符串结合正则更是面试中喜欢考的一个知识点方向,熟练掌握字符串、对象和数组的操作算法和技巧非常的重要。 个性皮肤、倒计时、日历
DOM 节点类型,查找、创建、克隆、删除、替换节点(涉及到大量的DOM相关的API)、children的兼容性问题、什么是文档碎片、为什么文档碎片能够提高DOM操作效率、属性的操作setAttribute、getAttribute、removeAttribute、innerHTML和innerText有什么区别、表格的crud、精确搜索、模糊搜索、倒计时的实现、模拟win7系统的日历效果、开发自己的DOM库 作为js最重要的两大基石DOM和BOM,DOM的重要性对于前端不言而喻,全面掌握DOM的各种API,了解类数组的特性,为我们以后工作中能比较快的理解别人的组件或插件的实现意图,乃至自己封装实现实用的组件。 新浪微博发布、删除、收藏等操作
BOM location:location,href,hash,search、如何跳转URL或返回当前URL地址、封装search参数、navigator、userAgent、iframe的自适应高度、可见区宽度、滚动条卷去的宽高、百度贴吧、天猫、聚美优品吸顶效果、返回到顶部、实现类似唯品会的图片延迟加载效果、二种思路实现瀑布流 BOM作为JS三大组成部分之一,为我们提供了很多描述和修改浏览器状态、行为、特征等操作的API
事件 事件绑定的三种方式及优缺点、DOM2.0事件、事件句柄、如何阻止事件冒泡、如何阻止元素默认行为、键盘事件、鼠标事件、浏览器事件、实现一个自己的事件队列、什么是冒泡和捕获、什么是事件委托和代理 深入事件的原理、方法 仿淘宝网模拟placeholder、仿YUI拖拽效果、淘宝放大镜效果、开发自己的事件库
运动 永远在页面中的右键菜单、侧边栏、淡入淡出、缓冲运动、多物体运动框架、万能运动框架、链式运动框架、完美运动框架、打字效果、三种思路实现无缝滚动、酷炫时钟、手风琴效果、tween动画的原理、jQuery动画的原理
HTML5 canvas,webGL、摄像机、光源(点光源、散射光源、环境光)、贴图、世界坐标系、物体坐标系、材质、纹理、canvas实现绘图板、离屏canvas、给图像加水印、3d魔方、canvas时钟、canvas放大镜、移动端手势事件、微信JS-SDK、微信调试、cocos2d核心概念、cocos2d核心类、地图、box2d物理引擎 HTML5囊括了众多的新兴的功能,其中canvas算是前端游戏开发者最热衷的功能,它是渲染图形、图表、图像和动画的开发接口,借助于canvas,我们可以实现像素级的图形与图像的处理。webGL是一项可以在浏览器呈现3D画面的技术,换句话说,webGL使用的是硬件加速,所以可以大大的提升图形渲染的性能,像cocos2d哪怕你是用来做2d游戏,它底层也是优先使用了webGL,只有宿主浏览器没有提供webGL的接口才会使用canvas。
模块化 common.js、amd、cmd、require.js(同类型的还有遵循commonjs1.1规范的seajs,但是require.js是目前应用得最广的,而且像gulp、Backbone和angular.js等一批大牛都实现了相应的npm模块包,所以学会了require.js,可以很容易学会seajs等模块化库)
自动化 gulp的原理和使用、如何用gulp打包、自动生成雪碧图、替代koala进行实时编译less和sass,post css的使用
jQuery 如何选择合适的jQuery版本、选择器、三种思路实现隔行变色、使用each简化for循环、jQuery与DOM对象的相互转换、prop与attr探秘、筛选、DOM、BOM、事件、命名空间、自定义事件、hover的使用、pageX、pageY(彻底告别难用的evt.clientX,evt.clientY)、动画、各种toggle妙用、动画中的回调函数、ajax、用jQuery重写瀑布流、拖拽、选项卡等之前的例子、树形菜单、jQuery代码优化基本原则、tween动画的原理、jQuery动画的原理
nodejs 课程内容repl基于事件驱动、回调、EventEmitter与自定义事件、读取文件、Buffer、操作二进制数据、模块与包、npm、package.json语法详解、B\S架构系统、HTTP协议深入学习、如何利用nodejs返回一个json数据、如何利用nodejs返回一个函数、chrome的network控制台学习、其他:前后端对cookie的处理,及HTML5中的本地存储 只教前端必须 掌握的怎么把node生态圈的npm、gulp、grunt等掌握进行自动化打包或者涉及到ajax这一块有时候需要自己mock一下数据才会用得上node.js,所以我们的课程设计基本上是一个前端必须掌握的,不会把node什么知识点全来讲,tcp、udp、进程与子进程、甚至nginx等等,这些前端一辈子也不会有面试官问你也不会用得上的东西,这是没有意义的对前端工程师来说
ajax 什么是B/S架构 什么是同源策略、前端必须要了解的http协议知识、xhr对象、readyState,onreadystatechange、什么是同步与异步、POST与GET、json数据格式(经常看到好多前端在没有完全理解json的情况下写出的代码出问题不知道怎么调错,这个知识点可以学习到大公司的一些通用的前后端数据约定格式)、谷歌的network控制台的使用、jsonp的原理、百度下拉提示、封装可重用的Jsonp方法、iframe实现跨域 ajax是web2.0的基石,以前要用复杂的iframe才能模拟实现的无刷新的效果,用ajax可以轻松的实现,同时ajax也是大型电商经常考虑用来进行性能优化的技巧。掌握ajax可以让你轻松的在重构公司网站时达到一个比较好的新旧网站性能对比图。
正则表达式 常用正则表达式工具的使用、RegExp对象、test、exec、match、replace、忽略大小写、贪婪与非贪婪、Unicode编码中的汉字范围、\b的妙用、正向否定、反向肯定、表单用户名、密码、身份证、网址、邮箱等匹配、高级正则应用:正则在jquery源码中的应用 正则在字符串匹配查找方面是一个必须熟练掌握的技能,熟练的理解正则表达式的原理,有助于帮助我们更好的书写出效率高的正则,提高我们的工作效率
面向对象 面向对象与基于对象、枚举、如何理解new、instanceof、constructor、什么是静态’类’、如何创建一个非静态类?、静态’类’和非静态’类’有什么区别?、如何实例化一个’类’、私有属性与私有方法、封装、继承、多态、this、命名空间、子命名空间、构造函数、apply与call、proto、prototype、原型链、多种继承方式的实现、实现’重载’、什么是工厂模式,js怎样实现工厂模式、什么是单例模式,js怎样实现单例模式(单例模式在js中应用得比较多,像angular.js中的service)、什么原型模式,js怎样实现单例模式、什么是观察者模式(观察者模式是js的核心) 正则在字符串匹配查找方面是一个必须熟练掌握的技能,熟练的理解正则表达式的原理,有助于帮助我们更好的书写出效率高的正则,提高我们的工作效率
js工程师的工作流程 如何与公司后台进行数据联调、突发性bug的解决思路:我要崩溃了,出了问题是与后端进行针锋相对,还是学着用正确的思路快速的定位出来哪里有问题?、alert的妙用、console的使用、断点的使用(非必须,主要针对有后台基础的学员)、firebug、chrome的console与network、resources的使用、try catch的使用、throw的使用、雅虎军规、Chrome profiles、YSlow的使用、缓存的使用、借鉴还是抄袭,不再被这个问题困扰,产品经理需要的是快速产品迭代、webstorm与sublime的高级用法(工欲善其事必先利其器,学会了这二款前端每天要用编辑器的正确打开姿势可以大大提升开发速度)、git使用、github免费博客的搭建、如何用markdown写规范的文档:(这是一个看颜值的时代,请给我最佳的阅读体验!哪怕是一个普通的技术文档)、字符集知识(gb2312,gbk,utf8,ascii码)、正规公司代码组织方式、代码规范(为什么前端leader在code review的时候总是挑各种各样的毛病?)、这部分知识点会在平时的课程当中穿插着讲,还有好多最新的一些知识点会每期根据已工作学员反馈进行更新升级
一线互联网公司面试题 预解析相关面试题、闭包相关面试题、递归相关面试题、继承相关面试题、基本数据类型与复合数据类型相关面试题、ajax与jsonp相关面试题、http协议相关面试题、jQuery相关面试题、去重、自己实现getElementsByClassName、扩展内置的对象的方法、reflow与repaint辨析、面试技巧、清空数组的三种方式、模拟实现JSON、stringify、延时下拉菜单、还有大量内部面试题,不一一列出来了
angular.js MVC的概念学习 module模块与依赖注入、数据绑定、插值表达式、$scope、作用域、runBlock方法、config、控制器、过滤器filter、模板、内置指令与自定义指令、事件、服务(const,value,service,factory等)、路由及ngRoute、ngAnimate、jqLite、与服务器通信、angular ui mobile。
设计模式 观察者模式、发布订阅模式、策略模式、工厂模式、原型模式、Promise/A规范、模块模式、组合模式 使用gulp管理自己的项目,压缩CSS、js、图片合并等,以及postcss的使用
前端架构思想 接口规范、本地开发、模块系统、框架和类库的选型、工业级项目的实战(系统分解、设计接口API、工程构建、mock数据、gulp工作流的使用、组件的封装到最后的逻辑的实现) 这个专题看起来很虚,但是如果你去大公司面试就知道了,老大其实是很看重这块你的理解的,而且了解这方面的知道也有助于你尽可能快的走到管理层,最基本的收获也是可以了解你们公司的前端架构师每天在做什么,除了前面的基础课程和核心课程让同学们掌握JS的知识和学会如何编写代码,培养一定的代码逻辑能力之外,我们在这一专题里会让学员熟悉一线互联网公司的多人开发的协作流程、协作规范,熟悉主流的框架和类库,而不是为了学习技术而学习技术,通过一个模拟真实的项目实战让同学们真正的学会多人协作开发,熟悉大公司里面的规范和接口约定的流程,知道如何封装组件、采用amd规范来实现项目的模块化

HTML5实战课程

返回查看课程
章节名称 课程内容 培训目标 项目实战
该课程包含 Web前端实战班-CSS实战课程 - 课程大纲(高级及移动端 - HTML5课程的CSS部分) - 注:是包含全部的CSS课程中的CSS3部分 各种3D变幻的效果,iHover
移动端事件基础 touch事件、touchstart、touchmove、touchend、touches、targetTouches、changedTouches、移动端拖拽、默认事件处理、transitionend事件 了解移动端事件和PC端事件的区别和使用方法 移动端场景制作、专题制作、活动页面等
Video/Audio audio 、video、source、视频容器、controls、autoplay、loop、currentTime、duration、volume、autobuffer、paused、、编解码器、转码、压缩 了解视频编码要求、压缩、转码、audio和video的使用,在移动端应用的场景,注意事项等 移动端场景制作
地理信息 本地存储和cookie的区别,localStorage和sessionStorage的区别、localStorage的支持情况,兼容性检测、添加、删除数据,删除数据、localStorage使用的注意事项、实例:基于localStorage的待办事项、localStorage的方法和属性,setItem、getItem、清空localStorage,遍历localStorage的方法、实例:基于localStorage的记事本、localStorage的事件,onstorage的兼容性写法,事件对象的各种属性:key、oldValue、newValue、url/uri、Json对象的方法,stringify、parse,parse和eval的区别、调试工具的使用、窗口间通信 简易地图
angular.js angular.js解决了前端什么问题、M-V-whatever体系架构思想、自定义属性、H5的data-*属性与data-ng-*属性、引入angular.js文件、初始化module,controller,view、怎么理解依赖注入、第一个service->$scope、injector,annotate、$filter,$log、如何使用第三方模块、插值表达式、$timeout、directive,two way data-binding、深入学习指令、ng-model、$apply、ng-if 、ng-class、ng-show、ng-hide、ng-repeat、ng-click、$http、多视图、多控制器、hashchange事件与$location、ngRoute、$routeProvider、template、自定义service、自定义directive、compile、link、transclusion、angular.js项目实战
canvas 线条、beginPath、closePath、lineCap、lineJoin、miterLimit、drawImage、图形变换、线性渐变、径向渐变、加载图片、video、离线canvas、曲线 arc(),arcTo()、画贝塞尔曲线、 字型、字号与字体、文本的度量与对齐、globalAlpha、globalCompositeOperation、剪辑区、isPointInPath、坐标系转换、webAudio核心API、放大镜实现、遮罩实现、动画效果、可视化音乐、画图效果实现
echarts grid组件、网格、坐标轴、xAxis、yAixs、boundryGap,onZero,onGap,clickable、splitLine、splitArea、折线图、柱状图、tooltip、itemStyle、lineStyle、symbol,K线图、散点图、南丁格尔玫瑰图、仪表盘,gauge、漏斗图、缩放漫游、值域漫游、气泡图、scatter、funne、markpoint、markLine,echarts主题的设置 了解目前较为成熟的图标展示工具 各种图标的展示效果、修改数据、方法等

常见问题

COMMON PROBLEM

01

我零基础,可以学会吗?

零基础学员可以掌握课程里面的知识,但前提是你必须要付出100%的努力,一定要认真完成我们布置的练习,另外,我们希望你主动积极的去提问。

02

学费能不能分期付款?

学费可以分期,目前我们的分期方式如下: 第一期:开课之前交一部分 第二期:上完一个月左右补交另外一部分 如果你实在有困难,可以跟我们说清,我们会针对你的情况,将分期适当的进行调整。具体的方式可以联系方式。 我们愿意为想学习的你,提供力所能及的帮助。

03

我很笨,怕学不会/学的慢?

我们有一套自己的教学方法,确保每一个学员都能跟上,都能学会。笨不可怕,慢也不可怕,只要您肯去努力,我们就绝不放下每一个学员。正所谓:"努力不一定成功,但放弃一定失败"。何不多给自己一次机会呢?

04

前端薪资如何?

就目前来看,我们的学员薪资平均在9~12k左右。高的也有,低的也有。

05

我们有哪些优势?

小班授课,师徒模式传授。同时,我们有五年的培训经验,培训不仅仅是我们的一种生活方式,更是对学员的一份责任。