2026 香港人 Web 開發入門實戰指南：用 HTML/CSS/JavaScript + AI 幫手，由零建立你嘅第一個網站

前言：點解 2026 年係學整網站最好嘅時機？

我成日聽到人話：「我想學整網站，但係 programming 好難，唔知點開始。」

呢句說話喺十年前完全合理——以前你要學整網站，要先搵 hosting、set up FTP、學 PHP、搞 database，淨係個環境 setup 已經可以玩你一個 weekend。

但 2026 年嘅今日，情況完全唔同咗：

AI 幫你寫 code：你唔需要記 syntax，直接用自然語言叫 AI 生成 code
AI 幫你解釋：睇唔明段 code？叫 AI 用人話解釋俾你聽
AI 幫你 debug：個網站炒咗？叫 AI 睇 error message
免費 hosting：GitHub Pages、Cloudflare Pages、Netlify 全部免費
免費 domain：只要俾心機，你可以用 username.github.io 就上線

2026 年學整網站，最難嘅唔係技術，而係 決定開始 同埋 堅持完成第一個 project。

呢篇文我會由一個完全冇 programming 經驗嘅角度出發，帶你行一次完整嘅 web 開發旅程——由最基本嘅 HTML 結構，到加 CSS 靚仔化，到用 JavaScript 加互動功能，最後用 AI 幫手加速成個過程。

1. 整網站需要咩工具？

好消息：你需要嘅工具好少，而且全部免費。

必備工具

工具	用途	選擇
文字編輯器	寫 code 用	VS Code（免費，最多人用）
瀏覽器	測試你個網站	Chrome / Edge / Firefox（任何一個都得）
Git	版本控制 + 部署	GitHub Desktop（圖像化，易上手）
AI 助手	生成 code、解釋、debug	Claude / ChatGPT / Cursor

建議 set up 步驟

下載 VS Code → https://code.visualstudio.com
安裝 Live Server extension（VS Code 入面 search「Live Server」）
開一個新 folder，叫「my-first-website」
開新檔案 index.html，開始寫 code！

就係咁簡單。你唔需要 set up server、唔需要 install database、唔需要買 domain。

2. Step 1：HTML — 網站嘅骨架

HTML（HyperText Markup Language）係網站最基本嘅 building block。佢就好似一間屋嘅結構——牆、門、窗、間隔。

最基本嘅 HTML 結構

<!DOCTYPE html>
<html lang="zh-HK">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我嘅第一個網站</title>
</head>
<body>
    <h1>Hello 香港！</h1>
    <p>呢個係我第一個網站。</p>
</body>
</html>

常用 HTML tag

Tag	用途
`<h1>` ~ `<h6>`	標題（1 最大，6 最細）
`<p>`	段落文字
`<a href="...">`	連結
`<img src="..." alt="...">`	圖片
`<ul>` / `<ol>`	無序/有序列表
`<div>`	容器（用嚟分區）
`<button>`	按鈕

AI 練習：叫 Claude/ChatGPT「幫我生成一個簡單嘅 landing page HTML，要有 header、navigation、content section 同 footer。」

3. Step 2：CSS — 網站嘅衫

HTML 整好咗結構，但望落好寡——白色背景、黑色字、冇 spacing。呢個時候就需要 CSS（Cascading Style Sheets）幫你靚仔化。

基本 CSS 寫法

你可以將 CSS 放喺三個地方：

Inline — 直接喺 HTML tag 入面寫 style=""
Internal — 喺 <head> 入面用 <style> tag
External — 獨立一個 .css 檔案（最推薦）

External CSS 例子

styles.css：

