百度前端技术学院是一个为大学生创办的免费的前端技术实践、分享、交流平台。由百度校园招聘组、百度校园品牌部、百度前端技术部以及多个百度的前端团队联合创办。学院组织了一批百度在职工程师,精心编写了数十个实践编码任务,将技术知识点系统有机地串联在各个充满趣味与挑战的任务中,同学们通过实际地编码练习来掌握知识,再辅以互相评价、学习笔记等方式,加深对于学习内容的理解。在过去的三年中,百度前端技术学院累积吸引了上万名同学参加,并且有数十名同学在学习后,顺利加入了百度,成为了百度的前端工程师。

第九天到第十一天:来做一个漂亮的网站

进阶

人数972人在学习该课程,有548人已经完成该课程

时间平均用时5.0

关键词HTMLcss

课程概述

作业提交截止时间:09-01

第九天到第十一天,来做一个漂亮的网站

课程目标

经过前面八天的练习,我们基本把HTML和CSS的基本知识进行了一遍学习,新的任务,将会用三天的时间,来学习如何将一个设计稿转化为网页,通过这个过程实战我们之前学到的各种CSS知识。

课程描述

复习

首先对上一个任务进行复习,如果还没有完成上一课任务的同学,请先完成上一个任务。

阅读

按照设计师提供的设计稿,实现HTML页面,需要将设计稿切分成为最终在页面中呈现的一个个图片,我们一般称之为“切图”,在不同公司,切图的工作可能是不同职位做,可能是设计师、可能是重构工程师、可能是前端工程师。但不管怎样,这是我们需要掌握的一个基本功能,正常来说,小半天我们就能基本掌握这项技能了。

编码

使用VS Code等开发工具,按照如下设计图,进行页面的实现

要求:

  • 代码风格符合某种编码规范
  • 尽可能按照设计稿的尺寸进行实现
  • 设计稿中的图片或文字素材在实现时可以不一致
  • 充分应用上之前学习到的各种布局方式,尽可能几种方式都运用尝试一次,比较各种布局的适用场景
  • 设计稿中下方导师介绍图片,左上角灰色底表示,鼠标hover到图片上时的效果变化。
  • 不需要考虑兼容IE浏览器

再次阅读

将之前的材料以及自己搜索到的材料进行多次阅读,并重点阅读W3C规范

重构你的代码

根据上面的阅读学习,重构你的代码,优化代码结构及细节

提交

把你的代码提交到 Github,把 Github 地址提交到作业里,如果有余力的同学,可以学习如何在Github中预览你的HTML代码,并提交预览地址。

总结

依然把今天的学习用时,收获,问题进行记录

下一个任务预告

下一个的任务依然是一个逼近实战的练习。

学员提交的作业 (-)
学员名称提交时间提交的代码预览效果评价数平均得分操作
课程优秀学习笔记
标题发布时间浏览量点赞量
居中详解2018-05-11 20:4399920
第九天到第十一天2018-05-06 15:2096010
学习切图2018-05-06 05:027552
点击查看更多课程优秀笔记