* 討論時間：7/13晚上10:30 @discord小組頻道
* 🎉🎉全員到齊🎉🎉

## 第零題 心理測驗
請做此[心理測驗](https://www.16personalities.com/ch)，分享自己的[測驗結果](https://www.16personalities.com/ch/%E7%B1%BB%E5%9E%8B%E6%8F%8F%E8%BF%B0)給您的組員。
| 成員 | 回答 |
| -------- | -------- |
| Rochel #4754 | |
| peggydbc1217#1187 | |
| 辣椒 #1002 |  |
| Eero #1147 | |
| 狸貓 #5863 |  |
| Kallen #1185| |
| 慈玲 #8986 |  |
| kimdad |  |
| dodo_6666 | |
| hsuan0320 | |
## 第一題 分享您的背景給組員們~
1.你的暱稱
2.你是哪裡人，之前學校科系是念哪裡？
3.有做哪些性質的工作？
4.為什麼會想來參加這次切版直播班？
5.想特別在這堂課獲得什麼養分？
6.分享一個連你爸媽都不知道的小秘密，給你的組員們~
| 成員 | 回答 |
| -------- | -------- |
| Rochel #4754 | 就Rochel，想怎麼唸就怎麼唸~我是新竹人，不過目前活動地主要在雙北。雖然是非相關科系背景，但對前端、產品有興趣!希望在準備升研究所前來切版直播班做出個比較完整的作品!我的秘密就是報名參加這個直播班XD |
| peggydbc1217 #1187 | 1.Larry<br>2.苗栗竹南，化學研究所畢業<br>3.製程工程師、FAE<br>4.很少練習切版，想集中時間一次補足相關技能<br>5.培養美感以及對畫面的敏銳度<br>6.家人不知道我現在在學什麼|
| 辣椒 #1002 | 1. 辣椒<br>2.桃園人，行銷系<br>3.接案(平面與網頁設計)<br>4. 想要更精進自己的技能<br>5.了解模組化，增加前端切版能力與溝通能力<br>6.家人不知道我去了一趟日本花了超多錢錢 |
| Eero #1147 | 1. Eero<br>2. 苗栗人，主要當初在選地區沒看到苗栗選項，就選個比較靠近的新竹<br>資工系，但因畢業時剛好疫情爆發就奔向醫療製造業，以前學的也都還給老師了，就當小白吧!!<br>3. 醫療製造業 <br>4. 主要是想要轉職<br>5. 切版的能力。年初有嘗試做 Side Project，發現切版能力嚴重不足，就掉頭回來了<br>6.以前很愛玩，大概類8+9的風格，但家人一直以為我都很乖... |
| 狸貓 #5863 | 1. 狸貓<br>2. 桃園人，藝術相關科系，畢業即失業 :joy: <br>3. 主要都是服務業。 <br>4. 去年兼職學習沒有完成所有主線，這次想再挑戰。<br>5. 提升切版速度與程式碼品質<br>6. steam收藏庫的遊戲超過一半連下載都沒有下載，但最近瘋狂地逛夏季特賣 :+1:
| Kallen #1185| 1. Kallen<br>2. 桃園人，目前還是大學生，就讀資管系 <br>3. 文書處理相關工作 <br>4. 對網頁有興趣，想增進自己的切版能力<br>5. 想蒐集一些作品未來可以放入履歷中<br>6. 瞞著家人偷偷買Steam上的遊戲,因為他們不允許我將錢花在遊戲上|
| 慈玲 #8986 | 我是台南人，目前還是大學生 :female-student: <br>此次想來這裡提升切版的技能，為以後的就業做好準備<br>大學讀的是資訊管理科系，由於系上有一些實作 Project 的課程，所以有分組協作的經驗<br>希望能藉由此次直播版，提升自己協作的能力、溝通能力、切版技術 :grinning: |
| kimdad | 1.一休<br>2.桃園人，大學讀日文系有考到N1，但畢業久了退步蠻多的<br>3.當過日翻中筆譯，內容是補習班的線上教學影片還負責上字幕。當過職業軍人兩年多到中士，覺得軍中不適合自己就提出提前退伍。<br>4.之前在職訓局學JAVA後端，期末專題是寫求職網站，當時前端是我負責的，雖然會寫一些JS也懂html和css但都不太熟練。加入直播班是為了能從0把設計稿還原，不想只靠改模板<br>5.特別想學RWD，因為之前的專題沒有做成RWD自適應網頁覺得很可惜。<br>6.家人都以為我沒交過女朋友，其實大學有交過，但因為交往時間沒很長，所以覺得沒必要告訴他們。 |
| dodo_6666 | 1. DoDo 逗逗<br>2. 從新北來新竹打拼，大學跟研究所都念工設系<br>3. 做過簡單的網頁、實體或數位產品的介面設計、製作影片、海報、紀念T-shirt設計...等<br>4. 擴展職能提升在公司的貢獻度<br>5. 希望能學習正確的切版知識，向前端工程師邁進<br>6. 因為想擺脫電腦族的肩頸痠痛去參加整復推拿的入門課程，還沒告訴爸媽。 |
| hsuan0320 | 1.Anita<br>2.台北人，之前學校科系是念台藝圖文系<br>3.之前做過平面設計，現職是軟體業的UI設計<br>4.會想來參加這次切版直播班是希望自己下班之餘也能多練習切版，另外也很想學GSAP動畫!<br>5.特別希望這堂課累穩扎穩打每個細節，累積切版實力<br>6.其實這次是二刷切版直播班了，希望完成度能比上次更進步！|
## 第二題 選擇題
以下範例程式碼的 .text 高度是多少？(請不要用瀏覽器觀察)
#### HTML

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

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

| 成員 | 回答 | 其他 |
| -------- | -------- | -------- |
| Rochel #4754 | 2.|[Codepen](https://codepen.io/rochelwang1205/pen/eYQGGQm)|
| peggydbc1217 #1187 | 2 | |
| 辣椒 #1002 | 2 | |
| Eero #1147 | 2 | |
| 狸貓 #5863 | 2 | |
| Kallen #1185| 2 | |
| 慈玲 #8986 | 2 | |
| kimdad | 2 | img底下會自帶幾PX的微妙空間 |
| dodo_6666 | 2 | |
| hsuan0320 | 2 | |
## 第三題
請問 .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;
}

