# 🔥🔥🔥2021直播切版班-22組🐰 | 目錄
## 📖 課程資訊
- [小組基本資訊](https://hackmd.io/@Aguaaa/preface)
- [👍線上Slack助教問答集](https://hackmd.io/@hexschool/r1E6nDcud/https%3A%2F%2Fhackmd.io%2FFVOnr3KfRYmCrhEwu5NNKg)[target=_blank]
- [👍直播班協作筆記](https://hackmd.io/@YmcMgo-NSKOqgTGAjl_5tg/HJpJk8ABU/https%3A%2F%2Fhackmd.io%2F8-8d2YbtSXS5Z-WSyFJruw%3Fboth#%E6%96%B7%E9%BB%9E%E8%A6%8F%E5%8A%83%E5%A4%A7%E7%B6%B2%E7%AB%99%E8%A8%AD%E8%A8%88%E7%AF%84%E4%BE%8B)[target=_blank]
- [分組表單-任務回報打☑處](https://docs.google.com/spreadsheets/d/1bDay0hqxz9ORU-eFzKn_efTX7Ud_wvXumhETCliASAs/edit?usp=sharing)
## 🏅 每日任務挑戰
- [📽jQuery基礎教學](https://www.youtube.com/watch?v=GVWOIP-HX70&ab_channel=%E5%85%AD%E8%A7%92%E5%AD%B8%E9%99%A2)
- [7/5 ~ 7/16 每日任務挑戰列表](https://hackmd.io/usQ0SFOwREm5ZYRKcIMrDg?view)
- [7/19 ~ 7/30 每日任務挑戰列表](https://hackmd.io/@hexschool/H1CZ-Iqud)
- [8/2 ~ 8/13 每日任務挑戰列表](https://hackmd.io/@hexschool/ByWa-Ucdd)
- [8/16 ~ 8/27 每日任務挑戰列表](https://hackmd.io/@hexschool/BkqjGL9Ou)
## 💬 每週小組討論
- [✅第一週小組討論](https://hackmd.io/@Aguaaa/week1_mission)
- [✅第二週小組討論](https://hackmd.io/@Aguaaa/week2_mission)
- [✅第三週小組討論](https://hackmd.io/@Aguaaa/week3_mission)
- [✏努力中-第四週小組討論](https://hackmd.io/@Aguaaa/week4_mission)
- [✏努力中-第五週小組討論](https://hackmd.io/@Aguaaa/week5_mission)
- [✏努力中-第六週小組討論](https://hackmd.io/@Aguaaa/week6_mission)
- [✏努力中-第七週小組討論](https://hackmd.io/@Aguaaa/week7_mission)
- [第八週小組討論](https://hackmd.io/@Aguaaa/week8_mission)
## 第一週：1 px 也不差的版型控制術
- [第一週小組任務](https://hackmd.io/tGtPukfZSVehEZtpZgvlcA)
- [第一週直播筆記](https://hackmd.io/OXIoEzrXSJy_oj_k79obyg)
- [第一週直播錄影](https://courses.hexschool.com/courses/2020112/lectures/33332225)[target=_blank]
:::spoiler **TimeCode**
**上半場TimeCode**
0:00 環境建立
5:52 運用Emmet
8:53 Emmet學長姊操作示範
12:00 插件安裝
13:20 說明容器觀念
24:15 說明區塊和行內元素
31:40 提問講解
40:50 說明css reset 與normalize的差異
49:50 說明行距設定
1:02:43 圖片距離分享
1:07:30 提問講解
**下半場TimeCode**
0:00 中場休息閒聊
5:10 說明盒模型概念與應用
7:40 介紹主線任務
8:40 pixel perfect kata
11:15 什麼是kata?
16:35 校長示範-pixel perfect kata
20:30 回到主線任務
22:20 介紹小組任務
23:40 說明滿版式網頁設計
31:38 提問與講解
40:20 說明寫網站常見問題
45:10 建議每週主線任務之規劃
54:43 如何承接與回報任務?
57:30 勇者挑戰送書活動!
1:00:15 說明練功菜單
:::
## 第二週：Flexbox 網頁排版術
- [🎁助教直播：第二週內容](https://courses.hexschool.com/courses/2020112/lectures/33513281)[target=_blank]
- [🎁助教講義：第二週](https://quip.com/5p2iAxU9Jqhk/713-)
- [第二週補充知識：background](https://courses.hexschool.com/courses/2020112/lectures/31938339)[target=_blank]
- [第二週講義與主線](https://hackmd.io/XbFXMWrmQcqNq3AH5IbyLg)
- [第二週小組任務](https://hackmd.io/L_EfoS5aQ8KGJb5rmgCrCQ)
- [第二週直播錄影](https://courses.hexschool.com/courses/2020112/lectures/33403851)[target=_blank]
## 第三週：伸縮自如的 RWD 手機網頁排版術
- [🎁助教直播：第三週內容](https://courses.hexschool.com/courses/2020112/lectures/33640912)[target=_blank]
- [🎁助教講義：第三週](https://quip.com/kamtAxk7iJxb/720-2)
- [第三週講義與主線](https://hackmd.io/@hexschool/rJNtWj0pu)
- [第三週小組任務](https://hackmd.io/_RIZHsygQTOG_MqhEIJwUA)
- [第三週直播錄影(上下)](https://courses.hexschool.com/courses/2020112/lectures/33403911)[target=_blank]
## 第四週：多頁式網頁設計
- [🎁助教直播：第四週內容](https://courses.hexschool.com/courses/2020112/lectures/33757274)[target=_blank]
- [🎁助教講義：第四週](https://quip.com/0qRWAmQ5gsvf/727-3)
- [第四週補充-Gulp&GitHub](https://hackmd.io/@hexschool/B16wUku0O)
- [第四週講義與主線](https://hackmd.io/@hexschool/SJWLbAwRd)
- [第四週小組任務](https://hackmd.io/@hexschool/B16wUku0O)
- [第四週直播錄影(上中下)](https://courses.hexschool.com/courses/2020112/lectures/33698056)[target=_blank]
## 第五週：後台表單設計
- [🎁助教直播：第五週內容](https://courses.hexschool.com/courses/2020112/lectures/33890743)[target=_blank]
- [🎁助教講義：第五週](https://quip.com/y3OYA9ksxAKb/83-4)
- [第五週講義與主線](https://hackmd.io/@hexschool/BkBp_n11Y)
- [第五週小組任務](https://hackmd.io/@hexschool/SJhMRhyJY)
- [第五週直播錄影(上下)](https://courses.hexschool.com/courses/2020112/lectures/33824713)[target=_blank]
## 第六週：導入網頁規範設計流程
- [🎁助教直播：第六週內容](https://courses.hexschool.com/courses/2020112/lectures/34026088)[target=_blank]
- [🎁助教講義：第六週](https://quip.com/6UqcAvxsVH9G/810-5) -->
- [第六週講義與主線](https://hackmd.io/@hexschool/HJYAxvqkF)
- [第六週小組任務](https://hackmd.io/@hexschool/ryCw9D91Y)
- [第六週直播錄影(上下)](https://courses.hexschool.com/courses/2020112/lectures/33961104)[target=_blank]
## 第七週：視差滾動
- [🎁助教直播：第七週內容](https://courses.hexschool.com/courses/2020112/lectures/34160679)[target=_blank]
- [第七週講義與主線](https://hackmd.io/@hexschool/ryEWjgzet)
- [第七週小組任務](https://hackmd.io/@hexschool/r1IX2eGeY)
- [第七週直播錄影(上下)](https://courses.hexschool.com/courses/2020112/lectures/34105708)[target=_blank]
## 第八週：CSS 模組化管理
<!--
- [🎁助教直播：第八週內容](https://courses.hexschool.com/courses/2020112/lectures/33890743)[target=_blank]
- [🎁助教講義：第八週](https://quip.com/y3OYA9ksxAKb/83-4) -->
- [第八週講義與主線](https://hackmd.io/@hexschool/Hky7SSslY)
- [第八週小組任務](https://hackmd.io/@hexschool/S1zheUogK)
<!-- - [第八週直播錄影(上下)](https://courses.hexschool.com/courses/2020112/lectures/33824713)[target=_blank] -->
## 🔗 相關連結
- [各種Web語法都查得到還有模擬器](
https://developer.mozilla.org/en-US/)
- [Flex青蛙：遊戲式學習多種Flex語法](https://flexboxfroggy.com/#zh-tw)
- [Flex測試工具](https://codepen.io/peiqun/pen/WYzzYX)
- [圖片上傳](https://imgur.com/a/ueaWcVn)
- [英打練習網站](https://www.keybr.com/)
- [CSSReset](https://meyerweb.com/eric/tools/css/reset/)
- [Snippet Generator](https://pjchender.blogspot.com/2017/04/vs-code-snippet.html)(VSCode自訂程式碼片段功能)
- [VSCode根據視窗大小自動換行](https://medium.com/@l0418ya26/visual-studio-code-%E8%87%AA%E5%8B%95%E6%8F%9B%E8%A1%8C%E8%A8%AD%E5%AE%9A%E6%95%99%E5%AD%B8-35c0732bb83e)
- [前端工程師開發神器Emmet基礎教學-有效減少寫HTML/CSS的時間](https://www.tedu.tw/blog/basic-emmet-tutorial-for-web-frontend-developer-newbies.html)
- [老師的筆記 - Flex 切版任務待精進](https://www.notion.so/Flex-74fe54de51b34c1e92b0fd7f9699c92b)[target=_blank]
- [Google font 載入教學](/bvLKze7nRU6kOa2jZxXDIg)
- [codepen](https://codepen.io/)
- [HackMD](https://hackmd.io/)
{"metaMigratedAt":"2023-06-16T04:00:22.455Z","metaMigratedFrom":"YAML","title":"2021直播切版班-22組 | 目錄","breaks":true,"contributors":"[{\"id\":\"b84a6557-499d-4de0-963c-d34d6ffd54ff\",\"add\":8599,\"del\":2653}]"}