組員參與名單( 11/ 11)：

- [x] +7
- [x] Jacky7035
- [x] 銀光菇
- [x] kulimusoda
- [x] SKey#9905
- [x] 雪維
- [x] PatrickPie#1112
- [x] Robbie
- [x] effie____
- [x] miamia_5362
- [x] Sonia Wu

### 第一題 分享您的背景給組員們~
1.你的暱稱
2.你是哪裡人，之前學校科系是念哪裡？
3.有做哪些性質的工作？
4.為什麼會想來參加這次切版直播班？
5.想特別在這堂課獲得什麼養分？
6.分享一個連你爸媽都不知道的小秘密，給你的組員們~

| Discord名稱 | 自我介紹 | 16型人格 |
| ----------- | ---- | ----- |
| 王小明(示範) | 1. <br>2. <br>3. <br>4. <br>5. <br>6. | [競選者 (ENFP-T)](https://www.16personalities.com/ch/enfp-%E4%BA%BA%E6%A0%BC?utm_source=results-turbulent-campaigner&utm_medium=email&utm_campaign=ch&utm_content=type-personality-0) <h2>這是示範格</h2> |
| patrickpie | 1. 大家可以叫我patrick～<br>2. 我是台南人，現居高雄。<br>3. 之前做過遊戲業跟服務業。<br>4.目前待業中，全職學習前端技術。<br>5.想要獲得切版的基礎與專業知識！<br>6.父母不知道的小秘密：之前有去做過雷射除毛| [守衛者 (ISFJ-A)](https://www.16personalities.com/ch/enfp-%E4%BA%BA%E6%A0%BC?utm_source=results-turbulent-campaigner&utm_medium=email&utm_campaign=ch&utm_content=type-personality-0) |
| Sonia Wu | 1. 大家可以叫我Sonia<br>2. 我是高雄人，之前讀運輸籌備管理系。<br>3. 之前做過網路行銷,國外業務助理,品質助理工程師。<br>4.目前待業中，全職學習前端技術。<br>5.希望能提升切版熟練度,未來有機會完成自己的作品<br>6.跟爸媽好像沒什麼小祕密 XD| [探險家 (ISFP-T)](https://www.16personalities.com/ch/isfp-%E4%BA%BA%E6%A0%BC) |
| SKey | 1. 大家可以叫我SKey<br>2. 嘉義長大，搬到高雄，資工系。<br>3. 資安工程師。<br>4. 轉職，希望以後有機會可遠端工作或兼職。<br>5. 精進切版技術<br>6. 有些靈異經驗，以前睡通鋪時(4人大小的房間)，睡在最左邊的女生(我睡最右邊，房間只有兩個人)，在我睜眼剎那同一時間(我躺著沒動)，她身體彈起來靠到我身邊看著我講話，講完後，躺在我旁邊繼續睡。| [邏輯學家 (INTP-A / INTP-T)](https://www.16personalities.com/ch/intp-%E4%BA%BA%E6%A0%BC) |
| 雪維 | 1. 嗨我是雪維。<br>2. 台南人，大學讀中文系。<br>3. 之前的工作是行政助理，在教育相關產業。<br>4.在hahow學了HTML&CSS入門後感興趣，接續著報名了切版班。<br>5. 目標是成功跟課做完所有的作業及完成專題作品。熟悉BS、框架等概念，摸索一些JS。<br>6. 家裡禁手搖，趁著和朋友去小琉球旅遊的時候一天同一家店回購了4次🥹（腎：我覺得不太行| [調停者 (INFP-T)](https://www.16personalities.com/ch/infp-%E4%BA%BA%E6%A0%BC) |
| Jacky7035 | 1. 大家好我是jacky<br>2. 高雄人，高雄工專電機科<br>3. 銀行客服(前職20年)，離職2年，半退休，47歲目前靠基金月配息和投資加密貨幣過活，2個小孩還在讀大學，現金流不太夠支付每月支出，想要透過寫程式來開發自己想要做的產品，如果中年大叔沒人要，就開發產品來創業看看~<br>4. 有參加體驗營，覺得有夥伴一起學習很棒，另外想要操練切版熟練度，與同學交流，了解自己的學習方向及程度<br>5. 需要到甚麼程度才可以達到就業、接案水準，以及如何開發出自己想要的產品<br>6. 老婆不知道我動用房貸理財額度投資| [主人公 (ENFJ-A / ENFJ-T)](https://www.16personalities.com/ch/enfj-%E4%BA%BA%E6%A0%BC) |
| Yu | 1. 我是Yu<br>2. 高雄人，旅館管理系畢業。<br>3. 前一份工作是軟體業客服<br>4. 在體驗營跟組員一起討論學習氣氛很好，繼續入坑並培養技能。<br>5. 加強硬技能及知識點，訓練切版熟練度。<br>6. 已經待業近一年，沒跟家人講| [提倡者 (INFJ-T)](https://www.16personalities.com/ch/infj-%E4%BA%BA%E6%A0%BC) |
| effie____ | 1. 我是effie。<br>2. 南投人，英文系畢業。<br>3. 前一份工作是公職。<br>4. 想轉職前端工程師，但自學的話沒有人可以請教問題和幫忙批改codes，因此希望藉由切版班來補足這些地方。<br>5. 訓練切版的速度及精準度、了解實務上可能會遇到的困難和應對方法。<br>6. 我也是目前待業數個月但沒有跟家人講。| [提倡者 (INFJ-T)](https://www.16personalities.com/ch/infj-%E4%BA%BA%E6%A0%BC) |
| +7 | 1. 暱稱是+7<br>2. 高雄人，嘉南藥理大學 化妝品系畢業。<br>3. 曾經做過平面設計接案、美編、學校行政<br>4. 想學新技能，從工程師體驗營接著過來<br>5. 想提升切版的熟練度。<br>6. 父母都不知道，已經待業兩年。| [調停者INFP-A / INFP-T](https://www.16personalities.com/ch/infp-%E4%BA%BA%E6%A0%BC) |
| 銀光菇 | 1. 銀光菇 <br>2. 嘉義人，園藝系畢。<br>3. 目前無職，以前只有做過實驗助理，當工讀生當到工讀小組長。<br>4. 想要熟練切版的相關技能<br>5. 切版快還要更快~~摸都嗨壓庫~~。<br>6. 轉眼間三十的中二肥宅| [競選者 (ENFP-T)](https://www.16personalities.com/ch/enfp-%E4%BA%BA%E6%A0%BC?utm_source=results-turbulent-campaigner&utm_medium=email&utm_campaign=ch&utm_content=type-personality-0) |
| mia | 1.可以叫我mia <br>2.台南人,應日系畢業 <br>3.之前做過貿易相關業務助理 <br>4.想加強切版能力 <br>5.希望可以累積作品，增加切版熟練度 <br>6.曾經一個人在國外開刀沒有跟爸媽講 | [提倡者 (INFJ-A)](https://www.16personalities.com/ch/infj-%E4%BA%BA%E6%A0%BC) |

### 第二題 選擇題

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

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

#### HTML

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

#### 答案
==2. 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;
}

#### 答案
==36+0+(24+24)*2+90 = 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;
}

#### 答案
==寬度: 50+40+3=93px==
==高度: 50+40+3=93px==

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

#### 答案

==SKey [第五題](https://codepen.io/Dale-Chien/pen/XWyVVEV)
銀光菇 [第五題](https://codepen.io/genesynthesis/pen/mdQBBQX)==

### 第六題

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

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

#### 答案

==Yu [第六題](https://codepen.io/yuch3n_chen/pen/VwVrYeg?editors=1100)
PatrickPie [第六題](https://codepen.io/patrickpie/pen/BaGJmzV)
SKey [第六題](https://codepen.io/Dale-Chien/pen/GRwyybg)==

### 第七題

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

#### 答案

---

### 討論合影



---
很感謝南一組的大家，雖然一開始大家都比較害羞，不過聊開了之後就知道大家都很棒，也都非常積極的參與討論，很高興可以認識大家，希望接下來的兩個月大家可以一起奮鬥，一起成為更棒的前端工程師。