前端开发是创建Web页面或app等前端界面呈现给用户的过程。前端开发通过HTML,CSS及Java以及衍生出来的各种技术、框架、解决方案,来实现互联网产品的用户界面交互。Web前端工程师,他是伴随着web兴起而细分进去的行业。Web前端的岗位职责是利用HTML、CSS、Java、DOM、Flash等各种Web技能结合产品的界面开发。web前端开发入门教程要学哪些内容呢?
第一阶段基础学习
第一阶段
前端页面重构
PC端网站布局:
-HTML基础,CSS基础,CSS核心属性
-CSS样式层叠,继承,盒模型
容器,溢出及元素类型
-浏览器兼容与宽高自适应
-定位,锚点与透明
-图片整合
表格,CSS属性与滤镜
HTML5+CSS3基础:
-HTML5新增的元素与属性
-表单域增强元素
CSS3选择器
-文字字体相关样式
-CSS3位移与变形处理
-CSS32D转换与过度动画
-CSS33D转换与关键帧动画
-弹性盒模型
-媒体查询
-响应式设计
WebApp页面布局:
-移动端页面设计规范
-移动端切图
-流式布局(%布局)
-等比缩放布局(rem布局)
-响应式布局
-viewport
-rem/vw的使用
-flexbox详解
移动端reset1pxborder
-淘宝移动端页面适配方案
1.HTML基础
内容包括:(HTML简介与历史版本、常用开发软件、常见标签与属性、
表格与表单、标签规范与标签语义化、实战:网页结构布局)
2.CSS基础
内容包括:(css简介与基本语法、常见的各种样式属性、CSS选择器与标签类型、理解盒子模型与CSS重置、浮动与定位、利用photoshop工具测量样式、HTML+CSS开发网页、实战:高仿电商首页效果)
3.CSS3基础
内容包括:(css3常见样式、css3选择器、变形与动画、3D效果与关键帧、弹性盒模型、5.移动端布局、移动端基本概念、viewport窗口设置、移动端布局方案、rem、vh、vw等单位、响应式布局、bootstrap框架)
4、Java基础
JavaScrip高级程序设计原生JavaScrip校互功能开发:
基本语法
-循环语句
-函数与数组
-String与Date
BOM与DOM
-事件
-拖拽效果
-cookie存储
-正则表达式
Ajax
面向对象进阶与ES5/ES6/ES7应用:
Promise
-设计模式(观察者模式等)
-原型链
构造函数
-执行上下文栈与执行上下文
-变量对象与活动对象
-作用域链
-闭包
-this
-ES5
-ES6
-ES7
JavaScriptI具库自主研发:
-DOM库
-事件库
-AJA0车
-原型和继承库
MVVM核心库
-基于SPA的路由库
内容包括:(JS简介、JS变量、数据类型与类型转换、运算符与优先级、
流程控制-if..else流程控制-switch...case、流程控制-while、do..while、for循环、break、continue语法、函数定义与调用、全局变量与局部变量、函数传参和返回值、函数作用域与变量作用域、DOM的基本操作、定时器使用、this指向与修改指向、数组、字符串等方法操作、时间对象与正则对象、掌握常见BOM操作、常见事件与事件细节、JSON与AJAX、JSONP跨域操作、前端cookie的使用、实战:JS配合HTML与CSS完成电商项目)
第二阶段:jQuery框架
第二阶段
jQuery经典交互特效开发:
-时间轴特效
-tab页面切换效果
-网页定位导航特效
-滑动门特效
-焦点图轮播特效
导航条菜单效果
-瀑布流特效
-弹出层效果
-倒计时效果
-抽奖效果
MySQL后端基础:
-Apache
-MySQL
-HTTP(S)协议详解
-Ajax进阶、跨域与Defered
-Apache与Nginx环境搭建与配置
-接?的定义
-Mock数据
-Restful
-前后端联调
-前端安全(XSS,CSRF,JSON注入)
内容包括:(jquery框架介绍及优势介绍、jquery核心思想、jquery常见方法、jquery动画操作、jqueryAJAX操作、jquery工具方法、利用jquery快速开发网页)
PC端全栈开发前端工程化与模块化应用:
Gulp
WebpackNPM
Linux命令
Git/SVN
CommonJs
AMD
CMD
ES6模块化
PC端全栈开发项目:
-大首页、列表页与详情页
展示与交互特效
搜索
登录与注册
购物车
jQueryUI与jQueryEasyUI
Bootstrap(ACE
Highcharts/Echarts
ArtTemplate-velocity
smarty
云平台系统前端
Apache+PHP+MySQL服务器搭建
React前端框架React开发基础:.
React简介
-React开发环境佳备
-React中的组件。
JSX语法
-拆分组件与组件之间的传值
-Reactdevelopertools安装及使用
-PropTypes与DefaultProps的应用
-props,state与render函数的关系。
深入了解React虚拟DOM
-虚拟DOM中的Diff算法
-React中ref的使用
React的生命周期可数及使用场景。
使用Charles实现本地数据mock
React中交现CSS动动画效果
-react-transition-group实现动画
-Redux概念简述和工作流程
-Action和Reducer的编写
ActionTypes的折分
使用actionCreator统一创建action。
UI组件和、容器组件及无状态组件
-使用Redux-thunk中间件实现ajax数据请求
Redux-saga中间件使用。
React.redux中间件使用
ReactNative:
-ReactNative初探
-ReactNative项目导航
-ReactNatve项目文本框。
ReactNative项目滚动分页
-ReactNative其他组件
应用Rea开发WebApp项目
Design组件库
-ReactRouter4路由
项目组件编写.
使用Immutablejs来管理store中的数据
项目的联调、测试与发布上线
Node.JS后端开发Nodejs基础
一、Nodejs基础
Nodejs介绍
-开发环境搭建
-模块与包管理工具
-CommonJS模快
URL网址解析
-QuerySuing参数处理
HTTP模块
HTTP小爬虫
request方法
-事件event模块
文件fs模央
Stream流模抉
原生路由与:多数接收
Node.js后端开发
读取图片文件
-npmscriptls
-Yam与PM2
二、MongoDB
.MongoDB介绍与环境搭建
2数据库常用命令
-Collection聚集集合
-document文档操作
聚集集合查询
NodeS连接MongoD8
三、GraphGL
GraphQL初探:从REST到GraphQL
-GraphGL安装
准备数据源
-搭建GraphQL服务器
数据查询
混合开发(Hybrid,RN)