---
title: 第三週小組討論
tags: 六角-直播切版班
date: 20210722
image:
---

# 第三週小組討論
<!-- [TOC] -->

### 參與人員
| PHIL | Huanan | Winnie | Charles | 軒仔 | roger |
| ----- | ----- | ----------- |--------| ------| ----|

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

#### 答案討論
>[第三週RWD作業](https://codepen.io/ctkeftjp-the-animator/pen/rNmGNqr)
[name= PHIL][color=red]

>[第三週RWD作業](https://codepen.io/hua_nan/pen/rNmGzjP)
[name= Huanan][color=orange]

>[第三週RWD作業](https://codepen.io/hsuanyu0115/pen/zYZPBJB)
[name= Winnie][color=yellow]

>[第三週RWD作業](https://codepen.io/gemini9160/pen/wvJNyXG)
[name= Charles][color=green]

---

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

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

#### 答案討論
:::spoiler **IT 邦偵探遊戲 討論 > 收合**
>1. 當寬度992右側的欄位會隱藏
>2. 當@media(max-width:767)上方menu的選擇減少，下方的技術問答區也會變成上跟下的版型，而非左右並排
web
moblie
>3. 有layout共用區塊header和footer(放廣告用)
>4. 利用position定位上方欄位
[name= PHIL][color=red]

>width600以下 logo 會變大
[name= Huanan][color=orange]

>當寬度小於340 上方menu會再調整一次
將搜尋的放大鏡拿掉
[name= Charles][color=green]

:::
---

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

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

#### 答案討論截圖
:::spoiler **slack 討論截圖 > 收合**

:::

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

請觀看第[第四週透過 Gulp 部署網站流程](https://courses.hexschool.com/courses/2020112/lectures/33575267)章節後，順利完成各影片章節內容。

>關於SCSS的教學補充，位於小節-"[SCSS 編譯與觀察錯誤訊息](https://courses.hexschool.com/courses/2020112/lectures/33575292)"影片下,
>下方為快速傳送門：
>* [prepos 軟體安裝教學](https://courses.hexschool.com/courses/670051/lectures/11953744)
>當您改用 Gulp 時，就可關閉 prepos 軟體，以避免衝突，
我們提供的 Gulp 就有提供 SCSS 編譯，並指定到 dist 資料夾
>* [SCSS 寫法](https://courses.hexschool.com/courses/670051/lectures/11953745)
>* [import 檔案拆分](https://courses.hexschool.com/courses/1eebd3/lectures/11953747)
>* [mixin 工具篇](https://courses.hexschool.com/courses/1eebd3/lectures/11953748)
>* [載具篇 - @mixin+@content 設計響應式設計超方便](https://courses.hexschool.com/courses/1eebd3/lectures/11953749)
>* [結構篇 - 如何循序漸進優化網頁架構](https://courses.hexschool.com/courses/1eebd3/lectures/11953750)
[color=blue]

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