# 切版直播班 - 開學典禮 ![image](https://hackmd.io/_uploads/HyVWeBFU0.png) 今天介紹的是網頁切版直播班 > 切版**專題**班開學典禮為：7/3 20:00 --- 1. 錄影 2. 點名 3. 將[書籤](https://rpg.hexschool.com/#/training/12062289980086964008/board)加入到最愛 4. 主要內容 1. 講師自我介紹 2. 覆述本課宗旨 3. **學習進度安排** 8. 加碼服務介紹，[申請小組分組](https://forms.gle/rh8H16PVytEHg44J8)，7/5(三) 分組完畢！ ## 關於卡斯伯老師 - 六角學院共同創辦人 - 大學美術系、研究所為視覺傳達設計所 - 求學期間為設計師，出社會轉為工程師，因為工程師錢比較多 ⭕ - 前鴻海軟體工程師（~~棄百萬年薪創辦六角學院~~） - 七屆 IT 鐵人邦獲選紀錄（一個很肝的學習紀錄） - 出版一本書（JavaScript 求職必備） 另外...，把 CSS 練到神級的那個人 - 我寫過超過 100 篇 CSS 技術文 - 翻譯過 Bootstrap 文件 - 建構過兩次 CSS 函式庫 - 切版速度大致是...https://pse.is/DBJGW ## 宗旨 秉持六角學院熱於分享的精神，秉持熱心、耐心、同理心為根基，不僅帶領學員掌握前端技術，並提供以學員職涯發展為中心的教學環境。 ## 願景 **成為全世界最優質的切版直播班教育單位** ## 義務與責任 1. 六角團隊有責任帶領每位學員，體驗 CSS、JS 技能 2. 六角團隊有義務帶領整體班級，凝聚班級向心力，藉由同濟效應提升學習意願 3. 六角團隊必須考量每位學員的背景，由淺入深地規劃課程內容 4. 六角團隊需為學員設計階段性目標，讓學員能一步步完成任務，進以掌握本門課程技能 ## 六角社群特質 - 分享 - 溝通 - 好奇 ## 本課程進行方式及進度安排 ### 平台介紹 1. **程式勇者村** - 提交任務 - 上課講義 2. **Teachable** - 影音課程 - 直播錄影 - 小節作業 3. **Discord** - 即時提問 - 程式交流 ### 課程包含服務： **課程預習** 1. [影音課程](https://courses.hexschool.com/courses/enrolled/2522456) 1. 助教發問服務 **主線內容** 1. [直播課程](https://rpg.hexschool.com/#/training/12062289980086964008/board/content/12062289980086964020_12062289980086964022) 1. 最後一堂課 8/23 2. [每週主線任務](https://rpg.hexschool.com/#/training/12062289980086964008/board/content/12062289980086964009_12062289980086964028) 1. 助教批改服務 2. LV 機制 3. 最終作業繳交期限：9/8 4. 最後一週額外說明： 1. 可選自己繳交或分組（可採用專題的組別或自行另外組隊） 3. 助教帶你做作業 🆕 1. 時間：直播課程結束後的每週六早上十點，每次約 2 小時 2. 包含週數：第一週～第八週作業 4. 線上助教服務 1. [範例](https://discord.com/channels/801807326054055996/1166205673307127919/1215599897118515291) 2. 出場時間：7/29 ~ 9/6 **額外挑戰** 1. [每日任務](https://hackmd.io/NOSfirdTS3-LOThJdaSkfQ?view) 2. [每週團隊任務](https://hackmd.io/HzKf8bfxToSQsqMEUMYS2w) ### 該如何分配學習時間？ > LV1：每週十小時 > 1. 課程預習 2. 主線課程輸出 > LV2：每週 15 小時以上 > 1. 增加額外練習及挑戰 2. 提高主線輸出的 LV ### 作業卡關怎麼辦？ > 卡斯伯原則：不要讓進度卡住，有狀況可以參考各種解方 > 解決方案：當一個地方卡住超過十分鐘，就可… 1. 作業討論頻道發問 2. 觀看助教撰寫方式 3. 觀看別人寫完的成果 好的參考方式： 1. 自己照著打一次，並試著理解語法 2. 加上每一個段落的註解 3. 參考自己寫的成果，再重新寫一次 *注意：參考不意味著抄襲* ### 該如何開始準備？ 1. **提升熟練度**：參考 [洧杰老師菜單](https://hackmd.io/p_HZVDaqQwW5hpdymZBT5Q) 1. 課前最終任務一、二練習 2. Kata：錄影自己的開發流程、記住常用的語法熱鍵 2. **各週難度介紹**：每日與主線任務設計，四、六、八週作業皆為一個檻 - 提交等級概念 - LV1：任選兩頁含 RWD - LV2：至少做兩頁含 RWD，其中一頁必須為首頁 - LV3：全部頁面都做，不需做jQ與 BS5 JS 效果 - LV4：全部效果都做 ### 主線課程大綱 **第一週：1 px 也不差的版型控制術** 在排版時，常常為了幾 px 的位移或跑版而傷透腦筋嗎？其實只要掌握幾個關鍵知識，你也能切出精準到位的版型！ 2024/7/5（五）20:00~22:30，2.5 小時 **第二週：Flexbox 網頁排版術** 李小龍說過：「我不害怕曾經練過一萬種踢法的人，但我害怕一種踢法練過一萬次的人」，網頁排版擁有 float、inline-block、flexbox、grid 流派，但是你真的有認真將一個流派專精到讓人會怕嗎？本週題目我們將會詳細講解 Flexbox，並藉由後面幾週的反覆練習，讓您成為 Flexbox 的切版專家！ 2024/7/12（五）20:00~22:30，2.5 小時 **第三週：伸縮自如的 RWD 手機網頁排版術** 行動裝置這麼多，你的網頁在 全部螢幕解析度都支援嗎？還是你只會下 一個 手機版 media query，而 中間的 size 都忽略了？其實 RWD 沒你想像中的複雜，讓我們來教會你！ 2024/7/19（五）20:00~22:30，2.5 小時 **第四週：多頁式網頁設計** 去面試時準備的作品，永遠只有一頁個人介紹網站嗎？頁面一多就不知道該怎麼管理你的 CSS 了？這堂課我們將會分享心法與工具，讓你頁面再多也不怕！ 2024/7/26（五）20:00~22:30，2.5 小時 **第五週：後台表單設計** 一個完美的前台，一定會有個維護方便的管理後台方便上稿，也同時會是你與後端工程師協作時，必須要會的版型設計！ 2024/8/2（五）20:00~22:30，2.5 小時 **第六週：導入網頁規範設計流程** 當你頁面數量不是 3~5 頁，而是 30~50 頁以上，該如何制訂規範，讓產出的網頁都能模組化輸出，進以提升效率，也是網頁設計師需考量的一環！ 2024/8/9（五）20:00~22:30，2.5 小時 **第七週：視差滾動** 現在網頁已經擺脫中規中矩排版，我們能藉由簡易的 JS 套件，讓自己的網頁具有動感，設計出具備視差滾動技巧的優美網站！ 2024/8/16（五）20:00~22:30，2.5 小時 **第八週：CSS 模組化管理** 一個成熟的前端介面，不論是版型管理、語法支援度、元件應用都得顧及到位，本週將會詳細介紹各角度的技術詮釋，以做為完美的收尾。 2024/8/23（五）20:00~22:30，2.5 小時 ### 各週需要的知識點 說明文件：https://hackmd.io/nbeCZwX_TUCx9gSdDaVX-A # 8 份版型贈送 大型寵物服務網 - 29 頁 https://xd.adobe.com/view/2c355bc0-1368-4995-b20d-9882992c75b0-7966/screen/69b72d39-0e8e-4849-96a2-617108c70de1/ 大型訂房網 - 26 頁 https://xd.adobe.com/view/0cf6ec93-07a3-492f-58f2-9767ba1cfdfb-7ac7/ 瑜珈課程服務 - 31 頁 https://xd.adobe.com/view/ddcefee3-3028-48a2-8840-4d3ba00e8807-889d/screen/c0ededf0-68d6-462d-ba14-acf05aaff801/ NFT 藝術家交易平台 - 20 頁 https://xd.adobe.com/view/bcf8f7eb-689c-4850-b531-a78259c0cdd8-e9ab/grid/ 藝術展覽 - 17 頁 https://xd.adobe.com/view/057f9d4e-6781-43fe-9aea-9f73f67dd2fd-502c/ 香水電商 - 17 頁 https://xd.adobe.com/view/dc5ebe5c-3e56-4981-a010-158b5ded0e72-890d/ 陶瓷展品 - 18 頁 https://xd.adobe.com/view/b251d34b-5ec0-4978-7793-0fd19c2eaad1-c460/ 程式家教 - 17 頁面 https://xd.adobe.com/view/ec5c5da0-6d93-4e78-bd3b-c8e9584fde44-b90f/screen/8abe4f5e-6bcf-4391-b323-d4fb37b1509a/ 各版型圖片連結： - 大型寵物服務網 → [week8-petpet](https://github.com/hexschool/2022-web-layout-training/tree/main/week8-petpet) - 大型訂房網 → [week8-booking](https://github.com/hexschool/2022-web-layout-training/tree/main/week8-booking) - 瑜珈課程服務 → [week8-yoga](https://github.com/hexschool/2022-web-layout-training/tree/main/week8-yoga) - NFT 藝術家交易平台 → [week8-202207](https://github.com/hexschool/2022-web-layout-training/tree/main/week8-202207) - 藝術展覽 → [exhibition-week6](https://github.com/hexschool/webLayoutTraining1st/tree/master/exhibition-week6) - 香水電商 → [perfume-week6](https://github.com/hexschool/webLayoutTraining1st/tree/master/perfume-week6) - 陶瓷展品 → [week6](https://github.com/hexschool/webLayoutTraining1st/tree/master/week6) - 程式家教 → [week6-202207](https://github.com/hexschool/2022-web-layout-training/tree/main/week6-202207)