| 成員 | 回答 | 其他 |
| -------- | -------- | -------- |
| Rochel #4754 | 222px | [Codepen](https://codepen.io/rochelwang1205/pen/eYQGGQm) |
| peggydbc1217 #1187 |36+16x1.5x2+24x2+90=222px | |
| 辣椒 #1002 | 36+24+24+24+24+90=222 | |
| Eero #1147 | 222px | |
| 狸貓 #5863 | 36+(24+24)x2+90 = 222 px | |
| Kallen #1185| 222px | |
| 慈玲 #8986 | 36+(16x1.5)+24+90 = 222px | |
| kimdad | 222px | h1:36+(p:24+margin-bottom:24)*2+90=222 |
| dodo_6666 | 36+(24+24)*2+90=222 px | |
| hsuan0320 | 222px | 36px + 48px + 48px + 90px = 222px |
## 第四題
請問 .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;
}

| 成員 | 回答 | 其他 |
| -------- | -------- | -------- |
| Rochel #4754 | width=93px height=93px |[Codepen](https://codepen.io/rochelwang1205/pen/eYQGGQm) |
| peggydbc1217 #1187 |Width:50+20x2+3=93px<br>Height:50+20x2+3=93px | |
| 辣椒 #1002 | 寬：50+3+20+20=93<br>高：50+3+20+20=93 | |
| Eero #1147 | 寬度:93px 高度:93px | |
| 狸貓 #5863 | width：50+(20x2)+3 = 93 px<br>height：20+(20x2)+3 = 93 px | |
| Kallen #1185| width:93px;height:93px | |
| 慈玲 #8986 | width: 50+3+(20x2) = 93px<br>height: 50+3+(20x2) = 93px | |
| kimdad | 寬度:93px 高度:93px | 高:50+20\*2+3=93<br>寬:50+20\*2+3=93 |
| dodo_6666 | W:50+3+20\*2=93 px <br>H:50+3+20\*2=93 px | |
| hsuan0320 | 寬度：93px；高度：93px | |
## 第五題
請優化此[程式碼](https://codepen.io/liao/pen/OJyLOzr)，優化重點為：
* 在不影響外觀情況下，試著將不必要的 CSS 移除或整合
* 請不用更動 HTML 程式碼，僅需優化 CSS 程式碼

| 成員 | 回答 |
| -------- | -------- |
| Rochel #4754 | [Codepen](https://codepen.io/rochelwang1205/pen/wvQrPGZ) |
| peggydbc1217 #1187 |[Codepen](https://codepen.io/peggydbc1217/pen/JjerBQZ) |
| 辣椒 #1002 | [Codepen](https://codepen.io/chilichen118/pen/qBQxqOL) |
| Eero #1147 | [Codepen](https://codepen.io/Eero-Chiao/pen/KKrXEON) |
| 狸貓 #5863 | [Codepen](https://codepen.io/tanuki320/pen/QWJqJVj) |
| Kallen #1185| [Codepen](https://codepen.io/zsoiobyy-the-scripter/pen/gOQGjEN?editors=1100) |
| 慈玲 #8986 | [Codepen](https://codepen.io/vseznpoh-the-flexboxer/pen/KKrXbKa) |
| kimdad | [Codepen](https://codepen.io/HUANG-KUAN-HSUAN/pen/wvQyaWz) |
| dodo_6666 | [Codepen](https://codepen.io/MissDouble/pen/MWzOMgM) |
| hsuan0320 | .wrap {width: 500px;margin: 0 auto;}<br>.header h2, p{font-size: 20px;}
|
## 第六題

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

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

| 成員 | 回答 |
| -------- | -------- |
| Rochel #4754 | [Codepen](https://codepen.io/rochelwang1205/pen/GRwMOqY?editors=1100) |
| peggydbc1217 #1187 |[Codepen](https://codepen.io/peggydbc1217/pen/MWzEqWo)
| 辣椒 #1002 | [Codepen](https://codepen.io/chilichen118/pen/VwVQmpo) |
| Eero #1147 | [Codepen](https://codepen.io/Eero-Chiao/pen/ZEmXZEJ) |
| 狸貓 #5863 | [Codepen](https://codepen.io/tanuki320/pen/VwVMVEE?editors=1100) |
| Kallen #1185| [Codepen](https://codepen.io/zsoiobyy-the-scripter/pen/MWzEBRm)|
| 慈玲 #8986 | [Codepen](https://codepen.io/vseznpoh-the-flexboxer/pen/zYMEyvW) |
| kimdad | [Codepen](https://codepen.io/HUANG-KUAN-HSUAN/pen/XWyZbMP) |
| dodo_6666 | [Codepen](https://codepen.io/MissDouble/pen/LYXOKWy) |
| hsuan0320 | [Codepen](https://codepen.io/hsuan0320/pen/YzRYOPv) |
## 第七題

彼此討論 [pixel perfect kata](https://cacoo.com/diagrams/pZ1jUCICb1t4bSVc/1AEDF?reload_rt=1620962199126_0&)，你會如何透過 flexbox 來排版？
| 成員 | 回答 | 其他 |
| -------- | -------- | -------- |
| Rochel #4754 | [Codepen](https://codepen.io/rochelwang1205/pen/YzREZPd) ||
| peggydbc1217#1187 | [Codepen](https://codepen.io/peggydbc1217/pen/eYQexaq) |
| 辣椒 #1002 | [Codepen](https://codepen.io/chilichen118/pen/yLQvgYG) |
| Eero #1147 | [Codepen](https://codepen.io/Eero-Chiao/pen/eYQGyLL) |
| 狸貓 #5863 | [Codepen](https://codepen.io/tanuki320/pen/VwVMqeR?editors=1100) | Codepen 內有附圖解 |
| Kallen #1185| [Codepen](https://codepen.io/zsoiobyy-the-scripter/pen/eYQyJBR)|
| 慈玲 #8986 | [Codepen](https://codepen.io/vseznpoh-the-flexboxer/pen/oNQEBbx) |
| kimdad | [CodePen](https://codepen.io/HUANG-KUAN-HSUAN/pen/LYXQVKV) |
| dodo_6666 | [Codepen](https://codepen.io/MissDouble/pen/qBQVzPm?editors=1100) | |
| hsuan0320 | [Codepen](https://codepen.io/hsuan0320/pen/VwXmpPW)| |