# 南7組 - 第二週小組任務
### 參與人員
- [x] 阿榮#8277
- [x] Charlene#7703
- [x] Uli#1946
- [x] Tina02#2691
- [ ] Abby艾比比#0519
- [ ] Jerry456789#9029
- [ ] PayRoom#8328
- [ ] penny#6214

### 語音 & 文字討論

### 第一題：切版任務一
#### 🗒️完成名單
| 組員名稱 | 作品連結 |
| ----------- | --------------- |
| 阿榮#8277 | [Codepen](https://codepen.io/codeitaday/pen/jOeZQda?editors=1100) |
| Uli#1946 | [Codepen](https://codepen.io/uli1313/pen/QWZVpaN) |
| Tina02#2691 | [Codepen](https://codepen.io/riifwerr-the-selector/pen/VwEQYRM) |
|PayRoom#8328|[CodePen](https://codepen.io/water38198/pen/NWOYRxa)
| Jerry456789#9029 | [Codepen](https://codepen.io/aria198a/pen/MWPOqvW) |
| penny#6214 | [Codepen](https://codepen.io/penny8989/pen/yLRKdgV) |
|Charlene#7703|[CodePen](https://codepen.io/anny114/pen/MWPZdQJ?editors=0100)|

#### 🗣️討論內容
|NO.|問題|結論|
|:-:|-----|-------|
|1|有些東西到底要寫在 css 還是 html 標籤?|好幾個同學都有遇到這個問題，還不是很確定怎麼判斷|
|2|卡片中的描述有的長有的短，怎麼讓高度一致?|使用 [flex-grow](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow)|
|3|為什麼設計稿要把字體 regular / bold 兩種分開呈現?|猜測是方便看實際呈現會長怎麼樣|

### 第二題：Flex 精神時光屋
#### 💻組員練習
:::spoiler Tina 時光屋練習
* [1. 並排卡片](https://codepen.io/riifwerr-the-selector/pen/MWPvVeR)
* [2. 雙欄排版](https://codepen.io/riifwerr-the-selector/pen/ZEqJxVG)
* [3. 雙欄選單設計](https://codepen.io/riifwerr-the-selector/pen/YzJxLZO)
* [4. 表頭表尾設計](https://codepen.io/riifwerr-the-selector/pen/eYPEKOV)
* [5. 常見三種排版](https://codepen.io/riifwerr-the-selector/pen/wvYqEyv)
* [6. 圖文並排](https://codepen.io/riifwerr-the-selector/pen/QWZMZWd)
* [7. 首頁橫幅排版](https://codepen.io/riifwerr-the-selector/pen/OJBjBQW?editors=1100)
* [8. 圖文並排設計](https://codepen.io/riifwerr-the-selector/pen/xxyLyao)
* [9. 訂單明細](https://codepen.io/riifwerr-the-selector/pen/RweZqWp)
* [10. 產品列表](https://codepen.io/riifwerr-the-selector/pen/MWPvZyy)
:::

:::spoiler Uli 時光屋練習
* [1. 並排卡片](https://codepen.io/uli1313/pen/gOBdRqB)
* [2. 雙欄排版](https://codepen.io/uli1313/pen/NWOLgzJ)
* [10. 產品列表](https://codepen.io/uli1313/pen/gOBdRVQ)
:::

:::spoiler 阿榮 時光屋練習
* [1. 並排卡片](https://codepen.io/codeitaday/pen/oNaPQOG)
* [2. 雙欄排版](https://codepen.io/codeitaday/pen/RweYEbJ)
* [3. 雙欄選單設計](https://codepen.io/codeitaday/pen/mdzGaJG?editors=1100)
* [4. 表頭表尾設計](https://codepen.io/codeitaday/pen/bGmxOVP)
* [5. 常見三種排版](https://codepen.io/codeitaday/pen/jOevXqE?editors=1000)
* [6. 圖文並排](https://codepen.io/codeitaday/pen/PoydVoq)
* [7. 首頁橫幅排版](https://codepen.io/codeitaday/pen/zYmJQmb)
* [8. 圖文並排設計](https://codepen.io/codeitaday/pen/YzJObBq?editors=1100)
* [9. 訂單明細](https://codepen.io/codeitaday/pen/LYggjgr)
* [10. 產品列表](https://codepen.io/codeitaday/pen/YzJJdXY?editors=1010)
:::

:::spoiler 景泰 時光屋練習
* [1. 並排卡片](https://codepen.io/aria198a/pen/JjmJJoR)
* [2. 雙欄排版](https://codepen.io/aria198a/pen/eYPRRgN)
* [3. 雙欄選單設計](https://codepen.io/aria198a/pen/mdzwLXN)
* [4. 表頭表尾設計](https://codepen.io/aria198a/pen/QWZgBGo)
* [5. 三種排版](https://codepen.io/aria198a/pen/WNaENQa)
* [6. 圖文並排](https://codepen.io/aria198a/pen/oNaebyQ)
:::

<!--
⬇️請複製一份使用

:::spoiler [這邊打名字] 時光屋練習
這邊放練習連結
:::

-->

#### 🗣️討論內容
|NO.|問題|結論|
|:-:|-----|-------|
|1|讓 logo 圖片置中|直接使用 `display: flex`, `justify-content: center`, `align-items: center`|
|2|同學額外補充: 如何對齊內文文字|用 `text-align: justify` 就可以讓文字左右對齊，不會有討厭的鋸齒狀|

###### tags: `軟體工程師體驗營 - 2023` `六角學院` `南7組`