前面我們介紹了寫網頁會用到的語言：HTML、CSS、JavaScript。但其實在寫程式時，有一個前置作業是必須的：也就是準備開發環境。
開發環境是個很廣泛的用詞。比喻來說，為了能夠專心讀書，就會尋找一個安靜的環境像是圖書館。為了能夠方便工作，可能就會找個空間夠大、桌椅夠多的辦公環境。
而開發環境就是指，為了開發程式，需要在電腦上準備好能方便開發的環境。例如作業系統(operate system)、命令列界面 (command line interface, CLI)、文字編輯器(text editor)、整合開發環境 (Integrated Development Environment, IDE)。
為了讓初學者快速進入狀況，這邊只介紹文字編輯器、整合開發環境與線上開發環境的部份。
廣義上來說，只要是能透過敲擊鍵盤寫字的軟體，都可以叫做文字編輯器。例如 Word 軟體可以打字，也可以算是廣義的文字編輯器。但 Word 功能很多樣，已經超出文字編輯器的範疇太多，所以通常會被歸類在文書處理軟體。
文字編輯器通常最在意一件事情：就是打字。不管樣式、不管顏色，就是在意打字的體驗。例如 Windows 預設的 notepad、或是台灣人開發的 notepad++，都屬於文字編輯器。
在程式開發中，有一款很多開發者都在使用的軟體：Visual Studio Code，簡稱 VSCode。雖然不是九天玄女唯一指定，但如果要入門前端的話，這款文字編輯器已經非常好用了，甚至開發體驗程度直逼整合開發環境。
如果說文字編輯器是專注在打字體驗，那整合開發環境 (IDE) 專注的範圍更廣，像是還專注在程式的除錯、編譯與執行。其實現在文字編輯器與整合開發環境的區隔越來越模糊了，只要知道這兩種軟體，都能用來開發程式就好。
順帶一題，微軟旗下有一款號稱地表最強 IDE 的軟體：Visual Studio。若往後有機會繼續寫程式的話，或許有機會接觸到這款軟體。
通常在開發程式、寫網頁時，都會在自己電腦上打開文字編輯器進行開發。但為了程式開發者方便，很多線上服務直接把文字編輯器 / IDE 搬上網頁，讓開發者能直接在網頁上面寫網頁 (有點繞口)。
例如，在 Hello World 範例中使用到的 Codepen，就屬於線上版本的文字編輯器 + IDE。
目前常見的網頁前端開發環境有：
本文介紹了開發程式時必須要的軟體服務：文字編輯器 / IDE / 線上開發環境。先前在 Hello World 範例中，為了讓初學者也能快速上手而使用的 Codepen，就是一種線上開發環境。
明天將開始進入第一關：自己用網頁寫一個自介履歷吧
iThome鐵人賽
看影片追技術