2025 切版直播班 banner

你是不是覺得,CSS 易學?

網頁資源超多

覺得自己也算略懂

上戰場才發現,CSS 難精!

沒代表作品,找不到版型練習

只會用 AI,要微調不知道怎麼做

沒實戰機會,切版熟練度太低

你認真嘗試了

影音課程、各種實體課程、翻閱各大文件


還是學不好?

讓我們來培訓你

這堂課,要帶你 / 妳做出好作品

凡參加本次直播班學員,將會獲得

10 + 3 份業界熱門主題設計稿,頁面數量超過 200 頁
(包含三份全新版本設計稿!)

提供 學員專屬 UI 設計稿授權,方便您做成面試專用作品

由淺入深的課程大綱

這門課程,我們是以「 業界常見版型主題 」為導向,來規劃我們的課綱,讓您上完課後,就能夠開始動手練版型。

第一堂:1 px 也不差的版型控制術

在排版時,常常為了幾 px 的位移或跑版而傷透腦筋嗎?其實只要掌握幾個關鍵知識,你也能切出精準到位的版型!


作品主題:品牌介紹頁

教學關鍵字:
盒模型、Line-height 與垂直空間、display 狀態、CSS 實務選擇器技巧、圖文排版技巧

week1
week2

第二堂:Flexbox 網頁排版術

李小龍說過:「我不害怕曾經練過一萬種踢法的人,但我害怕一種踢法練過一萬次的人」,網頁排版擁有 float、inline-block、flexbox、grid 流派,但是你真的有認真將一個流派專精到讓人會怕嗎?本堂題目我們將會詳細講解 Flexbox,並藉由後面幾堂的反覆練習,讓您成為 Flexbox 的切版專家!


作品主題:品牌產品列表頁

教學關鍵字:
Flexbox 排版技巧、水平與垂直置中、常見版型教學

第三堂:伸縮自如的 RWD 手機網頁排版術

行動裝置這麼多,你的網頁在全部螢幕解析度都支援嗎?還是你只會下一個手機版 media query,而中間的 size 都忽略了?其實 RWD 沒你想像中的複雜,讓我們來教會你!


作品主題:RWD 品牌形象官網

教學關鍵字:
media query、SCSS 、使用者體驗、斷點規劃

week3
week4

第四堂:多頁式網頁設計

去面試時準備的作品,永遠只有一頁個人介紹網站嗎?頁面一多就不知道該怎麼管理你的 CSS 了?這堂課我們將會分享心法與工具,讓你頁面再多也不怕!


作品主題:多頁式 RWD 品牌形象官網

教學關鍵字:
Vite、多頁設計、SCSS 管理、layout 版型規劃

第五堂:表單設計

一個好的服務流程,少不了一個流暢、直覺且資料清楚的表單介面。表單是與使用者互動的核心,也是網站開發中必須要會的版型設計。


作品主題:流程表單設計

教學關鍵字:
Bootstrap 元件運用、表單使用者體驗、jQuery 動畫設計

week5
week6

第六堂:導入網頁規範設計流程

當你頁面數量不是 3~5 頁,而是 30~50 頁以上,該如何制訂規範,讓產出的網頁都能模組化輸出,進以提升效率,也是網頁設計師需考量的一環!


作品主題:職涯諮詢媒合網站

教學關鍵字:
SCSS 自訂 Bootstrap、格線系統、版型管理術

第七堂:視差滾動

現代的網頁已經擺脫中規中矩排版,我們能藉由簡易的 JS 套件,讓自己的網頁具有動感,設計出具備視差滾動技巧的優美網站!


作品主題:視差滾動應用

教學關鍵字:
AOS、JS 瀏覽器控制

week7
week8

第八堂:實戰總複習

一個成熟的前端介面,不論是版型管理、語法支援度、元件應用都得顧及到位,本週將會詳細介紹各角度的技術詮釋,以做為完美的收尾。


作品主題:旅遊行程平台

教學關鍵字:
SMACSS、OOCSS、Template 元件設計

你是不是擔心
這堂課不適合自己?

在職前端學長姊心得,了解課程內容
Amberhh
Amberhh

商學院轉前端

在 side project 推進的過程中,老師不是想帶我們完成一個很酷很炫,很厲害的作品,而是做為指導教練的角色,根據每個人的程度給予適切的方向和建議,只要夠積極、夠努力,你要的資源洧杰老師會不吝嗇全部丟給你!這才是最值得的地方。

看更多心得>
Sylvia
Sylvia

35 歲中年轉前端

直播班就像是爬山,爬的時候會很痛苦、懷疑自己能不能完成,但堅持到山頂後,會因為美景充滿了成就感,程式是你有多努力,你的成果就不會離你的付出太遠,努力達到老師的要求,多跟同學交流,參考彼此的作品,這會讓你進步得更快!

看更多心得>
Alex
Alex

警察轉前端

其實在參加前,我覺得切版感覺不是很難,因為那時候已經學了Bootstrap 和 CSS 感覺我都切得出來,但參加完就覺得直播班練切版練得真的很扎實!切版直播班前四週比較像在複習,後四週難度才飆升,每週都會有一個全新的版型要切,那時真⋯⋯