body {
    font-family: 'Noto Sans TC', system-ui, sans-serif;
    line-height: 1.6;
    color: #333;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

h1 {
    color: #1B2A4A;
    border-bottom: 3px solid #C9A84C;
    padding-bottom: 10px;
}

.button {
    display: inline-block;
    background: #1B2A4A;
    color: white;
    padding: 12px 24px;
    text-decoration: none;
    border-radius: 8px;
    transition: background 0.3s;
}

.button:hover {
    background: #C9A84C;
}

然後喺 HTML 嘅 <head> 入面加：

<link rel="stylesheet" href="styles.css">

CSS 重點概念

Selectors：h1（tag）、.class（class）、#id（id）
Box Model：每一個 element 都係一個 box——content → padding → border → margin
Flexbox：用 display: flex 做到橫向排列（超常用）
Grid：用 display: grid 做到更複雜嘅 layout
Responsive：用 @media (max-width: 768px) 令手機睇都靚

AI 練習：叫你個 CSS 「幫我用 flexbox 整一個 3 欄嘅 card layout，每張 card 有陰影同 hover 效果。」

4. Step 3：JavaScript — 網站嘅腦袋

HTML 係結構，CSS 係樣式，JavaScript（JS）就係行為——令你個網站有互動、有反應、有邏輯。

基本 JS 例子

喺 HTML 嘅 <body> 最尾加：

<script>
    // 撳掣彈出訊息
    function showMessage() {
        alert('多謝你撳我呢個掣！');
    }

    // 改變網頁內容
    function changeText() {
        document.getElementById('demo').textContent = '俾你改咗喇！';
    }

    // 切換 dark mode
    function toggleDarkMode() {
        document.body.classList.toggle('dark-mode');
    }
</script>

JavaScript 最常用嘅 5 樣嘢

變數：let name = 'ESGov';
函數：function greet() { ... }
事件：button.addEventListener('click', doSomething);
DOM 操作：document.querySelector('.class') / document.getElementById('id')
條件判斷：if (user.age >= 18) { ... } else { ... }

一個簡單嘅互動例子

以下係一個「撳掣計數」嘅完整 html：

<!DOCTYPE html>
<html>
<head>
    <title>計數器</title>
</head>
<body>
    <h1>撳我計數</h1>
    <p>次數：<span id="count">0</span></p>
    <button onclick="addOne()"> 加一</button>
    <button onclick="resetCount()"> 重置</button>

    <script>
        let count = 0;

        function addOne() {
            count++;
            document.getElementById('count').textContent = count;
        }

        function resetCount() {
            count = 0;
            document.getElementById('count').textContent = count;
        }
    </script>
</body>
</html>

AI 練習：叫 AI 「幫我用 JavaScript 整一個 to-do list，可以 add task、mark done、delete task，要用 localStorage save 低。」

學 JS 最大嘅貼士：唔好一開始就背 syntax。用 AI 生成 code → 試 run → 有問題叫 AI 解釋 → 修改 → 理解。呢個 loop 係最快嘅學習方法。

5. Step 4：用 AI 幫你加速開發

2026 年學 web development 最大嘅優勢係有 AI 幫手。以下係我嘅實戰 workflow：

5.1 用 AI 生成初稿

同 AI 講你要咩：

「幫我生成一個個人 portfolio 網站嘅 HTML + CSS。要有：

Navigation bar（Home / About / Projects / Contact）

Hero section 有 background image 同 CTA button

Projects section 用 card grid layout

Contact form

Responsive design（手機都睇到）唔需要 JavaScript，純 HTML + CSS 就得。」

AI 會俾你一個完整嘅 code base，你可以直接 copy 去 VS Code 試 run。

5.2 用 AI 解釋 code

見到唔明嘅 code，直接問：

「呢段 code 係做咩㗎？逐行解釋俾我聽，用最簡單嘅話解釋。」「點解要用 display: flex 而唔用 float？」「addEventListener 係點樣 work 嘅？」

5.3 用 AI debug

你個網站炒咗，或者某个 component 唔 work，直接 copy error message + code 俾 AI：

「我個 contact form submit 咗之後頁面會 refresh，點樣可以唔 refresh 就用 JavaScript 傳送資料？」「呢段 code 喺 Chrome 行到但 Safari 行唔到，點解？」「我個 CSS grid layout 喺手機睇爛咗，幫我 fix。」

5.4 用 AI 做 Code Review

當你寫好咗一個 project，叫 AI 幫你 review：

「幫我 review 呢段 HTML/CSS/JS，話俾我知有咩可以改善——performance、accessibility、best practices 方面。」

6. Step 5：Deploy — 俾全世界睇到你個網站

寫好咗個網站，下一步係放上網。最簡單嘅免費方法：

方法一：GitHub Pages（最推薦）

開一個 GitHub account
開新 repo，叫 你的username.github.io
將你嘅 index.html + styles.css push 上去
等 2 分鐘，你個網站就會喺 https://你的username.github.io 出現

方法二：Cloudflare Pages

將 code push 去 GitHub repo
去 Cloudflare Pages → Connect Git provider
Select repo → Save
自動 deploy，仲有免費 HTTPS

方法三：Netlify

開 Netlify account
Drag and drop 你嘅 folder 去 Netlify
即時上線，連 git 都唔使

自己 domain？

如果你想用自己嘅 domain（例如 myname.hk）：去 Cloudflare / Namecheap 買 domain → 喺 GitHub Pages / Cloudflare Pages set custom domain → 搞掂。

7. 下一步：學啲咩好？

當你已經識基本嘅 HTML/CSS/JS，可以按興趣繼續：

Frontend 路線（用戶界面）

React — 最流行嘅前端 framework，適合整 dynamic web app
Vue.js — 較易上手嘅 framework
Tailwind CSS — utility-first CSS framework，開發超快（ESGov 就用緊）

Backend 路線（伺服器 + 資料庫）

Node.js + Express — 用 JavaScript 寫 server
Python + Flask/FastAPI — Python 做 backend
Supabase / Firebase — 唔使自己 set server

Full-Stack 路線（兩邊都識）

Next.js — React-based full-stack framework（ESGov 計劃升級嘅目標）
Remix — 另一款 full-stack framework

AI + Web 路線

LangChain / Vercel AI SDK — 將 AI 整合入你個網站
RAG（Retrieval-Augmented Generation） — 用你嘅資料教 AI 回答問題

最實際嘅建議：學識 HTML/CSS/JS 之後，直接開一個你真正需要嘅 project。例如：

你嘅個人 portfolio 網站
你公司嘅 landing page
一個簡單嘅工具（例如記帳 app / 學習 tracker）
一個 blog

做一個真實 project 學到嘅嘢，比睇 10 個 tutorial 仲要多。

8. 常見錯誤與點樣避開

錯誤 1：一次過學太多

Fix：專注 HTML → CSS → JS，逐個嚟。唔好一日內想學齊 React + Node.js + Database。

錯誤 2：抄 code 但唔理解

Fix：每次抄完 AI 生成嘅 code，叫 AI 解釋俾你聽。理解咗先算你嘅。

錯誤 3：追求完美先推出

Fix：先推出（deploy）一個唔完美嘅版本，再慢慢改善。完美主義係學習嘅最大敵人。

錯誤 4：唔用 version control

Fix：一開始就用 Git。整爛咗可以還原，唔使驚。

錯誤 5：用手機寫 code

Fix：用手機睇 tutorial 冇問題，但真正寫 code 要用電腦。VS Code 係你最好嘅朋友。

錯誤 6：悶親自己

Fix：如果你覺得個 project 好悶，換一個。學 web dev 最重要係 keep 住有趣。

9. 實戰 Checklist

Day 1-3：基本 HTML + CSS

Set up VS Code + Live Server
寫第一個 index.html
加 CSS（字型、顏色、spacing）
試 flexbox 排列幾個 box
用手機睇吓 responsive 唔 responsive

Day 4-7：JavaScript 入門

寫第一個 JavaScript：click button 彈 message
試 DOM manipulation（改文字、改 style）
做一個簡單嘅 counter
做一個 to-do list（唔使 save）
試 localStorage save 資料

Day 8-14：第一個完整 project

決定一個 project 主題（portfolio / landing page / 工具）
用 AI 生成初稿
逐部分理解同修改
加 responsive design
加基本互動功能

Deploy

10. FAQ

Q1：我完全唔識 programming，可以學識整網站嗎？

可以。 HTML/CSS 唔算係 programming language（佢哋係 markup 同 styling），JavaScript 先算。你可以先學 HTML/CSS，有信心先學 JS。2026 年有 AI 幫手，學習門檻比以前低好多。

Q2：要學幾耐先整到一個簡單網站？

如果你每日花 1 小時：1 星期內做到基本嘅 HTML + CSS 網站，2-3 星期可以做到有互動嘅網站。

Q3：睇中文定英文 tutorial 好？

初學中文 tutorial（YouTube 揾「網頁設計教學」），理解概念後轉英文資源。英文資源多 10 倍，而且最新。用 AI 幫你翻譯都得。

Q4：用手機可以寫 code 嗎？

可以（有 mobile code editor app），但強烈建議用電腦。螢幕大啲、keyboard 好啲、VS Code 嘅 extension 幫到手。

Q5：邊度有練習 project 嘅 idea？

你個人網站
你朋友嘅生意 landing page
你嘅學習筆記網站
一個簡單嘅計數/換算工具
你嘅書籤收集頁
一個「今日飲咩好」隨機推薦器

Q6：AI 會取代 web developer 嗎？

AI 係工具，唔係 replacement。AI 可以幫你 write code、debug、解釋概念，但設計決定、架構選擇、用戶體驗仲係要靠人。學識 web development 唔係同 AI 競爭，係學識點樣用 AI 幫你做得更好更快。

Q7：我需要 Mac 先學到嗎？

唔使。Windows、Mac、Linux 都得。VS Code 三個平台都有。

Q8：點樣 keep 住 motivation？

每次學完一個 concept，即刻整一個小 project 應用
加入香港 web dev / programming Facebook group 或者 Discord
同朋友一齊學，互相 accountability
定 30 日挑戰：每日整一個小練習

總結：而家就開始

2026 年學 web development，係前所未有咁容易。

你唔需要：

記 syntax
背 framework
自己搞 server
買 domain / hosting

你需要嘅只係：

VS Code
一個 browser
AI 助手（Claude / ChatGPT）
開始嘅決心

而家就開 VS Code，寫呢行 code：

<h1>Hello 香港！我開始學整網站喇！</h1>

然後喺 browser 開佢。恭喜你，你已經行咗第一步

下一步？繼續睇呢篇文嘅 Step 2，加 CSS 靚仔化。或者直接叫 AI 幫你生成一個完整嘅網站初稿，然後逐 part 理解同修改。

由今日開始，你唔再係「唔識整網站嘅人」，而係「開始學整網站嘅人」。呢個 difference，係 all it takes。