---
tags: 2021 程式體驗營 team20
---
# 第二週小組任務 | Team20

## 第一題 Flex 大挑戰

* 如果你是純新手，請攻略 [Flexbox 青蛙](https://flexboxfroggy.com/#zh-tw)、[flex 海報船-初級](https://hexschool.github.io/flexbox-pirate/#/)，任一關卡，並在 hackMD 附破關畫面。
* 假使您是有點概念的同學，請觀看以下兩篇文章，刻意練習你不曾用到的語法或範例
* [圖解：CSS Flex 屬性一點也不難](https://wcc723.github.io/css/2017/07/21/css-flex/)
* [跟著海盜學 Flex](https://w3c.hexschool.com/)

## 第二題 觀察影片

請觀察下方影片連結，看看洧杰老師的寫 Code 流程中，有哪些熱鍵、編輯器操作、程式碼語法是你原本不會的，然後被你偷學到哪些知識點。
* [Flexbox Live Demo 切版](https://youtu.be/iVS7qrMEbe8)
* [Adobe XD 標示文件教學 - 高度確認講解](https://youtu.be/hodJ07BC6EQ)
* [文字單行與多行處理辦法 - line-height 與 padding 的抉擇](https://youtu.be/keRHKc0t250)

## 第三題 Font Awesome (可做可不做)
老師在課堂上用的 Font Awesome 是什麼？尋找網路上的操作教學，並試著動手做做看，如果有不錯的教學文章，也請分享到小組任務或 Slack 大廳貢獻給其它學員。或是同學您下海寫一份教學。

---

## 小組討論
* 國家隊第20組

參與組員： Yu-Shiuan-Chang、A-Lu、li li、jung yu

* Flex挑戰、教學影片及Font Awesome學習心得：

>[name=yu shiuan chang 分享][color=#8a00d4]
>1.
>2.
>- 有時候不用完全按設計稿做，要符合UI/UX使用者體驗（ex.影片中購物車位置）
>- 切menu時要注意行距，且不能用行距置中，萬一字多有斷行會分很開，請善用padding
>3.
>[ Font Awesome 使用方法總結](https://www.wfublog.com/2016/01/font-awesome-advanced-skill-social-button.html)
>- 1.加cdn 2.選icon 3.在要加入圖片的位置加入語法

>[name=A-Lu 分享][color=#F51720]
>1.
>
>從遊戲中學到的有
>* align-content--與align-item不同，是整行移動(多行時)
>* flex-basis/grow/shrink---設定區塊的縮放與尺寸適應
>* flex-flow---把flex-content跟warp寫在同一行
>* order:0/1/-1---設定指定item在一行中的排序
>* align-self---單獨設定指定item的align
>(玩完才發現以上內容在老師提供的[圖解：CSS Flex 屬性一點也不難](https://wcc723.github.io/css/2017/07/21/css-flex/)裡面有詳細解說)
>
>2.觀察筆記：
>* .f"x"ww不是fww
>* i標籤+fontAwsome
>* 絕對定位
>.productList-card li{position:relative--設定範圍(白紙)
> .productList-card .tag{position:absolute--依據以上範圍做絕對定位
> left:20px; top:0px;
> emmet poa
>* 直書： writing-mode:vertical-lr
>* 字距：letter-spacing: 5px;
>
>3.Font Awesome
>* 將常見icon設計成字型取用(概念上這樣)的公開資源
>* 好處包括可以縮放不失真，也可以隨著需求設定顏色，且免費。
>* 基礎的用法是直接導入css，然後在html插入圖案代碼，即可視為文字編修。
>* 使用方式好像還有進階版，例如弄成js再導入；有些討論是關於如何打包自己常用的icon可以減少網頁負擔，還有用複數icon組成專用的icon等等，我還在理解中。
>* 此外我找到修改自FontAwesome的另一個圖像風格的[LineAwesome](https://free.com.tw/line-awesome/)也提供給大家
>

>[name=li li 分享][color=darkblue]
>#### 1-1.Flex青蛙 ####
>
>心得: 這是第2次玩哩
>~!!!上次玩好像花了一整天才破解~
>
>一直沒用過align-items:baseline; 傳說中的基線不清楚在哪呢<br>
>前10關妥妥的，從第11關開始越來越卡<br>
>第12關 蠻意外justify-content:space-between;
搭配flex-direction:column-reverse; 竟能達到垂直分散<br>
>第14關order屬性可調內部順序，將青蛙傳送到特定位置!採zero-based indexing
>數字都是矇對的~<br>
>第16關 align-self控制'單個'元素的屬性<br>
>第20關 第一次遇上flex-flow，達成和19關一樣的效果。row方向不對，就用column看看，給過<br>
>第21關遇到align-content決定行之間的間隔:可以理解為垂直置中、垂直靠上/下。有別於justify-content是水平移動。<br>
>第24關，小三寶用了暴力解法才通關，flex操作真的很吃感覺。
>#### 1-2.海盜船 ####
>很有情境感的練習。首先，地點來到索馬利亞，菜鳥海盜選擇新手村，上了賊船...然後...就下不來了orz...
>這個類rpg遊戲，一開始以為是要加入海盜陣容。玩的當下才發現自己是射擊海盜船，正義的一方。第一次玩覺得呵勝~比青蛙動感且直覺。因為語法有提示，點擊可快速複製，但要手動貼上，才能看效果。整體比青蛙花更少的時間，更高效。<br>
<br>
>老鳥村有多了10道題目，所以用Google登入，再玩一次。
這邊學到新的屬性flex-basis:120px; 還有flex-shrink。第26題蠻有意思的。這邊附上闖關結果: <br>
>
>#### 2.教學影片觀看心得 ####
>表頭emmet方括號用法<br> .header>((h1>a[href="#"]>img+(ul>li*4>a[href="#"]))<br>
>svg是向量圖片，長寬等比調整，logo多用此格式<br>
>程式碼片段設定 $1 $2 $3 便可以用tab快速傳送到指定位置
>

>[name=jung yu分享][color=#F8D210]
>**1-2 flex海盜船**
>遇到問題的地方
>第19題
>align-content: flex-start;
>因為是reverse所以起始點改變所以用flex-start才會是靠右
>https://hexschool.github.io/flexbox-pirate/#/simple
>
>
>
>
>覺得寫很久阿不知道為什麼那麼短!?
>
>老鳥村卡關中:自己爬文還是搞不太懂 flex basis growth shrink
3-1 [font-awesome 教學分享](https://pjchender.blogspot.com/2015/04/font-awesomeicon.html)
可以改顏色: 使用css color

---
↓ 討論內容截圖