* 本文件連結：https://hackmd.io/uEK09rOdQFq5TlBFKOAFBg
# 第一堂 1 px 也不差的版型控制術


## 開課提醒

1. 錄影
2. 將[書籤](https://rpg.hexschool.com/#/training/12062817613307865587/board)加入最愛
3. 作業說明：主線作業
- 作業不會做怎麼辦？
- 是否可以卡超過 10mins
- 有哪些解方？
4. 加碼活動

## 校長語錄

> 你不需要一開始就很厲害，但必須開始才有辦法很厲害

## 本週重點

- 容器與內容
- HTML 標籤元素屬性
- 常見實務觀念分享

## 環境建立

- 載入與新增 HTML、CSS
- 運用 Emmet([字典](https://docs.emmet.io/cheat-sheet/)與[影片](https://www.youtube.com/watch?v=6VUFO6sLS5M))、[學姐操作示範](https://youtu.be/tFvFMncRYYM?t=62)
- [練功菜單](https://hackmd.io/p_HZVDaqQwW5hpdymZBT5Q)
- CSS Reset
- MeyerWeb：https://meyerweb.com/eric/tools/css/reset/
- Normalize：https://github.com/necolas/normalize.css/blob/master/normalize.css
- 插件安裝
- [Live Server](https://hackmd.io/QpfYS3cwTl2NMU7bUqFNxw?view)
- 卡斯伯老師用的 Theme
- https://marketplace.visualstudio.com/items?itemName=andischerer.theme-atom-one-dark

## 1. 切版變成神速的容器觀念

範例設計稿：[Figma](https://www.figma.com/design/ZQn0etbtIsCrmkHqFeeLKo/%E5%88%87%E7%89%88%E7%9B%B4%E6%92%AD%E7%8F%AD---%E7%9B%B4%E6%92%AD%E6%95%99%E6%9D%90?node-id=0-1&t=XjWPehxHQRuEh7sc-1)

網頁可以切分為容器與內容

範例網站：[MDN](https://developer.mozilla.org/zh-TW/)、[Bootstrap](https://getbootstrap.com/docs/5.3/getting-started/introduction/)、[Shopify](https://themes.shopify.com/?locale=zh-TW)

介紹的重點包含：

- 標籤介紹
- h1 ~ h5，html 5 規則中，每個區塊能有多個 h1
- ul、li
- Header
- Footer
- Nav
- Section
- **什麼是容器，什麼是內容**
- 容器目的在定位
- 內容目的在呈現主體
- 補充介紹：容器、內容、裝飾

語意標籤：

- 讓電腦讀懂你的 Code
- 增加開發者可讀性
- ~~SEO~~

口訣：使用容器定位，再塞進內容

## 2. 切版變成神速的常見誤區

- 容器寬度：背景也要設計
- 限制寬
- 滿寬（通常用在背景上）

**滿版式網頁與 CSS 選擇器設計**

- [蝦皮](https://shopee.tw/)
- [IT 鐵人邦](https://ithelp.ithome.com.tw/)
- [Apple](https://www.apple.com/tw/)
- [範例程式碼](https://codepen.io/liao/pen/yLYyYaZ)

CSS Framework

- https://getbootstrap.com/docs/5.3/layout/containers/
- https://tailwindui.com/components/application-ui/layout/containers

## 3. 切版變成神速的區塊與行內元素概念

- display: block、inline 概念複習
- 問題
哪些元素是 行內元素
1. div
2. span
3. i
4. p
5. ul
6. li
7. a
- 行距設定：line-height 的高度影響
- 全局設定技巧：
- 1.5 行高
- 標題可以是 1.2 行高（常見
- margin、padding
- 圖片距離分享
- 向下會多 3px
- img { vertical-align: middle }

## 常見錯誤

- 常看到寫死**高度**與寬度
- 上下 margin、padding 推擠用 %
- 不拆內容與容器！
- 口訣：使用容器定位，再塞進內容

## 常見問題

- class 名稱順序，共用的 class 性質放自訂的 class 名稱後面，
例如：`<div class="profile container">`
- 避免以寫死容器高
- 圖片可以設定 `display: block;`

## 學習建議

1. 新手請觀看影片[課程前影片](https://rpg.hexschool.com/#/training/12062817613307865587/board/content/12062817613307865599_12062817613307865606)，再來嘗試作第一週主線任務
- 或者可參考週末的助教直播
2. 時間有限可跳過課前最終作業一、二，如果想花時間多練習也可以。

## 下堂課的預習
建議掌握 Flex 相關知識：
https://hackmd.io/1unuaLHzStmyXfZiCmKHJQ

## 第一堂主線任務

主線作業[連結](https://rpg.hexschool.com/#/training/12062817613307865587/board/content/12062817613307865588_12062817613307865609)

1. 第一堂 - 個人履歷 - [設計稿連結](https://www.figma.com/design/WQh5XkQtQYB0yhIGx5wnMB/%E5%85%AD%E8%A7%92%EF%BD%9C%E9%9E%8B%E5%AD%90%E9%9B%BB%E5%95%86-W1%E3%80%81W2-%EF%BC%88student-ver.%EF%BC%89?node-id=8268-1388&t=tFlGjNKk0emw3m3L-0)
2. [pixel perfect kata](https://cacoo.com/diagrams/pZ1jUCICb1t4bSVc/1AEDF)

介紹 Figma 設計稿中的相關資訊

## 加碼活動！！！

1. 助教帶你做作業 - 直播課期間的每週六早上九點（連結會在 Discord 公告）
2. [同學們的分享會](https://hackmd.io/KxDPrWN5QhydzU6QCmw-3A)
可以分享的主題：
- 當周學會的小知識（例如：什麼是盒模型、什麼是 flex）
- 陪伴寫作業 ✅
- 筆記工具推薦 ✅
- 個人學習方式 ✅
- 工作經驗分享 ✅
- 個人的休閒、減壓方式 ✅
- 直播帶貨、個人政治傾向辯論 ❌
4. [Kata 大挑戰](https://casper-wang.notion.site/2025-21e2a065e9db80e5869ae775d96a7232)