你是否考慮過從事網頁開發的職業？如果是的話，那麼你做出了一個很好的選擇。網頁開發是2024年市場上最受歡迎的技能之一。隨著超過50.38億的網際網路使用者，網頁開發的未來前景光明。

在這篇文章中，我將向你展示開始進行網頁開發的基本要素。我們將探索關鍵的技術棧、適合初學者的項目想法、有用的資源和一些額外的建議。

兩年前，我寫了一篇文章來討論這個主題。由於對網頁開發的需求仍然非常高，我很高興能以更詳細的指南重新探討這個主題。因此，請堅持看到最後。

目錄

  1. 什麼是網站？

    1. 前端與後端

  2. 前端開發

    1. HTML

    2. CSS

    3. JavaScript

    4. 前端框架和庫

    5. 響應式設計

  3. 後端開發

    1. 為什麼你應該學習一門程式語言？

    2. Python

    3. Golang

    4. Java

    5. JavaScript

    6. 如何選擇一門程式語言？

    7. 後端框架

    8. 資料庫

    9. API

  4. Git 和 GitHub

  5. 建立專案作品集

  6. 部署與託管服務

  7. 額外提示

什麼是網站？

網頁是顯示在網路瀏覽器（如 Chrome、Firefox 等）中的文件。它由文字、圖片和其他互動元素組成。而網站則是一組透過連結相互連接的網頁集合。

網站運行在被稱為網頁伺服器的遠端電腦上，並通過互聯網訪問。一些知名網站的例子包括維基百科、亞馬遜和 YouTube。

注意：當我在本文中提到網路應用程式或網路應用時，我指的是與網站相同的東西。

網路應用有兩個組件，前端和後端。讓我們理解它們之間的區別。

網站的前端與後端

前端是網站的用戶界面（UI），基本上就是用戶在螢幕上看到的內容。

後端指的是存放網站主要邏輯的伺服器。它還包括數據庫，所有應用程序的數據都存放在這裡。

前端和後端通過交換數據進行通信。讓我們以社交媒體應用程序如 Instagram 為例。

當你上傳一個帖子時，UI 將帖子數據發送到後端，後端處理這些數據並將其添加到數據庫中。然後下次當你加載網站/應用時，它會從後端提取所有你的帖子並在螢幕上顯示出來。

在接下來的兩個部分中，我將展示如何開始前端和後端開發。

前端開發

正如我之前提到的，前端開發主要關注的是 UI——也就是網站的外觀。要開始前端開發，你需要學習以下三個基本工具：

HTML

HTML（超文本標記語言）用於編寫由瀏覽器顯示的網頁。它定義了網頁的結構和內容，使其成為每個網站的骨幹。

網頁的內容包括標題、段落、鏈接、圖像、列表等元素。HTML 通過使用 HTML 標籤來創建和結構化所有這些元素。瀏覽器則解釋這段 HTML 代碼並將其渲染在你的螢幕上。

freeCodeCamp 的免費課程中的「響應式網頁設計」認證從教授 HTML 基礎知識開始。你甚至可以建立自己的照片應用程式。這是一個很好的起點，讓你深入了解 HTML。

如果你想要額外練習，w3schools.com 是一個對初學者很有幫助的資源。它提供了清晰且一步一步的教學教程。他們還提供一個互動式編輯器供你練習使用 HTML 標籤並查看輸出的網頁（freeCodeCamp 也有）。

著重於以下領域：

  • 建立簡單的網頁

  • 使用 HTML 標籤呈現內容

  • 創建表單

CSS

雖然 HTML 定義了網頁的結構，但這並不足夠，因為它僅僅創建了網頁的骨架 UI。它僅僅定義了頁面上存在哪些元素，而不是它們的外觀。

CSS（層疊樣式表）用於為網頁增添視覺吸引力。它將一個簡單、普通的網頁轉變為一個設計良好的用戶界面。

這是一個只使用 HTML 的網站的外觀：

當你添加 CSS 時，它看起來像這樣：

好多了，對吧？它實際上看起來像一個正確的網頁，相較於之前的骨架 UI。這被稱為「網頁樣式」。

CSS 樣式包括以下內容：

  • 顏色、字體和元素背景

  • 在各種布局中組織內容（網格、彈性盒等）

  • 間距，即邊緣和填充

  • 轉換和動畫（高級技巧）

