安裝基礎軟體
在本文中，我們將討論進行簡單 Web 開發所需的軟體，以及現在需要安裝的軟體，包括程式碼編輯器和一些現代 Web 瀏覽器。
| 預備知識 | 熟悉你的計算機作業系統 (OS)。 |
|---|---|
| 學習成果 |
|
程式碼編輯器
一個好的程式碼編輯器是任何開發人員在其機器上最重要的工具之一。除了作為編寫程式碼的地方之外，程式碼編輯器還擁有許多其他功能。我們將在本系列的後續文章中專門討論程式碼編輯器。
目前，我們建議你安裝 Visual Studio Code，因為它可以在不同平臺上使用，具有出色的功能集和支援，並且是我們主要使用的編輯器。你應該現在安裝它以繼續閱讀本文的其餘部分。
現代 Web 瀏覽器
擁有現代 Web 瀏覽器對於 Web 開發至關重要，這樣你就可以在訪問者用來訪問你的網站或應用程式的瀏覽器上測試你的網站或應用程式。你還需要保持你的 Web 瀏覽器最新，以便它們支援最新的 Web 技術並應用最新的安全修復程式。
你將遇到的最常見的瀏覽器如下：
- 桌面瀏覽器
- Chromium: Google Chrome, Opera, Brave, Microsoft Edge, Vivaldi。
- Gecko: Mozilla Firefox。
- WebKit: Apple Safari。
- 移動/替代裝置瀏覽器
- Chromium (Android): Google Chrome, Opera, Brave, Microsoft Edge, Samsung Internet, Vivaldi。
- Gecko (Android): Mozilla Firefox。
- WebKit (iOS): Apple Safari。
注意：上面列出的大多數 Android 瀏覽器都有 iOS 版本，但由於 Apple 的 App Store 規則，這些瀏覽器在底層歷史上都由 Apple 的 WebKit 引擎提供支援。在撰寫本文時，由於監管變化，瀏覽器開始建立基於其自己的渲染引擎的 iOS 瀏覽器版本。請參閱 Apple 終於允許完整版本的 Chrome 和 Firefox 在 iPhone 上執行。
大多數現代瀏覽器傾向於自動安裝更新，並在重新啟動時應用更改。你通常可以在瀏覽器“關於”頁面上檢查更新。這在不同的瀏覽器和作業系統上有所不同，例如：
- Firefox：在 macOS 上可在 Firefox > 關於 Firefox 中找到，在 Windows 上可在選單圖示 > 幫助 > 關於 Firefox 中找到。
- Chrome：在 macOS 上可在 Chrome > 關於 Google Chrome 中找到，在 Windows 上可在選單圖示 > 幫助 > 關於 Google Chrome 中找到。
要安裝哪些瀏覽器
目前，你應該安裝幾個桌面和移動/替代裝置瀏覽器來測試你的程式碼。如果可能，請從前面顯示的每個子彈中至少安裝一個瀏覽器，這樣你就不會只在基於相同渲染引擎的多個瀏覽器中進行測試。
本地 Web 伺服器
通常，當你在瀏覽器中輸入網址以載入網站時，瀏覽器用於渲染該站點的檔案是從世界其他地方的伺服器計算機上託管的遠端 Web 伺服器獲取的。你將在本系列的下一篇文章中瞭解更多關於其工作原理的資訊。
在本地（在你的機器上）建立網站時，你通常可以直接在瀏覽器中載入主 HTML 索引檔案進行測試。但是，有些示例需要透過本地安裝的 Web 伺服器才能成功執行。
安裝本地 Web 伺服器
我們發現最簡單的本地伺服器選項之一是使用程式碼編輯器擴充套件——這樣，它就可以直接在你的程式碼編輯器中使用。在 Visual Studio Code 中執行以下操作：
- 使用 檢視 > 擴充套件 選單選項開啟 擴充套件 面板。
- 在此面板頂部的“搜尋...”框中，鍵入“live preview”。頂部搜尋結果應該是 Microsoft 建立的 Live Preview 擴充套件。
- 單擊該選項以開啟一個包含其使用方法的頁面。
- 按 安裝 按鈕安裝擴充套件。
- 現在，當你在編輯器中處理 HTML 檔案時，你應該能夠單擊“顯示預覽”按鈕，在單獨的選項卡中開啟即時示例。
上述選項很簡單，但靈活性不高。將來，你可能希望擁有一個更靈活的本地伺服器選項，可用於在任何瀏覽器中載入示例。有關其他選項（以及有關本地伺服器為何必要的更多背景資訊），請參閱 如何設定本地測試伺服器？。
圖形編輯器
Web 開發人員通常需要操作影像檔案，以便在其建立的網站上使用。這通常意味著設計/建立圖形資源，但同樣，圖形通常由圖形設計師（這可能是團隊成員或第三方）提供，在這種情況下，Web 開發人員可能需要裁剪或調整他們收到的檔案的大小。
MDN 上的任何學習文章都不要求你建立自己的圖形，儘管其中一些文章可能要求你操作我們提供的檔案。
我們建議你在學習過程中需要時再安裝圖形編輯器。當然，不要花錢購買昂貴的商業產品，除非你真的認為它會增加價值。
現在有許多免費的軟體工具和線上服務可能足夠好，例如：
- macOS 帶有一個名為 預覽 的工具。這主要用於檢視影像和 PDF，但它也有一些非常有用的影像編輯功能，包括調整大小、旋轉、裁剪、註釋以及在不同檔案型別之間轉換。
- 內建的 Windows 照片應用程式 具有許多類似的功能。
- tinypng 網站提供免費服務，允許你壓縮 PNG、JPEG 等。這是你在準備網站資源時必須完成的一項非常常見的任務。
在商業產品方面，Adobe Photoshop 長期以來一直是行業標準，尤其適用於照片編輯，而像 Sketch 這樣的程式更適合圖示和 UI 工作。還有一些流行的新產品，如 Figma、Affinity Suite 和 Canva。
上述大多數應用程式都有值得探索的試用版或免費模式。還有一些備受推崇的免費應用程式，如 GIMP、Adobe Express 和 Paint.NET。
版本控制工具
版本控制工具由開發人員用於管理伺服器上的檔案，與團隊協作專案，共享程式碼和資產，並避免編輯衝突。目前，Git 是最流行的版本控制系統，以及 GitHub 或 GitLab 等託管服務。
雖然版本控制工具對於 Web 開發團隊至關重要，但你現在無需擔心它們。在本系列核心模組的末尾，我們有一個專門針對版本控制的模組。
站點部署應用程式
完成網站或應用程式開發後（在你的本地計算機上，或可能在開發伺服器上），你會希望將其放到遠端 Web 伺服器上，以便你的使用者可以輸入與其關聯的網址並在 Web 上檢視它！
你可以透過各種方式完成此操作，從購買託管並使用 SFTP 應用程式，使用 GitHub Pages 或 Netlify 等服務，甚至使用 CodePen 或 JSFiddle 等工具快速製作演示以與他人分享。
如此多的選擇可能令人不知所措，但不用擔心——你現在無需瞭解任何關於釋出網站的知識。我們將在課程的後面多次討論這個話題。你很快就會在我們的 你的第一個網站 模組中獲得實踐經驗。