在学习前端的时候,发现了这个用于前端学习的网站,感觉相比国内的很多学习的网站来说,针对前端方面确实有很多优势,比如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>