當您繼續在 freeCodeCamp 課程中學習時，您也會學習 CSS – 這是一個很好的方式。

您也可以參考 w3schools.com 的 CSS 教程。在他們的互動編輯器中嘗試每個 CSS 屬性。

注意： HTML 和 CSS 都不是編程語言。

JavaScript

HTML 和 CSS 只能創建靜態網站 – 也就是說，您無法與僅使用 HTML 和 CSS 創建的網頁中的任何元素進行交互。該網站不會更新或對用戶交互做出任何響應，如按鈕點擊或下拉選擇。

JavaScript（JS）是一種使網站動態和互動的編程語言。它為網站添加以下功能：

  • 處理用戶交互，如點擊、懸停、鍵盤按鍵、填寫表單等。

  • 在网页上动态更新内容

  • 处理表单验证和提交

  • 与后端服务器交互

JavaScript具有许多功能，可以使您的网站对最终用户功能强大且引人入胜。在开始学习JS时，建立概念的坚实基础至关重要。最初，重点关注以下领域：

  • 基本JavaScript语法

  • JS函数

  • 与DOM（文档对象模型）交互

  • 事件处理

  • JS对象和数组

  • 异步JavaScript

请参考以下JavaScript资源：

有很多其他的 JavaScript 資源，但我不會讓你感到不知所措。這兩個資源應該足夠讓你開始學習。

一旦你熟悉 HTML、CSS 和 JavaScript，你將知道如何創建一個簡單的網頁。繼續通過建立不同的網頁來練習，比如待辦事項清單和表單，並嘗試實現 CRUD（創建、讀取、更新、刪除）功能。

學習前端框架和庫

隨著你網站的成長，JavaScript 代碼變得越來越複雜，維護起來也更加困難。這會減慢開發過程，並使開發人員面臨真正的挑戰。

為了解決這些問題，你可以使用框架和庫。框架提供了一種更有結構的方式來構建網絡應用，鼓勵模組化設計和重用性。

通過使用框架，你可以專注於構建實際功能，而不是處理 JavaScript 代碼的複雜性，這有助於加快開發過程。因此，我建議選擇一個 JS 框架/庫來開發更大的項目。

React.js – 一個不錯的選擇

React JS 是一個 JavaScript 函式庫，讓創建動態和互動的網頁變得簡單。它將你的代碼分成組件，使其易於閱讀和維護。這樣可以減少代碼的複雜性，並允許重用。

React 是我個人的建議，因為與其他框架相比，它的學習曲線較為平緩。它在前端職位中需求量很高，因為許多網頁應用程式都是基於 React 建造的。

要開始學習 React，你最好的資源是 React 文檔。這些文檔非常詳細，並包含互動式代碼編輯器供你進行實驗。

freeCodeCamp 的 YouTube 頻道也有一些有用的 React 課程，例如 這個來自 Bob Ziroll 的課程，而前端開發庫認證中也有一個 React 部分。

除了 React，還有其他 JavaScript 框架，如 Angular、Vue 和 jQuery 函式庫。這些框架也依然受歡迎，根據你所在區域的工具需求，你可以專注於最符合你需求的框架。

注意： 在進入任何框架之前，確保你學習了所有基本的 JavaScript 概念並完全理解它們。

學習響應式設計

在繼續之前，我們先來談談網頁開發中的一個基本實踐。

響應式設計是指一種設計方法，能夠根據不同大小的螢幕進行調整，涵蓋從桌面電腦到平板和手機的所有設備。一個好的響應式設計能大幅減少為不同螢幕尺寸編寫單獨代碼的需求。

這裡有一個有趣的事實：手機在全球的網路使用中佔據了三分之二。因此，為了確保良好的用戶體驗，您需要讓網站在手機上看起來不錯。

在這本簡單指南中了解更多關於響應式設計的資訊，並在這裡閱讀一些最佳實踐。

以下是一些其他資源，可以幫助您在前端旅程中：

後端開發

後端開發涉及構建網頁應用程式的伺服器端。伺服器端承載著網站的商業邏輯，支撐著所有幕後操作。它還負責管理數據庫，並確保伺服器與用戶界面之間數據的順暢流動。

