Level 2 小试牛刀

TASK 001 PS在前端开发中的运用

切图仔怎能不会点PS?

TASK 002 HTML、CSS基础

任务描述:

掌握HTML、CSS基础知识，能够较为熟练的使用HTML、CSS编写页面
学习HTML常用标签的使用,明白每个标签的用途.
认识CSS样式,理解CSS选择器的权值计算、布局模型、盒模型等，掌握基本的网页布局基础

1、HTML

1.1 HTML部分需要学习的知识包括
- 标题段落图片链接列表表格表单等等内容
1.2 学习目标
- 了解什么是Web
- 了解什么是HTML
- 了解一些基本的HTML语法及标签
- 能够写出自己的第一个HTML
1.3 参考资料
1.4 推荐书籍
- 《Head First HTML》
1.4 练习
- 百度前端学院任务一:零基础HTML编码

2、CSS

2.1 CSS相关知识
- CSS选择器
- CSS继承，层叠，样式优先级机制
- 文本，边框，背景，行高等相关属性
- 块状元素，内联元素和内联块状元素的概念
- 盒模型的所有概念，学习如何计算各种盒模型
- position的相关知识
- float的相关知识
- 基本的布局方式
- Grid,Flexbox等布局方式
2.2 相关资料
2.3 推荐书籍
- 《精通CSS》
- 《CSS揭秘》
2.4 练习
- 百度前端学院任务二:零基础HTML及CSS编码(一)
- 百度前端学院任务三:三栏式布局
- 百度前端学院任务四：定位和居中问题
- 百度前端学院任务五:零基础HTML及CSS编码(二)
- 百度前端学院任务六:通过HTML及CSS模拟报纸排版
- 百度前端学院任务七:通过常见的技术产品官网的页面架构及样式布局
- 百度前端学院任务八：响应式网格（栅格化）布局
- 完善，总结曾经做过的百度前端学院任务九
- 完善，总结曾经做过的切图第一次作业，尤其是屏幕适配问题

3、前端切图-综合练习

3.1 综合切图训练1:电商网站 [Deadline:2017/1/17 24:00]
- PSD及教学视频下载
3.2 综合切图训练2:新浪首页 [Deadline:2017/1/19 24:00]
- PSD下载
3.3 综合切图训练3：优酷首页 [Deadline:2017/1/21 24:00]
- PSD下载
3.4 附加题，有兴趣的做一做
3.5 关于1.4，2.4，3.1-3.4练习的描述
- 注意事项:编码过程中请尽可能遵守勤奋蜂HTML、CSS编码规范
  - 暂时不要使用less,sass等，那是后面的任务
  - 不要使用任何样式框架
  - 不需要写任何JavaScript,只需要关注HTML,CSS。当然你要控制不了自己，可以写一下。
- 任务关键步骤执行：
  - 编码的同时，记录遇到的技术问题和疑惑；
  - 开始重（Chong）构(Xie),让自己的代码比第一次要有提升，尽可能让第一次遇到的问题和疑惑不再存在
  - 在博客上写上一到两篇的学习心得或者你觉得研究的还不错的知识点
- 期望达成
  - 学会能够基于设计稿来合理规划HTML结构
  - 理解语义化，合理地使用HTML标签来构建页面
  - 能够较为熟练地使用HTML、CSS创建一个静态页面
  - 大概了解并实践企业中对于HTML及CSS的编码规范
  - 编写复用性高、可读性、可维护性好的代码

4、自我验证

HTML,CSS学完了，自己学的怎么样，来自己检测一下吧

doctype是什么，它是干啥用的
ul、ol、dl都适合用在什么地方
能够娓娓道来你是怎么理解HTML语义化的
CSS选择器都有哪些
position都有什么值，区别是什么
经典的清除浮动代码中每一行语句都是干什么用的，为什么少了它不行
让一个HTML节点居中的各种实现方式
神马圣杯布局、双飞翼布局都是些什么东西
强大的负外边距都能干嘛
不小心提起文档流的时候还能接着解释到底啥是文档流 ........

##TASK 003 SASS/LESS 预编译

Sass和Less学习视频

##TASK 004 前端规范（HTML/CSS)

勤奋蜂前端规范