前端之旅

旅程背景

• 简单介绍下前端的起源，发展情况，所需技能。

旅程意义

• 为什么要会前端？（好处）
  • 有位古人曾经说过，“不想做CEO的后端不是一个好的前端工程师”
  • 国外工程师都是前后通吃（附图，github 前端开发人员表）
  • 对于公司来讲，后端懂前端，可以更好地写作沟通
  • 自己可以完成一些后台页面，完成简单的交互功能
  • 在做前端的过程中，能够更近距离地接触到用户体验

旅程内容

分为两个阶段，第一阶段主要是 html + css，第二阶段是 jQuery，前两个阶段偏自主学习，第三阶段是动手实战。

准备工作

建立你的 github 账号，fork https://github.com/LeezQ/front-end-practice 这个资源库，创建自己的目录，目录名使用自己的中文花名即可。在自己的目录中创建自己的demo.html页面。

以下学习资料中所涉及到的 demo 代码示例最好在 demo.html 页面中手动做一遍，除非自己感觉对这段代码已经很了解了。

第一阶段相关学习资料：

---

HTML 相关

• w3school 网站 - HTML 相关资料
  • HTML 简介
  • ＊HTML 基础
  • ＊HTML 元素
  • HTML 属性
  • HTML 标题
  • HTML 段落
  • HTML 链接
  • HTML 图像
  • HTML 表格
  • ＊HTML 块
  • HTML 表单
  • HTML 布局

需要掌握的知识点:

1. HTML是什么？

2. HTML基本语法
   1）标签
   2）元素
   3）属性

3. HTML基本标签
   1）常用标签有哪些？
   2）每个标签的语义是什么？
   3）标签的分类：行级标签、块级标签。
   4）行级标签和块级标签之间的差别。

CSS 相关

• w3school 网站 - CSS 相关资料

  • css 基础知识

  • CSS 简介

  • CSS 基础语法

  • CSS 高级语法

  • CSS 创建

  • css 选择器

  • ＊CSS 元素选择器

  • ＊CSS 选择器分组

  • ＊CSS 类选择器详解

  • CSS ID 选择器详解

  • CSS 属性选择器详解

  • CSS 选择器分组

  • CSS 伪类

  • css 盒子模型（框模型）

  • ＊CSS 盒子模型概述

  • CSS 内边距

  • CSS 边框

  • CSS 外边距

  • CSS 外边距合并

  • css 布局

  • ＊CSS 定位概述

  • ＊CSS 相对定位

  • ＊CSS 绝对定位

  • ＊CSS 浮动

需要掌握的知识点:

1. css 是什么？

2. css 选择器
   1）有哪几种类型
   2）选择器的权重

3. css 布局
   1）css 盒子模型 2）有哪些布局方式
   3）绝对定位的使用方式
   4）浮动布局的使用场景，如何清除浮动

第一阶段测验地址

HTML & CSS 练习地址

第二阶段相关学习资料：

---

javascript 相关

• w3school 网站 - javascript（JS） 相关资料

  • javascript 基础知识

  • JS 变量

  • JS 数据类型

  • JS 对象

  • JS 函数

  • JS 运算符

  • JS 比较

  • JS If...Else

  • JS Switch

  • JS For

  • JS While

  • javascript 常用内置对象

  • JS Array

  • JS Boolean

  • JS Date

  • JS Math

  • JS Number

  • JS String

  • JS RegExp

  • DOM Location

  • 推荐阅读

  • javascript 秘密花园

  • 蘑菇街前端开发规范 - javascript 篇

由于 jQuery 在处理 DOM 及 事件上的强大能力，所以对原生的 js 操作 DOM 这一块不做强制要求，有兴趣的同学可以自己了解下。

第二阶段 javascript 练习地址

javascript 练习地址

jQuery 相关

• w3school 网站 - jQuery 相关资料

  • jQuery 基础知识

  • jQuery 简介

  • jQuery 使用

  • jQuery 语法

  • jQuery 选择器

  • jQuery 事件

  • jQuery 效果

  • jQuery 隐藏/显示

  • jQuery 淡入淡出

  • jQuery 滑动

  • jQuery 动画

  • jQuery stop()

  • jQuery Callback

  • jQuery Chaining

  • jQuery DOM 操作

  • jQuery 获取

  • jQuery 设置

  • jQuery 添加

  • jQuery 删除

  • jQuery 操作 css 类

  • jQuery css()

  • jQuery 尺寸

  • jQuery ajax 操作

  • jQuery.Ajax()

  • ajax 相关快捷方法

  • jQuery 事件

  • jQuery 事件绑定

  • jQuery 鼠标事件

  • 推荐阅读

  • jQuery官方推出的教学视频

第二阶段 jQeury 练习地址

jQuery 练习地址

第三阶段相关资料：

---

存放相应的 PSD 到 svn 地址上，第三周周五下午下载 svn 后，临场测试，优秀者可获得神秘奖品一件。