前端学习路线

 

1. 第一章：认识网站前端

   前端工做前景

   前端目前人才需求巨大，真正会的人甚少，大学毕业都是菜鸟，愿意继续学习的人又不多，致使人才匮乏，工做待遇高涨。前端目前待遇普通在6K-20K之间，优秀更高。

   前端岗位及工做内容

   岗位名称：WEB前端工程师 ，任务：提高互联网产品的用户体验！

   现在的前端今非昔比，PC网站开发，手机端网站开发，网页游戏开发等等，前端工程师通常须要熟悉至少一种后台开发技术(例如:PHP首选)

   本班课程设计及目标

   牢牢围绕社会发展需求，培养专业级实战人才。全部毕业同窗均包就业。

2. 2

   第二章：HTML5从入门到精通

   系统精讲HTML4.01经常使用全部标签

   html, body, head, meta, title 等固定结构标签

   div,h1-h6, p, ul, ol, dl,iframe 等几十种布局标签

   a,img,span,b,strong, link, script 等几十种内容型标签

   form表单专题精讲

   table表格专题精讲

   多媒体音视频处理专题精讲

   系统精讲HTML5新增全部经常使用标签

   header, section, nav, footer, article, aside 等新增布局型语义标签精讲

   form表单新特性精讲

   audio,video等新增多媒体标签精讲

   canvas专题精讲

   html综合实战与考核

   老师带领使用html标签布局一个完整网页

   学员独立完成使用html标签(手写)完成一个完整网页

3. 3

   第三章：PhotoShop切图精讲

   资源准备

   有老师提供一套网站PSD设计源文件

   老师带队演示PS切图技术和注意事项

   切图实战考核

   每位同窗能够网上下载一套psd设计源文件，完成切图任务

   学完CSS后进一步对此技术进行强化训练

4. 4

   第四章（上）：CSS 精讲

   CSS快速入门

   CSS快速入门示例，CSS选择器，行内，页级，外联，导入(link,import)精讲

   HTML全部经常使用标签默认值特性专题

   边框与边距

   实战演示+系统精讲border,margin,padding各类应用

   背景与背景定位

   实战演示+系统精讲background-*背景颜色，背景图片及定位，各类应用场景

   文本特性与列表样式

   超级连接css特性，img的css兼容特性

   文本粗细，颜色，行间距，字间距，字体，对齐模式等精讲

   各类list列表的css特性与实战演练

   尺寸与经常使用单位精讲

   宽度(最大宽度，最小宽度，百分比宽度，定值宽度)，高度(同前)

   px, em, pt, n%, hex 及特殊字符串描述

5. 5

   第四章（下）：CSS 难点精讲

   布局精讲

   浮动原理，左右浮动，清除浮动,浮动对块状元素，行内块状元素，行内元素的影响精讲

   "行内，块状，行内块状，表格模式" 元素类型的自由转换

   元素的隐藏与显示

   定位精讲

   经过实战精通绝对定位

   经过实战精通相对定位

   经过实战精通固定定位

   定位与浮动的区别专题

   表格与表单CSS专题精讲

   表单css精讲，表单元素CSS默认值特性，不识别特性

   表格css特性，充分利用能够把不少计算问题简单化

   HTML+CSS综合实战

   老师带队作好一个完整网页先后台页面（要尽量全面的充分利用所学知识），并经过全部主流浏览器兼容测试

   毕业设计：学生独立完成网站网页先后台页面，并经过全部主流浏览器兼容测试

   制做标准

   以BAT产品为样板，惟美或质感，偏差2像素内容，代码精炼，结构清晰合理，html与css要彻底分离，符合W3C标准，利于SEO，利于程序员使用，注释规范明确。

6. 6

   第五章(上)：CSS3对css2的基本拓展一

   CSS3快速入门

   经过示例快速解说CSS3

   CSS3主流浏览器兼容问题,浏览器内核前缀介绍

   CSS3新增几十种选择器精讲

   css3文本新特性精讲

   text-shadow 实战应用精讲

   文本方向，自定义字体等文本新特性精讲

   新增颜色模式精讲

   rgba 色彩渐变，透明度应用普遍

   Hsl

   在css2基础上新增UI特性

   新圆角，图像边框，线性渐变，径向渐变，多重背景，遮罩等

7. 7

   第五章(中)：CSS3 新盒子模型与响应式布局专题精讲

   盒新模型精讲

   CSS3 分栏布局精讲

   CSS3 响应式布局精讲

