前言
爲什麼要開這麼大一個坑出教程呢？列舉一下，大致有如下幾點原因：
- 這一切都要從一隻蝙蝠說起…
- 筆者幾年前實在找不到人寫前端，只好親自上陣。
- 我的師傅（丁巨）當年妄圖用一堆教程和鏈接把我勸退。
- 這幾年帶了好幾個同學做網頁應用，自以爲教的比我師傅好。
因爲上述一些完全沒有邏輯的原因，我決定根據我的技術棧出這樣一份教程。
醜話說在前面，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開發幾乎全部要求兩個空格縮進（這是規範），請把所有的代碼寫的儘量符合規範，不然會在團隊合作和後期維護的時候遇到極大的困難。
做完這些，你就一切就緒啦！
資源
一些資源請拿好！更多資源可以自行查找。