前言
在学习前端的时候,发现了这个用于前端学习的网站,感觉相比国内的很多学习的网站来说,针对前端方面确实有很多优势,比如FreeCodeCamp提倡“Read-Search-Ask”,它更注重个人的自学能力，提倡使用搜索、查询资料。通过freeCodeCamp的学习能提高个人编程方便的问题的解决能力。所以我决定写一个关于FreeCodeCamp学习过程的专栏,把每一节的内容、要求和当时学习的自己的一些想法写下来，便于以后对自己或者其他朋友提供一些帮助。FreeCodeCamp总共能拿到4个证书,也类似于四门课程,我不知道自己能不能全都坚持下来。不过学习这种事情，本来就是要靠坚持的。
20170805
6、 在html中写出hello world(不用多解释了)
7、 Headline with the h2 Element
``` 用‘写一个主标题(不多解释了)’ ```
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",例如:(style就是样式,写法要求style加=中间无空格然后双引号里面填写需要的样式内容) ```
14、 Use CSS Selectors to Style Elements
``` css"样式表,这节课将将style从html元素分离出来,单独设置,这样便于管理,代码上也好看,具体的做法就是在页面顶部写上注意:属性值后面 要加";"在大括号里" ```
15、 Use a CSS Class to Style an Element
用class定义样式,就是在样式表里面定义一个样式名".样式名"然后用{}表述内容,简单的说就是将html元素名替换成自定义的名,这样做html中所有的元素都可以用这个样式,
``` ```
16、 Style Multiple Elements with a CSS Class
```
用class定义样式,在里面加入 .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
``` 调用谷歌字体, 把这段代码加到顶部就可以引用字体,有时间可以查询一下谷歌字体都有什么 ```
20、 Specify How Fonts Should Degrade
``` 降级字体,以防止浏览器对没有的字体显示无效,font-family: Helvetica, Sans-Serif;就是在需要加载的字体后面加入备用字体 ```
21、 Add Images to your Website
``` 加载图片,可以从别的网站调用,也可以用服务器本地的图片,```
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元素里面增加链接地址:Here's a link to FreeCodeCamp中文社区 for you to follow.
```
27、 Nest an Anchor Element within a Paragraph
嵌套a元素
```View more cat photos
```
28、 Make Dead Links using the Hash Symbol
``` 把a锚点改成固定链接Click here for cat photos.
```
29、 Turn an Image into a Link
```
给图片添加链接,就是用a元素把image包括起来.
```
30、 Add Alt Text to an Image for Accessibility
为图片添加alt属性,就是如果图片显示不出来就显示文字,这个功能很重要,应该所有的图片都要有这个属性
```
```