2021直播切版班-第9組

--- title: 2021直播切版班-第9組 | 目錄 tags: 2021直播切版班, 六角 date: 20210702 image: --- 2021直播切版班－第9組 | 目錄 === #### 開會時間 : 每週日晚上八點  ### 每日任務挑戰 - [7/5 ~ 7/16 每日任務挑戰列表](https://hackmd.io/usQ0SFOwREm5ZYRKcIMrDg?view) - [7/19 ~ 7/30 每日任務挑戰列表](https://hackmd.io/yNV7NEpqSfCLN0WzSHBhoA) - [8/2 ~ 8/13 每日任務挑戰列表](https://hackmd.io/gkSqF6cwQbWA8SR5ILjsMQ) - [8/16 ~ 8/27 每日任務挑戰列表](https://hackmd.io/UJpHgHuJSPGTkAUScW4yrg) - [培訓班任務](https://rpg.hexschool.com/training/21/task)[target=_blank] - [網頁切版直播菁英團](https://courses.hexschool.com/courses/951862/lectures/20753023)[target=_blank] ## 每週直播筆記 - [第一週直播筆記](https://hackmd.io/OXIoEzrXSJy_oj_k79obyg) - [第二週直播筆記](https://hackmd.io/P6X6r2_WQ6i4D-b7eFwjrg?view) - [第三週直播筆記](https://hackmd.io/RHxCBaZ8TsizADyVynl8xg?view) - [第四週直播筆記](https://hackmd.io/UFrcZQy6RXqUuhQaeDKxgw) - [第五週直播筆記](https://hackmd.io/Iv0nJLcYTvGeRbmlc--bAA?view) - [第六週直播筆記](https://hackmd.io/uNdja4EZSuyL1087Gd4i0g) - [第七週直播筆記](https://hackmd.io/Ftdx-sG5Qy2u70qvwe2Ngg?view) - [第八週直播筆記](https://hackmd.io/tDq-mIlHSTSxmOSwCGscwQ?view) ## 課外筆記 - [群嘉的技術筆記](https://hackmd.io/@SkT7-27LSWWQi5G2DJBLkw/BkN_IadJF/https%3A%2F%2Fhackmd.io%2FEw8wfij-RIGreoJGskff3Q) - [淺談表格標籤用法](https://hackmd.io/_phMBz-_SRWaGJIIsvDcZg) - [如何套用CKEditor 5 文字編輯器?](https://hackmd.io/t-jXkvksSVKBSoyIUVMH6g?view) - [如何在BS5新增文字的斷點](https://hackmd.io/B2daG0f7QEOCmDp6vc7pvw?view) - [使用ejs設定變數功能，自由設定layout的呈現](https://hackmd.io/hpgYJhKuSve1lGH52bOUrg?view) - [淺談CSS的格線系統](https://hackmd.io/QNHI3tqnTTG7z6t2SN5Jtg?view) - [用jQuery實現滾動動畫](https://hackmd.io/ctiVw0lYScGHjyCqt7D_1Q?both) - [如何移除ios的button原生樣式](https://hackmd.io/QWT2faseQQOFFyrJ8VHvHw?view) - [助教的bs5-fix 修正說明](https://quip.com/e0K5A4xPIfiz)[target=_blank] ## 每週小組討論 - [第一週小組討論](https://hackmd.io/@Zihyin/week1_mission) - [第二週小組討論](https://hackmd.io/EygMAYvMSbq8sTLdgvAqEQ?view) - [第三週小組討論](https://hackmd.io/AHuj1mWLR5qR7k904tlmOw?view) - [第四週小組討論](https://hackmd.io/tpU8K-nVSBubNFpqBBD6kQ?view) - [第五週小組討論](https://hackmd.io/sLYBK-hrRg65Ca94BrHUhQ?view) - [第六週小組討論](https://hackmd.io/sPtGgIWvRda2qMcgAGg54g) - [第七週小組討論](https://hackmd.io/ZZIyhzIyTwOpqWcPH9vLIg?view) - [第八週小組討論](https://hackmd.io/uprkrH2pRRO9dG9DaI5Ulg?view) ## 第一週：1 px 也不差的版型控制術 - [第一週講義與主線](https://hackmd.io/1MxRfwpoRle5MrgU9eIpWA) - [第一週小組任務](https://hackmd.io/tGtPukfZSVehEZtpZgvlcA) - [第一週直播錄影](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://hackmd.io/XbFXMWrmQcqNq3AH5IbyLg) - [第二週小組任務](https://hackmd.io/L_EfoS5aQ8KGJb5rmgCrCQ) - [第二週助教直播](https://courses.hexschool.com/courses/2020112/lectures/33513281)[target=_blank] - [助教直播講義](https://quip.com/5p2iAxU9Jqhk)[target=_blank] - [第二週直播錄影](https://courses.hexschool.com/courses/2020112/lectures/33403851)[target=_blank] :::spoiler **TimeCode** **上半場TimeCode** 01:05 分享螢幕 01:33 講解上次的作業&上屆學長姐心得分享報到 & 講解第二周講義 07:30 志工將同學在slack上面的回饋整理(參考第二週講義) & 第四周Gulp講解 08:45 校長語錄 12:25 flex,float,inline-box,grid排版說明 15:50 flex box教學 16:55 說明第二周講義Flex教學上的測試工具 17:55 flex vs code實作教學 21:21 <1> container容器教學 23:55 語法亂下買保險說法大解密 27:35 <2> flex-direction:row 變動資訊流主軸方向 29:35 flex-direction:row-reverse 30:58 flex-direction:column 31:08 flex-direction:column-reverse 33:40 flex-direction總複習 34:55 <3> justify-content主軸對齊 36:10 justify-content:flex-start/center/flex-end/space-between/space-around 37:55 回答同學問題 38:40 mac & windows電腦分析 41:40 網站範例參考 Apple官網參考 45:25 <4>flex-wrap 讓裡面item的內元件可以從上到下排列 47:42 Taiwancanhelp網站介紹 (區塊分析) & ul li介紹以及display:flex的呈現方式 54:20 中場休息 & 回答同學問題 **下半場Timecode** 1:09:47 <5>Flex教學(下)垂直與水平置中-交錯軸 1:11:33 新軸線-交錯軸解說/主軸與交錯軸關係 1:13:30 交錯軸對齊語法"align-items"/交錯軸置中center"/水平垂直置中 1:14:50 主軸與交錯軸對齊方向觀念講解flex-direction:row/row-reverse/column/column-reverse 1:17:05 實務上常用的軸線對齊方向，資訊流變動時，會更改主軸與交錯軸的起點與終點 1:17:56 主軸/交錯軸模擬測試工具講解、示範 1:19:35 flex-direction重點總結 1:22:23 flex-direction主軸/交錯軸，現學現問 1:24:43 第二週個人任務講解 1:26:54 第二週補充知識背景圖案技巧 1:27:38 每週二助教分享切版心得及流程(會錄影) 1:28:45 勉勵第一週得獎同學，第二週任務送書活動&合格門檻&現學現問 1:31:12 老師出馬改主線 1:32:48 直播錄影位置介紹 1:32:58 第二週送書任務門檻修改為30分鐘內完成 1:33:45 <6>Flex內還可以包Flex 1:34:21 圖解Flex內包Flex觀念，富不過三代 1:37:48 實做Flex內包Flex 1:41:50 Flex內包Flex-現學現問 1:42:33 總複習flex經典作法小測驗/講解 1:48:36 主線任務-現學現問 1:49:41 第二週小組任務講解 1:50:48 第四週補充知識Gulp、GitHub講解及教學影片 1:57:20 Gulp 未學先問 2:00:01 8週課程規劃再次講解/勉勵同學/問題討論 2:05:56 至week2圖片空間抓圖/示範抓圖 2:07:01 img&background-img使用時機 2:16:35 img&background-img現學現問 2:18:00 課後問題討論 ::: ## 第三週：伸縮自如的 RWD 手機網頁排版術 - [第三週講義與主線](https://hackmd.io/lYFK_AxxT2KiDuXlWTaYBw) - [第三週小組任務](https://hackmd.io/_RIZHsygQTOG_MqhEIJwUA) - [第三週助教直播](https://courses.hexschool.com/courses/2020112/lectures/33640912)[target=_blank] - [助教直播講義](https://quip.com/kamtAxk7iJxb/720-2)[target=_blank] - [第三週直播錄影](https://courses.hexschool.com/courses/2020112/lectures/33403911)[target=_blank] ## 第四週：多頁式網頁設計 - [第四週講義與主線](https://hackmd.io/4Ckl8ooyR5W5U87J4_z3nA) - [第四週小組任務](https://hackmd.io/J_5u4CpUSlyZFzpeo1YvkQ) - [第四週直播錄影](https://courses.hexschool.com/courses/2020112/lectures/33698056)[target=_blank] ## 第五週：後台表單設計 - [第五週講義與主線](https://hackmd.io/DH5OKGbfRoarujYZqfaF1Q) - [第五週小組任務](https://hackmd.io/xhBHveD-RrW2VhoXduXmMw) - [第五週助教直播](https://courses.hexschool.com/courses/2020112/lectures/33890743)[target=_blank] - [第五週助教直播講義](https://quip.com/y3OYA9ksxAKb)[target=_blank] - [第五週直播錄影](https://courses.hexschool.com/courses/2020112/lectures/33824713)[target=_blank] ## 第六週：導入網頁規範設計流程 - [第六週講義與主線](https://hackmd.io/3BwobmhTSuWEflfL7G9F5Q) - [第六週小組任務](https://hackmd.io/CwTin4V2RESOwFVe9fjG-g) - [第六週助教直播](https://courses.hexschool.com/courses/2020112/lectures/34026088)[target=_blank] - [第六週助教直播講義](https://quip.com/6UqcAvxsVH9G/810-5)[target=_blank] - [第六週直播錄影](https://courses.hexschool.com/courses/2020112/lectures/33961104) ## 第七週：視差滾動 - [第七週講義與主線](https://hackmd.io/y-raAv5_T_GbNCGcz2UPxA) - [第七週小組任務](https://hackmd.io/nm6wyj9PQOWLSBZtji_cHw) - [第七週直播錄影](https://courses.hexschool.com/courses/2020112/lectures/34105708)[target=_blank] ## 第八週：CSS 模組化管理 - [第八週講義與主線](https://hackmd.io/8yu7iXUuRQGkGMs2aH8DLg) - [第八週小組任務](https://hackmd.io/BsMDV27_QISraWR5rdzMJA) ## 相關連結 - [HackMD 使用教學](https://hackmd.io/s/tutorials-tw) - [markdown語法介紹](https://hackmd.io/@wootu/SkY0M5wsZ?type=view) - [前端工程師開發神器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) - [英打練習網站](https://www.keybr.com/)[target=_blank] - [gulp 環境安裝流程](https://hackmd.io/yWpLNMPRT2yvIR4Zq_idGw?view) - [Material icon Outlined 用法 by Sz](https://hackmd.io/@HexSlicing2021-Team13/materialIcon-outlined) - [本次作業圖片放置](https://github.com/hexschool/webLayoutTraining1st)[target=_blank] - [↑ 如不知怎找到圖片路徑請點](https://i.imgur.com/O7nQcFm.gif) - [Gui Ting Liu 大大的Sass筆記](https://hackmd.io/YcYNPSeaTuuS9x3wB1QjVA?view) - [CSS沒有極限 - 意想不到的background-attachment](https://wcc723.github.io/css/2013/09/25/background-att/) - [網頁切版直播班 Gulp 範例 - 加入 Bootstrap 版本](https://github.com/hexschool/web-layout-training-gulp/tree/feature/bs5)[target=_blank] - [六角-Bootstrap 5 新手教學實戰營](https://youtube.com/playlist?list=PLYrA-SsMvTPOX9oF6ld9RGwWlo7PceI_P)[target=_blank] - [CKEditor 5 文字編輯器 (研究心得)](https://medium.com/@charming_rust_oyster_221/ckeditor-5-%E6%96%87%E5%AD%97%E7%B7%A8%E8%BC%AF%E5%99%A8-%E7%A0%94%E7%A9%B6%E5%BF%83%E5%BE%97-519c97f20a4)[target=_blank] - [洧杰老師批改眼鏡官網 SCSS 評論](https://hackmd.io/48BTVPQVR_y4jq2E0PFHXQ?view) - [[筆記] 如何使用Font Awesome所提供的各種icon](https://pjchender.blogspot.com/2015/04/font-awesomeicon.html) - [[jQuery外掛] jquery.validate 萬用表單檢測器，並可自訂錯誤提示詞](https://www.minwt.com/webdesign-dev/js/21536.html) - [HTML img 也能有 bg-image 的 cover 效果](https://tzuhui.github.io/2020/03/26/CSS/css-object-fit/) - [鼠年全馬鐵人挑戰05 很美很方便的 loading 效果!](https://medium.com/sandra-%E5%B0%8F%E8%8F%9C%E5%B7%A5%E7%A8%8B%E5%B8%AB%EF%BD%98%E5%85%A8%E9%A6%AC%E6%8C%91%E6%88%B0/%E9%BC%A0%E5%B9%B4%E5%85%A8%E9%A6%AC%E9%90%B5%E4%BA%BA%E6%8C%91%E6%88%B005-%E5%BE%88%E7%BE%8E%E5%BE%88%E6%96%B9%E4%BE%BF%E7%9A%84-loading-%E6%95%88%E6%9E%9C-3011126cf599)[target=_blank] - [CSS 筆記 - Loader 的使用](https://hsuchihting.github.io/css/20200711/1366382220/)[target=_blank] - [只懂前端也可以做出能線上傳送的表單](https://medium.com/misa-design-%E5%A0%AF%E8%88%9C%E8%A8%AD%E8%A8%88/%E5%8F%AA%E6%87%82%E5%89%8D%E7%AB%AF%E4%B9%9F%E5%8F%AF%E4%BB%A5%E5%81%9A%E5%87%BA%E8%83%BD%E7%B7%9A%E4%B8%8A%E5%82%B3%E9%80%81%E7%9A%84%E8%A1%A8%E5%96%AE-6dc735c57bd6) - [如何製作「聯絡我們」網頁表單](https://medium.com/@AntheaLee/%E5%A6%82%E4%BD%95%E8%A3%BD%E4%BD%9C-%E8%81%AF%E7%B5%A1%E6%88%91%E5%80%91-%E7%B6%B2%E9%A0%81%E8%A1%A8%E5%96%AE-3df78756ec81)[target=_blank] - [Bootstrap 5 如何客製化自己的樣式](https://easonchang0115.github.io/blogs/other/2021/20210530_1.html#scss-%E8%AE%8A%E6%95%B8%E6%96%B0%E5%A2%9E%E4%BF%AE%E6%94%B9) - [轉生到 CKEditor 5 世界](https://kentclark.notion.site/CKEditor-5-342747d76c584919bb5d1ed872ba48f6) - [從零開始的MVC開發-使用bootstrap的datetimepicker](https://ithelp.ithome.com.tw/articles/10188890)[target=_blank] - [客製modal寬度+modal圖片自適應寬高](https://ambiguous-mat-a8d.notion.site/modal-modal-70836c1ed4f642bab498cc03b5eb11bc)[target=_blank] - [RatioBuddy算高寬比的方便網站](https://ratiobuddy.com/)

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.