---

title: 2021直播切版班-22組 | 第三週小組任務
tags: 2021直播切版班, 六角
date: 20210702
image:

---
# ✏第三週小組任務
<!-- [TOC] -->
### 參與人員
| 參與成員暱稱 | Slack ID |
| -------------- | ----------- |
| Kent | U021X7R4AQM |
| Kin Hei Shing | U01J0TNJ6GY |
| 童筱涵 Hsiao-Han Tung | U021F83B07N |
| 粘勝凱 | U026RCXQ456 |
| 阿瓜 | U021KN259UP |
| youting | U015RE12CMU |

---

這週主要是讓各位同學熟悉 RWD 操作，
建議使用 ZOOM 來討論，當然也可用 Slack，組員沒麥克風也可以一個人分享畫面，其他組員用文字討論也可。

---

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


#### 答案討論簡述
> [作業連結](https://codepen.io/hsiaohan/pen/BaRZdzx?editors=1100)
> 這是我的練習，摸索一段時間
[name= 童筱涵 ][color=green]

> [作業連結](https://codepen.io/kinhei-shing/pen/abWymqv)
> 已嘗試了
[name= Kin Hei Shing ][color=gold]

> [作業連結](https://codepen.io/szykttdy/pen/poPrNbv)
> 在大群的發問：
> 
> [name=粘勝凱 ][color=orange]

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

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

#### 答案討論簡述

>
>
> 1.rightside在max-width小於992px會消失
> 2. tab在max-width大於768px變為float:right
[name= Kin Hei Shing ][color=green]

> 
> 在寬度大約768px以下，原本的IT徵才、Tag、聊天室、鐵人賽會消失，因為設了display:none
[name= 粘勝凱 ][color=gold]

> [作業連結](https://codepen.io/)
> Ｑ: 這網站總共有幾個斷點？
應該是 5個？
(max-width: 600px)(max-width: 991px)(max-width: 992px) (max-width: 1095px)(min-width: 1200px)
因為看到載具篇 - @mixin+@content 設計響應式設計超方便 這篇說都把東西放在『_grid.scss』 就去找這網站的scss
發現_layout.scss、_media.scss有放@media ，就把他有設定的就算一個斷點

>
>
>
> [name=阿瓜][color=orange]

---

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

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

#### 答案討論簡述
> [作業連結](https://codepen.io/hsiaohan/pen/PomKNar/)
> 我先寫layout的部分，其他還在打拼中常常寫到不知道自己在哪
[name= 童筱涵 ][color=green]

> [作業連結](https://codepen.io/szykttdy/pen/yLbbWOa)
> 還沒用完，半成品，我選門市據點那頁來做
[name= 粘勝凱 ][color=gold]

> [作業連結](https://codepen.io/hoick/pen/oNWeJqz)
> 這週我光layout的RWD頭尾花好多時間
因為這次我用scss寫結果寫得很混亂一直在重寫
想說這次先給助教看等回饋囧
我覺得我還是先乖乖用css寫打好再跳到scss
> [name=阿瓜][color=orange]

:::spoiler **在大群發問的相關精華 > 收合**

**設計稿footer container的問題**

---
**stretch 屬性相關問題**
- codepen [範例連結](https://codepen.io/kent-clark/pen/rNmGzYb)
- codepen [校長範例連結](https://codepen.io/hexschool/pen/PomJOVN)
- 延伸資源：
- [深入解析 CSS Flexbox](https://www.oxxostudio.tw/articles/201501/css-flexbox.html)
- [flex-basis、flex-grow、flex-shrink 屬性介紹](https://w3c.hexschool.com/flexbox/9883b0fb)

:::
> [name=Kent][color=hotpink]

:::spoiler **在大群發問> 收合**
>
>
:::
> [name=youhing][color=orangered]

---

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

請觀看[第四週透過 Gulp 部署網站流程](https://courses.hexschool.com/courses/2020112/lectures/33575267)章節後，順利完成各影片章節內容。
做完第四週教學內容，需要更新部署網頁到GitHub Pages

> 若組員操作有問題，還請 tag @穎旻 助教協助~

#### 網址回報
>GitHub:
>https://github.com/HOLISNOW/test00/tree/master
>GitHub Pages:
>https://holisnow.github.io/test00/
[name=阿瓜][color=green]

---

### 本週心得
這週很多深入的東西需要研究很久，大家比較都在大群詢問跟看校長助教們的講解。

---

## [第三週回報區](https://hackmd.io/_RIZHsygQTOG_MqhEIJwUA)