學員專區・名詞卡

聽得懂，就學得會。

零基礎來上課，最卡的不是程式，是聽不懂那些字。125 個名詞，一張卡一個，每張都有小動畫演給你看，翻一翻就熟了。

個名詞
125
個名詞
個分類
12
個分類
種 UI 風格
8
種 UI 風格
開始翻卡看 UI 風格與元件

030RWD

同一個網頁在手機、平板、電腦上會自動調整排版。手機一欄，電腦兩欄。

30 ／ 106

一張卡一個名詞

新手的 125 個名詞

WPORT 教了這麼多場，發現有些專有名詞先讓大家混個臉熟，上課就事半功倍。所以把它們做成小動畫，看一眼比背十遍好記。點一下會重播。

工具與工作環境 16網頁基礎 16檔案與資料格式 6版本控制與協作 12上線與部署 7產品與設計 12API 與系統 11SEO 搜尋排名 11數據追蹤 4跟 AI 協作 11UI 元件 11UI 風格 8

工具與工作環境 16

  • 001Terminal

    用打字下指令操作電腦的視窗。Mac 叫「終端機」；Windows 上課用 PowerShell（開始 → 搜 PowerShell）。舊的「命令提示字元」（cmd）跑不了課堂的指令。

  • 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 不安裝、直接跑一次。

網頁基礎 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

    把檔案複製到世界各地的伺服器，使用者從最近的地方下載，所以比較快。也常拿來「不用安裝就引用」別人的程式。

檔案與資料格式 6

  • 033JSON

    一種存資料的文字格式，一層包一層，有清楚的階層。人看得懂、程式也好讀；AI 喜歡這種有條有理的資料。

  • 034Markdown（.md）

    用簡單符號排版的純文字：# 是標題、- 是清單。標題分層級，內容就有條有理，所以 AI 最喜歡讀，筆記、規格都用它寫。

  • 035CSV

    用逗號分隔欄位的表格檔，Excel 和 Google 試算表都能打開。

  • 036API key

    使用付費或私人服務時的密碼，就像你的金融卡密碼：被人拿走，額度會被刷爆。不能公開，也不能放進 GitHub。

  • 037.gitignore

    一個小檔案，告訴 Git 哪些檔案不要存進去。

  • 038Cloudinary

    放圖片和影片的雲端：上傳一次，網址加幾個參數就自動裁切、縮小、轉成 WebP，網站不用自己扛大圖。免費額度夠個人網站用。

版本控制與協作 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 讀。

上線與部署 7

  • 051Deploy

    把網站放到伺服器上，產生任何人都能打開的公開網址。local 跑起來不等於上線，別人打不開。

  • 052Vercel、Cloudflare Pages、Netlify

    常見的網站託管服務，靜態網站多半可以免費放。用 GitHub 帳號登入，之後 push 它就自己更新。

  • 053Cloudflare

    擋在網站前面的那一層：幫你擋攻擊、加快速度（CDN）、管網域，也能免費放靜態網站（Pages）。wport.me 就架在它上面。

  • 054HTTPS、SSL

    網址前面的鎖頭，代表連線有加密。現在是基本配備，沒有的話瀏覽器會顯示「不安全」。

  • 055Production、Staging

    正式環境是使用者正在用的網站；測試環境是上線前給內部試用的版本。先推到測試環境確認沒問題，再上正式。

  • 056Cache

    把下載過的檔案先存起來，下次不用重新下載。網站改了卻還是看到舊畫面，常常是快取。

  • 057Root Directory

    部署時告訴 Vercel「網站在哪個資料夾」。