要深入了解後端開發，您需要首先學習一門編程語言。

為什麼您應該學習編程語言？

學習編程語言使您具備構建這些伺服器端應用程式的基礎。把編程語言看作是告訴伺服器您希望它做什麼的方式。

編程語言作為解決問題和創建穩健、可運行應用程式的工具。這些語言具備處理各種任務的能力，例如存儲和管理數據、與前端通信，以及確保應用程式的安全性。

學習編程語言不僅僅是學習語法和編寫代碼。這是關於理解如何創建推動成功網站的系統。因此，熟悉一門編程語言是後端開發的關鍵部分。

市面上有許多編程語言，每種語言都有其獨特的特性。讓我們了解幾個選擇：

Python

Python 是後端開發的首選之一，因為它簡單易用。它具有簡潔且易讀的語法，使其非常受歡迎。它提供良好的數據庫連接和設置網頁伺服器的功能。Python 還擁有數據科學和機器學習的庫。

Python 擁有大量的教學資源和良好的社群支持，使得入門變得相對容易。它對初學者友好，學習起來有趣且需求量高。

參考以下資源學習 Python：

Golang

Golang（Go）因其簡單性和效率而越來越受歡迎。Go 代碼執行迅速且高效，使其成為高性能需求的良好選擇。這也導致了更快的開發時間。Go 還對 並發性 提供了出色的支持，從而實現高效的處理。

Go 對初學者友好，語法簡潔明了，易於閱讀和維護。它還擁有廣泛的標準庫，提供許多內置函數和工具，因此可以輕鬆設置項目而不需太多麻煩。

由於其效率，Go 的受歡迎程度不斷增長，許多公司正在將 Go 應用於其項目中。這導致了對 Golang 開發者需求的增加，預計將會上升。

Go 為初學者提供了大量資源和不斷增長的社群。要開始使用 Go，請參考以下資源：

Java

Java 是一種 物件導向程式設計 (OOP) 語言，廣泛用於後端開發。Java 以其安全性和穩定性而聞名，成為需要高可靠性的應用程式的首選，例如金融和醫療系統。Java 也提供了很好的並發支持。

Java 對於初學者來說是一個不錯的選擇，因為它擁有豐富的資源和龐大的開發者社群。這包括大量的教程和詳細的文檔，讓初學者和經驗豐富的開發者都能輕鬆上手。

Java 已經存在一段時間，許多現有系統和企業應用程式目前都在 Java 上運行。因此，在大型企業中對 Java 開發者的需求非常大。

最後，在 Java 編碼時學到的概念會伴隨著你，使你成為一個更好的開發者，即使未來轉換語言也是如此。

以下資源可以幫助你開始學習Java：

JavaScript

我們已經知道JavaScript在前端的應用，但它也可以通過NodeJS用於後端開發。

NodeJS是一個運行時環境，允許你在伺服器端運行JS代碼。這使得JavaScript可以同時用於前端和後端。

NodeJS遵循事件驅動架構和異步編程，這使它能夠處理多個任務而不會因為某個任務而停止執行（非阻塞I/O）。Node是單線程的，因此它不是創建多個線程來處理任務，而是通過排隊任務一個接一個地異步執行。

Node 也遵循模塊化架構，這意味著你可以將應用程序分解為更小、可管理的組件。它還包括 NPM（Node Package Manager），該管理器提供了訪問成千上萬個開源庫的功能，以添加路由、身份驗證或數據庫處理等功能。

為什麼使用 Node？

  • 如果您已經熟悉 JavaScript，那麼 Node 是一個非常好的選擇，因為您不需要學習任何其他語言。

  • Node 快速高效，如果您想快速設置一個小型服務器，這將變得很容易。

  • Node 也通過 NPM 擁有大量庫的生態系統。

然而，Node 對於 CPU 密集型任務並不理想，因為它們可能會阻塞主線程，因為 Node 是單線程的。

如何選擇編程語言？

由於有很多選擇，可能會感到困惑，選擇適合自己的正確語言。每種語言都有其自身的功能，沒有一種語言比其他語言更好。

Python 和 Golang 非常適合初學者，語法簡單。因此，如果你重視平緩的學習曲線，這兩個選擇都是不錯的選擇。Java 以其可靠性和穩定性著稱，許多企業級應用程序都是用 Java 開發的。

