前言
为什么要开这么大一个坑出教程呢？列举一下，大致有如下几点原因：
- 这一切都要从一只蝙蝠说起…
- 笔者几年前实在找不到人写前端，只好亲自上阵。
- 我的师傅（丁巨）当年妄图用一堆教程和链接把我劝退。
- 这几年带了好几个同学做网页应用，自以为教的比我师傅好。
因为上述一些完全没有逻辑的原因，我决定根据我的技术栈出这样一份教程。
丑话说在前面，Web开发有一定的难度，各位遇到困难不要害怕，努力寻求解决方法，享受解决问题的乐趣吧！
请多多指教！如有错误，请及时指正！
相信对于生活在二十一世纪的你们，Web是什么应该不陌生了。从每天刷的QQ看点，到打开百度搜索，Web通过各种各样的渠道向我们传输着信息，收集我们的反馈。在接下来的教程之中，我们会进一步地了解网页应用究竟是什么，怎么样构建一个网页应用，但在此之前，让我们了解一下为什么要学习Web开发，Web开发和传统的电脑上的应用，手机上的Android/iOS应用相比，有什么优势呢？列举一下，大致有如下几点：
- 秀，巨秀，非常秀。做一个好看而又有趣的网页，比用VB写个复古风格小程序不知道秀多少倍。
可以给女朋友做网页。 - 门槛低：Web开发对电脑配置要求很低，也不需要特殊的运行环境。
- 迅捷开发：面对需求上线快。在这个需求每时每刻都在变化的时代，效率就是竞争力。
- 跨平台：手机、平板、个人电脑，Android、iOS、Windows，不管是什么设备什么操作系统，一“站”解决。
- 茂盛的生态系统：无数前辈们开发的海量的资源和模块，可以让你像拼积木一样拼出各式各样的应用。
- 就业情况很好。
Web前端领域相比于其他开发领域有更多的妹子。
其实说来说去，就第一点还不够吗？让我们赶快开始秀吧！
0. 准备
写教程的时候问了团队里面的大佬，他们说：
只需要一个脑子还需要一双手
Just joking…
其实，最基本的准备大概是：
- 一台可以联网的电脑（操作系统随意，本篇教程均以Windows 10为例）
- 在电脑上合适地方建一个文件夹，作为我们的工作空间(workspace，又叫工作目录)。
- 在工作目录下新建文件
index.html，不会改文件后缀名的请自行百度！ - 一些软件，以及一些资源网址。（就是下面这些）
软件
俗话说，工欲善其事，必先利其器。一些优秀的软件可以帮助我们更好地完成开发任务。
Google Chrome
世界上最好用的浏览器（不接受反驳）。具体来说，是HTML5标准测评站 https://html5test.com/ 给出的当前评分最高的浏览器，本文也将根据Google Chrome浏览器来定义浏览器支持情况。
什么？你说IE？不好意思不考虑支持IE。
安装方法：通过Microsoft Store、各大应用商店、甚至百度下载安装。
在Google Chrome里面打开网页的时候，可以通过按F12，或者右击 - 检查打开调试控制台，这在以后会经常用到。
Sublime Text 3
很好用的文本编辑器（不敢说最好用了，怕被喷）。如果喜欢用VSCode，请跳过本节。
安装方法：打开官网 https://www.sublimetext.com/ 下载安装。
Sublime Text 3可以无限期试用，过一阵子弹框让你购买，叉掉即可继续使用。当然，你也可以支持一下官方。
安装好Sublime Text 3（以下简称sublime）以后，打开sublime，然后惊喜地发现它只有英文版（好好学英语吧）… 点击菜单栏里面的Open Folder...，选择建好的工作目录，然后点击打开。整个软件左边就有帅气的文件目录树啦！
基础使用方法和一些快捷键如下：
- 标签上有白色小圆点的是没有保存的，标签页上面是白色小叉叉的是已经保存了的文件。
- 通过左侧的文件目录树可以新建、删除、重命名文件或文件夹
- 右下角可以设置缩进格式和当前文件类型，sublime会根据不同的文件类型渲染不同的代码颜色，方便我们开发。
- 按住
Ctrl滚动鼠标滚轮可以调整字体大小 Ctrl+S保存当前文件Ctrl+W关闭当前文档Ctrl+T新建文档Ctrl+Shift+P可以调出命令菜单，安装插件的时候会用。
一些配置：从菜单栏打开Preferences - Settings，在新打开的两个窗口中的右侧窗口（就是标签上写了User的那个）里面写如下内容并保存：
{
"tab_size": 2,
"translate_tabs_to_spaces": true,
"word_wrap": true
}
这是设置缩进格式，Web开发几乎全部要求两个空格缩进（这是规范），请把所有的代码写的尽量符合规范，不然会在团队合作和后期维护的时候遇到极大的困难。
做完这些，你就一切就绪啦！
资源
一些资源请拿好！更多资源可以自行查找。