---
# System prepended metadata

title: 第27組-第三週小組任務(討論區)

---

# 第27組-第三週小組任務(討論區)

## 參與夥伴

| Name | 參與 |Name|參與 | 
| -------| ----|-----|-----|
| Peggy#1552  | V | LHchien#6232| V |
| masaki#3054 | V | RyanChiang#6649| V |
| piha#9987   | V | RyanC#6960  |  |
| YC#2522     | V | YAMAKI#0268 |  |
| 小溪#6576    |  | William#5142 |  |

## 問題

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


| Name | CodePen | 
| -------- | -------- | 
| Peggy    | [CodePen](https://codepen.io/PeiJu-Liao/pen/KKovEvO?editors=1100)| 
|piha|[CodePen](https://codepen.io/pihahaha/pen/YzaQLxK)|


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

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



|   Breakpoint    |                  A                   |                  B                   |
|:---------------:|:------------------------------------:|:------------------------------------:|
| max-width:992px | ![](https://i.imgur.com/bd3YUAE.png) | ![](https://i.imgur.com/T26XqiU.png) |
|                 |menu_logo會消失display:none|右側欄會消失|
| max-width:767px | ![](https://i.imgur.com/lrf14Ko.png) | ![](https://i.imgur.com/Oj95x6g.png) |
|                 |menu_item會剩下"技術文章""技術問答"||
| max-widtg:600px | ![](https://i.imgur.com/OOUdPab.png) |                                      |
|                 |header__promte的寬度變為width:100% ||
| max-width:767px | ![](https://i.imgur.com/VSGkdsE.png) | ![](https://i.imgur.com/10Ub0S6.png) |
|                 | tab__item寬度變為32%||


### 任務三：討論第三週版型該怎麼做

一個人能力有限，八個人團結力量大，彼此討論該版型如何攻略，才能發揮團隊最強力量，攻破最終 BOSS

![](https://i.imgur.com/CBdgmay.png)
![](https://i.imgur.com/Ym45KS3.png)
![](https://i.imgur.com/ZCyFnSh.png)
![](https://i.imgur.com/KiZWCdq.png)
![](https://i.imgur.com/ozqN8xO.png)
![](https://i.imgur.com/ikrq7XK.png)
![](https://i.imgur.com/Rf3kjBE.png)



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


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