洧杰老師訓練菜單

第一項：熟悉知識觀念

  • 1.1 做當週關卡作業，吸收當週教授觀念
  • 1.2 約組員一起寫作業，2人成團，一人寫 40 min 後交換
  • 1.3 將本週教授內容寫成部落格，以加深程式觀念
  • 1.4 自主學習新語法，並寫成筆記

第二項：編輯器與 emmet 熱鍵

  • 2.1 熟悉三個編輯器熱鍵，熱鍵中文表
  • 2.2 幾乎全程使用 emmet 來開發
  • 2.3 網頁排版縮排
  • 2.4 正式解鎖請錄影你的寫 Code 流程，並提交到 YouTube，傳給老師與助教檢視。錄影教學(Mac[target=_blank]、Win)
    VS Code 開啟檢視模式 (ctrl+shift+p>toggle screencast mode)

第三項：英打速度

第四項：語意命名

  • 命名習慣，盡量採語意設計 (left、box、list1、list2、list3)
  • 小駝峰寫法： .menuList、.card-title

第五項：SCSS 程式碼管理

  • Sass、SCSS 寫法
  • import 檔案切分
  • 導入 Base、Layout、util、格線系統等概念
  • 嘗試 7+1 結構

第六項：設計模式導入

  • OOCSS：結構與樣式分離、容器與內容分離
  • BEM：嘗試寫法

第七項：熟練度練習

  • 一天內完成：第一~二週
  • 兩天內完成：第三週
  • 三天內完成：第四週~第五週
  • 五天內完成：第六週
  • 七天內完成：第八週

任務回報範例一：

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

  • 全程用 emmet 練習，不過對 * 的按鍵一直覺得很卡，會再透過 keybr 來練習
  • 有寫了一篇部落格，也請老師幫我看我的觀念對不對

最後也附上本週的作業，還請助教或老師幫我看在理解上是否正確~

任務回報範例二：

報告老師助教們，Slack 名稱是 Jane，週六我和 A 同學一起在 ZOOM 上面寫作業，一寫一下午就結束了哈哈哈，果然團結就是力量大 R~ 附上我的作業再請老師助教幫我看下~

任務回報範例三：

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

作業我放到 GitHub Pages 了，再請幫我檢查下~

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

Select a repo