FreeCodeCamp备查簿(1:#6-#30)

前言

在学习前端的时候,发现了这个用于前端学习的网站,感觉相比国内的很多学习的网站来说,针对前端方面确实有很多优势,比如FreeCodeCamp提倡“Read-Search-Ask”,它更注重个人的自学能力，提倡使用搜索、查询资料。通过freeCodeCamp的学习能提高个人编程方便的问题的解决能力。所以我决定写一个关于FreeCodeCamp学习过程的专栏,把每一节的内容、要求和当时学习的自己的一些想法写下来，便于以后对自己或者其他朋友提供一些帮助。FreeCodeCamp总共能拿到4个证书,也类似于四门课程,我不知道自己能不能全都坚持下来。不过学习这种事情，本来就是要靠坚持的。

20170805

#6  在html中写出hello world(不用多解释了)

#7  Headline with the h2 Element
用<h2>写一个主标题(不多解释了)

#8 Inform with the Paragraph Element 
在副标题下增加一个段落(简单,不解释了)

#9 Uncomment HTML
html的注释,<!--内容-->,这个是html的注释,注意,很多语言的注释都不太一样,比如单行注释有:#;*;//等等.(删除注释,简单,不解释了)

#10 Comment out HTML 
调整注释(简单,不解释)

#11 Fill in the Blank with Placeholder Text
添加占位符,"lorem ipsum text"  (简单,虽然不知道占位符有什么用)

#12 Delete HTML Elements
删除html元素,不太明白这个需要做吗?就是删除而已

#13 Change the Color of Text
修改文本的颜色,开始用到样式表,html的任何元素里面添加"style",例如:<p style="color:blue">(style就是样式,写法要求style加=中间无空格然后双引号里面填写需要的样式内容)

#14 Use CSS Selectors to Style Elements
css样式表,这节课将将style从html元素分离出来,单独设置,这样便于管理,代码上也好看,具体的做法就是在页面顶部写上<Style>元素名称+空格+{属性名称:属性值;}</style>注意:属性值后面
要加";"在大括号里

#15 Use a CSS Class to Style an Element 
用class定义样式,就是在样式表里面定义一个样式名".样式名"然后用{}表述内容,简单的说就是将html元素名替换成自定义的名,这样做html中所有的元素都可以用这个样式,
<h2 class="样式名称"></h2>

#16  Style Multiple Elements with a CSS Class
用class定义样式,在<Style></Style>里面加入 .class名字{里面加入样式就行}

#17 Change the Font Size of an Element
修改字号,简单"font-size:"

#18 Set the Font Family of an Element 
设置字体,"font-family:"

#19 Import a Google Font
调用谷歌字体,<link href="https://fonts.gdgdocs.org/css?family=Lobster" rel="stylesheet" type="text/css">
把这段代码加到顶部就可以引用字体,有时间可以查询一下谷歌字体都有什么

#20 Specify How Fonts Should Degrade
降级字体,以防止浏览器对没有的字体显示无效,font-family: Helvetica, Sans-Serif;就是在需要加载的字体后面加入备用字体

#21 Add Images to your Website
加载图片,可以从别的网站调用,也可以用服务器本地的图片,<img src="https://www.your-image-source.com/your-image.jpg">

#22 Size your Images
设置图片尺寸,width;height;这个设置简单,但是调试图片大小就比较难了,要多动手,经验多了就好了

#23 Add Borders Around your Elements 
加入边框,具体写法跟样式表的格式差不多,border-color: red;border-width: 5px;border-style: solid; 

##24 Add Rounded Corners with a Border Radius
加入圆角边框,border-radius:10px; 注意:像素加的太多边框会变成圆的.这个在做移动端的页面的时候会经常用到,要记住.

#25 Make Circular Images with a Border Radius
按百分比调整圆角,border-radius:10%;

#26 Link to External Pages with Anchor Elements
添加锚点元素:Anchor,就是在html元素里面增加链接地址:<p>Here's a <a href="http://freecodecamp.cn"> link to FreeCodeCamp中文社区 </a> for you to follow.</p>

#27 Nest an Anchor Element within a Paragraph
嵌套a元素
<p>View more <a href="http://www.freecatphotoapp.com">cat photos</a></p>

#28 Make Dead Links using the Hash Symbol
把a锚点改成固定链接
<p>Click here for <a href="#">cat photos</a>.</p>

#29 Turn an Image into a Link
给图片添加链接,就是用a元素把image包括起来.
<a href="#"><img class="smaller-image thick-green-border" src="/images/relaxing-cat.jpg"></a>

##30 Add Alt Text to an Image for Accessibility
为图片添加alt属性,就是如果图片显示不出来就显示文字,这个功能很重要,应该所有的图片都要有这个属性
<a href="#"><img class="smaller-image thick-green-border" src="/images/relaxing-cat.jpg" alt="A cute orange catlying on its back "></a>