Whoops 知識庫
網頁開發
網頁開發入門與實務：HTML、CSS、JavaScript 基礎到前端框架，搭配 SEO 與效能觀念，從零打造可上線的現代網頁。
目前分類：網頁開發16 個分類
依發布日期由新到舊
第 1–11 篇，共 11 篇
YAML 教學：語法規則、挪威問題與六大應用場景一次搞懂
YAML 教學完整指南：從 YAML 是什麼、語法規則精要、挪威問題布林陷阱、多行字串與錨點合併鍵，到 Kubernetes、Docker Compose、GitHub Actions、OpenAPI 與 Astro frontmatter 六大應用場景，加上 Python safe_load 資安須知，一次學會讀寫與除錯。
WAF 防火牆完整指南：應用層防護原理、部署選擇與 SEO 爬蟲誤擋排查
WAF（網頁應用程式防火牆）在應用層檢查每筆 HTTP／HTTPS 請求的內容，依規則放行、阻擋、計數或要求挑戰。本文從運作原理、檢查上限、三種部署方式講到誤擋排查，並整合爬蟲視角：403／429 對索引與 AI 引用的影響、Googlebot 反向 DNS 驗證與 robots.txt 的分工界線。
SSH 遠端連線教學：金鑰建立、登入操作與錯誤排解
SSH 遠端連線是用加密通道從自己電腦操作遠端主機的標準作法，預設走連接埠 22，一般主機登入常見密碼與公鑰兩種方式。教學涵蓋客戶端準備、第一次連線的指紋確認、ssh-keygen 產生 Ed25519 金鑰、公鑰安裝、config 設定檔，以及五個常見連線錯誤的排查方向。
CLI 命令列入門：從終端機走進 AI 工具
CLI 是什麼？一篇搞懂命令列介面與 Terminal、Shell 差異，學會 pwd、ls、cd 等 9 個新手必備指令，安全啟動 Claude Code、Codex CLI 等 AI 工具。
SCSS 教學：安裝、變數、Mixin 與模組化實作
SCSS 入門教學完整整理：CSS 預處理器 Sass 的主流語法，從安裝、編譯、變數、巢狀與 & 選擇器，到 @use、@mixin、模組化架構與除錯對照表，帶你寫出可長期維護的樣式表。
GitHub Repo 是什麼？給非工程師的 Git 版控入門
給新手的 GitHub Repo 入門指南。一次搞懂 Git、Repo、GitHub 的層級差異，學會 commit、branch、merge、clone、pull request 等基本操作，補上 README、.gitignore、LICENSE 三個關鍵檔案，把專案收攏成可檢視、可還原的版本控制基地。
DNS 運作原理：查詢鏈、TTL 快取與常見記錄
DNS 是什麼？為什麼改了 DNS 設定卻沒生效？本文從查詢鏈、TTL 快取、NS 與 A/CNAME/MX/TXT 記錄差異到 DNSSEC，一次帶你看懂 DNS 運作機制與故障排除。
CSS 入門實戰：層疊判定、盒模型與響應式排查的十站路線
CSS 入門不必從背屬性開始。樣式沒反應，先照來源、重要性、層疊層、優先級與出現順序找出競爭中的贏家；爆版，先算 box-sizing 的寬度帳；跑版，先找版面失衡點再設斷點。容器查詢讓元件自帶適應力，Flexbox 與 Grid 按維度分工，開發者工具依固定順序開箱，十個站點把新手最常見的樣式故障逐站收斂。
Claude Code 串接 Figma MCP：設計稿轉 UI 完整教學
Claude Code 串接 Figma MCP 教學：讓 AI 讀取設計稿的色彩 token、間距與元件資訊，協助產生網頁初稿；靜態結構、互動與響應式結果都要依原稿與實機測試逐項驗證。
CSS Box Model 診斷指南：跑版與異常空白的修法
跑版、爆寬、異常空白，先做症狀分層：吃背景色的空間歸 padding 與 border，推開鄰居的歸 margin，規律間距交給容器 gap。CSS Box Model 兩條計算規則：box-sizing 決定寬度量到哪層，垂直外距符合條件時摺疊取大值。附 DevTools 追查與上線前健檢清單。
SSL 憑證是什麼？安裝教學、比較與 SEO 影響
SSL 憑證完整指南：解析免費與付費 SSL 差異、DV/OV/EV 驗證等級、cPanel／Cloudflare／WordPress 安裝三路線與 SSL Labs 檢測，帶你看懂 HTTPS 對 SEO 排名與電商信任的影響。