博客

虚拟机（Virtual Machine），就是你可以在一台电脑上虚拟出来很多台电脑，每个电脑上边都可以有自己的独立的操作系统，文件系统，内存，CPU 等等。

对于 Web 工程师，虚拟机很有用，比如你自己平时用的电脑上装的是 Windows ，但是你要开发的项目要运行在 Linux 系统上，这样你就可以在本地的电脑上创建一台虚拟机，然后给它安装好跟生产环境一样的 Linux 操作系统，比如 CentOS ，Ubuntu ...  然后让你的项目运行在这台虚拟机上。这样你在把项目放到它真实的运行环境的时候，就不容易出错。

或者你平时用 Mac，操作系统是 OSX ，如果你想测试应用在 IE 浏览器上面的表现，你就可以去创建一个 Windows 操作系统的虚拟机，启动虚拟机以后，你可以用虚拟机上的 IE 浏览器访问你的应用。你也可能因为有些网银需要运行在 Windows 系统上，不过要注意有些带 U Key 的网银不支持在虚拟机上用，比如工商的网银。招行是可以用的。

你平时访问的网站都有个主要的地址，youku.com，sohu.com，baidu.com 等等，这些 xx.com 就是网站的域名，我们可以给域名设置不同的主机名，像 tv.sohu.com，movie.youku.com，主机名可以指向一台服务器的 IP 地址，这样你在浏览器打开这个主机名的时候，浏览器就会到这个主机名指向的 IP 地址的那台服务器上给你请求你想看的东西。

域名

你想有个地球人都可以访问的网站，先得有个已经接入到互联网的电脑，这个电脑就是服务器（Server），这个电脑上需要有一个公网的 IP 地址，这样你在这台电脑上搭建好 Web 服务器以后，用户就可以使用电脑上的公网 IP 地址访问到你的网站了。不过 IP 地址对于普通用户来说不太友好，不好看，也不容易记住。所以一般你要给网站去申请一个域名，用这个域名或者相应的主机名去指向服务器的 IP 地址，这样通过这个域名或者主机名，用户就可以打开你的网站了。

当一名 Web 工程师，并不需要成为网络工程师，整个思科认证啥的。不过，多少得懂一点网络的基础，比如 IP 地址是干啥的，公网 IP 与内网 IP 的区别，DNS 怎么配置，局域网是什么意思，什么是 http，ftp，端口号 等等。我们并不需要知道这些东西具体是怎么实现的，只要有个自己的理解就行。

网络

网络就是一些设备，用某种方式连接到了一块儿，你知道我在这，我也知道你在那儿，连接到一块儿的设备现在太多样化了，随处可见的电脑，手机，平板，越来越多的像手表，电冰箱，热水器 ...

互联网

世界范围的网络。

局域网

小范围的网络。你家里可能就会有一个局域网，这个网络通过一个家用的路由器搭建，你的电脑，平板，手机这些设备都在家里的局域网上，它们之间可以直接通过局域网进行交流，比如手机发个图片或者视频给你的电脑。

IP 地址

在网络上的设备都需要一个地址，这个地址有点像手机号，拨通朋友的手机号可以跟朋友聊聊天，你的朋友也可以通过你的手机号找到你。这个地址就是 IP 地址，它相当于是网络上的设备的手机号。

现在，你需要一个现代的文本编辑软件，它会陪你相当长的时间。可以选择的太多了，我建议用一款开源的，跨平台，用现代技术开发的编辑器，比如 Brackets ，它的背后是著名的 Adobe 公司，或者也可以选择 Atom ，它是 Github 领头开发的，Github 的团队应该知道自己在干什么，也了解开发者的真正需求。

任何一款编辑器都有自己的特点，我觉得没必要在选择上花太多时间，来回比较也没太大意义，习惯可以干掉一切。我们就先用 Atom 这款吧 ：）

Atom

