---
tags: 公益程式體驗營 - 2022
---

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

## 開課提醒
1. 錄影
2. 點名，[報到](https://rpg.hexschool.com/training/29/calendar) Code：`tkjYE2g2kzJN`
3. 將[書籤](https://rpg.hexschool.com/training/29/show)加入最愛
4. [每日任務講解](https://rpg.hexschool.com/training/29/show?embedhm=nEwo83VERxqT4Sab3l0v7g)
5. 講解[主線任務](https://rpg.hexschool.com/training/29/task)

## 編輯器小技巧

- 調整字體大小(preference>settings>Editor: Font Size)
- 熱鍵：ctrl 按住後，按 + 跟 -
- 調整背景顏色(preference>settings>color theme)
- 視窗等高方法(View>Word Wrap)
- emmet 練習([字典](https://docs.emmet.io/cheat-sheet/)、範例影片
- [Figma 線上標示文件操作](https://www.figma.com/file/Yo8m2rXe3OLqcAWZ3sOck9/%E5%85%AD%E8%A7%92_%E8%BB%9F%E9%AB%94?node-id=39-627&t=SYGVqZSFjjDE68ym-0)

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

## 練習英打
* 透過 [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：這個切版要多快才有到業界水準

## 證書任務一講解

* [切版任務作業一 - AI 工具王 - 產品優勢卡片設計](https://rpg.hexschool.com/task/342/show)

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

<!-- 第 20 遍 兩小時以內 -->
如果你有在 30 分鐘內做完，錄製 YouTube，就送 CSS 書，請錄影你的寫 Code 流程，並提交到 YouTube，傳給老師與助教檢視。錄影教學([Mac](https://support.apple.com/zh-tw/HT208721)、[Win](https://hackmd.io/@Albertnotes/HJEOF92dI))

請在 discord 大廳 tag 洧杰老師說：「我做完了~附上 YouTube 網址 與 codepen 網址」
VSCode 需開啟 toggle screenshot 觀看熱鍵模式
https://www.tenlong.com.tw/products/9789864348824?list_name=lv