注意事项
提问与停课
- 代码问题：将代码放到http://js.jirengu.com，按
Ctrl+S保存，复制链接到班级群或大群提问并@老师 - 停课申请：https://www.wenjuan.com/s/2yERb2H/
必修课
前端入门
- 前端是什么？做什么？学哪些东西？学习方法？
- linux 基本命令行
- 从 url 输入到页面展现发生了什么
- 工具
- 浏览器、编辑器、Git、nodejs、翻墙软件的安装
- vscode 或者 Webstorm 的使用
- jisbin 的使用
- chrome 调试工具的使用
- Git & Github 使用
- markdown 写博客
HTML
- 页面结构
- 一个最简单的页面结构
- 表现与样式分离概念
- 标签属性讲解
- doctype
- lang
- meta
- charset 编码与乱码
- viewport
- keyword
- description
- 常见标签
- 标签的使用场景
- 标签的闭合、嵌套、大小写、id 和 class 基本规范
- alt 与title 的区别
- a 的target 的几种值
- table 的写法和使用场景
- 表单
- 表单提交的概念
- name 的作用
- POST 与 GET
- 多选提交
- radio 分组
- type = hidden 的作用
- placeholder
- html5 标签
CSS
- 样式的加载
- CSS 引入方法
- link 和 @import 的差别
- 几种文件路径区别
- CSS 选择器
- 选择器类型
- 选择器权重计算
- 伪类与伪元素
- a 链接伪类选择器顺序原理
- :first-of-type 和 :first-child
- :before, :after 用法
- 基本样式
- 基本概念
- 基本样式调试
- 浏览器默认样式
- 块级元素 vs 行内元素
- font
- font 的写法
- line-height 的用法
- font-family 用法和原理
- chrome 最小字体尺寸
- 单位
- px em rem vw
- 百分比的用法
- text
- test-align 几种写法
- 单行文本文本溢出加...
- a 链接去除下划线
- 列表去掉点
- 颜色
- 颜色的几种表示方法
- a 链接的颜色设置
- 背景
- 背景色、背景图片的使用方法
- CSS sprite 的原理和用法
- image 标签 vs 背景图片
- 基本概念
- 盒模型
- 盒模型属性
- IE 盒模型 & W3C 盒模型 & box-sizing
- 浮动
- 浮动的定义、使用场景
- 清除浮动 clearfix
- 浮动与 BFC
- 浮动与 inline-block
- 浮动的应用
- 菜单栏
- 两栏布局
- 三栏布局
- 定位
- 定位的几种方法
- 脱离文档流概念
- z-index
- 布局
- 固定宽度居中布局
- 简单的两栏布局
- 简单的三栏布局
- 圣杯布局、双飞翼布局
- 浏览器兼容
- IE6、7、8的hack写法
- HTML条件注释
- 其他知识点
- class命名技巧
- inline-block使用、缝隙、对齐
- vertical-align的用法
- 水平居中、垂直居中的几种方式
- 字体图标的原理和用法
- 伪元素、边框的妙用
- 外边框合并
- 清除浮动的几种方法
- 媒体查询与响应式
- CSS Reset
- 块级格式化上下文
- 实现一个栅格系统
- 前端编码规范
- 静态页面实战1-实现创意个人页面
- 静态页面实战2-实现一个企业站
Javascript
- 概念
- URL、浏览器、服务器、网站相关概念
- 页面渲染原理
- 白屏、FOUC原理
- ES3 ES5
- 数据类型
- 运算符
- 流程控制语句
- 函数
- 内置对象
- 字符串
- 数组、ES5数组方法
- 日期
- Math
- 正则表达式
- 定时器
- 最小时间粒度
- 重要概念
- 基本类型与引用类型
- 作用域
- 声明前置
- 闭包
- 立即执行函数表达式
- 同步与异步
- 单线程、任务队列、时间循环
- 实战
- 封装一个Utill库，包括类型判断、日期格式化、正则检测、事件兼容封装、深浅拷贝等
- DOM
- DOM遍历
- DOM操作
- 事件
- 事件绑定方法
- 常见事件介绍
- 事件冒泡、捕获与应用
- 事件兼容写法
- 事件代理与应用
- 阻止默认事件
- 实战
- 二级菜单
- 登录注册表单验证
- Tab切换效果
- 回到顶部
- BOM
- history
- location
- navigator
- localStorage
- cookie
-实战- 封装一个cookie操作的Utill库
- 封装一个设备类型检测的Utill库
- Ajax
- 概念
- ajax的使用
- node工具搭建websever mock数据
- 实战
- 实现加载更多评论
- 实现一个滚动无限加载的照片墙
- 实现一个无刷新改变URL带分页的新闻展示页
- 跨域
- 跨域的概念
- jsonp的原理与封装
- 几种跨域方式的实现
- 实战
- 实现瀑布流展示的滚动无限加载新浪网页
- 实现一个天气预报页面
- jQuery
- 选择器
- DOM操作
- 属性&CSS操作
- 常用函数
- 事件处理
- 常用效果和动画
- ajax
- deferred
- jQuery源码解析
- 实战
- 实现循环动画轮播
- 实现木桶布局照片墙
- 面向对象
- 面向对象概念
- 构造函数创建对象
- this
- 原型
- 原型链
- 继承
- 代码封装的方法
- 实战
- 封装一个轮播插件
- 封装一个dialog组件
- 封装一个日历组件
- 封装图片全屏轮播展示组件
- 设计模式
- 构造器模式
- 模块模式
- 单例模式
- 发布订阅模式
- 实战
- 封装一个事件管理器
- 技能
- 熟练使用console.log来debug
- 熟练使用二分法来debug
- 熟练使用network分析请求和响应
HTML5&CSS3
- HTML5常见标签使用
- html5shiv
- CSS3 背景、边框、阴影
- CSS3 2D 3D 转换
- CSS3 渐变、动画
- flex 布局
- 实战
- 实现几种loading动画
- 实现一个3D滚动的slides效果
模块化
- 模块化的价值
- CommonJS、AMD、CMD、UMD规范
- RequireJS的使用
- webpack的使用
- 模块化实战
- 实战
- 在个人项目中使用RequireJS或者webpack
NPM&Node
- NodeJS介绍
- NPM使用
- 实战
- 开发个人Node包
工程化
- Gulp打造自动化流程
- 图片压缩
- CSS压缩合并autoprefixer自动版本号
- JS lint压缩合并自动版本号
- Less转CSS
- HTML资源定位
- livereload
- NMP Scripts 使用
- 实战
- 在个人项目中使用gulp做工程化
综合
- 性能优化
- HTTP
- HTTP介绍
- 缓存控制
- Web安全
- XSS攻击
- CSPF攻击
- 移动端特性介绍
- MVC介绍
项目（选1）
- Express搭建完整的企业站
- node开发个人命令行脚手架
- 实现个性UI组件库
- 个人FM电台
需要看哪些书
看目录、略读个别正在学习的章节，作为知识的补充巩固，可以做读书笔记，尽信书不如无书
- 《JavaScript 高级程序设计》
- 《JavaScript权威指南》
- 《高性能网站建设指南》
- 《JavaScript设计模式》
- 《图解HTTP》
学习建议
- 定个目标，抬头看路、低头走路
- 别瞎想，别听别人瞎说，只需要坚定地执行
- 1.5倍效率？适度深挖。
- 课程以外知识定个小目标
- 自信能提高30%的战力
预习内容
- 从URL到页面展现的相关文章
- 了解W3C、ECMA
网友评论