在开始这趟旅程之前摆在你面前的很大一部分的障碍是在讨论编程和web开发话题时抛出的所有的专业术语。这些术语中的一部分是在我们日常思考、学习和实践中是不可避免的，然而还有一些只是一些自我膨胀的家伙通过使用一些深奥的或者学术性的词汇来描述一些本可以用一些简单的词汇描述的内容。这些术语中有一些是你真的需要了解的（比如：HTML标签，functions函数，scope作用域）还有一些比如像（monads和functors）你大可忽略。我们会尽量帮你做区分。但是如果一个词汇在你学习的时候经常出现或者听到，那可能就是最佳的时机去了解和掌握它。
下面让我们大致看看接下来的这套课程究竟都有些啥。
你会学习到关于如何创建你自己的站点的从前端到后端的所有你需要了解的内容。为了做到这些，你需要去学习几种"语言"。我在语言上加了引号因为不是所有的都是技术语言，但目前你可以先这么理解。从现在开始我们把他们统统称作语言。你将要学习的三门语言分别是HTML，CSS和JavaScript。我们也会使用一些其他的工具，像命令行和git我们后面讲到这里再说。
建造房子的比喻
为啥你需要这三种语言？让我们用造一座房子来打一个不太恰当的比喻。为了造这座房子你需要一些工具（比如你的文本编辑器，你的命令行。）当你拥有了这些工具后，你还需要建造材料：石头，沙子，水泥，窗户：你需要把所有这些东西组合起来搭建你的房屋。这我们这他们就是 HTML（超文本标记语言）。然而这座房子目前还比较简陋。他还没有涂色和进过任何精心装修。目前看上去还比较平淡、呆板和无趣。当然你可以创建一个只使用HTML的站点，是有黑白文字不使用样式没有交互。
为了安排和装饰让这座房子更加有用，你需要一些蓝图。说的夸张一些，你可以把这些蓝图想象成一个规则的集合：2x4磁砖放在这里，顶盖放在这，墙壁是蓝色，窗户放在这里。你定义了一系列的规则，如果一些元素符合这个规则就把这些规则应用上去。如果是9x19的磁砖，就贴在房子的南边。这些就是你房子的CSS样式，或者我们称之为层叠样式表。CSS是一系列规则，它定义了一系列的规则，当你的一个HTML元素符合其中的一条规则，让后就会把对应的样式应用到的元素上去。比如你是文章里的第一个段落，你的字体代销是25px像素，你的字体颜色是蓝色。
好了，到这里我们有了一套看起来还挺漂亮的房子。现在，在这个现代化的时代，我希望所有的工具，我想要一大堆智能家居设备。我希望当我把智能汽车开到车库门口时，车库门自动打开了，房间里的电灯自动点亮，恒温系统自动调控到适宜的温度，电视也调整到了我喜欢的电视频道，智能厨具自动开始烹饪美味的晚餐。我要为我的房子添加这些行为。我需要在现有的基础上加上一层行为。你希望在用户点击按钮的时候弹出一条消息吗？你希望在页面上准确的更新你的时钟吗？你希望每隔几秒改变你张氏的图片吗？你想要的这些都需要用JavaScript来做。就如所有的智能家居设备，也不是所有的站点都需要JavaScript。有些站点，比如只是做一些信息展示不需要太多的交互（比如HTML里的点击的link链接，你就不需要使用JavaScript来实现）。使用JavaScript可以让这些更加容易实现，但是不使用JavaScript让你更容易去做。
现在，如果我想要订货送到我家，我需要呼叫某人，但是某人不在我的房间。我需要使用我的智能助理，让他去打披萨店的电话并让他们送披萨到我家。在这个例子中披萨店就好比是我们的（backend server）后台服务。一个披萨店可以服务许多房子，它可能只做很少的事情（比如做披萨，沙拉，饮料等等）并把这些交给各式各样的client客户。这个地方的客户 就是用户的电脑，手机和智能助手，智能手表，智能烤箱，究竟是啥谁知道呢！所以一个服务器可以服务很多客户端。在这个例子中我们只需要关心装在用户电脑上或者手机上的浏览器（Chrome、Firefox、Edge、Safari等等）。前端代码（房子的智能化）通常是靠JavaScript。后台代码的种类非常之多：Python、Ruby、JavaScript、Java、Go、C#等。惊天我们只需使用一种语言JavaScript就可以搞定前端和后端，但是你还是需要知道对于后端你可以使用不同的语言。
小结
1.HTML是结构——它包含了全部的文字，文字中的各种图片，它通常都是组合在一起的。就像你房里里的石膏板，HTML做的不外乎是这些事。他依赖于其他部分来完成造房的事。
2.CSS是蓝图——它的全部全部规则就是定义用什么样的颜色，什么样的尺寸，字体是啥样，背景图是什么。和HTML不同，CSS不做任何事情，它只是给出了元素应该怎么摆放，以及长啥样子的一系列的规则。
3.前端（client）客户端的JavaScript就好比是家里的智能。他是很酷的预先设定好程序的管家按照你交给他的任务执行。JavaScript可以改变HTML和CSS来对不同的刺激做出响应。
4.后端代码（我们任然使用JavaScript）是一个披萨店。他是一个你可以想他询问申请东西的地方。或者我们也可以发送东西给它，比如你上传一张新的照片到你的社交媒体账户上。一台服务器可以服务许多终端，就像一个披萨店服务器很多家庭。
原文: https://btholt.github.io/intro-to-web-dev-v2/overview
如果你也在自学前端，如果在前端学习的过程中遇到了坎，不管是学习过程中遇到什么问题，或者有什么好的意见和建议想和我交流，欢迎你在文章底部留言，或者添加我的微信。
当然我也为你准备了一个微信——前端自学交流群，欢迎你加入我们自学交流小组。
注意：加我的小伙伴请告诉我你来自掘金，是否要加入到前端自学交流群
为保证白天学习的效率，加我好友和想进群的朋友，我会在中午12点和晚上7点两个时段统一处理大家的请求。所以如果发现没有立即回应，请耐心等待一下。
想学习山地人的更多专题请到 www.idev365.com
如果你在学习或者工作过程中遇到什么技术问题，或者有什么好的意见或者建议，欢迎和我交流
微信:colin3dmax（ 请备注：你来自掘金 | 是否要加入前端自学交流群 ）
