2022 切版直播班 banner

你是不是覺得,CSS 易學?

網頁資源超多

覺得自己也算略懂

上戰場才發現,CSS 難精!

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

沒足夠知識,語法知識量不足

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

你認真嘗試了

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


還是學不好?

讓我們來培訓你

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

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

8 個業界熱門主題設計稿,頁面數量超過 20 頁

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

由淺入深的課程大綱

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

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

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


作品主題:履歷設計

教學關鍵字:
盒模型、line-height 行距計算、vertical rhythm (垂直韻律)、display 狀態、CSS 實務選擇器技巧、圖文排版技巧

第二週:Flexbox 網頁排版術

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


作品主題:個人網站

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

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

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


作品主題:RWD 形象官網

教學關鍵字:
media query、SCSS 、使用者體驗、表單設計

第四週:多頁式網頁設計

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


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

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

第五週:後台表單設計

一個完美的前台,一定會有個維護方便的管理後台方便上稿,也同時會是你與後端工程師協作時,必須要會的版型設計!


作品主題:後台頁面設計

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

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

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


作品主題:電商網站

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

第七週:視差滾動

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


作品主題:產品介紹網站

教學關鍵字:
熱門視差滾動套件、JS 瀏覽器控制

第八週:CSS 模組化管理

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


作品主題:大型訂房網站

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

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

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

行銷轉前端

六角的直播班,除了老師會在線上一步步帶同學實作以外,也會幫同學們分組。透過網頁切版直播班,Ruta 也認識到了一起學習前端的好朋友,在直播課結束多年後,還有持續在聯絡,也會互相加油打氣!

看更多心得>
Ruta
Alex

警察轉前端

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

看更多心得>
Ruta
Alysa

海外同學轉職前端

Alysa 鼓勵學弟妹們可以試一下「把目標訂高一點」,目標要拿 A,你最差的時候只會拿 B,如果一開始就定 B,那你就會拿到 C。因此一開始就把目標訂高,你會為了能夠達到高要求而更努力!最後 Alysa 想跟學弟妹們說:學習的時候 code ⋯⋯

看更多心得>
First slide

流程一

登入遊戲系統

報名成功後,您會收到 Email 勇者邀請信件,文中會引導你加入程式勇者村,並承接切版任務。

First slide

流程二

承接切版作業任務

每週直播課程結束後,我們會派出切版作業任務,八週總計就有八道任務。

First slide

流程三

提交審核

學員們提交任務後,將由六角助教們進行審核,並回報是否完成任務。

First slide

流程四

任務完成

當助教回報任務完成後,任務上的積分都會累積為完成率,可以獲得課程特別獎勵!

主要講師

版型講解、TailwindCSS

穎旻老師 tailwind-icon
江穎旻

六角學院講師

CSS 教學經歷:
  • * 三屆切版直播班助教長,批改作業份數超過 1,000 份
  • * 金龍國小教育訓練講師

知識打底、Bootstrap 5

洧杰老師 bootstrap-icon
廖洧杰

六角學院校長

CSS 教學經歷:
  • ★ Sass 教學手冊作者(逾十萬人瀏覽)
  • ★ 2017 中國第三屆 CSS 研討會講者
  • * 2016 中華電信 Sass 企業教育訓練
  • * 2015 ITHome Sass&RWD 講者
  • * 2014 痞客邦 Sass 企業教育訓練
  • * 2014 IT 鐵人邦 Sass 優選

網頁切版直播班

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

授課內容:

  • 開課日期:2022 7/8(五)
  • 授課時段:7/8~8/31 每週三跟五,共 16 堂
  • 教學時數:每堂 1.5 ~ 2.5 小時,共 16 堂,總計 36 小時
  • 直播教室:使用 ZOOM 進行直播教學

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

穎旻 洧杰

週三

多元解法一點就通

週五

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

  • 尚未開課

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

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

  • 第一週:
    初見 Tailwind CSS,窺探不同 CSS 用法

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

    tailwind-icon
  • 第二週:
    Flexbox 網頁排版術

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

  • 第二週:
    客製化 Tailwind CSS,擁有專屬主題

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

    tailwind-icon
  • 第三週:
    RWD 手機網頁排版術

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

  • 第三週:
    簡單的響應式設定,實現三階段變身

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

    tailwind-icon
  • 第四週:
    多頁式網頁設計

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

  • 第四週:
    輕鬆打造 Tailwind CSS 作品

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

    tailwind-icon
  • 第五週:
    後台表單設計

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

    bootstrap-icon
  • 第五週:
    表單版型作業講解

    8/10(三)20:00~21:30,1.5 小時

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

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

    bootstrap-icon
  • 第六週:
    電商版型作業講解(1)

    8/17(三)20:00~21:30,1.5 小時

  • 第七週:
    視差滾動

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

    bootstrap-icon
  • 第七週:
    電商版型作業講解(2)

    8/24(三)20:00~21:30,1.5 小時

  • 第八週:
    CSS 模組化管理

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

    bootstrap-icon
  • 第八週:
    大型網站管理心法

    8/31(三)20:00~21:30,1.5 小時

為了幫助您攻克 BOSS
我們準備好了!

線上助教團隊全程陪伴

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

這堂課適合新手嗎?

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

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

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

學完這門課,你將會獲得

超多的面試作品

我們的設計稿皆提供授權,讓您安心做出讓面試官眼睛一亮的精美作品。

紮實的網頁排版技巧

我們精心挑選的八個在實務開發上必會碰到的版型,全部掌握之後,包準在業界無往不利。

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

報名時段如下:

1
6/2(四) 21:00~24:00 提供六角老學員,
3 小時快閃註冊
2
6/3(五) 12:00 對外開放報名

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

3
6/3(五)~6/12(日) 進行報名與新手任務

常見 Q & A

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

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

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

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

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

A:如果你有迫切性想學好網頁切版,建議你選本頁面的直播課程,直播的參與互動性高,並藉由老師們獨創的前端教材,學習效果更好。

Q:那影音課程(ex: 使用 HTML、CSS 開發一個網站)的話呢?

A:在影音課程(ex: 使用 HTML、CSS 開發一個網站)設計上,我們一小節都設計成 5~20 分鐘,方便時間較碎片,沒辦法抽出一小時以上觀看直播課程的學員來選擇。

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

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

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

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

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

A:我們遊戲系統會提供問答專區,線上的助教都會在發問後 24 小時內回覆,並且也會提供專屬的 Discord 聊天頻道,來讓您與助教一起互動!

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

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

網頁切版直播班

以「 業界常見版型主題 」為導向,八週帶你做出面試專用作品,成為切版小能手。 此組合包含:
  • 8 週直播課程
  • 8 個業界熱門主題設計稿,頁面數量超過 20 頁
  • 學員專屬 UI 設計稿授權
  • 一年時間免費課程錄影回顧
  • 作品程式碼檢視,確保觀念與程式碼品質

原價 NT$ 12,800

NT$ 8,400

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

加入好友 加入好友