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

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

## 開課提醒
1. 講解[主線任務](https://www.figma.com/file/QX2q4kdSfrwueCioAoTvwA/%E5%85%AD%E8%A7%92%EF%BD%9C2024-%E9%AB%94%E9%A9%97%E7%87%9F%E8%A8%AD%E8%A8%88%E7%A8%BF?type=design&node-id=202-2&mode=design&t=bwhNDvCAz14yJ9aF-0)

## 編輯器小技巧

- 調整字體大小(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)、[UI 設計稿](https://www.figma.com/file/QX2q4kdSfrwueCioAoTvwA/六角｜2024-體驗營設計稿?type=design&node-id=202%3A2&mode=design&t=5p53Qp7E6ZphmPfo-1)
- 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：這個切版要多快才有到業界水準