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

## 開課提醒
1. 錄影
3. 將[書籤](https://rpg.hexschool.com/#/training/12062817613289895665/board)加入最愛
4. 課堂上有問題，可到此[第一堂討論區](https://discord.com/channels/801807326054055996/1349590145891958785/1366994180299296809)提問

## 編輯器小技巧

- 調整字體大小(preference>settings>Editor: Font Size)
- 熱鍵：ctrl 按住後，按 + 跟 -
- 調整背景顏色(preference>settings>color theme[色彩布景主題])
<!-- - 視窗等高方法(View>Word Wrap) -->

## HTML、CSS 教學
1. 新增 index.html、all.css
2. 新增 h1、p、a、img、ul、li、div(下禮拜會教)
3. emmet 練習([字典](https://docs.emmet.io/cheat-sheet/)、[範例影片](https://www.youtube.com/watch?v=tFvFMncRYYM&t=55s))

## 網站練習
1. [OOPO 官網](https://www.oppo.com/cn/smartphones/series-find-x/find-x8-ultra/)
2. [Yahoo 商城](https://tw.buy.yahoo.com/gdsale/gdsale.asp?gdid=8907168)
3. [Yahoo 新聞](https://tw.sports.yahoo.com/news/nba-%E5%85%AC%E9%B9%BF%E5%AE%A3%E5%B8%83%E5%99%A9%E8%80%97-%E5%88%A9%E6%8B%89%E5%BE%B7%E7%A2%BA%E5%AE%9A%E5%B7%A6%E8%85%B3%E9%98%BF%E5%9F%BA%E9%87%8C%E6%96%AF%E8%85%B1%E6%92%95%E8%A3%82-233057133.html)
4. [WebConf 技術研討會官網](https://webconf.tw/speakers)

## 洧杰老師開發習慣分享
1. 配置編輯器介面 - Live Server
2. 要先開發 HTML，還是先開發 CSS？
3. 開雙欄介面，多善用 [Chrome](https://courses.hexschool.com/p/chrome) 瀏覽器除錯，再來寫程式

<!-- 1. 不急著切版，先觀察是否有[共通樣式](https://gonsakon.notion.site/Flex-74fe54de51b34c1e92b0fd7f9699c92b)
2. 先畫出草圖，將結構拉出來，也可以用 outline 作法 -->

## 中場休息
1. 分享實體同學會資訊(適合之後想進修的學員)，也會有線上場
* **參加門檻**： 有提交這兩份業 - [1. HTML 標籤教學 - 小節作業](https://courses.hexschool.com/courses/2755478/lectures/60491321)、[2. CSS - 使用 CSS 變更 HTML 標籤特性 - 小節作業](https://courses.hexschool.com/courses/2755478/lectures/60491306)
* **報名時間**：下週三 21:30 開放 Google 表單報名
* **活動時間**：
* 5/24 (六) 下午：台中、高雄（洧杰、卡斯伯）
* 5/25 (日) 下午：台北（洧杰）
<img src="https://hackmd.io/_uploads/SJbmTQt6Jx.jpg" width="500" >

> 建議接下來有進修規劃的學生報名，會分享六角未來會開的 9 個月培訓課

## 接下來的訓練菜單：練習英打
* 透過 [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)

# 21 天打卡學習計畫

1. **[參加辦法](https://hackmd.io/oEK98c9OT8aGNsonBbgzmg?view)**

> 新手可先嘗試作切版任務就可以

## 小任務

如果你有在 5 分鐘內做完[Flex 切版任務 - 部落格文章卡片設計](https://rpg.hexschool.com/#/training/12062817613289895665/board/content/12062817613289895666_12062817613289895682?tid=12062817613290016875) 的 HTML 標籤 emmet 練習 。也可嘗試錄影教學([Mac](https://support.apple.com/zh-tw/HT208721)、[Win](https://hackmd.io/@Albertnotes/HJEOF92dI))，並上傳 YouTube

## 接下來課程建議學習方向
1. 最難的你們已經做到了，猜猜是什麼？
2. **做作業**： [HTML 標籤教學 - 小節作業](https://courses.hexschool.com/courses/2755478/lectures/60491321)
3. **做作業**：[CSS - 使用 CSS 變更 HTML 標籤特性 - 小節作業](https://courses.hexschool.com/courses/2755478/lectures/60491306)
4. **提升語感**：[每日任務](https://discord.com/channels/801807326054055996/1349590197708525638)的切版主題
5. **做作業**：[Flex 小節作業](https://courses.hexschool.com/courses/2755478/lectures/60491335) - 第二堂上課前建議預習內容
6. **過任務**： [Flex 切版任務 - 部落格文章卡片設計](https://rpg.hexschool.com/#/training/12062817613289895665/board/content/12062817613289895666_12062817613289895682?tid=12062817613290016875)任務
7. **做作業**：[Sass/SCSS 小節作業](https://courses.hexschool.com/courses/2755478/lectures/60491398) - 第三堂上課前建議預習內容
8. **跟直播**：跟上第四堂直播課【CSS3 + JS 網頁動畫效果】
9. **嘗試挑戰**：[最終任務 - 個人品牌網站 - LV1](https://rpg.hexschool.com/#/training/12062817613289895665/board/content/12062817613289895666_12062817613289895682?tid=12062817613290018192)
10. **跟直播**：跟上第五堂直播課【全攻略：網站服務整合一條龍】
11. **部署網站**：將自己做的網頁部署到網站空間，提交[最終任務 - 個人品牌網站 - LV1](https://rpg.hexschool.com/#/training/12062817613289895665/board/content/12062817613289895666_12062817613289895682?tid=12062817613290018192)任務
12. **領取證書**：6/8(日)前提交，助教批改完後，6/20（五）統一提供證書

## 證書條件

1. 鐵人完賽證書（100%證書）：「完成報到 + 心得牆 + flex 切版 + 最終任務方可獲得證書」
2. 新手證書（50% 證書）：完成至少兩個任務，其中一個為最終任務 LV1。