三个月从入门成为前端开发工程师系列学习视频教程

课程目录：

 

页面制作

 

单元（章）课题（节）内容

1.Photoshop切图1.工具、面板、视图介绍切图概念、PS软件、PS面板+常用工具+辅助视图。

2.测量、取色介绍和演示获取信息的方法：测量和着色

3.切图各种切图和切图操作：隐藏文本（独立层和非独立层的不同操作方法）、png8和png24格式的切割方法，可以平铺背景的切割方法，以及活动页面的切割方法。

4.保存保存图片的操作，图片的几种保存格式(png8\png24\jpg）

5.修改和维护图片的修改和维护方法

6.图片优化与合并图片的使用方法，图片的优化合并方案(包括图片合并的排列方法和分类合并方案)，图片兼容方案。

2.开发和调试工具1.开发和调试工具介绍和使用常用开发工具和调试工具的功能

3.HTML1.HTML简介简要介绍HTML的发展历史、基本概念和文档声明

2.标签介绍标签语法，各种标签和语义化

3.实体字符介绍常用的实体字符

4.CSS1.CSS简介简要介绍CSS的发展历史和基本概念

2.选择器基本选择器、属性选择器、伪类选择器、伪元素选择器、组合选择器、分组选择器、优先级、层叠、继承、important

3.文本字体的基本设置、对齐、格式处理、高级设置等

4.盒模型盒模型概念，width、height、padding、margin(水平居中)、border、border-radius、overflow、box-sizing、box-shadow、outline

5.背景background的基本属性，线性渐变，径向渐变

6.布局布局简介、display(水平居中导航、居中导航)、position(轮播头图、固定顶栏、遮罩、三行自适应布局)、float(两列布局)、flex(三行两列自适应)

7.变形2d变形法，3d变形法

8.动画过渡动画，帧动画

 

 

 

JavaScript程序设计

 

单元（章）课题（节）内容

1.基础篇1.JS介绍html、css --> js、hello  world、js特性、js&DOM、js历史

2.JS调试alert、console、展示chrome，ff,ie   以Chrome为例，对调试器界面进行详细显示，显示面板功能，查找要调试的文件，设置断点，debugger、显示四个按钮，并显示堆栈变化的响应，watch

3.基本语法标识符、变量、直接量、关键字和保留字、句子、区分大小写、注释

4.基本类型Number（Interger, Float, NaN,Infinity）、String("，"，")、Boolean(true,false)、undefined(undefined在什么情况下)、null、Object({})、原始类型和引用类型的区别，typeof

5.运算符和表达式表达式、运算符、一元操作符(++， +,-)、算术运算(+、-、*、/、%)、关系运算(>、<、== 、!=、>=、<=、===、!==)、逻辑运算(！、&&、 ||)、位运算(&、|、^、~、<<、>>,>>>)、赋值运算(=)、条件运算(？:)、逗号运算(，)、对象运算符(new delete . （) instanceof)、计算符的优先级

6.语句语句、条件（if,swich）、循环（for/for in/ while/ do-while） lable break continue、异常 (try catch finally)、with、label

7.数值Math（abs、round、ceil、floor、max、min、random、其他）、parseInt、parseFloat、Number、NaN、toFixed

8.字符串定义、length、charAt（下标）、indexOf、lastIndexOf、search、match、replace、substring、slice、substr、split、toLowerCase、toUpperCase、连接和转换字符串（+、String()）、转义

9.对象定义、创建（new、直接量）、属性、方法、constructor、toString、valueOf、hasOwnproperty

10.数组定义、创建（new、直接量）、length、indexOf、forEach、（reverse、sort）、（push、unshift）、（shift、pop）、splice 、slice、concat、join、reduce

11.函数函数定义(函数声明、函数表达式、函数参数)return)、函数调用、arguments、构造函数的作用域、对象方法、function.prototype

12.Datenew Date(), Date.getXXXX()，格式化， Date.setXXX()，求天数， Date.getTime()

13.RegExp字符类、元字符、量词、多选分支、转义、捕获、匹配模式

14.JSON定义，JSON.parse(),JSON.stringify

2.进阶篇1.类型进阶参数识别应用场景(字符串和数组的例子)、类型识别方法：typeof，constructor,Object.prototype.toString,和其它instanceof（Array.isArray, isNaN)、类型转换(所有方法+隐式转换)

2.函数进阶函数定义(函数声明、函数表达式)new Function）、arguments（callee、转数组）、apply、call、bind、高阶函数（AOP、curry、记忆函数）

