主題一：網站開發基礎與環境設置
- 網站開發基礎知識與技術概覽
- 認識AI輔助程式設計工具 ChatGPT 與 GitHub Copilot 使用方法與問答技巧
- Visual Studio Code 與 Node.js 開發環境設定
- HTML標籤、CSS屬性與選擇器
- 響應式網頁設計
- 認識 Tailwind CSS
- 認識 JavaScript 程式設計基礎概念
主題二：React.js 與 Next.js
- React 基礎：元件、狀態與生命週期
- React 應用實作：建立動態互動式網頁
- 透過 Next.js 路由系統建立和管理網站應用程式路由
- 串接API取得外部資料
主題三：OpenAI 應用與整合
- 整合 OpenAI 至 React 網站應用程式
-實作案例（一）：結合 AI 產出社群平台貼文的網站
-實作案例（二）：結合 AI 產出部落格文章的網站
主題四：整合資料庫使用Firebase Firestore雲端資料庫
- 在 React 應用中整合 Firestore
- 實作CRUD(Create, Read, Update, Delete) 讓網站可管理或取得來自資料庫中的資料
- Firebase Firestore 存取權限設計
主題五：部署網站
- 將應用程式部署至 Vercel 雲端平台使網站可被客戶看見
在本課程中您將會接觸到的技術：HTML, CSS, Tailwind CSS,JavaScript, React.js, Next.js
在本課程中您將會接觸到的軟體與服務：ChatGPT, GitHub Copilot, OpenAI, Firebase, Git,GitHub, Vercel
課程資訊：瀏覽課程的詳細資訊
AI應用網站開發入門 HTML CSS React 結合 OpenAI
從構建個人網站到開發複雜的AI應用網路服務，本課程將引領您進入HTML、CSS和React的世界，並結合最新的OpenAI技術。在當今的AI人工智慧時代，能否透過AI人工智慧輔助設計開發相關應用以及掌握其技術已成為相當重要的成功關鍵。
本課程將展示如何使用HTML、CSS、Tailwind CSS開發出吸引人的響應式動態效果網頁設計，並利用React提高前端開發的效率和互動性。此外，我們還將探索如何利用OpenAI的創新應用，整合AI Function來提升網站功能和用戶體驗。
課程中，我們將示範如何搭配ChatGPT與GitHub Copilot作為程式設計學習與開發輔助工具。Copilot是一個AI程式設計助手，能夠透過理解你的意圖來提供程式建議，減輕初學者的學習壓力並提高開發效率。
隨著AI技術的進步，將OpenAI融入網站開發中已成為前沿趨勢。本課程將教您如何實現這一整合，從而讓您的網站在市場中脫穎而出。無論是創建互動式網頁聊天機器人、AI瀏覽器外掛還是圖像內容生成平台，您將學習如何利用AI加強網站功能。
*欲申請經濟部補助的學員請提前告知訓練班
本課程將展示如何使用HTML、CSS、Tailwind CSS開發出吸引人的響應式動態效果網頁設計，並利用React提高前端開發的效率和互動性。此外，我們還將探索如何利用OpenAI的創新應用，整合AI Function來提升網站功能和用戶體驗。
課程中，我們將示範如何搭配ChatGPT與GitHub Copilot作為程式設計學習與開發輔助工具。Copilot是一個AI程式設計助手，能夠透過理解你的意圖來提供程式建議，減輕初學者的學習壓力並提高開發效率。
隨著AI技術的進步，將OpenAI融入網站開發中已成為前沿趨勢。本課程將教您如何實現這一整合，從而讓您的網站在市場中脫穎而出。無論是創建互動式網頁聊天機器人、AI瀏覽器外掛還是圖像內容生成平台，您將學習如何利用AI加強網站功能。
*欲申請經濟部補助的學員請提前告知訓練班
課程大綱
適合對象
本課程為入門班，無需有任何網頁設計或程式設計開發經驗。
開發環境
使用跨平台編輯器 Visual Studio Code 與 Node.js 做為主要開發環境，搭配第三方服務平台Firebase、OpenAI、GitHub與 Vercel。
上述環境可輕鬆安裝於 Windows 及 MacOS 的作業系統下使用。
安裝與設置方式將會於課程中教學，學員不必煩惱上課前須自行安裝任何軟體。
部分課程中會使用的服務如：OpenAI、GitHub Copilot 為付費服務，同學可於課程中自由決定是否需購買相關服務內容。
OpenAI 模型計費可參考：OpenAI Pricing
上述環境可輕鬆安裝於 Windows 及 MacOS 的作業系統下使用。
安裝與設置方式將會於課程中教學，學員不必煩惱上課前須自行安裝任何軟體。
部分課程中會使用的服務如：OpenAI、GitHub Copilot 為付費服務，同學可於課程中自由決定是否需購買相關服務內容。
OpenAI 模型計費可參考：OpenAI Pricing
實體課程注意事項
本班為實體課程，常見QA詳情連結
校園防疫措施詳情連結
公務員全程參與課程學習後可於課程結束後申請登錄公務人員學習時數
課程影片觀看期限至課程結束後一週關閉
(一)退費期限：開課日後⅓時數內，詳情連結
(二)查詢結業狀況：結業名單連結
近期班次
第 460 期 AI應用網站開發入門 HTML CSS React 結合 OpenAI
招生中
課程類別：一四夜間班
開課日期：2026.01.05 ~ 2026.02.05
上課時間：每週 (一)(四) 7:00 PM ~ 10:00 PM
學費：新生新台幣 6500 元整
注意事項：
需自備筆電
講師介紹
蔡智晴
(一)學歷
國立臺灣大學生醫電子與資訊學研究所碩士
(二) 工作經歷
• Automattic (WordPress.com, WooCommerce 母公司)
• Netskope
• HTC DeepQ
• Debian Continuous Integration Project (debci)
(三)興趣領域
網站架設、網頁前後端、開源社群
(四) 教學經歷
• Springboard Software Engineering Career Track Mentor and Teaching Assistant
• Udacity Full Stack Nanodegree Mentor
• 2020 High Performing Mentor
(五) 開源社群
• WordCamp Asia 2025 - Content Modeling: Custom Post Types and Custom Fields in the Block Editor
• WordCamp Asia 2024 Organizer
• WordCamp Taiwan 2023 Organizer
• FOSSASIA 2021 - Our Journey to Remote Work and Open Source with Wikimedia and Debian Through Outreachy
• PyCon Taiwan 2017, 2018, 2019, 2022-2025 Staff
(六) 個人網站
https://candys.page