本課程提供影音教學、實況直播課程、每日任務與每週主線作業，搭配業界水準的 UI 設計稿，循序漸進地幫助您掌握網頁開發技能。除了豐富的線上學習資源，您還可加入專屬 Discord 學習社群，與同儕互動交流，獲得實時協助與建議。
不論您是跨領域新手還是經驗老道，網頁切版直播班絕對精進網頁開發技能的最佳課程。現在就加入我們，開啟職涯新頁吧！
課程直播時間：7/5 ～ 8/23 每週五晚上八點
作品製作時間：7/5 ~ 10/18
預習課程：報名後即可獲得
地點：純線上
讓我們來培訓你，這堂課要帶你做出好作品！
自學切版的過程充滿許多盲點。學習者不清楚要花多長時間才能達到標準水準，也不知該投入哪些資源才是有效的。即便付出再多努力，如果方向錯誤，最終仍可能無法達成預期成效。
這堂課程中，我們將提供系統性的教學資源，一步步帶您掌握網頁切版技巧！
課程中包含：
- 網頁切版直播班
- 30 小時的課程預習影音
- 8 堂直播教學
- 額外 8 堂作業解說
- 總共超過 50 小時的影音教學資源
- 8 個業界熱門主題設計稿，頁面數量超過 20 頁
- 1 張學習小卡
- 切版專題班：
- 1 式首頁 UI 專題設計稿（每組別獨立設計）
- 課程期間包含團隊一對一專題教練諮詢
- 每週兩個時段的線上助教
- 專題教練引導團隊完成獨立作品
- 包含一次上機考測驗
網頁切版直播班的課程大綱
第一週：1 px 也不差的版型控制術
在排版時，常常為了幾 px 的位移或跑版而傷透腦筋嗎？其實只要掌握幾個關鍵知識，你也能切出精準到位的版型！
作品主題：履歷設計
教學關鍵字：盒模型、line-height 與垂直空間、display 狀態、CSS 實務選擇器技巧、圖文排版技巧
7/5（五）20:00~22:30，2.5 小時
第二週：Flexbox 網頁排版術
李小龍說過：「我不害怕曾經練過一萬種踢法的人，但我害怕一種踢法練過一萬次的人」，網頁排版擁有 float、inline-block、flexbox、grid 流派，但是你真的有認真將一個流派專精到讓人會怕嗎？本週題目我們將會詳細講解 Flexbox，並藉由後面幾週的反覆練習，讓您成為 Flexbox 的切版專家！
作品主題：個人網站
教學關鍵字：Flexbox 排版技巧、水平與垂直置中、常見版型教學
7/12（五）20:00~22:30，2.5 小時
第三週：伸縮自如的 RWD 手機網頁排版術
行動裝置這麼多，你的網頁在全部螢幕解析度都支援嗎？還是你只會下一個手機版 media query，而 中間的 size 都忽略了？其實 RWD 沒你想像中的複雜，讓我們來教會你！
作品主題：RWD 形象官網
教學關鍵字：media query、SCSS 、使用者體驗、表單設計
7/19（五）20:00~22:30，2.5 小時
第四週：多頁式網頁設計
去面試時準備的作品，永遠只有一頁個人介紹網站嗎？頁面一多就不知道該怎麼管理你的 CSS 了？這堂課我們將會分享心法與工具，讓你頁面再多也不怕！
作品主題：多頁式 RWD 形象官網
教學關鍵字：Vite、多頁設計、SCSS 管理、layout 版型規劃
7/26（五）20:00~22:30，2.5 小時
第五週：後台表單設計
一個完美的前台，一定會有個維護方便的管理後台方便上稿，也同時會是你與後端工程師協作時，必須要會的版型設計！
作品主題：後台頁面設計
教學關鍵字：Bootstrap 元件運用、表單使用者體驗、jQuery 動畫設計
8/2（五）20:00~22:30，2.5 小時
第六週：導入網頁規範設計流程
當你頁面數量不是 3~5 頁，而是 30~50 頁以上，該如何制訂規範，讓產出的網頁都能模組化輸出，進以提升效率，也是網頁設計師需考量的一環！
作品主題：電商網站
教學關鍵字：SCSS 自訂 Bootstrap、格線系統、版型管理術
8/9（五）20:00~22:30，2.5 小時
第七週：視差滾動
在 2023 年，網頁已經擺脫中規中矩排版，我們能藉由簡易的 JS 套件，讓自己的網頁具有動感，設計出具備視差滾動技巧的優美網站！
作品主題：產品介紹網站
教學關鍵字：AOS、GSAP、JS 瀏覽器控制
8/16（五）20:00~22:30，2.5 小時
第八週：CSS 模組化管理
一個成熟的前端介面，不論是版型管理、語法支援度、元件應用都得顧及到位，本週將會詳細介紹各角度的技術詮釋，以做為完美的收尾。
作品主題：大型訂房網站
教學關鍵字：SMACSS、OOCSS、Template 元件設計
8/23（五）20:00~22:30，2.5 小時
