# 第27組 - 第一週小組任務(討論區)

## 參與夥伴

| Name | 參與 |Name|參與 |
| -------| ----|-----|-----|
| Peggy#1552 | V | LHchien#6232| V |
| masaki#3054 | V | Ryan Chiang#6649| V |
| piha#9987 | V | RyanC#6960 | V |
| YC#2522 | V | YAMAKI#0268 | X |
| 小溪#6576 | X | William#5142 | X |

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

### 第零題 心理測驗
| Name | Answer | | Name | Answer |
| ------ | ------------- | --- | ----------- |:------------- |
| masaki | 守衛者 ISFJ-A | | chien | 建築師 INTJ-A |
| Peggy | 守衛者 ISFJ-A | | Ryan（how） | 提倡者 INFJ-A |
| piha | 提倡者 INFJ-T | | RyanC | 提倡者 INFJ-A |
| YC | 表演者 ESTP-T |

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

> chien：2.台中人，讀教育相關科系/ 3.做過算是服務、行政類的工作/ 4.想學更多所以來直播班/ 5.提高熟練度、多看別人怎麼寫從中學習/ 6.我爸媽可能覺得我大學成績不差以為我很認真在上課，但其實我常常睡過頭：）
> how： 2.台中人，食品科學相關科系 / 3.目前工作是 growth hacker，另外有接過一些設計案 / 4.本來是學UI，但還是想自己把網頁寫出來`,所以來直播班試水溫 / 5.想獲得能夠實戰的技術 /  6.常常因為懶得想要吃什麼，所以沒吃午餐 ㄎ
> Peggy : 2.桃園人-文科英文系/ 3. 服務業/國外業助/國外採購，現在全職轉職前端ing/ 4.聽說六角得課很虐，所以就打算來這切搓自己得切版技術，畢竟切版是最基本的能力QQ/ 5.想要獲得快速切版的能力(有邏輯的切)/ 6. 半夜跟朋友去吃夜宵到早上才回家，以為我整晚在家睡覺...
> piha：2.台北人，行銷系。 / 3.會計 / 4.以前就對寫網頁/程式有興趣但沒有堅定走相關科系，現在想要利用空閒時間學習來彌補遺憾(?) / 5.同時也在規劃轉職，希望能達到就業門檻。 / 6.小時候爸爸睡前會把數據機關掉不讓我半夜玩電腦，我會等他睡著用襪子蓋住數據機的燈然後開網路來玩遊戲🙊
> masaki: 2.板橋人企管系3.做過銷售還有業務助理4.體驗營混得不錯就想繼續學 哈~~ 5.希望從這邊學到就業後不要被盯~~~ 6.其實他們不知道有偷偷跑去見網友! 驚!!!!
> YC：2. 桃園人 - 工業工程系/ 3. 做過企業幕僚(其實就是打雜)、研究助理 / 4. 之前有自學過，覺得自己基礎很不紮實，切得也很慢，想要精進技術 / 5. 想學到一些比較好的切法，轉化成自己切版的SOP / 6. 無照偷騎家裡的車出去找朋友玩😏

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

#### HTML

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

| Name | Answer |
|:------ | ------ |
| Peggy | 2 |
| chien | 2 |
| how | 2 |
| piha | 2 |
| RyanC | 2 |
| masaki | 2 |
| YC | 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;
}

| Name | Answer |
| ----- | ------------------------------- |
| Peggy | 36+((1.5*16)+24)*2+90 = 222px |
| chien | 36+(行高24+推擠24)*2+90 = 222px |
| how | 36+(24+24)*2+90=222px |
| piha | 36+((16*1.5)+24)*2+90=222px |
| RyanC | 36+((16*1.5)+24)*2+90=222px |
| masaki | 36+(24+24)*2+90=222px |
| YC | 36+(16*1.5)*2+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;
}

| Name | Width | Height |
| ----- | --------------- | --------------- |
| Peggy | 93px | 93px |
| how | 20+50+20+3=93px | 20+50+20+3=93px |
| chien | 50+3+20*2=93px | 同左 |
| piha | $50+3+20*2=93px | 50+3+20*2=93 |
| RyanC | 93px | 93px |
| masaki | 50+3+20+20=93px | 50+3+20+20=93px
| YC | 50+3+20*2 = 93px | 50+3+20*2 = 93px |

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

| Name | CodePen |
| ----- |:----------------------------------------------------------------- |
| Peggy | [CodePen](https://codepen.io/PeiJu-Liao/pen/mdxPzre?editors=1100) |
| how | [Codepen](https://codepen.io/ryanchiang/pen/yLKOzxR) |
| chien | [Codepen](https://codepen.io/lin_chien/pen/LYdNXgL) |
| piha | [CodePen](https://codepen.io/pihahaha/pen/wvmGRWL) |
| masaki |[CodePen](https://codepen.io/masaki-lee/pen/mdxPYPy) |
| YC | [CodePen](https://codepen.io/YCLu/pen/NWYrwzO) |

### 第六題

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

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

| Name | CodePen |
| ----- | ----------------------------------------------------------------- |
| Peggy | [CodePen](https://codepen.io/PeiJu-Liao/pen/poLyaNa?editors=1100) |
| how | [Codepen](https://codepen.io/ryanchiang/pen/MWVyrVm?editors=1100) |
| chien | [Codepen](https://codepen.io/lin_chien/pen/ExEKOGN) |
| piha | [CodePen](https://codepen.io/pihahaha/pen/JjLXwRM) |
| masaki | [CodePen](https://codepen.io/masaki-lee/pen/yLKOWbv) |
| YC | [CodePen](https://codepen.io/YCLu/pen/XWEKzPb) |

### 第七題

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

| Name | CodePen | 任何補充 |
| -------- | -------- | -------- |
| Peggy | [CodePen](https://codepen.io/PeiJu-Liao/pen/MWVyPGq?editors=0100) | |
| how | [Codepen](https://codepen.io/ryanchiang/pen/LYdNXxR)|
| chien | [Codepen](https://codepen.io/lin_chien/pen/abYNaaG) ||
|piha|[CodePen](https://codepen.io/pihahaha/pen/xxWObjW)||
|MASAKI|[CodePen](https://codepen.io/masaki-lee/pen/NWYrqLa)|<a href="https://imgur.com/7467ONg"><img src="https://i.imgur.com/7467ONg.png" title="source: imgur.com" /></a>|
| YC |[CodePen](https://codepen.io/YCLu/pen/MWVerww) |  |

## Discord討論

目前小組討論主要是在社群上留言。
依大家各自空閒的時間，上去分享自己的答案，若有疑問就在社群提出...