第一週小組任務

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

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

回報流程：

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

常見問題：

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

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

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

問題

以下題目皆有使用 Meyerweb CSS Reset。

第一題 心理測驗

請做此心理測驗，分享自己的測驗結果給您的組員。

第二題 選擇題

以下範例程式碼的 .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;
}

第五題

請優化此程式碼，優化重點為：

• 在不影響外觀情況下，試著將不必要的 CSS 移除或整合
• 請不用更動 HTML 程式碼，僅需優化 CSS 程式碼

第六題

請優化此程式碼，並將程式碼連結放到 Codepen 上。優化重點為：

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

第七題

彼此討論 pixel perfect kata，你會如何透過 flexbox 來排版？

回報區

第 0 組 https://hackmd.io/tGtPukfZSVehEZtpZgvlcA?both#

✅

第 9 組 - 第一週小組討論

✅ 審核通過，小組討論整理得很好！
一點小建議：
第六題 - 有提到可以適當調整 HTML 結構，這邊建議可以將最外層 div.wrap 移除哦 ~

第 20 組

✅ 審核通過，有看到你們額外分享練習英打及 emmet 的經驗，很棒 ~
一點小建議：
第五題 - font-size 可以繼承，所以可以一起寫在 .wrap 內
第六題 - 有提到可以適當調整 HTML 結構，這邊建議可以將最外層 div.wrap 移除哦 ~

第 15 組

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

第 19 組

✅ 審核通過，pixel perfect kata 有一起討論出結構圖很棒哦 ~

無分組

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

第 13 組

✅ 審核通過，整理得很完整，還有互相錄影分享及詳細的結構圖，很棒哦 ~

第 5 組

✅ 審核通過，小組討論整理得不錯，也有看到你們討論 kata 的大致結構，很棒哦 ~

第 7 組

✅ 審核通過，小組討論參與度很高，讚讚！

第 18 組

✅ 審核通過，有整理出小組成員可以討論的時間，不錯哦 ~

第 12 組

✅ 審核通過，參與度很高，有看到組員分享筆記，很棒哦 ~

第 11 組

✅ 審核通過，心理測驗整理得很漂亮XD，kata 的架構圖很詳盡哦，很棒 ~

第 1 組

✅ 審核通過

第 24 組

✅ 審核通過

第 2 組

✅ 審核通過

第 8 組

✅ 審核通過

第 22 組

✅ 審核通過

第 21 組

✅ 審核通過

第 10 組

✅ 審核通過

第 17 組

✅ 審核通過

第 25 組

✅ 審核通過

邊緣組

✅ 審核通過

第 6 組

✅ 審核通過

第 23 組

✅ 審核通過

第 16 組

✅ 審核通過

第 14 組

✅ 審核通過

第 3 組

✅ 審核通過

第 4 組

✅ 審核通過