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

Posted 2020-07-27

看到美观而设计感强的页面，怎样把它做出来？你的想法能不能变成别人眼前的现实？本课程以解决实际案例为导向，从切图开始，通过学习html标签与CSS设计，让你独立完成从效果图到网页的编码实现。

课程目录：

页面制作

单元（章）	课题（节）	内容
1.Photoshop切图	1.工具、面板、视图	介绍切图概念、PS软件、PS的面板+常用工具+辅助视图。
	2.测量、取色	介绍并演示获取信息的方法：测量与取色
	3.切图	切图及切图的各种操作：隐藏文字（独立图层和非独立图层的不同操作方法）、png8和png24格式的切图方式、可平铺背景的切图方式及活动页的切图方式。
	4.保存	保存图片的操作，图片的几种保存格式（png8\png24\jpg）
	5.修改、维护	图片的修改与维护方式
	6.图片优化与合并	图片的使用方法，图片的优化合并方案（包括图片合并的排列方式及分类合并方案），图片兼容方案。
2.开发、调试工具	1.开发、调试工具	常用开发工具和调试工具的功能介绍与使用方法
3.HTML	1.HTML简介	简要介绍HTML发展历史、基本概念和文档声明等
	2.标签	介绍标签语法、各类标签及语义化
	3.实体字符	介绍常用实体字符
4.CSS	1.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、展示4个按钮，并展示响应的堆栈变化，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.Date	new 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.BOM	Screen,navigator,location,history对话框,窗体互操作,load,beforeunload,scroll,resize等事件
	12.表单操作	input、select、textarea   表单验证属性、接口、事件、应用   表单提交属性、接口、事件、应用   案例讲解表单的综合应用
	13.列表操作	列表的显示、添加、删除、更新、选择操作，面向视图编程和面向数据编程方式的实现对比
			2.实践篇	1、组件实践	弹窗组件和轮播组件

页面架构

单元（章）	课题（节）	内容
1.CSS   Reset	1.CSS Reset	CSS 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、File级别的checkout、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.测试发布	案例讲解测试环境配置、测试数据构建、测试工具使用，案例讲解系统发布、优化配置