* 本文件連結：https://hackmd.io/5vjWnSZKRdi-oSHPijlECA?both
# 第一週 1 px 也不差的版型控制術


## 開課提醒

1. 錄影
2. 將[書籤](https://rpg.hexschool.com/#/training/12062289980086964008/board)加入最愛
3. 請務必一定，要填寫分組表單（尤其是有參加專題班的同學）
4. 作業說明：主線作業
5. 作業不會做怎麼辦？
- 是否可以卡超過 10mins
- 有哪些解方？
5. 每週任務：訂出小組討論時間
5. 專題班、未分組學員，會在下週進行分組
6. 加碼活動

> “專題班” 分組表單填寫位置：https://rpg.hexschool.com/#/training/12062289980087717544/board

## 校長語錄

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

## 本週重點

- 容器與內容
- 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. 切版變成神速的容器觀念

範例設計稿：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/)
- [T 客邦](https://www.techbang.com/)
- [IT HOME](https://www.ithome.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 用法切版變成神速的 box-sizing 與行距設定
- 圖片距離分享
- 向下會多 3px
- img { vertical-align: middle }

## 常見錯誤

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

## 本週重點

- 提交您的第一週主線任務
- 各組約時間進行小組任務

## 常見問題

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

## 學習建議

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

## 下週預習

建議掌握 Flex 相關知識：
https://hackmd.io/nbeCZwX_TUCx9gSdDaVX-A

## 第一週主線任務

總計兩個作業：

1. 第一週 - 個人履歷
1. 設計稿：https://www.figma.com/design/eB5X8OYO4whPx3btCZdr3w/2023-%E5%88%87%E7%89%88%E5%A4%8F%E5%AD%A3%E7%8F%AD-W1---%E5%80%8B%E4%BA%BA%E5%B1%A5%E6%AD%B7?node-id=0-1&t=XBVFhDeicqIsddGB-0
2. [1px也不差的 LOLO 學生範例](https://lolo19920228.github.io/layout2022-week1/)
2. [pixel perfect kata](https://cacoo.com/diagrams/pZ1jUCICb1t4bSVc/1AEDF)

備註一：可觀看 [作業設計稿 - 線上預覽操作教學](https://hackmd.io/J7ajdobzTlyideAARTLz5Q?view)（需使用到 Flex）

備註二：線上網址圖片，這裡六角已經上傳到[圖片空間](https://github.com/hexschool/2022-web-layout-training)，本次作業圖片都放在 **week1 資料夾**，網址如下，其他以此類推：

- https://raw.githubusercontent.com/hexschool/2022-web-layout-training/main/week1/photo.png
- https://raw.githubusercontent.com/hexschool/2022-web-layout-training/main/week1/line.svg

> 補充：[如果不知道怎麼找到圖片路徑請點我](https://imgur.com/O7nQcFm)
>

## 週末任務(抽星巴克咖啡)

抽三份

1. [pixel perfect kata](https://cacoo.com/diagrams/pZ1jUCICb1t4bSVc/1AEDF)
- 圖片可用連結：https://fakeimg.pl/
- 5 分與 10 分
- 可先將 HTML、CSS(也加入 CSS Reset) 檔案建立好
- Perfect Kata 範例：
- [youtube.com/watch?v=8atmEacalE4](http://youtube.com/watch?v=8atmEacalE4)
- [youtube.com/watch?v=kJRz4wC--kk](http://youtube.com/watch?v=kJRz4wC--kk)
2. 到此 [Discord](https://discord.com/channels/801807326054055996/1242306769724768336/1258797232866463755) 討論串回報戰果，YT 設為不公開（10mins 內）
3. 提供範例給學員參考
1. 可以加入顯示鍵盤按鍵
2. 可以說明自己做得好的地方（例如：emmet、熱鍵、打字速度