---
# System prepended metadata

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

---

:::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
![](https://hackmd.io/_uploads/HyrJdP59n.png =40%x)

:::spoiler 手機版本
![](https://hackmd.io/_uploads/H13kdP9c2.png =40%x)
:::


### ✅任務完成
| # | 組員 | 連結 |
|:-:|:----:|:--------:|
| 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/> ![](https://hackmd.io/_uploads/SJpWjC_qn.png =50%x)
	
	* Mobile: 導覽列精簡 <br/> ![](https://hackmd.io/_uploads/S1WXyJYc2.png =50%x)
	略，
	* Mobile: 文章列表分類 靠右改為滿版置中 <br/> ![](https://hackmd.io/_uploads/r1sNyJF9h.png =50%x)
	
	* Mobile: pagination 改為 更多問答按鈕 <br/> ![](https://hackmd.io/_uploads/Skf_11K93.png =50%x)
::: 


:::spoiler AYA

### 頁尾

- 手機版本的頁尾改為文字靠左
![](https://hackmd.io/_uploads/Skpp9do5h.png =50%x)

- PC 為文字置中
![](https://hackmd.io/_uploads/rJpzidoc3.png =50%x)


### 導覽列選單

- RWD 會自動縮減選項
![](https://hackmd.io/_uploads/rkbbhOoq2.png =50%x)

- 手機版本網址拔掉搜尋按鈕
![](https://hackmd.io/_uploads/B1i83_o92.png =50%x)

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

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

---

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

### 🗣️討論

- PC

> ![](https://hackmd.io/_uploads/H1yFzmcc3.png =49%x)


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

- 手機會改為滿版

![](https://hackmd.io/_uploads/ryVB-X5ch.png =49%x)

- `padding: 0;` 比較快

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

:::


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

	![](https://hackmd.io/_uploads/ByAkfm5ch.png =49%x)

	- 左上的綠色在手機板用 `display: none;`
	![](https://hackmd.io/_uploads/H1Y03cc5n.png =50%x)
	- 在 a 連結上下推出 padding 讓他們跟右邊的圖示一樣高，這樣就能一起置中惹

* 寫法二
![](https://hackmd.io/_uploads/rJJ801Zs3.png =50%x)
	- 透過 order 來改變呈現順序


:::


:::warning
**【注意】：正確設定 container，左右需留 12px 的 padding**
> ![](https://hackmd.io/_uploads/BJoz6_s9h.png =50%x)
:::

---

### 其他分享

#### 檔案結構

![](https://hackmd.io/_uploads/rkQhGFj52.png =50%x)

![](https://hackmd.io/_uploads/SJ0pzKj9h.png =50%x)


### BS container 會自動 padding

![](https://hackmd.io/_uploads/BkXgmFi92.png =50%x)


#### maw

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

* [助教的版本](https://hackmd.io/@south2/rJuVYNAqn)
```css
.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]

![](https://hackmd.io/_uploads/rJAbGKi92.png =50%x)

![](https://hackmd.io/_uploads/Hk0dMKi53.png =50%x)

