- 什么是编程——程序设计是一门艺术
- 前端开发语言介绍
- 前端开发工程师职位和所需技能
- 职位分支:制作、前端、大前端、全栈工程师
- 职业规划和人才的市场需求
- 必备技能和知识扩展
- 开发环境和开发工具
- 浏览器,Chrome、Firefox、Safari、Opera、IE
- 浏览器调试工具,F12
- 开发工具,编辑器,IED,Sublime Text、Dreamweaver、Editplus、Aptana
- 切图工具,Photoshop、Fireworks
- 做一个简单的网页
- HTML、CSS、JS,代码编写位置和顺序
- 理解他们的作用,结构、样式、行为
- 讲解这个网页中每一行代码的意思,深刻理解网页是如何开发出来的
- Developer Tools
F12
的使用和简单调试
- 文档类型
!DOCTYPE
- 标题
h1
-h6
…… - 块级元素
div
- 表格
table
tr
td
- 图片
img
- 链接
a
- 段落
p
- 列表
ul
ol
li
dl
dt
dd
- 行内元素
span
- 强调
strong
em
- 其他标签
- 样式选择符
- id选择符(#)
- 群组选择符(,)
- class选择符(.)
- 类型选择符(div……)
- 包含选择符(div p)
- 通配符(*)
- 盒模型
width
height
border
padding
margin
- W3C标准盒模型和非标准情况
- 背景
background
- 文本
font-family
font-size
color
line-height
…… - HTML语意化和SEO
- 文档流
- 显示类型
display
- 浮动
float
- 定位
position
- 溢出
overflow
- 光标
cursor
- 垂直对齐
vertical-align
- 兼容性 http://www.w3help.org/zh-cn/causes/index.html
- 表格
- 表单和表单提交
- 用之前学过的知识点做页卡和多级菜单组件
- CSS sprites介绍
- 做一个复杂的多屏的页面制作
- CSS编码规范
- CSS hack
- html条件注释
- PNG图片压缩
- 三栏圣杯布局
- 兼容性根本原因
- 目录结构
- CSS命名空间深入
- CSS reset,normalize.css
- 图片压缩、合并,雪碧图工具
- ICON添加
- 校验、检测
- 代码压缩和优化
- 模块拆分和重用
- LESS, SASS
- 开发框架
- 960grid,Blueprint,Bootstrap,Foundation ……
- 实战,做一些常用的页面布局和组件
- 介绍HTML/CSS一些技巧和经验
- 考试,每个人做一个个人主页
参考《JavaScript高级程序设计》、《Javascript语言精粹》、《Javascript高性能》等书