# 第二週

本文件連結：https://hackmd.io/mKenvaljRGy9-LvWzofA_w

分組說明：
- 直播班分組：https://rpg.hexschool.com/#/training/12062289980086964008/board/content/12062289980086964010_12062289980086964030
- 專題班分組：https://liberating-turtle-5a2.notion.site/82cb4c078d344e5bbb5cdb3e681ee2d8?pvs=4
- 專題週報說明

## 開課提醒

1. 錄影
2. 感謝作業討論頻道與大群討論伙伴
3. 將[書籤](https://rpg.hexschool.com/#/training/12062289980086964008/board)加入最愛
4. 作業說明：主線作業
5. 每週任務

## 校長語錄

> 不與他人比較，專注跟過去的自己比較

## 抽獎

https://discord.com/channels/801807326054055996/1242306769724768336/1258797232866463755

## Flex 教學(上)

為什麼要使用 Flex？
- 傳統區塊元素的問題
- 解決更複雜的排版需求

Flex 基礎觀念
- Flex 外層容器介紹，直接寫個小範例
- 內元件要有效果，就要在外容器加上 display:flex
- 每個 HTML 標籤，能同時擁有內元件跟外容器身份
- Flex 主軸與交錯軸觀念([測試工具](https://codepen.io/Wcc723/pen/YzbxBxp))
- 容器
- <span style="color:red">1.紅(外容器)：container</span>
- <span style="color:blue">2.藍(內元件)：item</span>
- <span style="color:purple">3.粉紅(內元件+外容器特性)</span>
- <span style="color:black">4.黑(一般元素)：無 flex 效果</span>

## 外容器常用語法

Emmet 教學：https://docs.emmet.io/cheat-sheet/

#### 口訣：先專注在主軸的走向

- 決定軸線：flex-direction (互動詢問)
- 1.**row**
- 2.row-reverse
- 3.column
- 4.column-reverse
- 主軸對齊：justify-content (開始代入範例)
- **1.flex-start (預設)**
- 2.center
- 3.flex-end
- 4.space-between
- 5.space-around
- 6.space-evenly
- 換行屬性：flex-wrap
- 1.**nowrap(預設)**
- 2.wrap
- 交錯軸單行對齊：align-item
- 1.flex-start
- 2.center
- 3.flex-end
- 4.**stretch(預設)**
- 5.baseline
- 交錯軸多行對齊屬性：[align-content](https://developer.mozilla.org/zh-CN/docs/Web/CSS/align-content)
- 設計一個六角小官網(區塊元素+Flex 練習 Section 練習)
-

## 網站範例觀看

- [Apple - justify-content](https://www.apple.com/tw/shop/buy-mac/macbook-pro/16-%E5%90%8B)
- [taiwan can help](https://taiwancanhelp.us/)

## Flex 教學(下) - 垂直與水平置中

- 交錯軸對齊：align-items，畫四張圖軸線圖解釋
- Flex 裡還可以包 Flex
- [時光屋範例 Jason Wang](https://codepen.io/JW750625/pen/oNXQyWK)
- [hexschool](https://www.hexschool.com/)
- margin 在 Flex 中的神奇運用方式

口訣：
1. 先專注在主軸的走向
2. Flex 一次只解決單向問題（當遇到相簿等巢狀格式，請一層一層處理）

## Flex 實戰技巧案例

- 導覽列
- 三欄式、四欄式
- 多欄換行
- 等高卡片
- 交錯時間軸

## Flex 補充資源

- [圖解：CSS Flex 屬性一點也不難](https://wcc723.github.io/css/2017/07/21/css-flex/)
- [卡斯伯完整 Flex 影音教學(40分鐘)](https://www.youtube.com/watch?v=lmBM7_OTDBQ)
- Bootstrap 怎麼實作 Flex

## 第二週主線任務(只能用 GitHub Pages 提交)

- [作業設計稿](https://www.figma.com/file/7t6ft6HEHeWkpFs7OQrdKp/2023-%E5%88%87%E7%89%88%E5%A4%8F%E5%AD%A3%E7%8F%AD-W2---%E5%80%8B%E4%BA%BA%E7%B6%B2%E9%A0%81?type=design&node-id=0%3A1&t=XrFwLsarZRxSnMSG-1)（僅供有參加切版直播班授權同學）

備註一：可觀看 [作業設計稿 - 線上預覽操作教學](https://hackmd.io/MHtEdMRuT_G1A3yogcvLtw?view)

備註二：一定要使用 GitHub Pages 提交

> 此主線任務在一天內完成算合格
一小時內完成算超乎水準，熟練度很高
>

## 第三、四週主線任務

- [Adobe XD 設計稿觀看教學](https://hackmd.io/ZPDwcPmdSCyWRakoqZuWLA)
- 提前提供[設計稿](https://xd.adobe.com/view/5b20cbc4-5c64-4b67-814e-633b078a8cd4-0e73/grid/)
- 第三週只要做首頁 RWD
- LV1：只做 header 與 footer 的 RWD
- LV2：任選一頁，僅做 PC 版型
- LV3：任選一頁，需含RWD
- LV4：做二~三頁以上的 RWD
- LV5：所有頁面都有設計
- 第四週
- LV1：任選二頁含RWD
- LV2：做三頁以上含 RWD
- LV3：所有頁面都有設計

## 小組任務

連結：https://hackmd.io/6Qo-Ok5uSz-yYNpq1XRIbg

GGV 課程：https://courses.hexschool.com/courses/2020112211/lectures/53654011