:::spoiler 目錄
[TOC]
:::
<hr>

:::success
【[題目連結](https://hackmd.io/@hexschool/S1tq5RqU3)】

【檢核】
- [x] 參與人數: 8人
- [x] 參與名單
- [ ] 任務內容
- [x] 討論截圖

:::

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

## 任務一：請組員們在線上討論，不看老師範例程式碼，從無到有做出 [no.8](https://drive.google.com/file/d/1r8z8i3LzzEKIzDBlztkpFmuXK6EDyMx3/view?usp=sharing) 題目，並提供 codepen 檢視，[範例八程式碼介面下載](https://drive.google.com/file/d/1r8z8i3LzzEKIzDBlztkpFmuXK6EDyMx3/view?usp=sharing)

- PC

:::spoiler 手機版本
:::

### ✅任務完成
| # | 組員 | 連結 |
|:-:|:----:|:--------:|
| 01 |阿榮|[Codepen](https://codepen.io/codeitaday/pen/VwVBKje)|
| 02 |Tina02|[Codepen](https://codepen.io/chjitlox-the-bashful/pen/wvQxoPZ?editors=0100)|
| 03 | PayRoom#8328 | [CodePen](https://codepen.io/water38198/pen/jOQpxwK) |
| 04 | WA#9787 | [Codepen](https://codepen.io/ldddl/pen/KKrBpgP?editors=1100) |
| 05 | AYA | [Codepen](https://codepen.io/NoNameNote/full/qBQyoJv) |
| 06 | I401 | - |
| 07 | abalun | [Codepen](https://codepen.io/abalun52/pen/QWJVqoL) |
| 08 | jia yu | [Codepen](https://codepen.io/fjqxaznl-the-reactor/pen/OJawEEq?editors=1100) |
| 09 | 無敵笨笨貓 | - |
| 10 | 貓咪 | [Codepen](https://codepen.io/kcgugbyk-the-styleful/pen/xxQJabe) |

---

## 任務二：IT 邦偵探遊戲

請找出 [IT 邦幫忙的網站](https://ithelp.ithome.com.tw/)，每個頁面的響應式設計的資訊：
* 這網站總共有幾個斷點？
* 請描述這網站在 iPad、Mobile 上做了哪些巧思？請提供五處，並附圖，例如：
* 有元素在 mobile 時被隱藏
* 在 200 像素以下時會顯示有漢堡選單
* 某某 class 元素在 iPad 會變成滿版

### ✅偵探筆記

:::spoiler 阿榮
* 這網站總共有幾個斷點？兩個
* 992px
* 767px
* 手機版

* 請描述這網站在 iPad、Mobile 上做了哪些巧思？請提供五處，並附圖
* iPad: 隱藏右側側欄
* iPad: 文章列表改為置中 <br/> 

* Mobile: 導覽列精簡 <br/> 
略，
* Mobile: 文章列表分類 靠右改為滿版置中 <br/> 

* Mobile: pagination 改為 更多問答按鈕 <br/> 
:::

:::spoiler AYA

### 頁尾

- 手機版本的頁尾改為文字靠左

- PC 為文字置中

### 導覽列選單

- RWD 會自動縮減選項

- 手機版本網址拔掉搜尋按鈕

> <https://ithelp.ithome.com.tw/m/>
:::

<!-- 防暴雷模板
:::spoiler 組員
內容
:::
-->

---

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

### 🗣️討論

- PC

> 

:::warning
**【頁首選單】**

- 手機會改為滿版


- `padding: 0;` 比較快

> 【相關討論串】
> <https://discord.com/channels/801807326054055996/1132263526774362213/1132263526774362213>

:::

:::warning
**【頁尾圖示】**
* 寫法一
- 在手機會下降到與聯絡電話同一排


- 左上的綠色在手機板用 `display: none;`
- 在 a 連結上下推出 padding 讓他們跟右邊的圖示一樣高，這樣就能一起置中惹

* 寫法二
- 透過 order 來改變呈現順序

:::

:::warning
**【注意】：正確設定 container，左右需留 12px 的 padding**
> 
:::

---

### 其他分享

#### 檔案結構



### BS container 會自動 padding


#### maw

* RWD 的 container 不用再重新設定 max-width 了，只要在電腦版設就可以
<https://discord.com/channels/801807326054055996/1132011947269828648/1132188887050113174>

* [助教的版本](https://hackmd.io/@south2/rJuVYNAqn)

.container {
  /* 桌機 */
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 12px;
  
  /* 平板 */
  @media (max-width: 768px) {
    max-width: 720px;
  }
  
  /* 手機 */
  @media (max-width: 375px) {
    max-width: 372px;
  }
}

#### 好用擴充模組

- `Hover Zoom+`

> <https://discord.com/channels/801807326054055996/1131061372197801994/1131066829876506705>

---

## 任務四：觀看 Vite 影音課程(建議準備 1.5~2 小時，再來挑戰此任務)

請觀看第[第四週透過 Vite 部署網站流程](https://courses.hexschool.com/courses/202011221/lectures/47249925) 章節後，順利完成各影片章節內容。
> 若組員操作有問題，還請 tag @Bingbingboom 助教協助~

### ✅任務完成

| # | 組員 | 連結 |
|:-:|:----:|--------|
| 01 | AYA |[Discord](https://discord.com/channels/801807326054055996/1119173716513935510/1122731602032742530) |
| 02 |PayRoom|[Github](https://water38198.github.io/viteDemo/)|
| 03 |jia yu|[Github](https://jiayu0220.github.io/vite-practice/)|
| 04 |WA|[Discord](https://discord.com/channels/801807326054055996/1119173716513935510/1129072299459489903) |
| 05 |abalun|[Discord](https://discord.com/channels/801807326054055996/1119173716513935510/1129072299459489903)|
| 06 |Tina|[Discord](https://discord.com/channels/801807326054055996/1119173716513935510/1131066569091465268 )|
| 07 |阿榮|[Discord](https://discord.com/channels/801807326054055996/1126477469931819088/1128222282033152090)|
| 08 |PayRoom|[Discord](https://discord.com/channels/801807326054055996/1119173716513935510/1132307568056877176)
| 09 | 無敵笨笨貓#3628 | |
| 10 | 貓咪#6294 |[Github](https://hotdogcat0228.github.io/Vite-work/index.html) |

## 語音 & 文字討論截圖

> 【討論時間】： [time=Sun, Jul 23, 2023 20:00 PM]