---
# System prepended metadata

title: 南2組 - 第二週小組任務
tags: [2023切版直播班, 南2組, 小組任務, 六角學院]

---

:::success
【[題目連結](https://hackmd.io/YkzC44BeT5WJz_FktGF1EQ?view)】
<!-- 
【檢核】
- [X] 參與人數: 10人
- [X] 參與名單
- [x] 任務內容
- [X] 討論截圖
 -->
:::

## 參與人員
- [X] 阿榮#8277
- [X] PayRoom#8328
- [X] WA#9787
- [X] Tina02
- [X] AYA
- [X] I401#7101
- [X] abalun#6727
- [X] jia yu#8896
- [X] 無敵笨笨貓#3628
- [X] 貓咪#6294

## 任務一：玩 Flexbox 遊戲
以下遊戲任選一個，回報時請提供通關截圖，Miss 掉也沒關係：

* [Flex pirate 新手關卡](https://hexschool.github.io/flexbox-pirate/index.html#/)：預期 20~25 分
* [Flex 青蛙](https://flexboxfroggy.com/#zh-tw)：預期 30~50分，後面關卡較難
需要提供破關畫面

### 破關畫面

| 組員 | 截圖|
|:----:|----------------------|
|阿榮#8277|![](https://hackmd.io/_uploads/SJG29qJch.png =40%x) ![](https://hackmd.io/_uploads/r1ozC51c3.png =40%x)|
|jia yu #8896|![](https://hackmd.io/_uploads/Syv2hoyc2.png =40%x) ![](https://hackmd.io/_uploads/BJUypo1cn.png =40%x)|
|WA| ![](https://hackmd.io/_uploads/BJHM3ygc3.png =40%x) ![](https://hackmd.io/_uploads/B153L1l53.png =40%x)|
|貓咪|![](https://hackmd.io/_uploads/rJMoXIl93.png =40%x)![](https://hackmd.io/_uploads/rJ4A78g93.png =40%x)|
|Tina|![](https://hackmd.io/_uploads/HkSocBb92.png =40%x)![](https://hackmd.io/_uploads/rkCicrbcn.png =40%x)|
|PayRoom|![](https://hackmd.io/_uploads/H19pyUb5n.png =40%x)![](https://hackmd.io/_uploads/B1O0y8-c2.png =40%x)|
|I401#7101|![](https://hackmd.io/_uploads/HkobZ8b52.png =40%x)![](https://hackmd.io/_uploads/B1Vz-IW5h.png =40%x)|
|abalun|![](https://i.imgur.com/YfqKb21.png =40%x)
| AYA | ![](https://hackmd.io/_uploads/rkfiR0m5n.png =40%x) |



## 任務二：討論第二週版型該怎麼做
一個人能力有限，八個人團結力量大，彼此討論該版型如何攻略，才能發揮團隊最強力量

### 🗣️討論

| # |                        討論                         |
|:----:|---------------------------------------------------|
|introduction 區塊圖片之間，間距是24px，如果使用margin做推移的話，很容易產生 x軸 (修改很多次都出現x軸)|同學解法: 打開格線系統(ctrl+shift+4)，會發現左側塊和右側3張圖，間距都是一樣的24px，所以我就直接`jusfity-content:space-beween;` |
|introduction 三個圖片總寬度|可以用 746px 的占比來算，大約 60%，或是使用 calc( 764px / 1296px )|
|About me 的四個格子高度拉長，本來使用 `max-width` 來設定高度上限|組員分享解法: 是要加上 `align-items: center` 來讓交錯軸置中|
|Guideline 中字體為 Bruno Ace ，但是設計稿中是使用 Bruno Ace SC ，要使用哪種呢？|要用 Bruno Ace SC，兩種字體有一點差異。可以透過 Hi 這個字觀察，其實長不一樣|
|在附圖的區塊有備註 hover 效果，但是在圖片下載區中提供的 Discord 有藍框，該怎麼解決?|取得原圖的解法🤩 <br/> 1. 先將檔案 duplicate 一份，複製出來的檔案就是自己的了，可以編輯。如果有註記、編輯...等需求，非常方便 <br/>2. 選取圖片，點右邊眼睛來隱藏 drop shadow 效果 <br/> 3. Export 圖片 |
|我想問，1296px 是要自己算還是有哪邊可以直接看到呢?|12(欄) * 86 + 24 (gutter) * 11  = 1296px + 組員補充[每日任務連結](https://hackmd.io/@hexschool/BkrfVEFNh)|


## 任務三：觀看 Vite 影音課程(建議準備 1.5~2 小時，再來挑戰此任務)
請觀看第四週補充知識 章節，看完 GitHub Pages 部署網站流程 (下) 後，影片會引導你將網站上傳到一個空間，並會提供一個網站網址給你，各組員若執行成功，再請將該網址貼到回報區。


### 完成囉

| 組員 | 連結 |
|:----:|--------|
| AYA |[Discord](https://discord.com/channels/801807326054055996/1119173716513935510/1122731602032742530) |
|PayRoom|[Github](https://water38198.github.io/viteDemo/)|
|jia yu|[Github](https://jiayu0220.github.io/vite-practice/)|
|WA|[Discord](https://discord.com/channels/801807326054055996/1119173716513935510/1129072299459489903) |
|abalun|[Discord](https://discord.com/channels/801807326054055996/1119173716513935510/1129072299459489903)|
|Tina|[Discord](https://discord.com/channels/801807326054055996/1119173716513935510/1131066569091465268 )|
|阿榮|[Discord](https://discord.com/channels/801807326054055996/1126477469931819088/1128222282033152090)|


## 語音 & 文字討論截圖

> 【討論時間】： [time=Sun, Jul 16, 2023 20:00 PM]
![](https://hackmd.io/_uploads/SyK7pIZ5h.png)

> ![](https://hackmd.io/_uploads/r17-XfS5h.png)

> ![](https://hackmd.io/_uploads/Byvz7zHqh.png)
