切版4組_第一週小組討論

會議資訊
  • 時間：7/12 21:00
  • 工具：zoom、discord
  • 參與人員：
    1. Alicia Lo
    2. Carol Li
    3. Eason
    4. Elaine Liu
    5. WA
    6. 尹士瑋
    7. 王懷英/網頁設計/台南
    8. 格可
討論截圖

zoom討論截圖

zoom討論截圖

Discord群建立

Discord群建立

第一題 心理測驗

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

slack名稱 類別 職業 職業介紹
Alicia Lo 外交家 提倡者 https://www.16personalities.com/ch/infj-人格
WA 外交家 提倡者 https://www.16personalities.com/ch/infj-人格
Elaine Liu 守護者 守衛者 https://www.16personalities.com/ch/isfj-人格
王懷英/網頁設計/台南 外交家 調停者 https://www.16personalities.com/ch/infp-人格
Carol Li 外交家 調停者 https://www.16personalities.com/ch/infp-人格
Eason 指挥官 分析家 https://www.16personalities.com/ch/entj-人格
格可 外交家 主人公 https://www.16personalities.com/ch/enfj-人格

第二題 選擇題

以下範例程式碼的 .text 高度是多少？(請不要用瀏覽器觀察)

  1. 90px
  2. 92~93px
  3. 120px

HTML




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

答案討論

  1. 92~93px
    Alicia Lo
  1. 92~93px
    因為img下方會有 2-3px 的留白
    Elaine Liu
  1. 92~93px
    格可

第三題

請問 .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;
}

答案討論

222px
36px(h1的lh)+24px(16*1.5)2(p的lh)+24px2(p的mb)+90px(img-h)
Alicia Lo

222px
36+(16*1.5+24)*2+90
Elaine Liu

222px
36+(16*1.5+24)*2+90=222
格可

第四題

請問 .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;
}

答案討論

width : 93px (50px+20px*2(pd)+3px(br))
height : 93px (550px+20px2(pd)+3px(bb))
Alicia Lo

寬：93px= w50 + br3 + padding左右共40
高：93px= h50 + bb3 + padding上下共40
Elaine Liu

寬度:50+3+20+20=93px
高度:50+3+20+20=93px
格可

第五題

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

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

答案討論

Alicia Lo - 第五題
Alicia Lo

Ealine Liu 第五題
Elaine Liu

格可 - 第五題
格可

Carol Li - 第五題
Carol Li

Eason - 第五題
Eason

第六題

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

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

答案討論

Alicia Lo - 第六題
Alicia Lo

Elaine Liu 第六題
Elaine Liu

格可 第六題尚未完成
格可

Eason 第六題
Eason

第七題

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

答案討論

https://codepen.io/elaine7598/pen/abWBrao
錄影練習
Elaine Liu

https://codepen.io/dkcyhyre/pen/rNmxdNG
錄影練習
Alicia Lo

https://codepen.io/catabo/pen/dyWXgdW
錄影練習
格可

https://codepen.io/alanwu0828/pen/dyWOZwm
Eason

https://codepen.io/carolli834/pen/LYyGwjp
錄影練習
Carol Li

https://codepen.io/ldddl/pen/yLbbyXy
錄影練習
WA

Select a repo