一款编辑器入门还是很简单的，学会怎么样创建，打开，编辑，保存文件就行。剩下的就是慢慢熟悉，Atom 会不断带给你惊喜，如果你想简化或者加快平时工作中的某些任务或者动作，你就可以去搜索一下，Atom 要么本身就为你提供你需要的功能，没有的话，也可以通过现成的插件（Packages）或者自定义的方式解决。

你决定要把 Web 当成自己的事业，并且已经开始学习了。你听到的，看到的，或者自己感觉的，很可能是错的。一开始，我们就用更好的方法去学习与做事，会节省很多时间，也能减轻痛苦。找不到方向，不知道从哪里下手，今天就跟宁皓一起，一切都在这里开始：）

遇到的问题

学习 Web 设计与开发得去安装很多软件，Git，Node，Ruby，Virtualbox，Vagrant，Atom，Brackets，Chrome...  有些软件是你要直接用的，有些是其它软件所依赖的。安装这些东西，你得先找到它们的官方网站，然后下载适合自己系统的版本，双击安装，Next，Next，下一步，下一步  ...  完成！安装完以后，你发现还不能用，因为你不知道这个软件还需要你去安装一个其它的东西。

命令行工具是做 Web 设计与开发的必备工具。通过输入一些命令，去做你要做的事情。不同的命令可以做不同的事情，比如基本的文件与目录的操作，去安装，更新，删除软件，控制与管理服务器等等。

很多 Web 项目都自带了命令行工具，会提供一些跟项目相关的命令，可以用到平时的开发流程里面。比如 Drupal 的 drush ，WordPress 的 WP-CLI，Laravel 的 artisan  等等，基本上一个现代的 Web 项目都会附带一个命令行工具。

准备

在哪里输入要执行的命令？不同的操作系统提供了不同的软件，Windows 上可以使用 系统自带的 命令提示符（cmd） 或者 Powershell（win7 以上的版本，推荐使用） ，在 Mac 上用的是系统自带的 终端（Terminal）。

《 Remote 》是一本关于在公司实行远程办公的书，书中介绍了远程办公的好处，挑战，与方法。宁皓 QQ 群（240746680）里的 Cooper 推荐。我离开传统的办公室也快十年了，一直也是用这种远程办公的方式工作，读了这本书，对我又有了新的启发。

中文版在线阅读《 Remote 》

中文版翻译：梅晨斐

不断完善中...

学习前端

所有的 Web 项目都离不开前端开发，前端的设计决定了项目的界面，与用户的交互功能。HTML，CSS，JavaScript 这几样东西是前端开发的重要组成部分，一个高效的工作流程也是必不可少的。

语言

HTML，CSS，JavaScript。

HTML 与 CSS

很难把 HTML 与 CSS 分开，通过下面这几个课程，你可以了解 HTML 与 CSS 的基础，去创建一般的静态页面。

一个网页的结构，是用 HTML 创建的，网页上的不同部分与内容，需要用到不同的 HTML标签去标记，比如网页上的一段文字，要用 <p> 标签去包装一下，内容的标题需要用到标题标签，像 <h1> ... <h6> ，表示不同级别的标签。

Gulp 与 Grunt 都是可以自动化执行任务的工具。在平时开发的流程里面，一定有一些动作需要手工的重复的去执行，比如把一个文件复制到一个指定的地方，把多个 JS 或者 CSS 文件合并成一个文件，并且最小化一下，去把写好的 Sass 或者 Less 编译成 CSS，最小化处理图像文件，创建一个可以实时刷新的本地服务器等等。

只要你觉得有些动作是要重复去做的，一般你就可以把这些动作创建成一个 Gulp 或者 Grunt 的任务，然后在指定的条件下，比如文件发生变化以后，自动去执行这些任务。

Gulp 与 Grunt 选择哪个？

Gulp 与 Grunt 做的事情都差不多，只不过背后的原理还有方法不同。在项目里用哪个都可以，完全取决于个人喜好。另外也可以根据你的项目用到的其它的东西来决定，比如 Bootstrap 这个前端框架就用到了 Grunt，Semantic UI，AngularJS  用的是 Gulp 。相比，Grunt 比较老牌，根据在 Github 上的星星数，Gulp 更受欢迎。