## 2024軟體工程師體驗營
# 第57組 - 第一週小組任務

---

## 【參與討論者】文字/語音都計入

### Discord ID：
* chloe0316
* joanne4448
* jia.o85
* zyhong1031
* jeanalba_
* zzzzzzaa73
* zobody
* tsubasamilktea
* rickyy.f.7694
* jia.o85

### 討論截圖：

---

## 【第一題】心理測驗

* chloe0316：
1-1. [主人公 ENFJ](https://www.16personalities.com/ch/enfj-%E4%BA%BA%E6%A0%BC)
1-2. 很想中樂透然後到處去玩

* joanne4448：
1-1. [建築師 INTJ](https://www.16personalities.com/ch/intj-%E4%BA%BA%E6%A0%BC)
1-2. 希望逐步學習網頁開發的硬技能，實現數位游牧的彈性生活。期許自己跳脫上班「用多少時間換取多少薪水」的框架，而是透過能力拉高平均時薪。

* jia.o85：
1-1. [提倡者 INFJ](https://www.16personalities.com/ch/infj-%E4%BA%BA%E6%A0%BC)
1-2. 接下來準備上研究所了，應該蠻需要這類型技能的所以趁現在快點充實自己

* zyhong1031：
1-1. [提倡者 INFJ-A](https://www.16personalities.com/ch/infj-%E4%BA%BA%E6%A0%BC)
1-2. 心中有個野心，希望有朝一日可以做超棒的社群媒體幹掉Meta

* jeanalba_：
1-1. [主人公 ENFJ-A](https://www.16personalities.com/ch/enfj-%E4%BA%BA%E6%A0%BC)
1-2. 沒有特別的秘密

* zzzzzzaa73：
1-1. [主人公 ENFJ](https://www.16personalities.com/ch/enfj-%E4%BA%BA%E6%A0%BC)
1-2. 想做出一個產品，幫人享有心情平靜，享受幸福。

* zobody：
1-1. [提倡者 INFJ](https://www.16personalities.com/ch/infj-%E4%BA%BA%E6%A0%BC)
1-2. 沒有特別的秘密

* tsubasamilktea：
1-1. [調停者 INFP](https://www.16personalities.com/ch/infp-%E4%BA%BA%E6%A0%BC)
1-2. 有段時間太累，回家時常常坐到捷運終點站才起床。

* rickyy.f.7694：
1-1. [辯論家 ENTP](https://www.16personalities.com/ch/entp-%E4%BA%BA%E6%A0%BC)
1-2. 希望逐步學習網頁開發的硬技能，實現數位游牧的彈性生活。期許自己跳脫上班「用多少時間換取多少薪水」的框架，而是透過能力拉高平均時薪。

* jia.o85：
1-1. [提倡者 INFJ-T](https://www.16personalities.com/ch/infj-%E4%BA%BA%E6%A0%BC)
1-2. 不小心被分到15組去，現在回歸57組

* 1-3 共通之處有哪些？
(1) 都住在北部
(2) 都是新手
(3) 都是對生活有憧憬、有想法的人。

---
## 【第二題】產品列表排版

### 切版架構繪圖


### 思路說明

* 各區粉紅色內的內容都是相似的格式，而且在橘色區域內需要排列，所以可以把這些區塊當成一組一組的
* 最外圈橘色跟粉紅色：既然要把粉紅色區做成一組一組的，那用 ul 跟 li 標籤，方便閱讀結構跟管理這區內容、共用css，若要加新的內容時加新的 li 就好了
* 單一粉紅色區內：圖片(img) + 小標題(h3) + 內文\(p) + 分類標籤
* 分類標籤那邊：這一個區域會有許多標籤要放在一起排版，也是一組一組的，方便管理跟共用css，所以一樣用ul 跟 li

### 關於class命名
* 命名的部分主要是針對div跟ul、li上加上命名
* 因為純div本身是沒有定義意義的，所以加上名稱container定義它的用途，而ul、li雖然知道是一組的東西，但是仍然不清楚用途，所以一樣加上名稱定義它的用途
* 橘ul命名為case_list是因為以這個作品集網站來說，這邊應該是展示自己做過的case列表
* 粉紅li命名為case_list_item是因為這是case_list底下的一組物件
* img本身就是指圖片、h3指的就是第三級的標題、p指的就是內文，這些都是有定義的了，所以就不特別再在class上賦予額外的命名了
* 而綠ul跟li同樣道理，是標籤所以命名為tag_list跟tag_list_item
* 補充：雖然xxx_list_item也可以直接用li，但考慮到有時候css篩選器要是沒有指定好，可能會互相影響格式，所以還是決定加命名比較不會出錯（不然就是CSS篩選器要記得用">"）

---
## 【第三題】小組線上/實體小組討論時間(選作)

### 線上小組討論時間：

約好週四or五晚上8點（視當週情況可能會調整）

### 實體聚會：

會以小組報名參加 6/2(日)的體驗營進修同學會（台北場）