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

第二天:给自己做一个在线简历吧

普通

人数4824人在学习该课程,有1889人已经完成该课程

时间平均用时4.0

关键词HTML

课程概述

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

第二天:给自己做一个在线简历吧

前言

我相信很多同学很着急的在第一天就开始看这个题了,没关系,如果你时间足够,没问题的。但是希望你记住,在这个系列课程中,完成多少任务并不重要,我们没有什么指标或者打分,来记录或者评估,你是不是一个快枪手。我们希望你在这个系列课程中,能够扎扎实实地掌握每一个基础知识,能够不断思考、实践,来形成自己的学习方法论,顺便提高自己的英文阅读能力以及写作能力。所以,不要在这里刷题,这里是个学习的平台,而不是培训考试速成培训班。

课程目标

第二天,我们希望你能够通过简单的实践,更加清楚地了解HTML是什么,HTML5是什么。学习基本的HTML标签,理解HTML语义化概念

任务描述

今天我们先暂时不用第一天让你安装的IDE,我们先暂时使用 codepen 作为我们的开发工具,打开 codepen,创建一个新的页面(Create->New Pen)。它有三个代码编写的窗口,分别是HTML,CSS,JS,下方是一个预览效果的窗口。我们今天只会涉及到 HTMLCSS

然后我们在 HTML 窗口中开始输入一些内容吧,我们假设现在要为自己创建一个在线简历,那简历都包含什么呢?给一些参考:

  • 包括“简历”两个字
  • 你的姓名,有可能只有姓名,有可能是 姓名:张三 这样的模式
  • 你的各种联系方式,比如:手机:18600000000,邮箱:joinefe@baidu.com
  • 你的学历,比如:本科:百度前端学院
  • 项目经验,比如:项目A:项目时间:2017.1-2017.8,项目描述:在项目A中负责了xxxxx

你可以参考自己的简历内容,也可以参考网上一些热门简历内容,比如 羡辙 的简历(她简历的样式每年校招简历总能看见很多人在复用,所以,希望大家以后做简历的时候换个样式吧,哪怕是换个颜色也是极好的)。

接下来,我们要把这些内容组装进一个HTML里面,这时候,你先不要考虑这个简历会长什么样,你重点要放在一个哲学问题上,就是简历里面的每个内容,它是什么。也许你还没太懂啥意思,所以,先看看下面几个内容。

阅读

首先阅读 W3School的HTML教学 把HTML的各个标签再学习一遍,当然看 MDN 或者能力强的同学直接看 W3C 也是没问题的。

接下来,理解一下 顾轶灵的如何理解 Web 语义化?,如果没有看太懂,可以再自行搜索一下“Web语义化”相关文章内容

在整个阅读过程中,你可以一边看,一边想想,你之前准备的简历的每个内容,应该用什么样的HTML元素、标签比较合适。

编码

阅读完以后,我们继续回到codepen。现在你需要把你之前想到的简历内容的每一个内容拆解到对应的HTML元素,你需要考虑很多问题,举几个例子:

  • 大标题“简历”二字,是否适合使用<h1><h2>之类的标题元素
  • “姓名:张三”这几个字,我是用一个<xxx>元素呢?还是拆成<yyy>姓名</yyy><zzz>张三</zzz>(xxx,yyy,zzz均为示意)
  • “项目经验:A项目,xxxx,B项目,xxxxx”这部分内容结构有点小复杂,怎么用合适的HTML元素来组装呢?

在这个过程中,需要注意的事儿,你要考虑的主要问题,就是为你的内容找到语义合适的HTML元素,暂时不要考虑样式的问题,切记。

好的,愉快地写代码吧,内容不需要太多,这段编码时间别超过 2 个小时。上个闹钟,如果超过了,暂停一下,重新去阅读一下上面的参考资料,看看自己有没有实现得不合理的地方,然后优化一下。

注意别暴露自己隐私,里面数据用虚假的即可,当然,如果你想当网红或者希望更多人认识你,请随意。

提交

把你的 codepen 地址提交到作业里,因为是codepen,所以代码地址和预览地址一样即可。

交流

找到几个 QQ 群或者微信群,最好是找几个周围的小伙伴,彼此交流一下,互相Review一下代码,也可以在作业提交list里随便找一些同学的代码看看。

重构

估计今天还剩下几个小时,交流完的你,不妨再多看一些文章和书籍,然后重新看一遍自己的代码,优化一下,我们把这个叫做重构(有可能是重写……),一遍又一遍觉得自己代码太丢人,然后优化它,是最好的成长方式之一。

验证

来最后小验证一下,你是否能流畅地回答以下问题:

  • HTML是什么,HTML5是什么
  • HTML元素标签、属性都是什么概念?
  • 文档类型是什么概念,起什么作用?
  • meta标签都用来做什么的?
  • Web语义化是什么,是为了解决什么问题
  • 链接是什么概念,对应什么标签?
  • 常用标签都有哪些,都适合用在什么场景
  • 表单标签都有哪些,对应着什么功能,都有哪些属性
  • ol, ul, li, dl, dd, dt等这些标签都适合用在什么地方,举个例子

不知道验证完了是兴高采烈充满自信,还是觉得前面白学了?两种结果都是有价值的,发现还有不会的地方,就再重新去看材料吧。

总结

今天的工作量比昨天略大,但希望你是有所收获和思考的,最后要做的事情,就是把这些思考和收获,也有可能还有没有想明白和解决的问题,找个地方记录下来吧,可以是前端学院的笔记模块,也可以是你其他任何形式。我们建议是一个对外别人能看见的,这样能让你总结做得更认真,效果更好,一定要做总结,让自己今天的学习有一个完美的ending。别忘了也记录下今天学习的用时,到最后坚持到最后一天,把用时加起来,你一定会为自己骄傲的!

明天预告

辛苦了,明天我们会为你的简历加上一些样式。加油!才第二天,相信你一定能够坚持。

如果你依然觉得今天的内容简单,不妨去看看其他学院,或者,阅读一下英文材料,提高一下英文技术文档的阅读能力,或者,把你理解的内容以一个教程的形式写一篇文章出来,锻炼一下写作能力,而且说不定下一年这个课的参考资料就是你的文章。

学员提交的作业 (-)
学员名称提交时间提交的代码预览效果评价数平均得分操作
课程优秀学习笔记
标题发布时间浏览量点赞量
让我们来设计一个书籍标记语言吧2018-04-25 16:154823196
第二天笔记2018-04-25 15:103181163
对HTML语义化的理解和记录2018-04-25 15:34199065
点击查看更多课程优秀笔记