自動播放
自動完成
2948016
2948016
上一堂課程
完成並繼續課程
Vibe Coding 新手營｜2026 - 春
課程說明
🌟 新手必看 - 課程引導教學影片 (8:49)
影音授權時間
影音觀看順序
Vibe Coding 新手營 ｜六角快速連結
如何參加直播課
2026 直播錄影
課程直播錄影說明
開學典禮 (59:47)
開學典禮 - QA (80:53)
第一堂 學會 Git、GitHub，才能一邊 Vibe 一邊還原程式碼 (90:40)
第一堂 QA (12:29)
第二堂｜運用 AI x SDD，上架自己的前端個人網站吧！-上 (69:53)
第二堂｜運用 AI x SDD，上架自己的前端個人網站吧！- 下 (42:20)
第二堂｜運用 AI x SDD，上架自己的前端個人網站吧！- QA (30:13)
第三堂｜打造 AI 記帳神器 - 你的第一個雲端個人網站工具 - 上 (78:29)
第三堂｜打造 AI 記帳神器 - 你的第一個雲端個人網站工具 - 下 (46:06)
第三堂｜打造 AI 記帳神器 - 你的第一個雲端個人網站工具 - qa (18:55)
第四堂｜升級你的開發工具箱！用Google Antigravity 像專業工程師一樣工作 (114:44)
第四堂｜升級你的開發工具箱！用Google Antigravity 像專業工程師一樣工作 - QA (43:26)
第一週作業解說
提交自己人生中，第一個 Git 版本程式碼審核吧！ (21:59)
第二週作業解說
部署自己的個人網站吧！ (29:38)
第三週主題內容與作業解說
Google OAuth 概念 (3:56)
透過 Google Cloud Platform 申請 OAuth (13:22)
作業解說：存取試算表內容 (12:53)
作業解說：開發自己的記帳工具 (17:30)
第四週主題內容與作業解說
什麼是 Antigravity (5:10)
Mac 安裝 Antigravity (5:30)
Windows 安裝 Antigravity (6:16)
Antigravity 基本操作 (12:59)
Antigravity AI 對話式開發工具 (7:18)
使用 Agent Browser (8:08)
使用 Plan Mode 進行開發 (9:16)
作業解說01 - 環境說明 (10:37)
作業解說02 - 使用現成範例進行建構 (11:43)
作業解說03 - Vibe Coding 屬於公司內部點餐工具 (20:54)
加碼 - 開發屬於自己的 AI 工具
章節課程文件
API Key 是什麼，如何申請 API Key (13:13)
不要把 API Key 寫在程式碼內的方法 (5:36)
製作簡單的 AI 聊天工具 (7:08)
製作 AI 產圖工具 (7:05)
如果要開發複雜的工具該怎麼做 (5:04)
CSS - VS Code 網頁編輯器、HTML 基礎教學
安裝 Chrome 瀏覽器 (2:15)
安裝 VS Code 編輯器 (3:36)
安裝 VS Code 套件 - 讓介面變成中文化 (4:17)
開始撰寫 HTML (6:27)
撰寫 h1 標籤、 p 段落 (8:11)
CodePen 教學 - 將你的程式碼分享給別人 (4:20)
建立 HTML 環境 (7:40)
HTML 環境語法
Emmet 載入環境語法 (6:29)
插入圖片，了解圖片路徑規則 (8:48)
載入外部圖片方式 (4:30)
在網頁上加上 a 連結標籤 (6:18)
段落 p 與連結 a 的混合應用 (3:08)
認識 ul li 列表標籤 (8:26)
小節作業 - HTML 標籤教學 (3:55)
CSS - CSS常用語法
HTML 與 CSS 的差異 (3:37)
插入 CSS 檔案，先寫一個 h1 讓文字變色 (5:48)
CSS 寫法詳解介紹 (4:38)
新手常見 CSS 錯誤解析 (9:30)
HTML 標籤選擇器 (5:43)
擬態選擇器 :hover (6:07)
類別選擇器 (13:06)
使用 CSS 優化文字排版 (10:16)
在 HTML 標籤上加入線條 (8:10)
小節作業 - 使用 CSS 優化網頁 (2:50)
補充章節：CSS 權重 (15:48)
Git、Github 環境任務
安裝 Git，準備推到免費空間嘍！ (3:42)
註冊 GitHub 服務 (3:15)
讓 VSCode 綁定你的 GitHub 帳號，準備部署網站嘍！ (2:47)
環境-在 GitHub 上開一個網頁空間！ (16:21)
GitHub 提交小節作業 (1:33)
ChatGPT AI 工作術 - 比 99% 的人還會用！
學 ChatGPT 前，你得先知道何謂 AI、LLM 運作原理 (8:07)
透過 ChatGPT 畫出一隻貓貓 (5:10)
提出需求前，先搞懂 input、output 概念 (2:54)
設好提示詞，產出自己的午餐小幫手 (7:24)
專案功能-解放一天的常見任務 (6:16)
校長私藏分享 - 個人專案運作方式 (8:52)
Prompt 不用自己寫，做一個產 Prompt 小幫手吧！ (19:17)
Git、GitHub 環境安裝任務
免費空間 - 用 GitHub Pages 來部署你的部落格吧！ (9:07)
什麼是 Hexo？台灣部落客架站第一選擇 (5:20)
三分鐘安裝 Hexo (6:50)
建立自己的 BLOG 環境吧！ (4:48)
只用一道指令，瞬間建立一則部落格！ (5:41)
使用 Markdown 快速書寫部落格 (8:11)
快速認識 Hexo 目錄結構，建立全站設定檔案(config (6:16)
常用 Hexo 指令帶你無往不利 (2:58)
客製化頁面超簡單 (3:56)
全域網站加入客製選單 (5:09)
LV1 架站任務：通過網站上線檢核點！ (2:58)
【超實用】實作插入圖片，美化個人介紹頁 (10:18)
CSS - 使用 CSS 變更 HTML 標籤特性
網頁容器介紹 (6:50)
CSS Reset - 清空瀏覽器預設樣式 (11:42)
display: block 區塊元素介紹 (12:39)
display: inline 行內元素介紹 (12:15)
display 容器特性 - 區塊跟行內 (5:49)
div 與後代選擇器運用 (14:44)
margin 產生外邊界距離 (11:52)
padding 產生留白距離 (6:17)
margin、padding 投影片介紹 (2:04)
Box Model（盒模型）詳細介紹 (10:54)
margin 0 auto 區塊水平置中 (10:15)
text-align 文字水平調整 (5:16)
不想算盒模型的推擠？試試 CSS3 box-sizing 吧！ (5:11)
小節練習 (3:04)
CSS - Flex 網頁排版技巧
Flex 排版技巧介紹 (4:32)
CodePen 講解 Flex 技巧 (1:47)
Flex 外層屬性 (container) 介紹上集 (11:53)
Flex 外層屬性 (container) 介紹下集 (9:20)
主軸介紹 - 要熟練 Flex ，必修軸線技巧 (2:13)
flex-direction - 決定 flex 軸線 (6:16)
justify-content - 決定主軸對齊方式 (11:45)
設計一個 Flex 並排選單吧！ (8:10)
flex-wrap - 決定換行屬性 (4:29)
align-items - 交錯軸對齊方式 (7:07)
透過 VS Code 插件，開啟一個即時預覽的 Web Server (5:02)
Flex 練習前置作業 (9:26)
Flex 小節作業 (16:50)
RWD 常見版型佈局設定
禁止顯示 x 軸法則 (2:45)
max-width：一個小設定輕易將網頁設定成手機版佈局 (5:19)
版型單位 % 數觀念 (5:40)
三欄流體式設計 (7:02)
左側固定、右側流體式設計 (3:00)
網站版型框架設定 (5:01)
RWD - 伸縮自如的 RWD 排版術
伸縮自如的 RWD 排版術(上)
伸縮自如的 RWD 排版術(下)
GitHub Pages 免費架站空間教學 - 第一週任務攻略
架設網站神器簡介 - GitHub Desktop (2:52)
註冊 GitHub 服務空間 (4:21)
部署網站(Mac 版)：GitHub Desktop 部署網站流程 (17:59)
部署網站(Windows 版)：GitHub Desktop 部署網站流程 (14:36)
Mac、Win：如何更新網站、再新增一個網站空間 (10:28)
註冊 GitHub 服務 (4:21)
JS - JavaScript 課前知識與環境介紹
安裝 Chrome 網頁瀏覽器 (3:01)
安裝 VSCode 程式編輯器 (6:55)
JS - 變數與資料型別
變數大綱簡介 (6:40)
透過 Chrome 開發人員工具來寫 JavaScript (4:57)
如何宣告變數 (6:06)
設定變數，如同在 excel 設定欄位般容易！ (6:06)
number 型別 - 讓您擁有簡易計算機功能 (5:43)
number 型別 - 各種數字的支援程度大解密 (2:20)
number 型別 - 變數如何帶變數 (6:27)
變數與資料型別 (8:12)
JS - let、const、var 介紹
let 變數詳細介紹 (3:56)
const 詳細介紹 (6:56)
var 歷史的眼淚詳細介紹 (3:04)
宣告變數一次讓你知！ (6:24)
JS - 網頁與 Code 環境建立流程教學
VSCode 撰寫 JS 環境建立 (8:23)
console.log 印出你想顯示的資訊！ (3:47)
如何撰寫優雅的註解 (5:22)
Codepen - 透過它來提交您的程式碼 (6:24)
JS - 數字型別與賦值運算子
賦值運算子+=、-= (5:56)
a++、a-- 一次搞懂！ (3:45)
JS - 字串型別詳解
宣告字串流程 (3:42)
一次搞懂字串相加 (5:34)
透過 typeof 瞭解當前變數型別 (2:39)
數字與字串相加 (5:21)
NaN 產生時機 (5:20)
字串處理實用方法 (5:04)
變數記憶體指向講解 (7:26)
樣版字面值教學 (4:54)
JS - 變數：布林、undefined、null
布林介紹 (5:01)
undefined 介紹 (3:54)
null 介紹 (5:10)
字串轉數字方法 (5:34)
數字轉字串方法 (3:57)
JS - 比較與邏輯運算子
比較與邏輯運算子簡介 (2:31)
比較運算子： >、=、<= (5:45)
比較運算子搭配變數方法 (5:54)
=、== 差異講解 (2:46)
==、=== 差異講解 (4:23)
邏輯運算子介紹 (5:11)
邏輯運算子範例情境 (5:01)
邏輯運算子增加多條件作法 (2:53)
JS - 流程判斷 - if、else if、else
為什麼要理解流程判斷？ (7:53)
if、else、else if 講解 (7:12)
if 詳細講解 (一) (5:56)
if 詳細講解 (二) (10:29)
JS - if 流程圖規劃流程
if 圖表介紹 (4:43)
圖表服務註冊流程 (2:08)
流程圖符號簡介 (1:48)
流程圖 let code 講解 (12:44)
流程圖 if code 講解 (15:26)
JS - if 中階運用
if 包 if 腰圍判斷流程圖設計 (10:10)
if 包 if 腰圍判斷 Code 設計 (13:24)
看圖說故事 - if 練習一 (4:34)
看圖說故事 - if、else if 練習二 (1:51)
看圖說故事 - if、else if 練習三 (9:59)
JS - 陣列教學
為什麼要學陣列物件？ (4:04)
筆刷工具介紹 (1:01)
陣列寫法教學 (4:29)
陣列不只能放字串，也能放數字與混合資料 (4:02)
陣列讀取教學 (3:25)
讀取陣列資料，並賦予新變數流程 (4:21)
length 讀取陣列長度流程 (2:13)
陣列預設寫入資料 (5:18)
push 寫入資料流程 (4:18)
unshift 寫入資料流程 (2:10)
pop 與 shift 刪除資料 (3:21)
splice 刪除指定資料 (4:56)
其他陣列總結 (1:08)
JS - 物件教學
為什麼要有物件 (1:21)
物件格式教學 (6:58)
如何讀取物件的值 (5:47)
新增物件屬性 (3:14)
修改物件值 (3:36)
刪除物件資料 (2:13)
另一種讀取物件屬性方法 (2:11)
物件讀取資料判斷時間 (2:36)
JS - 陣列與物件整合運用
陣列與物件混合應用 (5:57)
一次搞懂陣列與物件混合讀取教學 (6:45)
JSON 格式介紹 (2:29)
安裝 JSON 檢視 Chrome 套件 (2:03)
下載 JSON 格式資料 (7:12)
JSON 讀取方式教學 - 以充電站為例 (5:25)
物件裡面還能包物件 (4:02)
物件包物件讀取流程 - 以活動公告 open data 為例 (10:03)
如何篩選出自己想要的資料格式，並賦予到特定變數上 (3:53)
小魔王題目：複雜 JSON 格式，你/妳撈得到嗎？ (6:29)
物件搭配 if 練習 (4:29)
陣列物件搭配 if 流程判斷練習 (5:02)
JS - 函式 function
為什麼需要學函式？ (1:48)
函式寫法教學 (4:32)
註冊多組函式流程 (4:23)
函式裡面仍可以執行函式 (4:47)
函式參數介紹 (5:24)
參數寫法-參數只存活在大括號 (2:31)
參數寫法-兩個數字相加工具 (3:25)
輸入跟輸出的重要性 (3:09)
return 寫法教學 (6:47)
return 宣告 let (2:40)
return 可以有多個 (2:26)
return 可以有多個-範例Code (5:11)
判斷是否為偶數 - 畫流程圖 (6:45)
判斷是否為偶數-寫Code流程(上) (12:19)
let 全域與區域變數邏輯 (4:13)
判斷是否為偶數-寫Code流程(下) (3:59)
JS - DOM
什麼是 DOM ？ (3:00)
querySelector - 選擇單一元素 (6:27)
querySelectorAll - 可重複選取多個元素 (5:19)
setAttribute - 增加標籤屬性 (9:56)
插入 HTML 標籤的兩種方法 (1:27)
innerHTML (上) (6:47)
innerHTML (下) (6:40)
innerHTML 與 for 運用 (8:44)
createElement 寫法 (9:04)
createElement 與 for 運用 (8:02)
XSS 跨網站指令碼注意事項（Cross-site scripting） (11:33)
JS - event(事件)
什麼是 event (事件)？ (2:41)
event 物件 - 告知你當下元素資訊 (8:55)
觀念篇 - 各種事件綁定的差異 (5:55)
addEventListener - 事件監聽 (4:05)
綁定事件的語法差異 (7:11)
Event Bubbling、Event Capturing 差異 (11:01)
stopPropagation - 中止冒泡事件 (5:08)
preventDefault - 取消預設觸發行為 (7:07)
e.target - 了解目前所在元素位置 (6:38)
change - 表單內容更動內容時觸發 (13:46)
keyCode - 點擊鍵盤，射發火箭！ (9:03)
blur - 離開焦點時進行事件觸發 (5:15)
mouse - 當滑鼠滑入指定內容時觸發 (6:29)
網頁座標 - 了解 screen、page、client 箇中差異 (6:47)
網頁座標 - 應用篇 (3:40)
事件監聽優化篇 - 從父元素來監聽子元素內容 (7:10)
JS - AJAX - 網路請求
什麼是 AJAX？它如何改善網頁使用體驗？ (5:11)
什麼是網路請求？ (7:04)
從網頁架構瞭解網頁請求-上集 (8:17)
從網頁架構瞭解網頁請求-下集 (3:40)
網頁請求狀態碼 (9:06)
request、response 講解 (6:48)
用 Node.js 開啟伺服器，更加瞭解 request、response 的差異 (11:13)
AJAX - 網路請求小節測驗
JS - AJAX - axios 套件教學
各種發出網路請求的 JS 寫法種類介紹 (4:56)
axios 環境安裝 (3:11)
axios-嘗試串接外部資料 (2:53)
axios-response 參數詳細講解 (4:22)
axios-將外部資料寫入到網頁上 (3:50)
axios-非同步觀念 (6:30)
透過函式設計處理非同步 (8:34)
AJAX - axios 套件教學小節測驗
第五週總複習
JS - AJAX - POST API 講解
網路請求種類介紹 (2:07)
post 網路請求文件介紹 (7:53)
四種常見的 POST 請求 content-type 介紹 (5:02)
透過 axios 實做註冊 post 網路請求 (8:38)
從 chrome 觀察 post 請求 (7:19)
實做 axios DOM 表單註冊流程 (15:26)
AJAX POST 小節作業 (3:37)
AJAX POST API 講解小節測驗
localStorage - 瀏覽器資料儲存
什麼是 localStorage ？ (6:17)
setItem、getItem 基本操作 (11:00)
透過 JSON.parse、JSON.stringify 來編譯資料 (10:06)
data-* - 透過 dataset 讀取自訂資料 (7:39)
dataset、array 運用 (14:21)
splice - 刪除 array 資料 (5:53)
localStorage 作業介紹 (2:50)
localStorage 作業講解 (9:35)
Node - V8、Node.js 介紹
為什麼你要學 Node.js？ (1:06)
V8 引擎介紹 (3:39)
Node.js 架構介紹 (5:59)
命令提示字元操作教學 (6:11)
安裝 Node.js 流程 (4:57)
使用 Node.js 開啟編譯核心 (3:48)
透過 Node.js 執行 JS 檔案 (3:46)
使用 VS Code 執行與除錯 Node.js (4:25)
Node 環境測驗
Node - Node 模組原理
Global 全域物件 (7:00)
VS CODE 執行 Node.js 應用程式 (2:14)
require、module exports 模組設計 (6:41)
exports 模組設計 (4:33)
Node.js 核心模組 - createServer (上) (7:52)
Node.js 核心模組 - createServer (中) (8:17)
createServer 範例
Node.js 核心模組 - createServer (下) (4:50)
__dirname、__filename (3:25)
Node 模組 - Path (6:32)
Path 小抄
線上測驗
Node - NPM
什麼是 NPM？ (3:19)
npm init - 開發自己的 package.json (4:37)
安裝 npm 流程 (6:51)
NPM 版本號介紹 (6:14)
npm install 的妙用 (3:43)
npm install -save、--save-dev、-g 差異 (9:24)
執行 NPM 內容流程 (5:30)
NPM 常用指令小抄
NPM 測驗
開發多頁式網站實戰講解
前言介紹 (1:46)
環境架設 (6:42)
Layout (佈局) (4:48)
保持網頁靈活彈性的技巧 (2:59)
CSS 管理方法 (3:28)
總結 (2:04)
Todolist RESTful API kata (實作一個待辦清單 API 環境)
任務介紹 - Todolist RESTful API kata (6:35)
postman 軟體安裝流程 (8:55)
什麼是 UUID？ (2:56)
UUID NPM 安裝流程 & VS Code 終端機教學 (8:44)
try catch 捕捉錯誤異常行為語法教學 (8:59)
JSON VIEW Chrome 套件安裝 (1:06)
知識與實作 - Todolist RESTful API kata
知識：進入 todolist 開發 (1:34)
實作： NPM init 建立 package.json 檔案 (0:53)
實作：透過 createServer 開啟伺服器 (6:29)
知識：了解 request 物件裡面有什麼資訊 (9:08)
實作：新增首頁測試網址與 404 頁面 (8:43)
實作：調整表頭資訊，設置回傳 JSON 與 cors 資訊 (6:05)
知識：preflight options API 檢查機制 (8:07)
實作：設定 options API (3:00)
知識：API 介紹 (5:03)
實作：取得所有代辦、增加 UUID NPM (6:58)
實作：POST API router 環境建立 (3:25)
知識：POSTMAN 管理 API 列表 (4:02)
知識：如何接收 POST API 的 body 資料？ (16:03)
實作：新增 todo POST API (6:57)
實作：新增 POST API 異常行為 (11:52)
實作：重構 POST API 異常行為 (7:16)
實作：刪除所有代辦 API (6:45)
知識：陣列與字串處理操作：startsWith、pop、findIndex (6:16)
實作：刪除單筆代辦 API (8:13)
實作：編輯單筆代辦 API && POSTMAN 全部測試一次 (15:08)
實作： Git 環境設置 (4:27)
實作： Render 環境設置 (4:44)
實作：Render 部署流程 (12:55)
實作：Render 測試 POSTMAN API (8:57)
備註：Render 休眠機制與免費額度介紹 (5:49)
API Key 是什麼，如何申請 API Key
課程內容未解鎖
如果您已經購買此課程，
請您重新登入後再查看
.
購買本課程