第13組 第三週｜RWD
===

###### tags: `小組任務` `第三週` `2021夏季切版班` `team13`
[【總】小組任務｜2021夏季切版班 Team13](/GrA9x5TMQoGuIhR8xF7eyg)

:::info
- **開會地點：** meet
- **開會時間：** 7/18(日) 20:00
- **討論目錄：**[**第三週任務**](https://hackmd.io/_RIZHsygQTOG_MqhEIJwUA) `2hr`
- [x] 人到要（截圖）
- [x] 任務一：生出 no.8
- [x] 任務二：IT 幫幫忙的響應式分析
- [x] 任務三：構想第三週任務怎做
- [x] 任務四：大家最愛的 gulp
- [x] 上週主線：偽元素
- [x] 下週開會時間
- **參與成員**：Ian, Jiang V, Min Chun Tsai, mansonivan, Shani, Summer.H, Sz, Xing, 家齊, 巫樾
- 未參加成員：全員到齊
- 直播內容
- [第三週直播講義](https://hackmd.io/@hexschool/rJNtWj0pu)
- 筆記
- [第三週切版直播筆記 by Sz](/UyJwCxqiQEyWBcyVI_sLLg)
:::

---

## 任務一
【討論】不看老師範例程式碼，從無到有做出 [no.8](https://drive.google.com/file/d/1r8z8i3LzzEKIzDBlztkpFmuXK6EDyMx3/view?usp=sharing) 題目，並提供 codepen 檢視

### 回答區
>>[RWD Demo](https://codepen.io/xing10/pen/gOmBzLN)
>>[name=Xing 分享][color=#E69F80]
>
>>https://codepen.io/wan-chine/pen/gOWWNOP
>>
>>[name=Summer.H 分享][color=#F5697A]
>
>> [RWD Demo 程式碼](https://github.com/Szyln/slicing.w3.RWD.demo)
>> [頁面](https://szyln.github.io/slicing.w3.RWD.demo/)
>> 有試用`<picture>`的語法，發現會有可疑 margin 無法處理的問題
>>[附上picture的簡單codepen範例](https://codepen.io/szyln/pen/MWmaGwx)
>>[name=Sz 分享][color=#BB84F5]
>
>>[codepen](https://codepen.io/ShaniMa/pen/GRmERbv)
>>[name=Shani 分享][color=#FFCE6B]

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

請找出 [IT 邦幫忙的網站](https://ithelp.ithome.com.tw/)，每個頁面的響應式設計的資訊：
### 這網站總共有幾個斷點？
請描述這網站在 iPad、Mobile 上做了哪些巧思？請提供五處，並附圖
#### 1200
container 調整
>**header_inner**
>
>
>[name=Jiang V 分享][color=#A7E683]
#### 992
兩欄 ->單欄
>**rightside**
>
>
>[name=Jiang V 分享][color=#A7E683]

>pad模式下rightside右邊列會隱藏
>[name=Min Chun Tsai][color=#efc267]
#### 853
nav 的 .menu__container 的 width有微調

#### 768
nav 選項
> .menu_container的ul(.list-unstyled menu_left)
會由原本六個選項變為兩個(技術問答、技術文章)
技術問答標籤，也不跟技術問答並排了
>[name=Min Chun Tsai][color=#efc267]

#### 600
>logo 與廣告不並排了，廣告會移下來
>[name=Summer.H 分享][color=#F5697A]

#### 333
搜尋選項隱藏

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

[第三週主線任務 XD 檔連結](https://xd.adobe.com/view/d3d1119a-affd-4f48-8188-f070932224af-8682/screen/9030f53b-bb49-44c3-8d71-9901ad0d5206/specs/)

* LV1：只做 header 與 footer 的 RWD
* LV2：任選一頁，僅做 PC 版型
* LV3：任選一頁，需含RWD
* LV4：做二~三頁以上的 RWD
* LV5：所有頁面都有設計
::: success
:::spoiler 組員許願區
>>[Gulp SCSS 拆分規劃](https://jamboard.google.com/d/1H--mkEhNNALdET4lzVhP0E8El4mwNdbEv6HxvN7HiBg/viewer?f=0)
>>希望可以達到LV4~LV5
>>[name=Jiang V 分享][color=#A7E683]
>
>>lv4，下週lv5
>>[name=Sz 分享][color=#BB84F5]
>
>>希望至少影lv3
>>[name=Summer.H 分享][color=#F5697A]
>
>> LV5 我要出師!!!
>>[name=Xing 分享][color=#F5607A]
>
>>做出LV3就阿彌陀佛了
>>[name=家齊 分享][color=#96A9C4]
>
>>LV3以上~~~
>>[name=Shani 分享][color=#FFCE6B]
>
>>先求有再求好....lv3完成後在慢慢爬吧....
>>[name=mansonivan 分享][color=#99ccff]
>
>>往Lv.3以上挑戰~~
>>[name=Min Chun Tsai][color=#efc267]
>
>>討論之後 我決定LV1先
>>[name=Ian 分享][color=#37E4FF]
:::
### 討論內容
>需要 class 命名建議
>[name=mansonivan 分享][color=#99ccff]
>>[命名原則codepen](https://codepen.io/floraya/pen/KgvGov)
>>[name=Jiang V 分享][color=#A7E683]

>字體在不同的 media query 中，font-size, line-height 不太一樣
>正在找規則中
>[name=Sz 分享][color=#BB84F5]

用畫板討論一下可能會不熟的幾個標籤或語法

>
>這部份剛好有看到[slack 討論串](https://hexschool-share.slack.com/archives/C0201HR4W5P/p1626612639173900)
>[name=Sz 分享][color=#BB84F5]

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

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

### 組內 glup 筆記
- [Github Pages + Gulp 編譯部署步驟 by Jiang](/g_IJrs7GQxKLR2ftL119TQ)
- [gulp 與 git by Summer.H](/c6xAfdKGTQ2myIScFNlGlw)
- 用買東西來比喻 git 與 github
- [第四週前該用好的 gulp by Sz](/JIqaY79XQxqolJVJr3YZug)

> 目前組內皆完成安裝，有問題再提出囉～
<!-- > [第13組 第三週 gulp 大亂鬥現場（目前問題0）](/wWSGnvJqSuC_9-LcA_VARQ) -->
### 回答區
[附上上週大家的網址](https://hackmd.io/xK731XHMQnKZtVAdrROwug#%E5%9B%9E%E7%AD%94%E5%8D%802)
>>多頁面的css，希望sass可以分資料夾
>>[name=Xing 分享][color=#E69F80]
>
>>接下來想知道有沒有多個 layout 的設定方式
>>[name=Sz 分享][color=#BB84F5]

## 上週主線任務
### 偽元素
組內有針對紅點部分再做討論

原本是覺得可以用span(搭配背景)去設定（[上週討論到的部份](https://hackmd.io/@HexSlicing2021-Team13/WeeklyMission/%2FxK731XHMQnKZtVAdrROwug#%E5%9B%9E%E7%AD%94%E5%8D%801)）
助教有建議用偽元素

>[有用到偽元素的範例網站：環境變遷研究中心](https://www.rcec.sinica.edu.tw/?action=memberList&cid=1)
>
>email的部份是複製不到@以後的，icon的部份也是
>[name=Summer.H 分享][color=#F5697A]
>```css=
>.point::before{
> content: ""; // 給他空間，滑鼠滑過去，選取不到
> border-radius: 50px;
> background-color: #891818;
> width: 22px;
> height:22px;
> margin-right: 16px;
>}
>```

>分享紅點寫法[name=Shani 分享][color=#FFCE6B]
>```css
>.workingTitle ul li::before {
> content: '';
> display: inline-block;
> width: 22px;
> height: 22px;
> margin-right: 16px;
> background-color: #891818;
> border-radius: 50%;
> vertical-align: middle;
>}
>```
---

## 討論截圖
一樣全員到齊太神啦～