第一週小組任務
===

###### tags: `小組討論` `網頁切版直播班 - 2021 夏季班`

使用 ZOOM 來討論，組員沒麥克風也可以一個人分享畫面，其他組員用文字討論，解答此問題集

**回報流程：**
1. 請組長到下方回報解答連結，**一個小組請派一人提交(依據當周條件提交)**。回報內容需含：
1. 該問題集的答案
2. 提供 1~3 張視訊或 Slack 對話截圖，確保有進行小組討論
3. 組員參與名單
2. 助教檢視過後，就會回覆 ✅ 來回報審核成功與否。
3. 若有組員全程沒有參與到討論，該組員不會收到卓越小組徽章，其餘有符合條件者，都會獲得徽章

**常見問題：**

Q：約時間討論的組員至少要幾位？
A：至少兩位就可成團！

Q：如果沒有分組，可以一起玩嗎？
A：可以

Q：如果太邊緣，沒有人回覆或給予訊息 Emoji 怎麼辦？
A：那麼你可以在隔日時默默給予自己 Emiji，依然可以算通關喔

## 問題
以下題目皆有使用 Meyerweb CSS Reset。
### 第一題 心理測驗
請做此[心理測驗](https://www.16personalities.com/ch)，分享自己的[測驗結果](https://www.16personalities.com/ch/%E7%B1%BB%E5%9E%8B%E6%8F%8F%E8%BF%B0)給您的組員。


### 第二題 選擇題

以下範例程式碼的 .text 高度是多少？(請不要用瀏覽器觀察)
1. 90px
2. 92~93px
3. 120px

#### HTML

<div class="text">
  <img alt="" src="logo.png" height="90" /> 
</div>

### 第三題
請問 .box 的高度是多少？(請不要用瀏覽器觀察)

#### HTML

<div class="box">
  <h1>標題</h1>
  <p>段落</p>
  <p>段落</p>
  <img alt="" src="logo.png" height="90" /> 
</div>

#### CSS

.box h1{
  font-size: 24px;
  line-height: 36px;
}
.box p{
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 24px;
}
.box img{
  display: block;
}

### 第四題
請問 .card 的寬高與高度各是多少？(請不要用瀏覽器觀察)

#### HTML

<div class="card"></div>

#### CSS

.card{
  width: 50px;
  height: 50px;
  border-bottom: 3px solid orange;
  border-right: 3px solid #000;
  background: #000;
  padding: 20px;
}

### 第五題
請優化此[程式碼](https://codepen.io/liao/pen/OJyLOzr)，優化重點為：
* 在不影響外觀情況下，試著將不必要的 CSS 移除或整合
* 請不用更動 HTML 程式碼，僅需優化 CSS 程式碼

### 第六題

請優化此[程式碼](https://codepen.io/liao/pen/qBOWPea)，並將程式碼連結放到 Codepen 上。優化重點為：

* 在不影響外觀情況下，將重複的 CSS 樣式，獨立成一個共用的 class
* 可依照您設定的共用 class，適當調整 HTML 結構

### 第七題

彼此討論 [pixel perfect kata](https://cacoo.com/diagrams/pZ1jUCICb1t4bSVc/1AEDF?reload_rt=1620962199126_0&)，你會如何透過 flexbox 來排版？

---
## 回報區

[第 0 組](/8buvE9ZOQmKkZteZWJmgOQ) https://hackmd.io/tGtPukfZSVehEZtpZgvlcA?both#
> ✅

[第 9 組 - 第一週小組討論](https://hackmd.io/@Zihyin/Front-end-Design-table/https%3A%2F%2Fhackmd.io%2F%40Zihyin%2Fweek1_mission)
> ✅ 審核通過，小組討論整理得很好！
> 一點小建議：
> 第六題 - 有提到可以適當調整 HTML 結構，這邊建議可以將最外層 div.wrap 移除哦 ~

[第 20 組](https://hackmd.io/@JHOUJHOU/frontendteam20/https%3A%2F%2Fhackmd.io%2F%40JHOUJHOU%2FBk0TxVo3O)
> ✅ 審核通過，有看到你們額外分享練習英打及 emmet 的經驗，很棒 ~
> 一點小建議：
> 第五題 - font-size 可以繼承，所以可以一起寫在 .wrap 內
> 第六題 - 有提到可以適當調整 HTML 結構，這邊建議可以將最外層 div.wrap 移除哦 ~

[第 15 組](https://hackmd.io/@xlpO6d7WR9ytOQHX6FuyHQ/BkFk4rkad)
> ✅ 審核通過，儘管只有兩個人，但能一起討論出結果，很棒！
> 一點小建議：
> 第五題 - font-size 可以繼承，所以可以一起寫在 .wrap 內
> 第六題 - 「content」區塊可以直接改為 `<div class="content wrap"> ... </div>` 就不需再多使用一層 div 哩。「banner」可以不用使用 .content

[第 19 組](https://hackmd.io/MJFCAmllS7myT3YrMj_1mw)
> ✅ 審核通過，pixel perfect kata 有一起討論出結構圖很棒哦 ~

[無分組](https://hackmd.io/hEVIbOkQSPqgA6yoJqn4lw?both)
> ✅ 審核通過，有參與小組任務很棒哦
> 一點小建議：
> 第三題 - img 有設定 `display: block;` 消除下方 2~3px 空白摟，就不需再加上 2 ~ 3px 了
> 第六題 - 有提到可以適當調整 HTML 結構，這邊建議可以將最外層 div.wrap 移除哦 ~

[第 13 組](https://hackmd.io/@HexSlicing2021-Team13/WeeklyMission)
> ✅ 審核通過，整理得很完整，還有互相錄影分享及詳細的結構圖，很棒哦 ~

[第 5 組](https://hackmd.io/@Gill/Hk7wKUJpd)
> ✅ 審核通過，小組討論整理得不錯，也有看到你們討論 kata 的大致結構，很棒哦 ~

[第 7 組](https://hackmd.io/CKNASHDUQ8utABOVEKIABA)
> ✅ 審核通過，小組討論參與度很高，讚讚！

[第 18 組](https://hackmd.io/-OdKB_FCRFeQMGzxXJAfjQ?view)
> ✅ 審核通過，有整理出小組成員可以討論的時間，不錯哦 ~

[第 12 組](https://hackmd.io/@o9ZLEqeZQ8e7u_JXSPfjsQ/Hk5aMuxTd/https%3A%2F%2Fhackmd.io%2FreuYr2LsT8ikHvwzFFSjLQ)
> ✅ 審核通過，參與度很高，有看到組員分享筆記，很棒哦 ~

[第 11 組](https://hackmd.io/FWRROVq2TRKHDSHT025QXw?both)
> ✅ 審核通過，心理測驗整理得很漂亮XD，kata 的架構圖很詳盡哦，很棒 ~

[第 1 組](https://hackmd.io/c4qwIl0TRf2o_-knOUWgYw?view)
> ✅ 審核通過

[第 24 組](https://hackmd.io/@lor7BL2LRTKof3EeInA9nw/HJaQ9dep_)
> ✅ 審核通過

[第 2 組](https://hackmd.io/3luBaQNrQRu_GISrAxfAaw?both)
> ✅ 審核通過

[第 8 組](https://hackmd.io/@5BoaEnWqTAu5IxwKWt1aSg/HJxBEf7pu)
> ✅ 審核通過

[第 22 組](https://hackmd.io/@Aguaaa/ryTgs74aO/https%3A%2F%2Fhackmd.io%2F%40Aguaaa%2Fweek1_mission)
> ✅ 審核通過

[第 21 組](https://hackmd.io/osdhEsWURdO7NmZ6JdNweQ?view
)
> ✅ 審核通過

[第 10 組](https://hackmd.io/DEBfM24rSdeMCeyUF-mR7A)
> ✅ 審核通過

[第 17 組](https://hackmd.io/1ND51WNWQyigzAEHrS-Kfw)
> ✅ 審核通過

[第 25 組](https://hackmd.io/QMlItKgUTjS3xkRMbr-tKA?view)
> ✅ 審核通過

[邊緣組](https://hackmd.io/AGOwZjMxStyYLVR0skaD2A?view)
> ✅ 審核通過

[第 6 組](https://hackmd.io/eVlZQcmCROmif7aJS9qDNg?both)
> ✅ 審核通過

[第 23 組](https://hackmd.io/A5oKejCFSZSMrb2zPNeQsg?view)
> ✅ 審核通過

[第 16 組](https://hackmd.io/lAC093y-RSWEGM84MWCaaw?both)
> ✅ 審核通過

[第 14 組](https://hackmd.io/@0IKEjCKbSPOVWw7d0MhWSA/HyO2Vzs6_)
> ✅ 審核通過

[第 3 組](https://hackmd.io/O9pmCxAtQMi9YIOQufZg4A?view)
> ✅ 審核通過

[第 4 組](https://hackmd.io/WYpkWJWeQIuq77LmuCGd3A)
> ✅ 審核通過