001Terminal
用打字下指令操作電腦的視窗。Mac 叫「終端機」；Windows 上課用 PowerShell（開始 → 搜 PowerShell）。舊的「命令提示字元」（cmd）跑不了課堂的指令。
Student zone · Term cards
Understand the words, learn the craft.
Coming from zero, what trips people up is not the code but the words. 125 terms, one card each, every card animated. Flip through and they stick.
- terms
- 125
- terms
- categories
- 12
- categories
- UI styles
- 8
- UI styles
030RWD
同一個網頁在手機、平板、電腦上會自動調整排版。手機一欄，電腦兩欄。
30 ／ 106
One card, one term
125 terms for beginners
After this many WPORT classes we noticed that getting familiar with a few terms beforehand makes the lesson go twice as fast. So each one is a small animation, easier to remember than a definition. Tap to replay.
Tools & workspace 16
002CLI
用打字來操作電腦：在終端機打一行指令，按 Enter。跟 GUI 做的是同一件事，只是用打的。AI 不用看畫面就能打指令，最省 token，所以 AI 偏好 CLI。
003GUI
用滑鼠點按鈕、看畫面來操作電腦。跟 CLI 做的是同一件事，只是用點的。人習慣 GUI；AI 也能點，但要先截圖看畫面再決定點哪裡，很燒 token。
004IDE
寫程式用的工作台：檔案樹、編輯區、終端機都在同一個視窗。打個比方，IDE 是灶台，AI Agent 是主廚。VS Code、Cursor 是 IDE，課堂用的 Orca 是專為 AI 設計的 IDE；OpenCode、Claude Code 則是在裡面動手的 AI Agent。
005OpenCode
免費額度就能用，但免費模型比較慢。我們實測同一個任務：Claude Code 15 秒做完，OpenCode 配免費模型要 3 分鐘。先用它熟悉 AI Agent 怎麼用，之後再決定要不要付費。
006Claude Code
Anthropic 出的 AI Agent，要付費帳號（Claude Pro 以上）才能用。快很多：我們實測同一個任務：Claude Code 15 秒做完，OpenCode 配免費模型要 3 分鐘。有訂閱就用它，沒有的話先用 OpenCode 一樣能上完整門課。
007Orca
其實也是 IDE，但專門為 AI 設計，所以叫 ADE。工程師喜歡它，因為看得到哪個模型在哪個 worktree 做事、版本合併了沒有。
008Chatbot
ChatGPT、Gemini 網頁版這種「你問它答」的介面。它看不到你的檔案，產出要自己複製貼上、自己存檔。
009AI Agent
聊天機器人只會回答，產出要你自己複製貼上；AI Agent 可以自己讀檔、寫程式、跑指令。差別在能不能動手，不在網頁版還是桌面版：Claude Code 也有網頁版，一樣是 Agent。
010Obsidian
免費的筆記軟體，筆記是純文字 Markdown、存在你自己的電腦，筆記之間可以互相連結。課堂上拿它當「我的資料」的家。
011GitHub Copilot Student
GitHub 給學生的福利：用學校信箱驗證在學，就能免費用 Copilot 的模型，接進 OpenCode 會比免費模型強。
012Path
檔案在電腦裡的地址，從最上層一路寫到檔名。資料夾用英文、不要有空白，比較不會出錯。
013localhost
本機是「自己這台電腦」。localhost 是只有自己打得開的網址，不是公開網址。
014Server
24 小時開著、負責把網頁送到瀏覽器的電腦。網站上線，就是放到一台伺服器上。
015Node.js
讓 JavaScript 可以在電腦上執行的引擎，很多網站工具靠它跑。下載時選 LTS 版。
016Package、npm、npx
套件是別人寫好直接拿來用的程式；npm 負責下載和管理，各種 CLI 工具也是靠它裝的；npx 不安裝、直接跑一次。
Web basics 16
017HTML
網站的骨架：標題、段落、按鈕、圖片放在哪裡。檔名結尾是 .html。
018CSS
網站的外觀：顏色、字型、大小、間距、排版。
019JavaScript
網站的電線：接上了，按鈕、選單、輪播才會動、能互動。
020Frontend
使用者看得到、摸得到的部分，也就是瀏覽器裡的畫面和互動。
021Backend
使用者看不到的部分：存資料、登入、付款、寄通知、算推薦。
022Database
存放資料的地方。
023Partitioning
一張表的資料太多會變慢，就照時間或類別切成好幾張小表，例如訂單一年一張。查的時候只翻需要的那一張。
024Sharding
一個資料庫扛不住，就把資料分散到好幾個資料庫、甚至好幾台機器，例如依地區或使用者分。使用者多到一台裝不下才需要。
025Static site
事先做好的檔案，每個人打開看到的都一樣。速度快、不容易壞、免費就能放。
026Dynamic site
內容會依照使用者、時間或資料即時產生，需要後端和資料庫。
027URL
一個網頁的完整地址。
028Domain
網址裡代表你的那個名字，要每年付費續約。我們最推薦在 Cloudflare 買：價格接近成本，DNS 也在同一個後台管。
029i18n
internationalization 的縮寫（i 和 n 中間有 18 個字母）。把網站上的字抽出來放進翻譯檔，同一頁就能切中文、英文、越南文。字寫死在程式裡，之後要翻譯會很痛。
030RWD
同一個網頁在手機、平板、電腦上會自動調整排版。手機一欄，電腦兩欄。
031viewport
RWD 要生效的那一行開關，告訴手機「用自己的螢幕寬度顯示」。少了它，手機會把整個桌機版縮成一小塊，RWD 寫得再好也沒用。
032CDN
把檔案複製到世界各地的伺服器，使用者從最近的地方下載，所以比較快。也常拿來「不用安裝就引用」別人的程式。
Files & formats 6
033JSON
一種存資料的文字格式，一層包一層，有清楚的階層。人看得懂、程式也好讀；AI 喜歡這種有條有理的資料。
034Markdown（.md）
用簡單符號排版的純文字：# 是標題、- 是清單。標題分層級，內容就有條有理，所以 AI 最喜歡讀，筆記、規格都用它寫。
035CSV
用逗號分隔欄位的表格檔，Excel 和 Google 試算表都能打開。
036API key
使用付費或私人服務時的密碼，就像你的金融卡密碼：被人拿走，額度會被刷爆。不能公開，也不能放進 GitHub。
037.gitignore
一個小檔案，告訴 Git 哪些檔案不要存進去。
038Cloudinary
放圖片和影片的雲端：上傳一次，網址加幾個參數就自動裁切、縮小、轉成 WebP，網站不用自己扛大圖。免費額度夠個人網站用。
Version control 12
039Git
記錄檔案每一次修改的工具。可以隨時回到舊版本，多人一起改也不會互相蓋掉。像遊戲的存檔點。
040GitHub
存放 Git 專案的網站。可以想成程式碼的 Google Drive，再加上討論和審核的功能。
041Repository（repo）
一個專案的資料夾，裡面有所有檔案和完整的修改紀錄。本質上就是一個資料夾。
042Commit
存一次檔，並附上一句「改了什麼」。之後隨時可以回到這個時間點。改之前先 commit，等於改之前先存檔。
043Push、Pull
push 是把本地的 commit 推上雲端；pull 是把雲端最新的拉下來。commit 只是本地存檔，還沒上雲端。
044Clone
把雲端那份完整抓到自己電腦，包含全部歷史。
045Branch
從主線複製出一條支線來修改，不影響正在用的正式版本。你開你的、我開我的，互不干擾。
046Pull Request（PR）
把一包修改打包，請別人審核，同意後再合併回主線。先審查再合併，不會直接蓋掉別人的。
047Merge、Conflict
Merge 是把支線併回主線。兩個人改到同一個檔案的同一段，系統不知道該留誰的，這叫衝突。通常要找改的人實際對過，決定保留誰的版本。
048Rollback
回到之前某個 commit 的狀態。做到 85 分想衝 90 分，AI 一改變 75 分，這時就回到 85 分那一版。
049Private、Public repo
Private 只有你（和你邀請的人）看得到；Public 全世界都看得到。
050README
專案的說明書，告訴別人這是什麼、怎麼用，通常叫 README.md。以前都要自己讀，現在交給 AI 讀。
Going live 7
051Deploy
把網站放到伺服器上，產生任何人都能打開的公開網址。local 跑起來不等於上線，別人打不開。
052Vercel、Cloudflare Pages、Netlify
常見的網站託管服務，靜態網站多半可以免費放。用 GitHub 帳號登入，之後 push 它就自己更新。
053Cloudflare
擋在網站前面的那一層：幫你擋攻擊、加快速度（CDN）、管網域，也能免費放靜態網站（Pages）。wport.me 就架在它上面。
054HTTPS、SSL
網址前面的鎖頭，代表連線有加密。現在是基本配備，沒有的話瀏覽器會顯示「不安全」。
055Production、Staging
正式環境是使用者正在用的網站；測試環境是上線前給內部試用的版本。先推到測試環境確認沒問題，再上正式。
056Cache
把下載過的檔案先存起來，下次不用重新下載。網站改了卻還是看到舊畫面，常常是快取。
057Root Directory
部署時告訴 Vercel「網站在哪個資料夾」。
Product & design 12
058PRD
通常由 PM 準備，讓 RD 知道要做什麼、怎麼驗收、不做什麼。簡單說，就是施工圖。
059UI
畫面長什麼樣：按鈕、顏色、文字、排版。
060UX
用起來順不順：找不找得到、要點幾下、會不會卡住、用完感覺如何。
061Wireframe
只用灰色框線畫的排版草圖，先確認內容放哪裡，不管顏色和圖片。
062Design system
一整套統一的顏色、字級、間距、按鈕規則。把色票和字體交給 AI，它就照著做，不會 A 頁一個風格、B 頁另一個風格。
063CTA
希望使用者按下去的主要按鈕。
064Accessibility（a11y）
讓視力不好、色弱、只用鍵盤或用讀屏軟體的人也能順利使用。
065Hero section
頁面最上方、第一眼看到的大區塊：標題、一句話、主按鈕。
066Sticky
捲動時黏在畫面上不跑掉的東西：頁首、分類列、側邊目錄。好用是好用，會一直佔掉畫面，手機上要小心。
067Hover
滑鼠移到上面、還沒點下去的狀態。按鈕變色、卡片浮起來都是 hover。手機沒有滑鼠，重要資訊不能只藏在 hover 裡。
069Web font
網頁另外下載的字型，讓每台裝置看到的字長得一樣。中文字型檔很大，載入會慢。
APIs & systems 11
070API
程式跟程式之間溝通的窗口。像餐廳的點餐窗口：前端照規格點餐，後端照規格出餐。
071MCP
給 AI 用的外掛接口，讓 AI 直接「會用」某個服務，不用你複製貼上。API 是地基，MCP 讓 AI 用得很自然。
072FB Graph API
Meta 開放給程式用的窗口：讀粉專貼文、留言、粉絲數，或幫你排程發文。要先在 Meta 開發者平台建一個 App、拿一把 token。
073OAuth
讓一個程式不用拿到你的密碼，就能經你同意用你的帳號做某些事。跳出 Google／GitHub 視窗、看清楚它要哪些權限、按「授權」，就是 OAuth。它負責的是「可以做什麼」（授權），不是「你是誰」。
074Zero Trust
「每一次連進來都要驗證身分」的做法，不管你人在公司還是咖啡廳。Cloudflare 的這個功能可以把內部網站、測試站藏在登入牆後面，不用開 VPN。
075VPN
把你的網路先繞到另一台伺服器再出去，等於從那裡上網。公司用它讓外面的人安全地連進內網。
076GCP credential
跟 Google 申請來的鑰匙檔，讓程式可以用你的 Google 帳號做事：建簡報、寄信、讀試算表。下載下來是一個 json，等於你 Google 帳號的鑰匙：不能公開，也不能放進 GitHub。
077Bug、Debug
Bug 是程式的錯誤或不符合預期的行為；除錯是找出原因並修好。
078Console
開發者工具裡顯示錯誤訊息的地方。回報問題時，截這裡的畫面最有幫助。
079Rate limit
服務限制你在一段時間內能用多少：例如每分鐘幾次請求、每天多少 token。超過就會被擋，要等時間過了才恢復，或換另一個模型。免費方案的上限特別低。
080Usage reset
AI 服務的免費額度或方案用量會定期歸零：有的每天、有的每週、有的每 5 小時一輪。用完不是壞了，看一下什麼時候 reset，或先換另一個模型。
SEO 11
081SEO
讓網站在 Google 搜尋結果裡排得更前面，被更多人找到。
082H1、H2、H3
H1 是頁面最主要的標題，一頁只放一個；H2 是大段落，H3 是 H2 底下的小段落。像文章的目錄，照層級用，不要為了字大就亂用。
083Keyword
使用者在 Google 搜尋時打的字。網頁內容要用到別人真的會搜的詞。
084Title、Meta description
Title 是 Google 搜尋結果的藍色標題，也是瀏覽器分頁上的文字；description 是標題下方那段簡介，影響別人要不要點進來。
085Favicon
瀏覽器分頁、書籤、手機加到主畫面時，網站名稱旁邊那個小圖示。沒設的話會是灰色地球或空白，看起來像沒做完。
086Open Graph（OG）
網址貼到 LINE、Facebook、LinkedIn 時跳出來的那張預覽卡：大圖、標題、一句描述。內容由網頁 <head> 裡的 og:title、og:description、og:image 決定；沒設的話平台會自己亂抓，可能只剩一行網址。
087Alt text
圖片的文字說明，給 Google 和讀屏軟體看，圖片載不出來時也會顯示。
088Sitemap、Index
Sitemap 是交給 Google 的頁面清單；索引是 Google 收錄了你的頁面。沒被索引的頁面，搜尋不到。
089Schema
藏在網頁裡、寫給 Google 看的說明書：這頁是課程、是問答、作者是誰。Google 看得懂，搜尋結果才會多出星星、問答、價格這些東西。
090Search Console
Google 的免費工具，看網站被哪些關鍵字搜到、被點了幾次、哪些頁面有問題。
091PageSpeed Insights
Google 的免費體檢：貼網址，給你手機和電腦的分數，告訴你哪張圖太大、哪段程式拖慢。分數低，搜尋排名和訪客耐心都會掉。
Analytics 4
092GA4
Google 的網站分析工具：多少人來、從哪裡來、看了什麼、有沒有按聯絡。
093GTM、Tag、Trigger
GTM 管理追蹤程式碼，網站裝一次，之後加追蹤不用再改網站。Tag 是要執行的追蹤程式，Trigger 是「什麼時候執行」。
094Event、Conversion
事件是使用者的一個動作被記錄下來；轉換是你最在意、代表成功的那個事件。
095UTM
加在網址後面的追蹤標記，用來分辨流量是從哪個貼文或連結來的。
Working with AI 11
096Vibe Coding
用說的，叫 AI 寫程式。以前先學一學期語法才做得出一頁網站；現在你講清楚要什麼，AI 寫程式、存檔、打開，你負責看、說好或不好。
097Model
AI 的大腦，不同模型能力和價錢不同。GPT、Claude、Gemini 都是模型；工具（OpenCode、Cursor）是讓模型動手的身體。
098Prompt
你對 AI 說的話或下的指令。越具體，結果越好。
099Context
AI 在這次對話裡知道的所有資訊。給它檔案、截圖、網址，它就更了解狀況；什麼都不給，它就只能猜。
100Session
跟 AI 的一段對話。同一個 session 裡它記得前面講過的；開新的 session 就從零開始。換一個任務就開新的，前一件事的內容才不會混進來；Orca 讓你同時開好幾個 session，各做各的。
101Token
AI 計算用量的單位，大約是一個字或半個詞。AI 一次能看的量（上下文）有限，看越多越慢、越貴。
102Note
把資料拆成一則一則小筆記，一則只寫一件事，筆記之間用 [[ ]] 連起來。AI 先看索引，只開用得到的。
103Hallucination
AI 很有自信地編出不存在的東西。資料沒給、講漏了，它就自己猜，幫你編一段很厲害但不是你的經歷。
104Skill
把一個常用的 prompt 固化成檔案，下次一句話就叫出整套流程。Prompt 是一次性的話，Skill 是 SOP。
105SSOT
正確的版本只有一份，改這裡，其他全部跟著對。資料是源頭，網站、履歷、自傳只是其中幾種「產出」。 中文叫「單一事實來源」。公司或個人的資料常常散落在各個雲端資料夾、電腦裡的 Excel；單一事實來源就是讓所有資訊只從一個地方來。
106Permission
會動手的 AI 要執行指令前會先問你。看懂它要做什麼再按允許；看不懂就問它「這一步會改到什麼」。
UI components 11
- 王小明Page content…
107Hamburger menu
The three-line button on mobile that reveals the menu; desktop usually shows the links inline.
Experience
108Tabs
Small labels that switch content within one block, like folder tabs.
- 1 / 32 / 33 / 3
109Carousel
A strip that shows one slide at a time and swipes left and right.
The answer expands here.
The answer expands here.
110Accordion
Headings that expand their content on click; perfect for FAQs.
111Modal
A small window over the page with a dimmed backdrop.
- Copied
112Toast
A small notice that pops up in a corner and disappears on its own.
- LinkedIn← hover or tap
113Tooltip
A small hint that appears on hover or tap.
- Loading…
114Skeleton
Grey placeholder shapes shown while content loads.
Wang's site
115Dark mode
Light text on a dark background; can follow the system setting.
116Progress bar
A bar that shows how far along a task is.
- ExcelCanvaTOEIC 850
117Badge
A small label that marks status or category.
UI styles 8
118Bento Grid
Apple-keynote tiles of different sizes
119Liquid Glass
Apple's translucent, refractive glass
120Neo-brutalism
Loud colors, black borders, hard shadows
121Claymorphism
Soft, puffy pastel 3D like clay
122Aurora Dark
Flowing aurora gradients on a dark canvas
123Swiss Editorial
Huge type, strict grid, one red accent
124Y2K Chrome
Chrome type and holographic shine
125Retro Pixel
8-bit game screens with pixel type
Words done. Is your computer ready?
Six free installs, one command does them all. The preparation page walks through each one and the usual pitfalls.