8. 8

   第五章(下)：CSS3 过渡/Animate动画/2D/3D变换/ - 注：此部分能够在js基础学完后学习

   Transition过渡动画精讲

   Transition过渡动画精讲及实战

   Animate关键帧动画精讲

   Animate关键帧动画精讲及案例实战

   2D变换

   transform旋转，斜切，平移，缩放

   2D变换实战案例

   3D变换

   transform旋转，斜切，平移，缩放

   3D变换实战案例

9. 9

   第六章(上)：JavaScript基本语法精讲

   JS快速入门

   快速入门示例，js各类嵌入到html文件的方法。注释，标记，变量，数据类型

   数组精讲

   一位，二维，多维数组定义，排序，切分等各类场景使用精讲。

   函数精讲

   函数定义，执行环境，做用域，匿名函数，回调，递归，闭包精讲

   字符串处理精讲

   字符串处理函数，正则表达式精讲

   系统经常使用函数

   setTimeout, setInterval，日期时间函数，数学函数精讲

   认识对象

   js对象定义，构造函数，原型精讲

10. 10

    第六章(下)：BOM/DOM模型/事件模型

    BOM模型精讲

    Navigator, Location, Window, Screen, history对象精讲

    DOM模型

    节点查找，类型判断，建立，添加，删除，修改等

    事件模型

    冒泡型，捕获型，事件绑定的3种方法精讲

    事件类型

    鼠标事件，键盘事件，UI事件精讲

    事件对象精讲

    各类不一样事件类型的事件对象精讲

11. 11

    第七章(上)：jQuery 精讲一

    jQuery快速入门

    快速入门示例，jQuery 选择器

    经常使用函数实战

    属性编辑函数，元素筛选函数

    节点处理

    jQuery对DOM模型的处理的二次封装

    CSS处理

    jQuery对css处理的二次封装

    jQuery事件处理

    jQuery对事件处理的二次封装与事件对象

    jQuery动画效果

    淡入淡出，隐藏显示，animate动画等

12. 12

    第七章(下)：jQuery 高级精讲

    jQuery 队列精讲

    queue，dequeue，delay，stop等核心函数用法精讲，使用队列完成动画

    jQuery插件开发

    jQuery插件开发精讲，插件开发实战

    Ajax应用专题精讲

    Ajax应用专题精讲

    jQuery实战考核

    使用 jQuery分别完成，完整网页(各类常见特效制做)，业务逻辑运算，数据交换，网页游戏实现等。

13. 13

    第八章：jQuery UI精讲二

    jQuery UI精讲二

    有了jQuery UI 不少经常使用特效和功能都轻松搞定...

14. 14

    第九章：手机网站制做专题精讲

    手机网站实战专题

    手机网站实战专题

15. 15

    第十章：Ajax、JSON、XML、Canvas 专题精讲

    Ajax精讲

    原生Ajax精讲， XMLHttpRequest对象与 "jQuery Ajax" 实战对比

    JSON、XML 精讲

    JSON、XML 精讲、微信公众平台案例

    Canvas 精讲

    Canvas 绘图，经过程序也能轻松建立，修改图片了...

16. 16

    第十一章：JavaScript 原生高级编程精讲

    JS 复制继承，原型链继承等

    JS 复制继承，原型链继承等精讲具体见课堂讲义...

    JS对象继承

    JS对象继承在框架开发中应用实例精讲，更佳的封装和重用你的代码。

17. 17

    第十二章：其余拓展进阶学习

    延伸学习 - 前端布道师

    为完成多人合做的大型WEB前端项目，确保代码的可用型，高性能，易拓展等问题，有一系列解决方案。这些方案都创建在精通以上基础之上。

    更多框架库学习

    SeaJS、Angular、Bootstrap、React, NodeJS(服务器端平台)等等

    SVN, 模块化开发, CMA, AMD, 构建工具, http协议

    新框架和新名称由来的缘由

    新框架和名词层出不穷（无数前端框架，无数新名称，学习原则不变：一精多能), 大多来自BAT, 谷歌, Yahoo, FaceBook, Twitter等等国际一流IT相关公司.

    之因此会出现不少新产品，不如说是出现不少解决方案，是在这些公司的应用程序规模很庞大时候须要寻找一种有效的管理办法最终找到一种解决方案，并很快被其余人承认和接受。

18. 18

    请继续学习：PHP网站开发高级工程师第二部后台部分