看更多心得>

主要講師

卡斯伯老師
卡斯伯

六角學院

  • 2021 {Laravel x Vue} Conf 技術講者
  • Modern Web 研討會講者
  • 連續六屆 IT 鐵人邦獲選紀錄
  • 線上課程超過萬人註冊
  • JavaScript 技術書籍:2022/12 繁體中文書銷售排行第 1 名

網頁切版直播班

用六週的時間,帶你成為切版達人

直播資訊:

  • 開學典禮時間:2025/6/27 (五) 20:00
  • 授課日期:7/2 (三)、7/4 (五)、7/11 (五)、7/18 (五)、7/25 (五)、8/1 (五)、8/6 (三)、8/8 (五)
  • 授課時間:晚間 20:00 ~ 22:30(共 8 堂,總計 20 小時)
  • 直播教室:使用 ZOOM 進行直播教學

上課行事曆
CSS 技術我全都要!

卡斯伯 助教

主線課程

帶你打好程式基礎
(🌟 初學者必上)

作業講解

助教直播講解與解題攻略

  • 第一堂:
    1px 也不差的版型控制術

    7/2(三)20:00~22:30,2.5 小時

  • 助教直播(1):
  • 第二堂:
    Flexbox 網頁排版術

    7/4(五)20:00~22:30,2.5 小時

  • 品牌介紹頁&品牌產品列表頁

    1 小時

  • 第三堂:
    伸縮自如的 RWD 手機網頁排版術

    7/11(五)20:00~22:30,2.5 小時

  • 助教直播(2):
    RWD 品牌形象官網

    2 小時

  • 第四堂:
    多頁式網頁設計

    7/18(五)20:00~22:30,2.5 小時

  • 助教直播(3):
    多頁式 RWD 品牌形象官網

    2 小時

  • 第五堂:
    表單設計

    7/25(五)20:00~22:30,2.5 小時

  • 助教直播(4):
    流程表單設計

    2 小時

  • 第六堂:
    導入網頁規範設計流程

    8/1(五)20:00~22:30,2.5 小時

  • 助教直播(5):
    職涯諮詢媒合網站

    2 小時

  • 第七堂:
    視差滾動

    8/6(三)20:00~22:30,2.5 小時

  • 助教直播(6):
  • 第八堂:
    實戰總複習

    8/8(五)20:00~22:30,2.5 小時

  • 旅遊行程平台&視差滾動

    2 小時


加碼!六角學院與 AAPD 產品設計學院合作

與 AAPD「UI 設計線上實戰營」設計師團隊組隊闖關,切版直播班同學符合條件可免費參與執行。

讓你的能力符合 90% 的切版工作!

線上助教團隊全程陪伴

6 週授課期間,我們會一行行看您的程式碼,確保有達到專業水準!

這堂課適合新手嗎?

如果你是初學者,我們會提供給你免費 23hr 的影音課程帶您入門,並也享有 48 小時內助教問題支援。

掌握好網頁切版後,你就可以依照自己的技能樹,再轉職成:

  • 網頁設計師
  • 前端工程師
  • 後端工程師

想要更多嗎?九個月 React 前端工程師培訓班

除了一身好技術,還想擁有好作品!

每次有想法但都遲遲沒有下手嗎?不管網站企劃、進度管理、頁面設計、專題發表,六角團隊通通手把手的帶著你完成它!

完整前端培訓班說明

專題課程

step1-作品主題思考

Discord 實際討論狀況

STEP 01

作品主題思考
  • 規劃使用者故事
  • 規劃網站地圖
  • 繪製線稿、流程圖
  • 審核,重新調整
step2-進度追蹤

專題教練協助管理

STEP 02

進度追蹤
  • 專題教練透過 Discord 對齊進度
  • Notion 管理專題里程碑
step3-作品主題思考

外部設計服務

STEP 03

與外部設計師合作
step4-網站開發

版面製作

STEP 04

網站開發
  • 版面製作
  • API 串接
  • 動態效果
  • 細節優化
step5-作品主題思考

專題發表會

STEP 05

作品發表
  • 簡報製作
  • 專題發表
  • 準備求職

課程時間軸

線上助教團隊全程陪伴

6 週授課期間,我們會一行行看您的程式碼,確保有達到專業水準!

前端直播班課程行事曆 前端直播班課程行事曆

線上教練團隊全程陪伴

9 個月的授課時間,我們會一同陪伴你,讓你做出專題作品、達到就業水準!

前端直播班課程行事曆 前端直播班課程行事曆

獨一無二的作品展示區

除此之外,本次直播課程新增許多學習活動,讓你就算在線上,也有超越實體活動的學習體驗

作品牆上,每一個都是同學們的心血結晶,都花上半至一個月以上的時間製作,慢慢打磨出可大聲說出「這是我做的」獨立作品! 我們提供了許多不同資源,包含設計、原始碼檢視、內容審核,確保學員們可以完成一定水準的作品。這些作品:

絕對獨一無二,不會在其它地方看到相同內容、版型 都經過六角講師、助教審核,設計、程式碼皆有一定的水準 屬於每個作者的結晶,在面試上更能充滿信心地介紹它 本課程也將引導你完成夠水準的獨立作品!

為顧及教學品質,本班僅招收
400 人

活動時段如下:

1
5/27 (二) 20:00 說明會
2
6/4 (三) 21:00~24:00 提供 3 小時快閃註冊
3
對外開放報名期間:6/5 (四)~ 6/22 (日)

報名成功後,隔週您將會收到 Email 通知,並引導您完成新手任務。

常見 Q & A

Q:網頁切版直播班是預錄的嗎?

A:不是哦,每次課程都會是老師直接 Live 教學,這樣才能提升互動性,增強學員吸收知識體驗。

Q:有幾天直播時段沒辦法配合的話,會有錄影影片嗎?

A:有的!我們直播影片會保留到 2026/06/30,方便學員隨時回平台回顧。

Q:我看到你們有影音課程(ex: 使用 HTML、CSS 開發一個網站)跟網頁切版直播班,到底該選哪個好?

A:在影音課程(ex: 使用 HTML、CSS 開發一個網站)設計上,我們一小節都設計成 5~20 分鐘,方便時間較碎片,沒辦法抽出一小時以上觀看直播課程的學員來選擇。 如果你有迫切性想學好網頁切版,建議你選擇本頁面的直播課程,直播的參與互動性高,並藉由老師們獨創的前端教材,學習效果更好哦!

Q:如果我已經有你們的影音課程(ex: 使用 HTML、CSS 開發一個網站),還需要參加網頁切版直播班嗎?

A:影音課程的設計上,理論和實作都是 5:5,而網頁切版直播班則是實作機會比較多,互動性也高。如果你是迫切想掌握好一門技術的學員。我們會建議你參與網頁切版直播班,並藉由影音課程來提升知識量。

Q:我可以只上網頁切版直播班嗎?

A:當然可以,只要有跟上網頁切版直播班的內容,也會有足夠的知識量來做我們提供的版型。

Q:除了老師直播外,我有問題該怎麼辦?

A:我們的系統會提供課程問答專區,線上的助教都會在發問後 48 小時工作日內回覆;同時也會提供專屬的 Discord 作業討論頻道,來讓您與助教一起互動!

Q:我要怎麼開始上課?

A:成功購買課程後,六角學院將會使用 Email 進行開課通知,包含需開通的課程平台說明,請確保您的信箱能收取來自 [email protected] 的信件。

Q:如果無法參與,可以申請退費嗎?

A:退費前請先詳閱退費規定。若不符合需求仍欲退款,可寄信至 [email protected],將會有小幫手協助進行確認。

點擊「立即報名」,
現在報名享檔期最低優惠

學技術 - 網頁切版直播班

以「 業界常見版型主題 」為導向,六週帶你做出面試專用作品,成為切版小能手。 此組合包含:
  • 23 小時的課程預習教材
  • 直播課程時間:2025/7/2~2025/8/8 晚上八點 (7/2、7/4、7/11、7/18、7/25、8/1、8/6、8/8)
  • 8 堂直播教學,共 20 小時
  • 額外 6 堂作業解說
  • 10+3 份業界熱門主題設計稿,頁面數量超過 200 頁
  • 一年時間免費課程錄影回顧
  • 授課期間無次數限制作業程式碼檢視

原價 NT$ 15,000

NT$ 9,800

技術 + 作品 - 切版直播班 & 專題班

除了一身好技術,還想擁有好作品!用三個月時間與團隊一同打照實力與美觀兼具的網頁作品。 此組合包含:
  • 作品製作時間:2025/7/2~2025/10/3
  • 作品發表日:2025/10/5 (日)
  • 專題期間包含 Bootstrap 5 教學影音
  • 專題期間包含作品規劃、線稿圖製作等企劃教學影音 5 小時
  • 1 式首頁 UI 專題設計稿(每組別獨立設計)
  • 課程期間包含團隊專題教練諮詢
  • 專題教練引導團隊完成獨立 “網頁設計切版作品”
  • 1 份切版面試考題題庫

原價 NT$ 40,000

NT$ 18,750

網頁切版直播班說明會

說明會 文件連結
|時間軸|

00:00

開場

06:00

卡斯伯自我介紹

09:00

今年的課有哪些?

12:00

上課怎麼進行?時程與內容總覽

16:30

切版直播班的學習服務,助教怎麼幫你?

24:00

學習不孤單:社群為什麼有用?

36:00

為什麼有每日任務?會怎麼進行?

43:53

加碼合作|AAPD《UI 設計實戰營》

01:23:00

價格說明&報名注意事項

|同學 QA|

01:36:00

切版對職涯有什麼實際幫助?

02:13:00

現在公司會導入 AI 切版嗎?

02:24:21

切版班的影音課跟體驗營的影音課有什麼差別?

02:27:00

分組會怎麼進行?組員要自己找嗎?可以自己獨立開發嗎?

02:31:00

刷卡分期零利率嗎?

P.S.:六角學院也有 line@ 嘍,歡迎加入隨時獲得六角學院第一手資訊!

加入好友 加入好友