# 第一週 - 打造最強前端開發環境

## 開課提醒
1. 錄影
3. 將[書籤](https://rpg.hexschool.com/#/training/12062289980032551059/board)加入最愛
4. [每日任務講解](https://rpg.hexschool.com/#/training/12062289980032551059/board/content/12062289980032551062_12062289980032551079)
5. 講解[主線任務](https://rpg.hexschool.com/#/training/12062289980032551059/board/content/12062289980032551060_12062289980032551075)
6. 感謝志工協助讓體驗營運作可以更順暢！

## 補給後來上車同學開學典禮

1. [5/5(日) 21:00 直播網址](https://www.youtube.com/watch?v=1bcZIVa-ejY)

## 編輯器小技巧

- 調整字體大小(preference>settings>Editor: Font Size)
- 熱鍵：ctrl 按住後，按 + 跟 -
- 調整背景顏色(preference>settings>color theme)
- 視窗等高方法(View>Word Wrap)
- emmet 練習([字典](https://docs.emmet.io/cheat-sheet/)、範例影片)
<!-- https://www.youtube.com/watch?v=tFvFMncRYYM&t=55s -->
- [Figma 線上標示文件操作](https://hackmd.io/Ub7JWeQ1TJS2ZtwQF5BoSw)
- Wrap with abbreviation

## 洧杰老師開發習慣分享
1. 不急著切版，先觀察是否有[共通樣式](https://gonsakon.notion.site/Flex-74fe54de51b34c1e92b0fd7f9699c92b)
2. 先畫出草圖，將結構拉出來，也可以用 outline 作法
3. 配置編輯器介面
4. 要先開發 HTML，還是先開發 CSS？
5. 開雙欄介面，多善用 [Chrome](https://courses.hexschool.com/p/chrome) 瀏覽器除錯，再來寫程式

## 中場休息

1. [小組任務(包含揪團)](https://rpg.hexschool.com/#/training/12062289980032551059/board/content/12062289980032551063_12062289980032551082)
2. 講解[主線任務](https://rpg.hexschool.com/#/training/12062289980032551059/board/content/12062289980032551060_12062289980032551075)

## 練習英打
* 透過 [keybr.com](http://keybr.com/) 練習英打，[教學影片](https://www.youtube.com/playlist?list=PLYrA-SsMvTPOxjOi9BvWLJcbGLULH-uQF)
* 刻意練習 [emmet](https://www.youtube.com/watch?v=l6iWMjlK2YU&list=PLYrA-SsMvTPOxjOi9BvWLJcbGLULH-uQF&index=7&t=0s) 與常見英文命名鍵位，[程式碼片段](https://github.com/hexschool/EmmetPractice)

## 常見 QA

Q：這個切版要多快才有到業界水準

## 證書任務一講解

* [切版任務作業一 - 個人品牌網站 - 開發經驗卡片設計](https://rpg.hexschool.com/#/training/12062289980032551059/board/content/12062289980032551060_12062289980032551075?tid=12062289980032979514)

1. 60% ：五個完成三個任務 - 拿新手證書
2. 100%：拿鐵人證書

## 彩蛋任務 - 抽 3 本書獎品

<!-- 第 20 遍 兩小時以內 -->
如果你有在 30 分鐘內做完或者練習 5 遍(只錄製前面半小時)，可以參考洧杰老師的，也可以自行規劃 HTML 標籤結構，錄製 YouTube，就送 CSS 書，請錄影你的寫 Code 流程，並提交到 YouTube，傳給老師與助教檢視。錄影教學([Mac](https://support.apple.com/zh-tw/HT208721)、[Win](https://hackmd.io/@Albertnotes/HJEOF92dI))

請在 [discord](https://discord.com/channels/801807326054055996/1224582074305085481/1234931819770544281) 上回報：「我做完三遍了~附上最新的 YouTube 網址 與 codepen 網址，覺得自己做得好的地方、還可以改善的三個細節」
VSCode 需開啟 toggle screenshot 觀看熱鍵模式
https://www.tenlong.com.tw/products/9789864348824?list_name=lv

### 送三本
明天中午 12 點前，上傳的 YouTube 前 3位我送書！！！<<<< 需審核