---
# System prepended metadata

title: 軟體工程師體驗營第 38 組 - 第 2 週討論區
tags: [2024軟體工程師體驗營第38組, 2024軟體工程師體驗營, 六角學院, 體驗營]

---

# 軟體工程師體驗營 第38組 --- 第 2 週討論區 

###### tags: `2024 軟體工程師體驗營` `體驗營` `六角學院`

<!-- 報到請在預留的報到欄位中複製貼上 :heavy_check_mark: 打勾圖示 -->

|        報 到        |         組員名單           | 
|         --         |      ---------------      | 
| :heavy_check_mark: | (報到範例) |
| :heavy_check_mark: | 2_fish |
| :heavy_check_mark: | candyman_518008 |
|  | maomao_70615 |
|  :heavy_check_mark:  | ranran416 | 
|  :heavy_check_mark:| boying7909 | 
|  :heavy_check_mark: | kawa3310 | 
|  | oria7403 | 
|  | ikpolo | 
|  | s40911120 |
|  | text07523 |
| :heavy_check_mark:|tzhengliin|



### 小組討論
- 使用 discord 討論串討論本周問題點

- 使用 discord 語音討論 
<!--  ![](https://i.imgur.com/) -->




## 問題

### 第一題：共同提交[切版任務作業一 - AI 工具王 - 產品優勢卡片設計](https://rpg.hexschool.com/#/training/12062289980032551059/board/content/12062289980032551060_12062289980032551074)
1. 大家約時間線上 discord、Google meet 討論， 1hr 分享彼此做的方式
2. 提交任務後，在你的[小組](https://rpg.hexschool.com/training/35/show?embed=https://docs.google.com/spreadsheets/d/10Bwkx7T8Pv0Hx8n-8_2SPkqM-ZNHufv7v9YLsW5OgzI/edit#gid=982233007)勾 v，下週來 pk 看哪個小組多

<!-- :heavy_check_mark: -->
| 切板完成           | 組員名單        | 程式分享 |
| ------------------ | --------------- |:--------:|
| :heavy_check_mark: | 2_fish          |          |
| :heavy_check_mark: | candyman_518008 |          |
|                    | maomao_70615    |          |
| :heavy_check_mark: | ranran416       |          |
| :heavy_check_mark: | boying7909      |          |
| :heavy_check_mark: | kawa3310        |          |
|                    | oria7403        |          |
|                    | ikpolo          |          |
|                    | s40911120       |          |
|                    | text07523       |          |
| :heavy_check_mark: | tzhengliin      |  [Link](https://codepen.io/tzhengliin/pen/MWdggNX)  |



### 第二題 Flex 精神時光屋(選做)

觀看 [Flex 影音](https://courses.hexschool.com/courses/d9be03111/lectures/52651237)，與組員們一起完成 [10 題 Flex 題目](https://courses.hexschool.com/courses/d9be03111/lectures/52651242)。
完成後可以參考[檢核點](https://courses.hexschool.com/courses/d9be03111/lectures/52651244)來修正常見問題。


#### flex-grow
討論如何使同欄位的Card相同高度
（因為若Card內之文字行數不同，會導致高度不一致）
![](https://hackmd.io/_uploads/HywF6aoNn.png)
![](https://hackmd.io/_uploads/SkdT6TsV3.png)



![](https://hackmd.io/_uploads/HkSdTaoE3.png)
1.ul寬度限制
2.圖片寬度設定
3.flex-grow的問題
4.jcsb外容器的問題


## 額外知識點補充

### 正規表達式
**[正規表達式入門(01)：從基礎到應用](https://medium.com/p/f029e98f6e6)**

### 原子化CSS(Atomic css)
**[Tailwind](https://tailwindcss.com)**

**[Windi](https://cn.windicss.org/guide/)**



### 網格系統
**flex 版本**
![](https://hackmd.io/_uploads/rJV08J2Nn.png)
![](https://hackmd.io/_uploads/r1wpFTJS3.png)


---

**grid 版本**
grid-template-columns: repeat(4, minmax(0, 1fr));
![](https://hackmd.io/_uploads/BJkd8khV2.png)



---

![](https://hackmd.io/_uploads/r1gYcTJB2.png)
bootstrap5: **col-3** **col-3** **col-3** **col-3**
tailwind: **grid** **gird-col-4**

---
### 第二次開會時間
> 討論時間：103.05.12
> ![sgfdgg](https://hackmd.io/_uploads/H1F5kQRz0.png)


<!-- ![image] -->

---
> 謝謝大家參與！