---
# System prepended metadata

title: 2024 軟體工程師體驗營 70 組 - 第 3 週討論區

---

# 軟體工程師體驗營 70 組 - 第 3 週討論區

`2024 軟體工程師體驗營` `體驗營` `六角學院`
> 討論時間：5/19/2024

| 組員名單                | 報到 | 
| ---------------        | -- | 
| Abu                 |  |
| Benno               |  :heavy_check_mark:|
| Colby191            | |
| HsuaN               |  :heavy_check_mark:| 
| Puling              |  | 
| Qi-Hua (aka Emily)  |  | 
| Zoe                 | :heavy_check_mark:| 
| ZZ                  | :heavy_check_mark: | 

![討論紀錄](https://i.imgur.com/0XIq6t5.jpeg)


## 問題

### 第一題 證書任務合作無間！！週三洧杰針對各組程式碼提供講解

各組員針對「切版任務作業二 - 個人品牌網站」的**作品集頁面**進行各區塊的認領，並提交各組員被認領到的 codepen 設計。

例如：

1. 表頭：HsuaN
2. banner：Benno
3. 作品集頁面：Zoe
4. 表尾：ZZ

大家先各自做設計圖上的切版和RWD，還有時間再繼續擴充做整個頁面。

| discore ID |  作品集區塊 | 其他頁面|
|------------|---------------------|---------|
| Abu |  |     |
| Benno   |  [Codepen](https://codepen.io/cx3576888/pen/mdYEKpP?editors=1100)                       |            |    |
| Colby191 |                       |            |    |
|HsuaN    | [Codepen](https://codepen.io/Ming13-H-/pen/QWRyXyP)                       |            |    |
| Puling  |                       |            |    |
| Qi-Hua (aka Emily)  |                          |            |    |
| Zoe       | [Codepen]()                        |            |    |
| ZZ  |   [Codepen](https://codepen.io/Yong-Shao/pen/xxNZyMV)                      |            |    |




### 第二題：是否參加實體發表會
* 實體同學會：6/1(台中、高雄)、6/2(台北)
* 線上：5/19 20:00、6/5 20:00

| 組員名單                | 報到 | 
| ---------------        | -- | 
| Abu                 |  :heavy_check_mark:|
| Benno               |  |
| Colby191            | |
| HsuaN               |  :heavy_check_mark:| 
| Puling              |  | 
| Qi-Hua (aka Emily)  |  | 
| Zoe                 | 線上| 
| ZZ                  | :heavy_check_mark: | 



### 討論筆記
- svg 向量圖檔 vs jpeg/png 點陣圖檔
- LOGO、表頭的四角方框、聯絡方式的icon圖檔是否適合使用svg格式
- svg field的填色方式
- 頁面1,2,3 & 聯絡方式判斷為滑鼠滑過去的變色特效
- html 標籤 :hr <hr></hr> 可畫底線(如示範)
- 實務上，banner這種複雜的文字與效果應會請UI直接出圖而不會是前端工程師切版
- margin 4個選項時代表上右下左；3個選項是上右左；2個選項是(上下)(左右)
- : focus 與hover類似，皆為滑鼠動作後會有的效果css
- 討論是否有機會用flex切完整個網頁，極少數再用padding和margin推出空間
- RWD漢堡參考[每日任務教學](https://hackmd.io/8Z_LG18pRy69miRyWX6ymQ?both)
- 漢堡的呈現，需在Stuff for head以及JS另外導入設定
- header hover參考[每日任務教學](https://hackmd.io/wj_Q0WDvTfiInn3C4ihGyQ)
- banner裝飾參考[任務一](https://hackmd.io/UuTe1k1MQM6diu4ykljVpw?both) 、 [任務二](https://hackmd.io/2U3xMNKcT7KvM6Z_UgMwIQ)
