我希望自己在刚刚学习 Web 开发的时候，有人一开始就告诉我这些东西。
工具
准备一个代码编辑器，一个浏览器，你就可以开始学 / 做 Web 开发了。代码编辑器编写网站应用的代码，浏览器预览，测试应用的运行效果。如果你已经有了熟悉的编辑器，直接用就行。如果没有，Atom（来自 Github） 与 VS Code（来自微软），选择其中任何一个都可以。浏览器要用 Google 的 Chrome，或者具有 Chrome 核心的任何浏览器。
正在南京上大学的侄子发信息给我说他要学一下 DW 创建一个个人网站。他说的 DW 指的是 Adobe Dreamweaver，当初主打所见即所得，这个工具现在改进了不少，界面与功能看起来都很酷，但很少被真正的开发者使用。现在，你只需要一款简单、开源、可定制的代码编辑器。
我们的工具包会根据遇到的不同类型的任务慢慢进化。你不需要花太长时间专门去研究工具的使用技巧，因为你很快就会忘掉，它们有时候也会干扰到你。我推荐的做法是，直接上手用，遇到实在要解决的问题，或者大量的重复动作的时候，再去研究怎么通过额外的工具，或者现有工具的功能解决这些问题。就是按需学习，这样做效率会更高一些。
命令
要尽早熟悉在命令行界面下完成一些任务，这非常重要。我推荐在学习的开始阶段就直接接触命令行，要尽快熟悉通过命令来完成一些任务。最简单的练习就是在命令行下面完成处理文件与目录的任务，比如创建、编辑、移动、删除文件与目录这些动作。理解目录的层级关系，比如当前目录，上一级目录，还要知道怎样跳转到不同层级的目录。
以后我们会遇到大量的工作需要在命令行界面下完成，很多工具也只能在命令行界面下工作。比如在本地开发的时候，创建、运行项目，在项目里添加需要的某些文件，对项目做版本控制，安装使用一些自动化的工具等等。另外管理与维护远程服务器，也都需要在命令行界面下通过命令行去做。
至少，你现在要有一个心理准备，并且不要抵触命令行，你要知道作为一名开发者，你不可能离开命令行工具。既然甩不掉，就要适应，慢慢地你就会把它当成朋友了。
执行命令需要一个命令行界面，这个命令行界面一般的操作系统里面都是自带的，比如 Windows 系统上有 Powsershell，macOS 上有 Terminal（终端）。我推荐 Windows 用户单独下载安装一个完整版的 Cmder，用它作为你的命令行界面。
版本
假设你要做个页面，一开始你创建了一个目录， 打算在这个目录里面存储页面还有相关的资源。你决定要记录一下项目的变化，你想记录一下对项目都做了哪些修改，为什么这样做，这些信息可以在以后作为一个参考。你还想在项目出现什么问题的时候，可以快速把它恢复到某一个正常的状态上。使用版本控制工具，可以解决这些问题。
如果不使用版本控制工具，你可能会这样：在目录下面创建了一个文件，打开文件，写了一些代码，测试了一下觉得可以。你想保存一下项目的这个状态，所以你复制了一份整个项目目录，作为一个备份。时间一长，你电脑上就会攒一大堆类似的备份目录。
如果我们在项目里使用了版本控制，对项目做了一些修改以后，比如创建了新的文件，更新了某个文件里的某几行代码，你可以做一次提交（commit）来保存一下对项目做的这些修改。在做提交的时候可以添加一条信息，说明一下这次对项目做的这个修改。
用了版本控制以后，你的项目会拥有一个完整的开发历史记录。在什么时候，由谁，做了什么样的修改，这次修改动了项目里的哪几个文件，为什么要这样做等等。你可以自由地在所有这些历史记录里面来回切换项目的状态，就是你有能力让项目恢复到某个历史状态上。
作为开发者，版本控制工具，我也希望你能在前期就接触到，并且立即开始使用。这里你需要用的工具叫 Git，这真的不用记住多少 Git 命令（只需要 10 个以内的命令）。所以你根本不用读完一本厚厚的介绍 Git 的书才能使用它，重要的是要理解它大概是怎么一回事儿。然后直接上手去用，工具就是用来用的，光看只能看成老花眼，不能看明白。
既然版本控制也是越不过去的坎儿，那现在就开始适应吧，早晚它也会是你的朋友。
图书
购买纸制的技术类型的图书是一种浪费，也不环保。又大，又厚，又重，不能快速搜索，不能复制粘贴，也不能有效地做笔记。从写作到出版，中间跨越时间太长，一但出版，遇到问题也不能及时打补丁。所以我们应该尽早淘汰纸制的技术图书，电子内容是更好的选择。
买书的好处是，会让你感觉好一点，看到书名就想像自己已经完全吸收了书中的所有精华。收到书的第一件事就是拍张照片发个朋友圈，宣布一下自己又勤奋，又努力，又要变聪明了。不过我最近买的那套（3本）《给程序员看的数学》到现在连十页都还没翻到呢。
书还有个问题是废话比较多，书与书之间的重复的内容也很多。或许是出版社要求字数，一般技术类的书都很厚，没人敢写 10 页内容就要求出版发行的。这就导致书中包含了大量细节，这些细节或许以后会有帮助，但更可能把你吓坏。比如你想学一下 Git，买了一本 500 页的书，你觉得自己什么时候才能真正把 Git 用在平时的开发工作中。我觉得 20 分钟左右的视频内容就可以让你开始能用它。剩下的东西留到以后工作中，按需学习。
还有，大部分技术类书的封面设计都不算太讲究。其实稍微注意一下文字的排版就已经是很好的设计了。
设计
买本《写给大家看的设计书》作为你的设计理论基础，就行了。你不需要有美术学习经历，也不用懂颜色搭配，只需要多注意一下界面上的东西之间的距离，大小，排版，然后保持简单。
不懂配色就只选择一种你喜欢的颜色，在关键部位使用这种颜色，其它地方用白，灰，黑就行。不懂设计就不乱用特殊效果，比如渐变、阴影、各种光效。你不用，就没人知道你不行。
不懂 Logo 设计就只选择简单的图形，找不图形就用纯文字，找一种合适的字体就可以了。如果用拼音字母当标志，调整一下字母的大小写，增减字符间距都是不错地设计思路。尽量少改写汉字将几个字套在一起，同样也别把几个字母硬插在一起。
剩下的就是平时多看一些好的作品，适当借鉴：）但一定要加上一些自己的想法，不能让人一看就知道你是从别人那儿借鉴来的，这会显得我们没有自己的想法，用户也就会怀疑我们提供的产品与服务。安全的做法是别抄那些太著名的，特别是同行的，有那么多好看的界面呢。
页面 / 界面
作为一名 Web 开发者，你的第一个真正要获取到的能力是页面 / 界面的设计与开发能力。这项能力将成为以后所有工作的基石。我们说的页面指的就是网页，或者叫 HTML 文档、文件，就是一些普通的可以在浏览器上打开的文件。完成这项任务，你需要理解三门语言：标记语言 HTML，样式语言 CSS，脚本语言 JavaScript。
你要达到的目的是，随便给你一个页面的设计图，用最基本的工具（代码编辑器 + 浏览器），你能把这个页面的设计图用 HTML，CSS 还有 JavaScript 代码表示出来。用 HTML 组织页面的内容与结构，用 CSS 为内容添加样式，比如调整各种东西之间的空间、大小、背景、颜色等等，然后用 JavaScript 设计页面的一些行为，比如点了这个心型图标我要请求一下后端服务，并且改变这个心型图标的样式。
关键是在理解，而不是记住 HTML 标签的名字，CSS 的属性，或者 JavaScript 语句的写法。因为这些东西基本不用你完全记住，做个小抄不就行了，上面写清楚你记不住的东西，没人在乎你到底能不能记住这些东西。只有理解了这些语言的规则与用法以后，才能开始做设计与开发。
对于 HTML，你要明白的一些事情：标签通常用来标记内容，不同的标签可以标记不同类型的内容。标签名周围都有方括号，有些标签成对出现，有开始标签跟结束标签。标签里面可以添加各种属性，我们可以设置属性的对应的值。理解标签之间的关系，比如父子关系，兄弟关系。
关于 CSS，你要明白的一些事情：不同的样式属性可以设置不同类型的样式（间距、位置、大小、颜色、边框...）。把样式应用在页面上指定的地方，你要明白怎么撰写不同类型的样式选择器（标签、类、ID... ）。还需要理解样式的层叠与继承。
JavaScript 是你要学习的第一门真正的程序设计语言。 在以后做后端服务开发的时候（基于 Node.js），也会用到这门语言，所以它是 Web 开发者必学的一门语言。先去熟悉基本的语法，比如变量，数据的类型，逻辑判断，循环。接下来你要理解 JavaScript 在前端（浏览器）的一些用法。比如处理页面上的元素，理解使用事件等等。
学会 HTML，CSS，JavaScript，你不仅仅可以设计网站上的页面，利用某些技术你还可以用它们制作移动端应用、桌面应用上的界面。
网络
Web 工程师们多少还得再懂一点网络相关的知识，不需要研究太底层的东西，但是要明白一些基础，比如 IP 地址，端口、传输协议。
IP
IP 地址是网络上的设备的通信地址，也就是我们如果想要访问网络上在某台设备上运行的网站，你就需要知道它的 IP 地址。不过 IP 地址太难记住了，所以就有了域名，相当于是给 IP 地址起了个容易记住的名字。比如 ninghao.net 是宁皓网用的域名，它现在代表的 IP 地址是 47.96.62.109，这样你不用在地址栏里输入 47.96.62.109 访问宁皓网，而是使用我给它设置的主机名 ninghao.net。
IP 地址通常长得像这样：42.120.40.68（宁皓网第一台服务器的 IP 地址），四组数字，中间用点分隔开。IP 地址有公网 IP 地址，有内网 IP 地址。内网 IP 地址是为本地网络保留的，通常这种地址像这样 192.168.x.x。
你家里肯定有一台路由器，它会给连接到你家网络上的设备自动分配一个内网的 IP 地址，通过这个路由器，你在自己家里组织了一个本地网络。在这个网络内部的设备之间可以相互交流，比如你在你电脑上搭建了一台 Web 服务器，你用的手机可以访问到在这台 Web 服务器上运行的网站。但是网络以外的其它的设备，就不能直接使用内网的 IP 地址访问到在你电脑上运行的网站。
IP 地址现在有两种主要的版本，一种叫 IPv4（第四版），就是上面介绍的那种地址。还有一种叫 IPv6（第六版），比如：2001:4860:4860::8888，看起来比 IPv4 的地址更长了一些。之所以发明 IPv6 是因为 IPv4 的 IP 地址数量是有限的，就是可能以后慢慢 IP 地址就不够用的了。有了 IPv6 以后，据说可以为地球上的每一粒沙子分配一个 IP 地址。
端口（port）
通常一个设备只有一个 IP 地址，设备上可能要同时运行多种不同的网络服务，用户如果想使用某个具体的网络服务就需要知道这个服务是在哪个端口（port）上运行的，或者说服务通过哪个端口对外开放。
一个服务的服务地址，一般会包含一个 IP 地址，再配合一个指定的端口号。意思就好像是：我在 x 这个地址，通过 y 这个端口号为大家提供 z 服务。如果说：在服务器上运行的 x 服务监听（listen）了 y 端口，意思是服务器上开放了 y 这个端口，某个服务正在使用这个端口提供服务。
比如 Web 服务一般默认的端口号是 80（普通） / 443（加密），这样在访问在设备上运行的 Web 服务的时候，可以通过 IP:80 / IP:443。比如 42.120.40.68:80，如果某个主机名指向了这个 IP 地址，也可以像这样使用这个 Web 服务：sandbox.ninghao.net:80
一般我们在访问网站的时候，在地址里并没有添加具体的端口号（80 / 443），这是因为如果不加这些端口号，浏览器会默认给我们加上。你可以试一下，在访问某个网址的时候，在主机名的后面加上 :80 或者 :443，浏览器会默认去掉这两个端口号。但是如果我们的 Web 服务是在其它端口上运行的，通过浏览器访问服务的时候，就必须明确地说明一下具体的要使用的端口号。
一般的服务都有各自的默认的端口号，但是作为开发者，我们有能力修改服务使用的端口号。但是通常情况下用默认的端口号就行，如果修改了服务运行的端口号，你得特别说明一下，比如我做了个网站，把 Web 服务的端口修改成了 8080，那你访问我做的网站的时候需要手工设置一下这个端口号，像这样：sandbox.ninghao.net:8080，如果不修改端口的话，大家直接用 sandbox.ninghao.net 就可以访问到我的网站了。
协议（protocol）
这里说的协议指的是网络协议（HTTP，HTTPS，FTP，SMTP ... ），网络协议主要就是通过网络传输数据用的。协议里面制定了规则与方法。如果大家说：我们通过 x 协议来做这件事情。意思就是双方都要遵守这个协议里面的一些规定，用协议里规定的方法互相传输数据。
作为 Web 开发者，我们一般只需要理解协议这个概念就行了。协议有很多种，一般协议的名字都是缩写形式，通常会用 P 结尾，这个 P 表示的就是 Protocol。比如 HTTP 协议，全名叫 HyperText Transfer Protocol，看名字就知道它是传输一种叫 HyperText 东西用的协议。HTTPS 是 HTTP Secure，是一种加密传输 TyperText 用的协议，比普通的 HTTP 更安全。
HyperText 这个词很少用了，也不用懂这东西到底是什么。只要想着 HTTP / HTTPS 这两种协议是传递 Web 数据用的就行了。我们在一台服务器上搭建了一个 Web 服务，用户就可以通过 HTTP / HTTPS 协议访问我们的 Web 服务，获取到一些数据（HTML 文本、文件、图片、音频、视频... ）。
localhost
localhost 是个特别的主机名，它代表的就是本地主机的意思，指向的 IP 地址是 127.0.0.1。比如一台设备上同时运行了两个服务：a 与 b，如果在 a 服务里面要使用 b 提供的服务，这时就可以用 127.0.0.1:服务端口 或者 localhost:服务端口 这种形式使用 b 提供的服务。
Web 服务器
做好的网站最终要通过 Web 服务器提供给最终的用户使用。服务，就是能做一些特定事情的东西。Web 服务器指的是提供 Web 服务的东西，大部分情况下它指的是运行某种软件以后得到的一种服务。
到目前为止我们只具备设计开发普通的 HTML 文件类型的静态网站，就是网站是由一堆 HTML 文件组成的。如果你现在打算发布这个网站，最简单的方法是买台服务器，在上面安装一款 Web 服务器软件，然后把网站需要的 HTML 文件上传到这台服务器的指定目录里就行了（Web 服务器的配置指定的某个位置）。
Nginx 就是一款比较常用的 Web 服务器。你在服务器上安装并且运行了 Nginx，你的服务器就具备了提供 Web 服务的能力，就是用户可以通过 HTTP 或者 HTTPS 访问到你的服务器，获取在服务器上提供的一些资源（网页、文件、图片... ）。
Web 服务器明白怎么样处理使用 HTTP / HTTPS 协议发送来的请求。比如请求的是个网页文件，Web 服务器就把网页文件里的内容传输回去（响应）。如果请求的是图片文件，Web 服务器就把图片内容响应回去。请求与响应，就是要与给。客户端（比如浏览器）发出请求，要东西，服务端响应请求，给客户提供它需要的东西。
评论
写得很棒！往往新手入门最需要的就是一些概念性的东西，不然会一脸懵~
6 年 4 个月 以前
ceshi
6 年 4 个月 以前