# 切版直播班 - 開學典禮 ![image](https://hackmd.io/_uploads/r1iGpqXVlx.png) 今天介紹的是網頁切版直播班 --- 1. 錄影 2. 點名 3. 將[書籤](https://rpg.hexschool.com/#/training/12062289980086964008/board)加入到最愛 4. 覆述本課宗旨 4. 主要內容 1. 講師自我介紹 2. 覆述本課宗旨 3. **學習進度安排** ## 關於卡斯伯老師 - 六角學院共同創辦人 - 大學美術系、研究所為視覺傳達設計所 - 求學期間為設計師，出社會轉為工程師，因為工程師錢比較多 ⭕ - 前鴻海軟體工程師（~~棄百萬年薪創辦六角學院~~） - 七屆 IT 鐵人邦獲選紀錄（一個很肝的學習紀錄） - 出版一本書（JavaScript 求職必備） 另外...，把 CSS 練到神級的那個人 - 我寫過超過 100 篇 CSS 技術文 - 翻譯過 Bootstrap 文件 - 建構過兩次 CSS 函式庫 - 切版速度大致是...https://pse.is/DBJGW ## 宗旨 我們相信分享能帶來成長，所以在六角學院，我們用熱情、耐心和同理心陪著學員一起學習前端。除了教你寫出好看的網頁，也會陪你一起思考職涯方向，打造對你有幫助的學習環境。 ## 願景 **成為全世界最優質的切版直播班教育單位** ## 義務與責任 1. 我們會帶著每位同學，一起練好 CSS 和 JavaScript，讓技術學得紮實。 2. 一個班的學習氣氛很重要，我們會用心經營，讓大家有目標、有動力，一起往前走。 3. 每個人的起點不一樣，我們會根據大家的背景，設計循序漸進的課程內容。 4. 課程會設計一個一個小目標，讓你清楚知道下一步要做什麼，也更有成就感地學會整門課的技能。 ## 六角社群特質 - 分享 - 溝通 - 好奇 ## 本課程進行方式及進度安排 ### 平台介紹 1. **程式勇者村** - 提交任務 - 上課講義 2. **Teachable** - 影音課程 - 直播錄影 - 小節作業 3. **Discord** - 即時提問 - 程式交流 ## 課程包含服務： ### 課程預習 1. [影音課程](https://courses.hexschool.com/courses/enrolled/2762668) 1. 助教發問服務 ### 主線內容 1. [直播課程](https://rpg.hexschool.com/#/training/12062817613307865587/board/content/12062817613307865599_12062817613307865601) 1. 最後一堂課 8/8（五） 2. [每週主線任務](https://rpg.hexschool.com/#/training/12062817613307865587/board/content/12062817613307865588_12062817613307865609) 1. 助教批改服務 2. LV 機制 3. 最終作業繳交期限：8/24 3. 助教帶你做作業 🆕 1. 時間：直播課程結束後的每週六早上九點，每次約 2 小時 2. 包含週數：第一堂～第八堂作業 4. 作業頻道發問 1. [範例](https://discord.com/channels/801807326054055996/1362240479785128057) 2. 新增 - 暗樁：如果沒有回覆的，助教會出現回覆～～ ### 額外挑戰 - [每日任務](https://hackmd.io/NOSfirdTS3-LOThJdaSkfQ?view) ### 額外挑戰 - AAPD X 六角 設計前端產品研發營 1. 研發營說明：同學報名且審核通過後，會與 AAPD 設計師學生隨機配對，每組配對到一份設計稿，依照設計稿完成網站或是手機 APP。 2. 研發營報名條件：必需在報名截止前完成**第四堂課程「多頁式網頁設計」(7/18) 的作業 ，等級需達到 LV 2 且需包含首頁**，並通過助教審核。 3. 研發營關鍵時程： - 8/1 (五) 至 8/7 (四) 報名期間 - 8/8 (五) 公布報名＆分組配對結果 - 8/12 (二) 線上開營典禮 (20:00-21:00)＆拿到設計稿 - *AAPD 學生交付設計稿的時間是 8/10 - 8/12，最晚 8/12 會拿到* - 8/24 (日) 切版直播班作業繳交截止日 - 8/31 (日) 完成研發營切初版 - 9/21 (日) 線上成果發表 4. 補充資訊： - 每組 3 ~ 4 人，一人需完成至少 2 頁設計稿 - 作品為響應式靜態網頁，不涉及後端資料庫 - 作品開發完成後將於 GitHub Pages 上線（免費） - 可以獲得設計稿授權與展示作品的權利 - 開發期間會透過 Discord 與 AAPD 的設計師學生來回討論 ## 該如何分配學習時間？ > LV1：每週十小時 1. 課程預習 2. 主線課程輸出 > LV2：每週 15 小時以上 1. 增加額外練習及挑戰 2. 提高主線輸出的 LV ## 作業卡關怎麼辦？ > 卡斯伯原則：不要讓進度卡住，有狀況可以參考各種解方 解決方案：當一個地方卡住超過十分鐘，就可… 1. 作業討論頻道發問 2. 觀看助教撰寫方式 3. 觀看別人寫完的成果 好的參考方式： 1. 自己照著打一次，並試著理解語法 2. 加上每一個段落的註解 3. 參考自己寫的成果，再重新寫一次 *注意：參考不意味著抄襲* ## 該如何開始準備？ 1. **提升熟練度**： 1. 課前最終任務一、二練習 2. Kata：錄影自己的開發流程、記住常用的語法熱鍵 2. **各週難度介紹**：每日與主線任務設計，四、六、八堂作業皆為一個檻 - 提交等級概念 1. LV1：任選兩頁含 RWD 2. LV2（80、100%獎品門檻）：至少做兩頁含 RWD，其中一頁必須為首頁 3. LV3：全部頁面都做，不需做jQ與 BS5 JS 效果 1. LV4：全部效果都做 ## 主線課程大綱 **第一堂：1 px 也不差的版型控制術** 在排版時，常常為了幾 px 的位移或跑版而傷透腦筋嗎？其實只要掌握幾個關鍵知識，你也能切出精準到位的版型！ 7/2（三）20:00~22:30，2.5 小時 **第二堂：Flexbox 網頁排版術** 李小龍說過：「我不害怕曾經練過一萬種踢法的人，但我害怕一種踢法練過一萬次的人」，網頁排版擁有 float、inline-block、flexbox、grid 流派，但是你真的有認真將一個流派專精到讓人會怕嗎？本週題目我們將會詳細講解 Flexbox，並藉由後面幾週的反覆練習，讓您成為 Flexbox 的切版專家！ 7/4（五）20:00~22:30，2.5 小時 **第三堂：伸縮自如的 RWD 手機網頁排版術** 行動裝置這麼多，你的網頁在 全部螢幕解析度都支援嗎？還是你只會下 一個 手機版 media query，而 中間的 size 都忽略了？其實 RWD 沒你想像中的複雜，讓我們來教會你！ 7/11（五）20:00~22:30，2.5 小時 **第四堂：多頁式網頁設計** 去面試時準備的作品，永遠只有一頁個人介紹網站嗎？頁面一多就不知道該怎麼管理你的 CSS 了？這堂課我們將會分享心法與工具，讓你頁面再多也不怕！ 7/18（五）20:00~22:30，2.5 小時 **第五堂：後台表單設計** 一個完美的前台，一定會有個維護方便的管理後台方便上稿，也同時會是你與後端工程師協作時，必須要會的版型設計！ 7/25（五）20:00~22:30，2.5 小時 **第六堂：導入網頁規範設計流程** 當你頁面數量不是 3~5 頁，而是 30~50 頁以上，該如何制訂規範，讓產出的網頁都能模組化輸出，進以提升效率，也是網頁設計師需考量的一環！ 8/1（五）20:00~22:30，2.5 小時 **第七堂：視差滾動** 現在網頁已經擺脫中規中矩排版，我們能藉由簡易的 JS 套件，讓自己的網頁具有動感，設計出具備視差滾動技巧的優美網站！ 8/6（三）20:00~22:30，2.5 小時 **第八堂：CSS 模組化管理** 一個成熟的前端介面，不論是版型管理、語法支援度、元件應用都得顧及到位，本週將會詳細介紹各角度的技術詮釋，以做為完美的收尾。 8/8（五）20:00~22:30，2.5 小時 ## 各週需要的知識點 說明文件：https://hackmd.io/1unuaLHzStmyXfZiCmKHJQ # 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/ 內容訂閱網站 - 14 頁面 https://www.figma.com/design/zpJK5cEuejmXdd2Dyth3PC/2024-%E5%88%87%E7%89%88%E7%9B%B4%E6%92%AD%E7%8F%AD-W6---%E5%85%A7%E5%AE%B9%E8%A8%82%E9%96%B1%E7%B6%B2%E7%AB%99 線上課程網站 - 18 頁面 https://www.figma.com/design/Dw2s5UO0VnMz587q1k1ytp/%E5%85%AD%E8%A7%92%EF%BD%9CLearning----%E7%B7%9A%E4%B8%8A%E8%AA%B2%E7%A8%8B%E7%B6%B2%E7%AB%99 各版型圖片連結： - 大型寵物服務網 → [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) - 內容訂閱網站 → [2024-week6](https://github.com/hexschool/2022-web-layout-training/tree/main/2024-week6) - 線上課程網站 → [week8-learning](https://github.com/hexschool/2022-web-layout-training/tree/main/week8-learning)