AI 網頁開發全攻略：從零基礎到網站上架

學習目標

理解各大 AI 平台特性，運用 AI 提升專案規劃與設計效率

課程單元

• 單元1：註冊四大 AI 工具（ChatGPT、Gemini、Mistral、Claude
• 單元2：利用 AI 協助網站架構與規劃流程
• 單元3：認識常見版型、區塊、互動元件
• 單元4：API 串接基礎概念與流程

課後作業

使用AI規劃「網站專案規劃文件」，搭配AI生成程式碼串接API

學習目標

以 JSON 為核心，掌握網站專案規劃與 AI 協作開發流程

課程單元

• 單元1：使用 JSON 規劃網站並建立第一個範本
• 單元2：設定 AI 開發規則，提升溝通準確度
• 單元3：結合 AI 與規劃工具整理網站邏輯
• 單元4：版型調整與 AI 協助開發流程介紹
• 單元5：初步理解 AI 在前端開發的應用層面

課後作業

使用JSON格是規劃網站布局，並使用AI生成

學習目標

運用 MAKE 平台與 AI，建立可互動的網頁頁面

課程單元

• 單元1：註冊並操作 MAKE 自動化平台
• 單元2：使用模組設計基本自動化流程
• 單元3：AI 輔助生成網頁元件與互動設計
• 單元4：實作表單輸入與資料傳送功能
• 單元5：從 AI 生成程式碼中學習核心開發概念

課後作業

製作互動式個人履歷網頁

學習目標

整合資料庫與 MAKE，實現資料存取與應用

課程單元

• 單元1：介紹 Supabase 並建立資料庫
• 單元2：設計 JSON 與表單欄位結構
• 單元3：MAKE 接收並寫入資料庫
• 單元4：實現資料回傳與使用者互動
• 單元5：延伸資料管理與常見應用場景

課後作業

建立資料表，使用Google Sheets紀錄每個資料庫欄位的功能用途

學習目標

掌握網站上架流程，新增資料處理頁面並實作資料操作

課程單元

• 單元1：資料查詢、修改、刪除流程實作
• 單元2：資料檢查與錯誤處理方法
• 單元3：使用 GitHub 免費部署網站
• 單元4：認識 Cloudflare 網站架設方式

課後作業

將網站網址分享，備註遇到的困難或缺點。

學習目標

理解伺服器與網域管理，模擬業界實際上線流程

課程單元

• 單元1：進階資料庫設計（電子商務案例）
• 單元2：常見網域平台介紹與購買流程
• 單元3：網域設定與連結新頁面實作
• 單元4：認識其他可用於網頁開發的 AI 平台