至於工作機會，以上每種語言都有 高需求，所以你可以選擇任何一種。最重要的是培養你的問題解決能力，並了解可靠軟體是如何構建的。

在長期來看，語言的選擇並不重要，因為核心基礎知識始終相同。因此，我的建議是選擇任何一種語言，學習其語法和核心功能，並開始解決問題。你可以從以下幾個方面開始：

後端開發框架

僅僅掌握程式語言不足以創建穩健和安全的應用程式。框架基於這些語言的能力，讓你能夠創建這些強大的應用程式。通過提供路由和數據庫處理等附加功能，它們作為一個平台來檢驗你的編碼技能，並且使開發過程更快。

根據你選擇的語言，你可以學習以下框架：

  • Django 和 Flask – 基於 Python 的框架

  • Java Spring Boot

  • Gin – Golang 框架（您可以在不使用框架的情況下創建一個簡單的 Golang 應用程序）

如果您感興趣，可以進一步了解它們。

資料庫

資料庫是結構化數據的集合，是後端開發的重要組成部分。它在存儲和管理應用程序數據方面發揮著重要作用。

資料庫大致可以分為兩種類型：

  • 關聯資料庫使用表格來存儲數據並定義這些表格之間的關係。示例包括 MySQL、PostgreSQL、SQLite。

  • 非關聯式數據庫（NoSQL）旨在處理非結構化或半結構化數據，通常用於分層或基於文檔的數據存儲。例如MongoDB和Cassandra

    • MongoDB：一個用於靈活和可擴展數據存儲的流行NoSQL數據庫。

    • Cassandra：適合處理大量分佈式數據。

首先學習關聯數據庫，學習 SQL（結構化查詢語言）。SQL 用於編寫查詢，以對數據執行各種操作，例如：

  • 創建 表格並定義其結構。

  • 讀取 使用 SELECT 語句的數據。

  • 更新 現有記錄。

  • 刪除 不必要或過時的數據。

請參考以下資源來學習 SQL：

一旦你熟悉基本的 SQL 語法並能夠撰寫查詢，探索 DBMS（資料庫管理系統） 概念。這些概念有助於你理解資料庫是如何設計、管理和優化的。

作為初學者，我建議從關聯資料庫開始，因為它們提供了有關表格及其之間關係的 DBMS 概念的堅實基礎。這些資料庫在企業中使用得更為廣泛，學習它們的概念對你有很大幫助。

這些概念可能需要一些時間來學習，但不必擔心。慢慢來，並在同時繼續進行開發工作。隨著你在資料庫方面的經驗增長，你會更好地理解這些概念。

APIs

API（應用程式介面）是後端開發中不可或缺的一部分，因為它們將後端邏輯暴露給外部世界。API 是兩個不同應用程式之間進行通信的一種方式。在網頁開發的上下文中，前端通過 API 與後端服務進行互動。

當你構建一個網頁應用程式時，前端通常需要從後端發送和接收數據。讓我們以登錄功能為例。當用戶登錄時，前端通過 API 調用將其憑據發送到後端。後端驗證這些信息並回應結果。

要查看這些 API 調用，請訪問任何網站並在開發者工具中打開網路標籤。與網站互動，或只是重新加載頁面，你將看到在使用網站時所進行的 API 調用。

閱讀以下文章以進一步了解 API：

到這一點，您已經知道如何開始進行前端和後端開發。如果您已經達到這個階段，恭喜！您已經完成了大部分的辛苦工作。但在您開始開發項目之前還有一件事情需要學習。

Git 和 GitHub

Git是一個版本控制系統，用於跟踪軟件項目中的更改。它允許多人在項目上工作，而不會直接干擾彼此的工作。

GitHub是一個基於Git的遠程存儲庫系統。它就像社交媒體，但專門用於您的代碼。GitHub鼓勵開發人員之間的協作，並跟踪每個人的貢獻。

GitHub讓您分享您的項目代碼，也可以查看其他開發人員的代碼。這有助於增加協作和學習。我強烈建議您在開發旅程的開始階段學習Git。

要開始使用Git和GitHub，請參考以下文章：

建立專案作品集

