---
# System prepended metadata

title: 第一週小組任務 | 2021程式體驗營 Team20
tags: [2021 程式體驗營 team20]

---

---
tags:  2021 程式體驗營 team20
---
# 第一週小組任務 | 2021程式體驗營 Team20

---
### 第一題 心理測驗
請做此[心理測驗](https://www.16personalities.com/ch)，分享自己的[測驗結果](https://www.16personalities.com/ch/%E7%B1%BB%E5%9E%8B%E6%8F%8F%E8%BF%B0)給您的組員。


### 第二題 觀察影片

請觀察此[影片連結](https://www.youtube.com/watch?v=yHLFbaUbyF4)，看看洧杰老師的寫 Code 流程中，有哪些熱鍵、編輯器操作、程式碼語法是你原本不會的，然後被你偷學到哪些知識點。

---

## 小組討論
* 國家隊第20組 
參與組員：Yu Shiuan Chang, A-Lu, li li, yurie
教學影片觀看心得：

>

> **HTML:**
> 1.用ul li 來切資訊一列一列的版
> 2.練Emmet 
> ![](https://i.imgur.com/ta0Pmqn.png)
> ![](https://i.imgur.com/5OtCOou.png)
> 3.vsCode一次改多列(按alt+shift選取行數)
> **CSS:**
> 1.可先把會用到很多的padding和margin類別寫好，避免一直重複寫
> 2.類別命名要看得懂有意義[name=Yu Shiuan Chang 分享][color=#8a00d4]

>**HTML**
>1.在做html的時候直接把相應的css命名&class放好，並對尚未寫出的css建立副稿
>2.適時收折內容使思緒清晰
>3.alt是會被語音讀出的，所以輸入內容時要考慮閱讀性，英文字需正常斷開
>4.設計稿1920px基本上就是以滿版製作，不要寫1920
>5.emmet:ul.method>li*5，喔帥
> .container出現 div class="container"></div也是帥
>**CSS**
>1.開始之前充分觀察設計稿中的慣用間距、顏色、文字尺寸等，確認可以共用與必>須獨立客製化的部分，(很多設計師會用8的倍數為慣用間距)
>2.常用margin尺寸可以單獨寫成一套css樣式，然後在html中取用
>例如mb-1~mb-9，然後
>![](https://i.imgur.com/CKTGGu3.png)
>(這邊我才知道原來一個class可以用不只一個css樣式，中間以空白鍵隔開)
>3.emmet:bb=border-bottom: 1px solid #000;帥。
>4.margin因為重疊邊界原則，所以不會累加，而是以最深的為主
>![](https://i.imgur.com/hva5Tig.png)
>  [name=A-Lu 分享][color=#d527b7] 

>
>極速切版教學影片對我起了激勵作用。看到老師熟練的切版示範，很是讚嘆XD。原來切版可以這麼順、這麼開心。整理筆記如下﹔
>
>**Html**
>img標籤內的alt="考慮視障人士所添加的照片描述"，是barrier-free design的實踐。
>
>先反白第一個標籤，按ctrl+D 便可一併修改下一個同樣的標籤，若需更改2個以上同類型標籤的內容，就依數量多按數次ctrl+D
>
>使用chrome的dev tool來測試code有否渲染成功
>
>**Emmet示範**
>h2.subTitle>{個人資料}+span{PROFILE
>ul>li*2
>ul>li*2
>.className
>h2.subTitle.subTitle-white
>ul.skill-content>li*7
>ul>li*5>h3
>ul.method>li*5
>
>**CSS**
>起手式: 引入css.reset檔
>
>bootstrap 已有使用 normalize.css，因此不需再加入 CSS Reset 設定
>
>接著按照剛才觀察到的pattern來寫樣式
>
>寫個 .block{display:block; 給圖片用
>
>為了調整間距，可以先寫幾個常用樣式(以8相乘) 這邊寫一些margin-bottom底部下推，之後視需要加進html裡 
.mb-1{margin-bottom:8px;} 
.mb-2{margin-bottom:16px;} 
.mb-3{margin-bottom:24px;} 
.mb-6{margin-bottom:48px;} 
.mb-9{margin-bottom:72px;} 
>
>margin有重疊邊界的特性，達成累加邊界的設定。預設是以最大值覆蓋掉較小值，不累加。
>
>再為全部文字寫個 body{font-size:24px; line-height:36px;}
>
>標題Joanne Chen 套用 .title{font-size:80px; line-height:94px; padding-bottom:16px; border-bottom: 2px sold #000;}
>
> 接著調位置，達成置中效果 .container{width:1200px; margin:0 auto; }
> 
>.darkblue因為是滿版，不用特別設定寬度，其最外層是<body>，會以螢幕解析度去做自適應延伸。
>
>**Adobe xd線上文件使用技巧**
> 1. 點選元素後，按住 alt再點其他元素便可顯示距離。
> 2. 點擊內容欄位中的文字就可以複製整段文字，貼上後要微調，ex:加入斷行tag
> 3. 行距未必是元素上標示的高度，設定行高以右方標示為主
> 4. 線條這類元素，太細很難點到，可以放大再點選
> 5. 寬1920px是接近滿版設計
> [name=li li 分享][color=#ff4d4d]



>**HTML**
> 1. ul,li的運用: 當有相同內容重複的項目時使用
> 2. 外層容器的設定(container,darkblue)
>[color=#ffff4d]
**CSS**
> 1. margin,padding 以八的倍數分別設定樣式，分別給樣式保持彈性
> [color=#ffff4d]
```css=1
.mb-1 {
    margin-bottom: 8px;
}
.mb-2 {
    margin-bottom: 16px;
}
.pd-4 {
    padding-top: 32;
}
```
:baby_chick:
> 2. margin特性 重疊邊界 當有重複設定的時候會以較長的為主
> 3. 文字大小以及行距設定
>[color=#ffff4d]
```css=1
.body {
    font-size: 24px;
    line-height: 36px;
}
```
:baby_chick: 

> 4. 在原有樣式的基礎下， 再新增一個樣式標籤客製化 subTitle-white 
> [color=#ffff4d]
:::info
**emmet 語法**
- bb=border-bottom
- m0-a=margin: o auto;
:::
>[name=yurie 分享][color=#ffff4d]
>
>

---

↓ 心理測驗 討論內容截圖

![](https://i.imgur.com/eloFzQ7.png)
![](https://i.imgur.com/ndgj8cG.png)
![](https://i.imgur.com/zuJ5Uix.png)
