# 前端學習筆記 第一週進度
###### tags: `大專院校前端體驗營 2021 夏季` `六角學院` `心得日記`

## 第一週

### 學習心得、重點
#### 重點
1. 每週報到，學習到**設定目標**與**預估**達成目標所**花費時間**。
2. **emmet英打**練習(速度20~29)、**pixel perfect kata**練習
3. 圖片**display:block;**，設為區塊元素，讓留白消失
4. padding、margin、line-height寬高問題
5. **container**容器概念
6. **區塊**元素跟**行內**元素

#### 心得
> 第一次參加這個活動前，剛好因為疫情，全校改為線上上課，而伴隨期末考，六角3月有給體驗營參加前的課程及作業，好好的把第一份做完，但後續因課業及時間分配問題，可惜後續兩個作業沒好好的上完，本來以為完成一份作業，資格可能沒有了，但意外六角給了機會，7月初成功進入這個體驗營，代表無論作業是否完美做完，有做有交總比沒有好，先求有再求好。

> 7/5成功進入後，發現此活動相比2020的活動人數少上許多，可能之前200人，而這次40人這樣，而得知用意是為了專注將課程教好，相比之前活動，我們基礎多上很多，~~雖然沒看完影片會擔心~~，~~還有忘光的問題~~，但是原本為期2個月的課程轉變成1個月，代表我們活動從3月就開始培訓，結束7月底這樣，雖然這樣顯然比較好，但是可惜了先前未學到的知識，而開始了這次的課程。

>這週一的上課內容為**1px也不差的版型控制術**，主要除了適應六角的學習生態以外，複習了emmet跟學會練功菜單中的英打跟小駝峰語意命名，還有emmet一行寫出的pixel perfect kata，最後就是這週的大Boss個人履歷製作，直播中學到盒模型`padding`、`margin`的計算以外，還學到`line-height`會影響字的高度，也學會用`container`適當的做滿版跟版面置中，最後就是圖片設定`display:block;`，才不會多出2~3px的留白，才能達到1px也不差。

---

### 學習重點[ 內容主題 ]

#### 報到
> 每週一到五固定早上9:00，助教會在slack上面放上每日簽到區，
> 讓我們早上可以先確認自己的目標，檢視學習消化的成果。

> 藉由預期學習=>設定目標
> 預計花費時間=>大部分都是3~6hr，但可以用計時器去計算每個任務所花費時間。
> 昨天學到=>可以了解自身是否達成目標
> 過程優化=>知道怎麼去讓自己更進步，並找尋解決方法

![image alt](https://i.imgur.com/lx2t4BD.png "title" =300x400)
> 看到上面很多人報到，並正在努力一起學習，可以增加更多動力。

---

#### emmet英打練習(速度20~29)
> 早些日子在高職最初學的就是打字，而歷經當時的狀況，我的英打慘不忍睹，
> 曾被老師酸過，而學會背快捷鍵來提升速度，當時大概落在12~15以下，
> 只學會了盲打要靠著FJ，相較於中打，對於打字速度這個劣勢，從大學就很想改變了。

>接著幸運的事，剛好課程配合emmet需要練習，~~順便可以當背單字工具~~，雖然一開始可能練一下就三分鐘熱度，但是這是體驗營裏頭，唯一我進步最有成就的。

>而第一週，我先不練習盲打，習慣英打並把emmet題庫打完，雖然不是照著靠FJ提升速度，但是培養習慣做一件事，才能讓後續更進步，而最初結果不像圖片一樣，第一週大概落在20~29上下，這週也學習到如何去使用keybr.com這項工具。

![image alt](https://i.imgur.com/d5txGSq.png "title" =200x200) 第一週的三分鐘熱度

---

#### pixel perfect kata練習

---

### 7/5(一)

#### 任務清單:
1. slack第一次報到
2. 觀看teachable影片
3. 每周一直播上課
4. 每日任務

### 7/6(二)

#### 任務清單:
1. slack報到
2. 每日任務
3. 觀看teachable影片

### 7/7(三)

#### 任務清單:
1. slack報到
2. 每日任務
3. 觀看teachable影片
4. 小組任務
5. 個人履歷html部分

#### 小組任務
[第一周任務](https://hackmd.io/YZg-eYCUTl2xOYnDXCJpkg)

[作業最終成果](https://hackmd.io/@steve5631/SJY0flmTd#%E7%AC%AC%E4%BA%8C%E9%A1%8C-%E9%81%B8%E6%93%87%E9%A1%8C)

[人格測驗](https://www.16personalities.com/ch/infj-%E4%BA%BA%E6%A0%BC)

##### 本人未完成未了解題目:
1. 第六題
[參考他人](https://codepen.io/liao/pen/qBOWPea?editors=1100)
[自己未完成](https://codepen.io/chiaoshin/pen/rNmeyZE?editors=1100)

2. 第七題

---

### 7/8(四)

#### 任務清單:
1. slack報到
2. 每日任務
3. 觀看teachable影片
4. 個人履歷css部分

#### 第一周主線任務:
[解決的問題1](https://autoposter.pixnet.net/blog/post/116853389-img%E5%9C%96%E7%89%87%E4%B9%8B%E9%96%93%E7%9A%84%E9%96%93%E8%B7%9D%E5%95%8F%E9%A1%8C)
[解決的問題2](https://andy6804tw.github.io/2017/12/19/css-margin-space/)
##### 本人未完成未了解題目:

---

### 7/9(五)

#### 任務清單:
1. slack報到
2. 每日任務
3. 觀看teachable影片
4. 個人履歷css部分細節

---

找穎旻助教或校長聊實習狀況