現在，您已經準備好開始進行專案。強大的專案作品集對展示您的技能至關重要。它還有助於您應用迄今為止學到的知識並提高您的問題解決能力。

考慮以下專案想法：

  • 待辦事項應用程式

  • 電子商務應用程式

  • 個人作品集網站

  • 天氣應用程式 – 使用公共 API 並創建簡單的 UI

  • 支出追蹤器

您可以進一步研究這些想法，並從一些基本功能開始著手。根據您的目標，構建前端、後端或兩者皆可。將您的項目分享到 GitHub，以提高其可見性。

查看 GeeksforGeeks 獲取更多項目想法。

部署與託管平台

一旦您開發了一個網頁項目，您可以選擇將其公開發佈。這意味著您的網站將在互聯網上對公眾開放使用。這真令人興奮！

讓我們理解上述術語。 部署是指將您的應用程序上傳到遠程系統或伺服器的過程，以使其上線並供用戶使用。 託管就像在互聯網上租用一個空間，用於存儲您的應用程序代碼。它提供了一個空間來儲存您網站的數據在伺服器上，並在互聯網上顯示您的網站。

部署和託管一個應用程序主要遵循以下步驟：

  • 應用程序代碼編寫、在本地測試並優化以供生產

  • 所需的配置和密鑰（密碼、API 金鑰等）作為環境變量編寫

  • 程式碼被推送到版本控制系統，如 GitHub 或 GitLab

  • 程式碼會被掃描以檢測任何安全漏洞並執行自動化測試

  • 託管平台從這些存儲庫中拉取程式碼並在互聯網上使其可訪問。

託管服務如 Netlify、GitHub Pages 和 Heroku 提供免費和付費服務，易於初學者使用。Netlify 只支持前端應用，而 Heroku 適合後端和全棧應用，並可輕鬆整合數據庫。GitHub Pages 允許您從存儲庫直接託管網站。

將您的網站公開是一個向招聘者和潛在合作者展示您作品的絕佳機會。

額外提示

  1. 不要花太多時間在教程上，因為您可能會陷入“教程地獄”。教程對於理解核心概念很重要，但真正的學習發生在親自動手時。所以儘快開始構建，即使一開始只是小項目。

  2. JavaScript 一開始可能會讓人感到不知所措，但從小處著手並定期練習。不要急於同時學習多個概念，一次專注於一個概念，並通過編碼練習以獲得更好的理解。

  3. 最初嘗試不同的框架，以找到適合你的框架。一旦選擇了一個框架，就堅持使用它直到你掌握它。

  4. 在跳入任何框架之前，確保你的程式語言概念是清晰的。

  5. 如果你覺得某種程式語言不適合你，可以轉換到另一種，核心基礎仍然是相同的。

  6. 作為新手，重要的是對前端和後端都有基本的了解。之後，你可以選擇專攻其中一個，或者選擇兼攻兩者，成為「全端」開發人員。

  7. 一開始會面臨挑戰，不要氣餒。持續練習，隨著時間的推移，你會變得更好。

  8. 如果遇到問題，盡可能使用 Chat GPT、Google 搜尋、論壇和開發者社群，以及 Stack Overflow。如果需要任何幫助，我隨時在這裡。

  9. 最後，要隨時了解網頁開發的最新趨勢和技術。時刻尋找解決問題的新方法或改進方法。學習永無止境！

結論

網頁開發分為兩部分：前端和後端開發。前端關注網站的外觀，而後端則專注於伺服器端邏輯和資料庫。

HTML、CSS 和 JavaScript 是前端開發的基本要素，構成了網站的骨幹。在後端開發中，學習 Python 或 Java 等程式語言是關鍵。前端和後端框架提供了額外的功能，使開發過程變得更快。

Git 是一項必備技能，它使您能夠分享您的工作並與其他開發人員合作。建立一個項目組合並在 GitHub 上分享您的作品，可以展示您的能力並使您成為更好的開發人員。最後，利用部署平台使您的網站對公眾可用。

今天就到這裡！希望這篇文章能幫助您開始您的網頁開發之旅。讓我知道您的想法。您的反饋始終受到重視！

在 Twitter 上與我聯繫，以獲取更多更新和討論。如果您有任何問題或需要澄清的地方，請隨時聯繫我。感謝您的閱讀，期待下次再見！

參考資料：