# 洧杰老師訓練菜單

## 第一項：熟悉知識觀念

* 1.1 做當週關卡作業，吸收當週教授觀念
* 1.2 將本週教授內容寫成部落格，以加深程式觀念
* 1.3 自主學習新語法，並寫成筆記

## 第二項：編輯器與 emmet 熱鍵

* 2.1 熟悉三個編輯器熱鍵，[熱鍵中文表](https://github.com/hexschool/VSCode_Hotkey_Translation)
* 2.2 幾乎全程使用 [emmet](https://docs.emmet.io/cheat-sheet/) 來開發
* 2.3 網頁排版縮排
* 2.4 **正式解鎖**請錄影你的寫 Code 流程，並提交到 YouTube，傳給老師與助教檢視。錄影教學([Mac](https://support.apple.com/zh-tw/HT208721)[target=_blank]、[Win](https://hackmd.io/@Albertnotes/HJEOF92dI))
**VS Code 開啟檢視模式 (ctrl+shift+p>toggle screencast mode)**

## 第三項：英打速度

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

## 第四項：語意命名（或外觀命名）
* 命名習慣，盡量採語意設計 (left、box、list1、list2、list3)
* 小駝峰寫法： .menuList、.card-title

## 第五項：SCSS 程式碼管理
* Sass、SCSS 寫法
* import 檔案切分
* 導入 Base、Layout、util、格線系統等概念
* 嘗試 7+1 結構

## 第六項：設計模式導入
* OOCSS：結構與樣式分離、容器與內容分離
* BEM：嘗試寫法

## 第七項：熟練度練習
* 一天內完成：第一~二週
* 兩天內完成：第三週
* 三天內完成：第四週~第五週
* 五天內完成：第六週
* 七天內完成：第八週

* * *

### **任務回報範例一：**

老師、助教們好，Discord 名稱是 liao，這次訓練菜單是：

* 全程用 emmet 練習，不過對 * 的按鍵一直覺得很卡，會再透過 keybr 來練習
* 有寫了一篇[部落格](https://www.google.com/)，也請老師幫我看我的觀念對不對

最後也附上[本週的作業](https://www.google.com/)，還請助教或老師幫我看在理解上是否正確~

### **任務回報範例二：**
報告老師助教們，Discord 名稱是 Jane，週六我和 A 同學一起在 ZOOM 上面寫作業，一寫一下午就結束了哈哈哈，果然團結就是力量大 R~ 附上我的[作業](https://www.google.com.tw/)再請老師助教幫我看下~

### **任務回報範例三：**
老師助教們，我 Discord 名稱是爆炸炸雞，因為剛接觸 HTML、CSS，所以想先把版型排好就好，本來想寫文章記錄，但這週工作比較忙，所以下週再來進行。

作業我放到 [GitHub Pages](https://www.google.com/) 了，再請幫我檢查下~

再請看看我的觀念正不正確，在練習的時候很常打錯英文字，所以想說練習結束後都會再練習 5~10min 的 keybr 來練習