# 第三週小組任務
第五組:參與名單
| 姓名 | slack-ID | 顏色|
| -------- | -------- | -------- |
| Gill | - | 綠 |
| Alvin Chu | - | 黃 |
| 葉小嵐 | U020U997G0P | 紅 |
> [name=葉小嵐]

---

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

#### Ans:
> [codepen](https://codepen.io/Gill-Chin/pen/OJmjJJV)
> [color=#1bac29]
> [name=Gill]

> [codepen](https://codepen.io/wave99487chu/pen/RwVxqVB)
> [color=#dcf427]
> [name=Alvin Chu]

> 網頁版用df方式處理，然後手機版時用fd:c;往下，另外把下方照片隱藏。
> [color=#f05757]
> [name=葉小嵐]

---

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

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

> 992px(雙欄式 > 單欄式)
> 768px(最新、熱門、已解決會向下移動)
> 600px(廣告部會與logo並排，會向下移動)
> 340px(搜尋圖示會隱藏)
> [color=#1bac29]
> [name=Gill]

> 992px(左邊問答區滿版、右邊的區塊隱藏)、
> 767px(QA區塊上方分類滿版、manu區塊部分隱藏)、
> 340px(搜尋icon隱藏)
> [color=#dcf427]
> [name=Alvin Chu]

> 手機版:
> 最上方的部份:廣告與logo斷行。
> menu部份:項目隱藏
> 技術問答部份:頁籤會斷行
> 右邊廣告:隱藏
> 內容文字斷行處理
> [color=#f05757]
> [name=葉小嵐]
---

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

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

#### Ans:

> **作法**
1.會用gulp去做版本管理
2.運用EJS的方式將layout分出來
3.使用scss的方式有效的控管每頁的樣式
**加強點**
1.class取名用蠻長時間
2.在初步審核架構也花蠻多時間的
3.刻劃版面能力還需加強
**許願**
可以將全部頁面切完
> [color=#1bac29]
> [name=Gill]

>任務3的部分我是選擇先做首頁，目前進度只做完PC版而已，應該跟第四週一起繳交
> [color=#dcf427]
> [name=Alvin Chu]

> 第三週先做首頁，後面再做其他頁面。想要先把rwd的架構熟析確認再來進行>gulp。首頁會畫面的架構寫出來練習emmet打出，但由於架構不熟析，改的狀況>比較多，因為工作時間較少所gulp四週後一起處理。
> [color=#f05757]
> [name=葉小嵐]

> 後來有看直播斷點後來修正確尺寸，但整體架構如下:
> 
> [color=#f05757]
> [name=葉小嵐]
---

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

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

#### Ans:
>[GitHub Pages 練習網站網址](https://codepen.io/Gill-Chin/pen/OJmjJJV)
>[GitHub Pages 練習網站網址](https://jessiemosbi.github.io/gulp-test/)
> [gulp & GitHub 小小筆記](https://doc.clickup.com/p/h/5e276-117/a7d30ff8509f14e)
> [第三週小組任務筆記:內有討論內容圖片](https://hackmd.io/@Gill/r1d7hhmR_)
> [color=#1bac29]
> [name=Gill]

>已觀看因時間關係還未安裝
> [color=#f05757]
> [name=葉小嵐]
---
#### slack討論對話:

---