🔐 數碼安全 🎨 AI 圖像 🎙️ AI 語音 🎬 AI Video 🎭 AI Lipsync 💻 HTML
Digital Creator · P.4–6 AI 創作課程

Digital Creator
P.4–6

學習 AI 工具、數碼安全、影片製作,
加上 HTML 最後建立屬於自己的個人網站!

看看課程章節 → 了解成品 Demo
向下滾動
🔐 數碼安全 & Email  ·  🎨 AI 圖像  ·  🎙️ AI 語音  ·  🎬 AI Video 影片  ·  🎭 AI Lipsync  ·  💻 HTML ·  🌐 個人網站  ·  🔐 數碼安全 & Email  ·  🎨 AI 圖像  ·  🎙️ AI 語音  ·  🎬 AI Video 影片  ·  🎭 AI Lipsync  ·  💻 HTML ·  🌐 個人網站  · 
Course Chapters · 課程章節

六個章節,六種能力

每一堂課都是新的突破:結合 AI 工具與 HTML 技能,最終構建出屬於您的數碼作品集!

01
🔐
數碼安全 · VPN & Email

認識 VPN、設定安全電郵、識別釣魚攻擊。學習 HTML 基礎結構同 input 元素。

02
🎨
AI 圖像創作

用 AI 生成圖像,學習 Prompt 技巧。CSS 主題顏色設定,令網頁有個人風格。

03
🎙️
AI 語音生成

AI 文字轉語音。Slider 連同動畫效果,令網頁更添活力!

04
🎬
AI 影片

製作 AI 影片。HTML 嵌入相片、音樂、地圖,令網頁豐富起來!

05
🎭
AI Lipsync

對嘴效果。加入 QR Code,準備發佈個人網站!

06
🎤
開放日!

向全班展示您的個人作品集網站,分享 AI 創作故事,展示 HTML/CSS 技能!

Live Demo · 成品

您的網站可以做到咁!

HTML & CSS Skills · 編碼技能線

每堂學一個技能,
最後組合成您的網站

五堂課,五個真正的 HTML/CSS 技能,最後用 index.html 整合成完整個人作品集!

Ch.1

HTML Input 元素

認識 HTML 結構,學習 <input> 元素。

<input type="text"> <input type="email">
Ch.2

CSS 主題顏色

用 CSS 變數設定主題顏色,將 AI 圖像嵌入網頁,設計有個性的配色方案。

.theme-text { color: #FF6B9D; } .theme-panel { background: #FFF0F6; }
Ch.3

CSS Slider 及動畫

加入 CSS @keyframes 動畫效果,用 <input type="range"> slider 即時控制動畫參數。

CSS @keyframes bounce { } animation: bounce 1s infinite;
Ch.4

嵌入相片、音樂及地圖

用 <img>、<audio>、<iframe> 嵌入不同媒體,令您的網頁豐富有內容。

<img src="..."> <audio controls> <iframe src="...">
Ch.5

QR Code + 網站發佈準備

用軟件將連結轉成 QR Code,再嵌入網頁,任何人掃一掃即可以看到您的作品!

<img src="src/qrcode.png" />
5 個 AI 工具
5 個HTML/CSS 技能
6 堂課程
1 個個人網站
Course Preview · 課程片段

觀看課程片段

下面片段展示了部分精彩內容,由數碼安全到 AI 創作,每個環節都充滿挑戰!
* 具體內容或因應實際情況變更。

準備好出發了嗎?

由數碼安全到 AI 創作,由聲音到影片,每個 P.4–6 同學都可以完成!

WhatsApp 報名
← 返回主頁