「经历」
我自学前端已经有6年多了，自问当时学前端是没有系统化学习的。一开始边看文档，连滚带爬学HTML和CSS排版，然后深入研究JavaScript，因为当时最火的就是JQuery，所以用了很长一段时间的JQ。
到了后面遇到有一个项目需要我做APP开发，但是不可能去学IOS开发和安卓开发，因为项目时间也不可能给我们这么充裕的学习时间。所以当时的我深入分析了几个混合APP开发的框架。分析对象包括当时基于AngularJs的Ionic框架和React Native。综合考虑最后选择了Ionic，然后自学了Angular2。（过程也是踩过成千上万的坑学会的）
APP开发的这个过程让我深入感觉到那时候前端的革命性变化。庞大的前端知识扑面而来，也没有想到前端已经发展到这样一个地步。这段时间让我深刻领会到前端的博大精深，并且被前端这个技术领域深深的吸引住了。
到了后面Vue突然开始火了，各大技术公司都开始使用Vue+Cli脚手架搭建前端应用。越来越多的企业要求使用Vue开发前端应用和WebAPP。热爱前端的我从来不畏惧需要学更多的知识，既然Vue来势汹汹，我也开始深入研究和学习Vue开发前端。经过一番折腾Vue也上手了。
至今我依然在不停的学习前端无边无际的知识和技术。
最近我发现，现在学习技术容易了很多。有各种技术文章、手摸手教学、线上培训课程和视频，甚至还有全免费的线上学习课程和练习。相比以前从看文档，连滚带爬的在项目中试错式的学习真的是容易多了。
「前言」
我们都深刻知道，如果想在前端走的更远更久，基础知识必须是要牢固的。最近发现一个免费学习编程的网站 freeCodeCamp() - 官方版（英文） ｜ 中文社区版 。我好学的性格牵动着我的灵魂，忍不住就去研究了一下。我发现里面的课程确实很全面，而且还有实时和实战编程练习。就算是对于零基础的童鞋，也是可以开始学习编程的。
在一个夜深人静的夜晚，我看着电脑思考人生的时候，我灵机一动，要不我开始写一个系列的文章和大家一起闯关进攻前端全方位知识点。没有闯过这些关卡的童鞋，无论前端能力如何，这个可以锻炼我们自己，也可以深入知道我们自己的前端水平和差距。想学习前端的童鞋可以从零开始学习，一起排除困难共同打开前端大门！
使用这个免费网站学习编程，每一个知识学习完成后会给大家发放一个证书，然后每一个关键学习点之后，还有项目实战。自从2014年，有超过4万个freeCodeCamp毕业的童鞋获得了大企业工作机会。（里面有提到谷歌，苹果，微软，亚马逊，Spotify等公司）
还有看到一些学员的评价：
- “我在实习的时候，导师就叮嘱我在 freeCodeCamp 上做题闯关。技术的精进不仅给了我强大的自信，也让我得以进入大厂 ThoughtWorks。” — 姜玉珍
- “对于还没有形成编程思维的新人，即使是 leetcode 上面 easy 级别的算法题目都感到非常有难度，而 freeCodeCamp 的算法题恰好是一个良好的过渡。” — 魏朝欣
无论这些证书是否对我们在中国的企业有一定的价值。但是能获得多一个证书，没有什么不好的呀。废话不多说了，我们这里就开始勇闯第一课《基础HTML与HTML5入门》！
「规则」如何一起闯关
在开始这个闯关的系列之前，讲一下我们具体怎么一起闯关。
首先，如果我是单纯在这里给大家发布答案，我觉得这些文章就没有太大意义了。所以我希望在闯关的过程中一起学习到更多的知识，弄懂更深层的技术和用我的相关经验讲说这些知识在工作中的使用场景和小技巧。
个人觉得英文版本的操作和体验都更好，加上英文版本的课题会更新。所以我会在英文版中与大家一起闯关。但是喜欢用中文社区版本也是可以的哦。酸甜苦辣各有所爱，但是效果和课题基本都是一样的哈。
每一篇文章的大概内容：
- 首先我们每一篇文章会尽量包含一个大知识点中的N个关卡。每一个知识点的关卡数量不一，所以有时候可能会拆分成几篇文章来讲说。
- 每一个关卡当中的知识点在freeCodeCamp中有一定的知识材料。但是在一起闯关的文章当中也会做一些详细的知识补充和一些有趣的理解方式。
- 每一个较难的关卡，都会在文章当中做详细的思路，多种实现方式等等的讲说，让我们在每一个关卡中能带走更多深层的知识点。
freeCodeCamp使用教程
课程内容
FCC一共有6大课程，一共大约1800个小时的内容和练习。如果是新人，推荐从第一个开始一个一个闯关学习。如果是老司机，是来这里学习你需要的知识，那可以随意选择你需要的课程开始学习。
- 响应式Web设计（300个小时）
- 算法和数据结构（300个小时）
- 前端库和框架（300个小时）
- 数据可视化（300个小时）
- API和微服务（300个小时）
- 信息安全和质量保证（300个小时）
最后还有一个是数千个小时的面试题可以提供给我们使劲的刷哦！
进入关卡
首先我们展开第一课看一下：
- 第1点这里是基础知识的文章，可以点击查看。看完基础知识之后可以点击下方的
回到第一小节开始闯关！ - 第2点这里下面所有的都是练习题，一个一个顺着闯关即可。
关卡教程
️注意：
大家闯关之前，推荐大家都先使用GitHub登陆，到时候颁发的证书和闯关进度才能得到保存和跟踪哦！！！
我们先从左边 部分的内容开始说明：
- 简单讲说了这个关卡涉及的知识点
- 描述关卡的挑战内容
- 本关卡的所有目标，点击测试代码的时候，完成的会出现 ，没有全部 那就是还有部分我们没有实现哦。所有 才能通关。
接下来就是说明中间的代码区：
- 代码区，用于编写我们这个关卡的代码。
- 错误输出区域，当我们点击
测试代码后，如果有错误就会显示在这里。
最后，最右边的部分是代码被编译后的效果，也就是我们在代码去编写的代码最终会在浏览器呈现出来的效果哦。（这里的效果会在我们编写代码的同时触发变化哦！）
提交代码/测试成功后：
「知识」闯关基础知识点
HTML是什么？
HTML 的全称是 HyperText Markup Language（超文本标签语言），它是一种用来描述网页结构的标签语言。
它采用一种特殊的语法或符号来组织网页的内容，元素通常都有开始标签和结束标签，例如标题、段落、列表。
更好的理解HTML
对于没有计算机基础的童鞋（就算是有）都会觉得有点抽象，不太好理解。我们换一个说法来理解一下：
HTML就等同于我们人体里面的骨架，一块一块骨头（标签）组装起来建立起一个人的骨架和结构。比如说经常可以见到的
head，body，footer等标签，就等同于一个人的头，身体和脚。那其他的标签比如h1，h2，div，section和ul，li等标签就是用来组建我们人体每一个部位的小骨头。
如果HTML加上了JavaScript（人体中的大脑和肌肉）就可以操控整个人的动作，让一个人活起来了。但是只有骨头和肌肉，这个也太难看了吧？想想都觉得吓人。所以我们会有皮肤来把这些不太好看的东西藏起来，这个时候就需要在HTML中使用CSS（人体的皮肤）。这样子我们有好的皮肤加上衣服和化妆品的打扮，这样才可以貌美如花嘛对吧？
如果我们上面说的骨头和骨架，在代码中又是什么样子的呢？我们一起来看看：
<h1>Top level heading: Maybe a page title</h1>
<p>A paragraph of text. Some information we would like to communicate to the viewer. This can be as long or short as we would like.</p>
<ol>
<li>Number one on the list</li>
<li>Number two</li>
<li>A third item</li>
</ol>
这段代码被编译后就会在浏览器呈现出这个样子：
HTML5又是什么？
HTML这种超文本源自于Web早期和最初的用例。当时页面都是静态文档，并且文档中也有连接和引用到其他的文档。通过浏览器中的hypertext links（超文本链接）在文档之中跳转与导航。这样用户就可以自由的在文档之中翱翔，不用在文档直接搜索查看。
后期web页面和web应用渐渐变得越来越复杂，W3C更新了HTML的规范来让所有的浏览器更加兼容彼此。为什么呢？大家应该都知道市面上有五花八门的各种浏览器，如果每一个浏览器都对HTML有不同的写法，不同的规范，那我们做前端开发的，有多少的浏览器规范我们就需要学会多少种写法。不用后浪推上来，已经累死在沙滩上了。
那HTML5其实就是第五版的HTML规范，也是目前最新的版本。
基础知识弄懂了，我们马上就来开始闯关吧！GO GO GO！
「第一关」用HTML元素与世界问好
关卡名：
Say Hello to HTML Elements
身在技术领域的童鞋们都知道，入门任何语言的开头都是先与世界问个好（所谓的输出一个"Hello World"）。所以第一关当然是用HTML元素与世界问好啦！
知识点
- 这一关我们看到代码区域有
<h1>hello</h1>这一段代码，这个就是所谓的HTML元素了！也就是人体中的一小块骨头
