---
tags: 軟體工程師體驗營 - 2023
---

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

## 開課提醒
1. 錄影
3. 將[書籤](https://rpg.hexschool.com/training/35/show)加入最愛
4. [每日任務講解](https://rpg.hexschool.com/training/35/show?embedhm=R7Q2AZtAQ9igsCdWhVXeyw)
5. 講解[主線任務](https://rpg.hexschool.com/training/35/task)

## 編輯器小技巧

- 調整字體大小(preference>settings>Editor: Font Size)
- 熱鍵：ctrl 按住後，按 + 跟 -
- 調整背景顏色(preference>settings>color theme)
- 視窗等高方法(View>Word Wrap)
- emmet 練習([字典](https://docs.emmet.io/cheat-sheet/)、範例影片
- [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) 瀏覽器除錯，再來寫程式

## 練習英打
* 透過 [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 分鐘內做完或者練習 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/1089725529608966176/1103288146264854559) 上回報：「我做完三遍了~附上最新的 YouTube 網址 與 codepen 網址，覺得自己做得好的地方、還可以改善的三個細節」
VSCode 需開啟 toggle screenshot 觀看熱鍵模式
https://www.tenlong.com.tw/products/9789864348824?list_name=lv