3.原型原型(概念)、构造函数，原型链(原型链，原型链搜索，原型链修改，原型链删除，Function.prototype,Object.prototype）、原型继承

4.变量作用域动态作用域和静态作用域，词法环境(函数作用域)，作用域链，with/catch

5.闭包闭包示例、闭包原理、闭包应用

6.面向对象JS面向对象

 

 

 

DOM编程艺术

 

 

单元（章）课题（节）内容

1.基础篇1.文档树dom范围，节点类型，节点关系，getElements,children,sibling

2.节点操作getElementById,getElementsByClassName,getElementsByTagName,querySelector(All),createElement,innerHTML,innerText,appendChild,insertBefore,insertAdjacentELement(HTML),removeChild,replaceChild

3.属性操作getAttribute,setAttribute,datalist

4.样式操作className   ,classList,style,cssText

5.事件capture、target、bubble，事件登记、取消事件登记、事件触发、事件对象、防止泡沫、默认事件、DOM事件分类和继承关系、鼠标事件类型、鼠标事件对象、鼠标事件示例、键盘、输入、焦点事件类型、事件对象、事件示例、事件代理原理、事件代理示例、事件代理优缺点

6.数据通信http协议中的头信息字段和应用程序

ajax(xhr2，跨域)，CORS,jsonp

7.数据存储cookie

localStorage、sessionStorage

8.动画setInterval,   setTimeout, requestAnimationFrame()幻灯片切换动画实例

9.音频，视频audio和video的共同属性、方法和事件

10.canvas介绍canvas的基本用法和常用API

11.BOMScreen,navigator,location,history对话框，窗体互操作，load,beforeunload,scroll,resize等事件

12.表单操作input、select、textarea

  表格验证属性、界面、事件、应用程序

  属性、界面、事件、应用程序提交表格

  案例解释表的综合应用

13.列表操作显示、添加、删除、更新和选择列表的操作，比较视图编程和数据编程模式

2.实践篇1、组件实践弹窗组件和轮播组件

 

 

 

页面架构

 

单元（章）课题（节）内容

1.CSS   Reset1.CSS ResetCSS Reset方法和应用

2.布局解决方案1.居中布局各种居中布局的解决方案和优缺点

2.多列布局各种自适应布局、等分布局、等高布局的解决方案和优缺点

3.全屏布局全屏布局的各种解决方案和优缺点

3.响应式1.响应式响应原理和实现

4.页面优化1.页面优化页面优化方法

5.标准化和模块化1.规范为什么要制定规范，如何为团队制定页面规范？

2.模块化什么是模块化，为什么要模块化，如何实现页面模块化

 

 

 

产品前端架构

 

单元（章）课题（节）内容

1.协作流程1.WEB系统介绍了基于MVC的典型WEB系统架构

2.角色定义根据技能掌握程度的差异定义不同的角色

3.协作流程介绍了前端和后端分离并并行开发模式的流程

4.职责说明通过这个过程总结每个角色的职责

2.接口设计1.概述介绍为什么要制定协议，哪些部分需要制定协议，以及每个协议定义的范围

2.接口规范页面摘要定义的内容、示例解释、同步数据协议定义的内容、示例解释、异步接口协议定义的内容、示例解释

3.规范应用协议的实际应用：构建项目项目，模拟同步数据，模拟异步接口

4.本地开发如何独立开发前端协议和导出的模拟数据？

3.版本管理1.简介VCS、本地、中央、分布式

2.分支模型抽象理解、分支模型和产品级模型介绍

3.git历史、介绍、安装

  help、config、status、init、add、rm、commit、log、diff、checkouttele级别的File级别、reset

    branch、checkout、reset、reset-vs-checkout、merge、rebase、rebase-vs-merge、tag

  push、remote、fetch、pull、clone

4.技术选型1.模块化反模式-对象字面量-IIFE-命名空间-依赖管理，Commonjs/module、AMD-ES6、MODULE、Systemjs

2.框架回答框架与库的What\Why\How，Dom、通讯，模板，utility、组件，路由，MV*结构.分别推荐解决方案

5.开发实践1.系统设计案例介绍说明，案例解释根据交互分解系统，案例解释如何提取界面，如何输出界面规范，案例解释通过输出规范建设项目，包括结构和数据

2.系统实现提取、实现和包装案例解释组件，实现案例解释数据层和控制层的代码

3.亲自测试后发布经过个人测试环境配置、个人测试数据构建和个人测试工具使用，案例解释系统发布并优化了配置