---
# System prepended metadata

title: 第一週支線待辦 by Sz
tags: [Sz, 練功菜單, 2021夏季切版班, 第一週]

---

# 第一週支線待辦 by Sz
###### tags: `Sz` `第一週` `練功菜單` `2021夏季切版班` 


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

- [x] 做當週關卡作業，吸收當週教授觀念


    - [x] [第一週切版直播筆記 by Sz](/jMfUgs9jRd-9rXGixnRnwA)
    - [x] kata 17 遍 `5min`
    - [x] Joanne HTML `25min`
        - [x] 第五遍 `2hr`


<!-- - [ ] 約組員一起寫作業，2人成團，一人寫 40 min 後交換 -->
<!-- - [ ] 將本週教授內容寫成部落格，以加深程式觀念
    - [ ] 想等 git 摸個大概後開始研究 -->
- [x] 自主學習新語法，並寫成筆記


    - [x] [快捷鍵 by Sz](/03Axid_CRiy582T5UwnEzg)
        - [x] vs
        - [x] emmet
        - [x] 終端機
            - [x] cd
            - [x] touch


<!--     - [ ] Git（讀到一半下週再整理）
        - [ ] git init
        - [ ] git add
        - [ ] git status
        - [ ] git commit -m '<版本資訊>'
        - [ ] git log 
        - [ ] 遠端
            - [ ] git remote add <遠端數據庫暱稱> <該網址>
            - [ ] git push -u <遠端數據庫暱稱> <分支>
            - [ ] git clone <該網址> -->

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

- [x] 熟悉三個編輯器熱鍵，[熱鍵中文表](https://github.com/hexschool/VSCode_Hotkey_Translation)
    - [x] wrap with abbreviation -> 自訂 `cmd + shift + a`
    - [ ] Select item -> 自訂 `opt + shift + , and .` （沒有很常用到）
    - [x] merge line -> 直接用 `cmd + shift + P` 輸入
- [x] 幾乎全程使用 [emmet](https://docs.emmet.io/cheat-sheet/) 來開發
- [x] 網頁排版縮排
    - [x] ![](https://i.imgur.com/Yoe5UoY.png)
- [x] 錄影寫 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)**
    - [x] 開啟之後再來練一次 

## 第三項：英打速度

- [x] 透過 [keybr.com](http://keybr.com/) 練習英打
    - [x] `15min`![](https://i.imgur.com/aBOs5J5.png)
    - [x] `12min`：感覺這段對我比較有幫助（錯字王）![](https://i.imgur.com/5uDbKnV.png)
    ![](https://i.imgur.com/XWPSRpi.png)

    - [x] `12min`![](https://i.imgur.com/5NYxioj.png)


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

## 第四項：語意命名
- [x] 命名習慣，盡量採語意設計 (left、box、list1、list2、list3)
- [ ] 小駝峰寫法： .menuList、.card-title


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


## 第六項：設計模式導入
- [x] OOCSS：結構與樣式分離、容器與內容分離
    - [x] 小組作業第六第七題
    - [x] kata
    - [x] Joanne
        -  分不太出來什麼時候要 util 化
- [x] BEM：嘗試寫法
    - Joanne 裡面試了一下，還沒有掌握到的感覺

## 第七項：熟練度練習
- [x] 一天內完成：第一~二週
    - Joanne `2hr`
    - kata `3min`
- [ ] 兩天內完成：第三週
- [ ] 三天內完成：第四週~第五週
- [ ] 五天內完成：第六週
- [ ] 七天內完成：第八週