產品與設計 12

  • 058PRD

    通常由 PM 準備，讓 RD 知道要做什麼、怎麼驗收、不做什麼。簡單說，就是施工圖。

  • 059UI

    畫面長什麼樣：按鈕、顏色、文字、排版。

  • 060UX

    用起來順不順：找不找得到、要點幾下、會不會卡住、用完感覺如何。

  • 061Wireframe

    只用灰色框線畫的排版草圖，先確認內容放哪裡，不管顏色和圖片。

  • 062Design system

    一整套統一的顏色、字級、間距、按鈕規則。把色票和字體交給 AI，它就照著做，不會 A 頁一個風格、B 頁另一個風格。

  • 063CTA

    希望使用者按下去的主要按鈕。

  • 064Accessibility（a11y）

    讓視力不好、色弱、只用鍵盤或用讀屏軟體的人也能順利使用。

  • 065Hero section

    頁面最上方、第一眼看到的大區塊：標題、一句話、主按鈕。

  • 066Sticky

    捲動時黏在畫面上不跑掉的東西：頁首、分類列、側邊目錄。好用是好用，會一直佔掉畫面，手機上要小心。

  • 067Hover

    滑鼠移到上面、還沒點下去的狀態。按鈕變色、卡片浮起來都是 hover。手機沒有滑鼠，重要資訊不能只藏在 hover 裡。

  • 068Submenu

    選單裡的選單：點開「服務」，下面再分一層。常見三種：用小標題分組的下拉（grouped dropdown）、滑過才從側邊展開的（flyout）、項目很多時整片多欄攤開的（mega menu）。手機沒有滑鼠，通常改成點一下才展開（accordion）。

  • 069Web font

    網頁另外下載的字型，讓每台裝置看到的字長得一樣。中文字型檔很大，載入會慢。

API 與系統 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 的免費體檢：貼網址，給你手機和電腦的分數，告訴你哪張圖太大、哪段程式拖慢。分數低，搜尋排名和訪客耐心都會掉。

數據追蹤 4

  • 092GA4

    Google 的網站分析工具：多少人來、從哪裡來、看了什麼、有沒有按聯絡。

  • 093GTM、Tag、Trigger

    GTM 管理追蹤程式碼，網站裝一次，之後加追蹤不用再改網站。Tag 是要執行的追蹤程式，Trigger 是「什麼時候執行」。

  • 094Event、Conversion

    事件是使用者的一個動作被記錄下來；轉換是你最在意、代表成功的那個事件。

  • 095UTM

    加在網址後面的追蹤標記，用來分辨流量是從哪個貼文或連結來的。

跟 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 元件 11

  • 王小明
    頁面內容…

    107Hamburger menu

    手機上右上角三條線的按鈕，點了選單才滑出來。電腦版通常直接把選項排開。

  • 經歷

    108Tabs

    同一個區塊裡切換不同內容的小標籤，像資料夾的標籤頁，不用換頁。

  • 答案在這裡展開。

    答案在這裡展開。

    110Accordion

    點標題才展開內容、再點收起來。問答區、長清單最常用，畫面不會一次塞滿。

  • 111Modal

    蓋在頁面上面的一個小視窗，背景變暗，處理完關掉才回到原頁。

  • 已複製

    112Toast

    角落跳出來一下、幾秒後自己消失的小通知，例如「已複製」「已送出」。

  • LinkedIn
    ← 滑過去、或點一下

    113Tooltip

    滑過或點一下才出現的小提示框，用來解釋圖示或縮寫。手機要能點，不能只靠滑過。

  • 載入中…

    114Skeleton

    資料還在載入時先放灰色的形狀佔位，比一直轉圈圈感覺快，畫面也不會跳。

  • 王小明的網站

    115Dark mode

    深底淺字的配色，晚上看比較不刺眼。可以跟著手機設定，也可以給一顆切換鍵。

  • 116Progress bar

    告訴使用者「做到哪了、還剩多少」的長條，常見在多步驟表單、上傳檔案。

  • ExcelCanva多益 850

    117Badge

    小小的標籤，標出狀態或分類：「已認證」「新」「3 則未讀」。

UI 風格 8

  • 118Bento Grid

    像 Apple 發表會：大小不一的圓角方塊拼成一整面

  • 119Liquid Glass

    Apple 新系統的玻璃感：半透明、會折射後面的彩色背景

  • 120Neo-brutalism

    黃底黑框、硬陰影、完全不要圓角

  • 121Claymorphism

    軟軟胖胖的粉彩 3D，像捏出來的黏土

  • 122Aurora Dark

    深色底上流動的極光漸層，科技新創最愛

  • 123Swiss Editorial

    超大字、嚴格網格、一個紅色重點，像設計雜誌

  • 124Y2K Chrome

    2000 年代的鉻金屬與全像彩虹光，復古又潮

  • 125Retro Pixel

    8-bit 遊戲畫面：像素字、方塊邊框、掃描線

名詞看完了，電腦準備好了嗎？

上課前要裝七個東西，除了 Claude Code 都免費，一行指令全部裝好。課前準備頁有每一步和會踩到的坑。