2021直播切版班-22組 | 目錄

--- title: 2021直播切版班-22組 | 目錄 tags: 2021直播切版班, 六角 date: 20210702 image: --- # 🔥🔥🔥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://hackmd.io/@hexschool/Hky7SSslY) - [第八週小組任務](https://hackmd.io/@hexschool/S1zheUogK)  ## 🔗 相關連結 - [各種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/)

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.