第13組 第二週｜flexbox
===

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

:::info
- **開會地點：** Gather、白板、meet
- **開會時間：** 7/11(日) 20:00
- **討論目錄：**[**第二週任務**](https://hackmd.io/@hexschool/SJJ-r_qOO) `2hr`
- [x] 關懷（進度、權限、協作範本、色票、新組員、markdown寫法）
- [x] 討論畫面（截圖）
- [x] flexbox 闖關（截圖）
- [x] 第二週版型（白板）
- [x] Gulp
- [x] 下週開會時間
- **參與成員**：Ian, Jiang V, Min Chun Tsai, mansonivan, Shani, Summer.H, Sz, Xing, 家齊, 巫樾
- 未參加成員：無
- 直播資料
- [第二週直播講義](https://hackmd.io/@hexschool/rynpgpfT_)
- [第二週切版直播筆記 by Sz](/1coV3uojR6eZXKoGhLihSA)

:::
---

## 任務一：玩 Flexbox 遊戲
以下遊戲任選一個，回報時請提供通關截圖，Miss 掉也沒關係：
* [Flex pirate 新手關卡](https://hexschool.github.io/flexbox-pirate/index.html#/)：預期 20~25 分
* [Flex 青蛙](https://flexboxfroggy.com/#zh-tw)：預期 30~50分，後面關卡較難

- [x] 全組員交齊囉！太厲害啦
> 動畫版 flexbox：[Animated Flexbox Playground](https://codepen.io/osublake/pen/dMLQJr)
> [name=Sz 分享][color=#BB84F5]

:::success
::: spoiler 請組員闖關成功後截圖點進來放裡面（以上關卡擇一）
### 回答區

>>
>>[name=Xing 分享][color=#E69F80]
>
>>
青蛙青蛙呱呱呱的又出現了
>>[name=Summer.H 分享][color=#F5697A]
>
>>
>>[name=Sz 分享][color=#BB84F5]
>
>>咦~我原本的青蛙照片居然消失了~馬上重新傳
>>
>>
>>[name=Shani 分享][color=#FFCE6B]
>
>>
>>
>>[name=Jiang V 分享][color=#A7E683]
>
>>
>>
>>[name=家齊 分享][color=#96A9C4]
>
>>
>>[name=Min Chun Tsai 分享][color=#efc267]
>
>>
>>
>>[name=巫樾 分享][color=#ffcccc]
>
>>
>>[name=Ian 分享][color=#37E4FF]
>
>>
>>[name=mansonivan 分享][color=#99ccff]

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

一個人能力有限，十個人團結力量大，彼此討論該版型如何攻略，才能發揮團隊最強力量
* [第二週作業 XD 檔](https://xd.adobe.com/view/3d28af46-ac66-480d-a9a5-4b07454e6f79-687b/)
* [開會用白板：個人網站](https://app.tryeraser.com/workspace/VKcMYXqhhrUCGGBxapoU)

### 回答區

>>about 的 list 部分，前方 icon 不知道有沒有更好的作法
>>
>>[name=Xing 分享][color=#E69F80]
>
>>目前只有想到，整個頁面都是italic
>>整個頁面都是text-align:center，如果是網站不會再新增的話
>>可以先全域設定
>>[name=Sz 分享][color=#BB84F5]
>>> 第一張圖佔滿版的方法
>>>
>>>```
>>>.這個區域 {
>>> display: flex;
>>> justify-content: center;
>>> flex-wrap: wrap;
>>>}
>>>.第一張圖 {
>>> max-width:100%;
>>>}
>>>```
>>
>>>力求 pixel perfect ，試了兩個版本
>>>
>>>```
>>><li class="mark-list-item">
>>> <div class="mark-list-dot"></div>
>>> Founder of ‘’XXXD Official’’
>>></li>
>>>```
>>>然後在 .mark-list-dot 下背景 + radius + 高寬 + inline-block
>>>.mark-list-dot 會偏高，底部對齊 baseline
>>>
>>>想要完全置中還是要 li>span+p下 li 下 flex + jcc + aic
>>>span 下 background-color + border-radius
>
>>**display 運用問題**
>>display: inline-block 還不太會運用這個
>>因為看到這段 [ css 的這段 code 第114行](https://codepen.io/hsuan333/pen/oNWxwOr)
>>.d-inline-block { display: inline-block; }想知道其原理
>>**第二週作業**
>>[暫時先做完的code](https://github.com/viccjiang/2021layout_week2)
>>[name=Jiang V 分享][color=#A7E683]

## 任務三：觀看 Gulp 影音課程

請觀看第[四週補充知識](https://courses.hexschool.com/courses/2020112/lectures/33403921)章節，看完 **GitHub Pages 部署網站流程 (下)** 後，影片會引導你將網站上傳到一個空間，並會提供一個網站網址給你，各組員若執行成功，再請將該網址貼到回報區。
> 若組員操作有問題，還請 tag @穎旻 助教協助~
[六角教學影片有新補充記得看](https://courses.hexschool.com/courses/2020112/lectures/33403929)

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

### 組內碰到的狀況
- [x] 檔案在 D 槽，cd 失敗問題（windows）
> `cd` 到該資料夾前，先輸入 `d:`
>[name=Summer.H 分享][color=#F5697A]

- [x] 權限不夠處理資料夾內容問題
> 右鍵→授予存取權給→移除存取
>[name=Summer.H 分享][color=#F5697A]
- [ ] push 就當掉問題
> 目前搭配 github desktop push 後再輸入 gulp 指令
>[name=Xing 分享][color=#E69F80]
- [x] 如何發問：做了什麼指令，就複製到記事本
一出問題就整個記事本內容附給對方
- [ ] gulp曾經在win系統開發，但要跳到mac開發，是否會遇到非預期的不相容問題 ? 目前測試我昨天的上傳的檔案（用win），今天用mac載下來用可以，但如果是用rar壓縮方式轉移到不同系統開，就不行惹

### 回答區

>>[pages](https://xingct.github.io/test/)
>>[code](https://github.com/XingCT/test)
>>[name=Xing 分享][color=#E69F80]
>
>>感謝各位組員的幫忙，搞了兩天gulp終於成功啦，我們擴展到discord開會去了XD"
>>
>> gitHub pages https://wan-chine.github.io/test/
>> 儲存庫的資料 https://github.com/Wan-Chine/test/tree/main
>>[name=Summer.H 分享][color=#F5697A]
>
>>[Github Pages](https://szyln.github.io/slicing.w2.gulp/)
>>[Github](https://github.com/Szyln/slicing.w2.gulp.git)
~~想問有人用過~~
~~的語法去上傳嗎，我嘗試下來好像都會失敗，想要比對一下XD~~
更新已經試出來了可以，不用用 master
>>[name=Sz 分享][color=#BB84F5]
>
>>Repository
>>https://github.com/ShaniMaCC/gulptest
>>頁面測試1
>>https://shanimacc.github.io/gulptest/
>>新增頁面測試2
>>https://shanimacc.github.io/gulptest/test.html
>>[name=Shani 分享][color=#FFCE6B]

>>不熟悉就多練習哩！教練，我好想寫程式~
>>[Jiang V 的 Gulp 網頁部署 test 1](https://viccjiang.github.io/2021layout_gulp_test/index.html)
[Jiang V 的 Gulp 網頁部署 BS4 test 2](https://viccjiang.github.io/2021layout_gulp/index.html)
[Jiang V 的 Gulp 網頁部署 BS5 test 3](https://viccjiang.github.io/2021layout_gulp_bs5/)
**分享 Win7 操作問題**
如果有人是win7 跟我一樣悲劇，分享一個解決 win7 跟 vscode 終端機無法開啟的問題，只要在圖上圈起來的地方加上這幾個字即可，win7 讓我踩很多雷耶，時代的眼淚真的在逼我換電腦 嘖嘖:( 苦等新款 mac 出來
>
>>[name=Jiang V 分享][color=#A7E683]

>>Github pages
>>測試首頁(https://tsai81926.github.io/MyPages/)
>>新增測試頁"Test2"(https://tsai81926.github.io/MyPages/test2)
>>Repository(https://github.com/tsai81926/MyPages)
>>[name=Min Chun Tsai 分享][color=#efc267]
>
>>[github repo](https://github.com/jacky298/gulp_test)
>>[gh-pages](https://jacky298.github.io/gulp_test/)
>>[name=家齊 分享][color=#96A9C4]
>
>>

>>
>>我是macOS 10.13.6
>>在gulp build之前 要先去電腦資料夾 把隱藏的資料夾有一個副檔名叫做.publish的資料夾刪掉，不然會無法出現gh-pages
>>
>>
>> 我的 GitHub pages
>>[yella moon巫樾](https://kolyfish.github.io/test22/)
>>
>>儲存庫資料
>>https://github.com/kolyfish/test22/tree/master
>>[name=巫樾 分享][color=#ffcccc]

>> gitHub pages https://alotischange.github.io/test/
>> 儲存庫的資料 https://github.com/alotischange/test/tree/master
>>[name=Ian 分享][color=#37E4FF]
>
>>https://krkjqqlove.github.io/text/
>https://github.com/krkjqqlove/text
>>[name=mansonivan 分享][color=#99ccff]

---

## 第一週作業疑惑
> 我從體驗營到現在一直有一個困惑但當時沒去找助教問個清楚覺得悔恨
https://codepen.io/wan-chine/pen/RwVWqPb
這是第一個星期的切版作業，中間SKILLS的技能推擠置中，我在CSS下了margin: 0 auto;然而他就是不會置中，不知道為啥
--

>[name=Summer.H 分享][color=#F5697A]
>我剛剛去試了不知道是不是我誤會了「ul的上層」的意思，直接下dib和ta沒有置中欸。
>Sz分享的這招超好用！感謝組長大大
>>- [x] 這樣改好像可以做到[name=Jiang V 分享][color=#A7E683]
>>```
>>.skill-list{
>> width:230px; 給他一個空間
>> border-left: #ffffff 1px solid;
>> margin: 0 auto; 他才知道要置中
>>}
>> ```
>
>>- [x] 哼哼你有看我的筆記的話還可以多學一招
>>[name=Sz 分享][color=#BB84F5]
>>```
>>.container {
>> text-align: center; // 上層設 文字置中
>>}
>>.skill-list {
>> display: inline-block; // 內層設成長得像 block 的 inline
>> text-align: left;
>>}
>>```
>>
>>歹勢我沒發現這講法很模糊XDDDD，趕快補給你

>我也有疑問~(已解決哈哈哈感謝偉大的組長)
>想問大家知道codepen老師不是說只要寫body中的內容就好,那如果在head裡有要寫或引用的內容大家會怎麼處理呢?例如google fonts/fontawesome/title之類的~
>[name=Shani 分享][color=#FFCE6B]
>>可以直接加在html區塊最上面有效XD
~~正規作法應該是點css區塊那裏的齒輪~~
不對欸，html的齒輪就可以直接設定headㄌ
>>
>>
>>[name=Sz 分享][color=#BB84F5]
>- [x] 有的有的剛剛把所有齒輪都點了所以有看到~~~
>[name=Shani 分享][color=#FFCE6B]

## 討論截圖
gather 讓電腦風扇瘋狂運轉
試試看 google meet
不過查了一下，好像三人以上使用
只能一次用一小時（但我們用了蠻久的）