如果你對 CSS 有興趣，並且希望能夠看到不同樣貌的 CSS，或者厭倦了普通的切版，希望了解更多 CSS 的特殊變化，那麼這堂課可以讓你看到 CSS 有趣的另一面。
畫面上的物件總是沒辦法到你想去的地方嗎？讓我們一起從畫畫學習定位吧！
總是覺得程式語言很枯燥嗎？其實，學習 CSS 也可以有更多有趣的方法！透過 CSS 繪圖的課程，你將可以更加熟悉 CSS 的語法，不只可以畫出實際的作品，更可以應用在未來的 CSS 學習上。
很多人講到 CSS ，第一時間想到的都是『在網頁進行切版時會用來調整樣式的語言』，但其實 CSS 除了能夠調整網頁樣式外，還有很多其他的有趣應用，像是拿來繪製圖形、動畫甚至是製作 3D 圖像，但對於剛開始接觸的設計師或者工程師，碰到最大的問題通常是無法順利的透過 CSS 控制頁面上的物件到自己想去的位置，嘗試了幾次之後就會開始覺得挫敗、覺得 CSS 不有趣。
於是我希望透過這次的課程，能夠以 CSS 繪圖為主體，讓大家可以以更有趣的方式重新認識 CSS ，並且透過繪圖的過程更實際的體會 CSS 定位該怎麼下、 HTML 結構該怎麼包，進而順利的控制每個物件到自己想去的地方。
腦海中有很多有趣的想法，卻總被方形的 div 困住無法實踐嗎？
在畫圖的過程中，我會分享一些 CSS 的小技巧，讓大家可以利用 CSS 屬性將 div 變成不同的形狀，增加更多切版時版面配置的選擇，讓工程師也能切出設計師腦中的天馬行空、設計師也可以無痛跨足前端領域、程式自學者也可以畫出讓人成就感滿滿的可愛圖片！！
上完課後學生可以學到並做出的東西
課程結束後，學員可以學習到如何用 HTML 和 CSS 作畫，透過作畫前的圖形解構及實作過程，也能讓學員更熟悉 HTML 及 CSS 的語法及架構。
- 前端工程師：會基礎切版，對 CSS 有興趣想再更深入了解的人。
- 設計師：想學習 HTML/CSS ，除了基礎切版外想用 CSS 實踐自己腦內特殊設計的人。
- 任何對 CSS 繪圖有興趣的人：有 HTML/CSS 基礎，想用更有趣的方式學習進階 CSS 的人。
本次課程會以一個單元帶一個範例的方式進行，在每個單元的一開始我會帶大家拆解圖形成 HTML 架構，並講解會在範例中使用到的 CSS 技巧，接著再一步一步帶大家完成範例圖形，隨著課程的進行，範例的難度也會漸漸加深，希望大家能在完成範例的過程中感受到 CSS 的樂趣及自己的成長。
單元 1 - 3：{ 楔子 } - 上課方式、主題介紹、認識及安裝開發環境、Emmet 基本語法教學
單元 4 - 7：{ 夏天就是要喝啤酒 }
- CSS 定位介紹、圓角屬性介紹、CSS 繪圖原理 ▶ 啤酒杯繪製
單元 8 - 12：{ 由三角形拼湊而成的紅寶石 }
- 繪製基本幾何形（方形、圓型）、用 CSS 邊框繪製進階幾何形的原理、用邊框繪製幾何形（梯形、三角形）、用邊框繪製複合形（心形、五角形、星形、派型）▶ 紅寶石繪製
單元 13 - 15：{ CSS 組成的貓咪 }
- div 的旋轉與變形、偽元素的介紹與在繪圖上的應用 ▶ 貓咪繪製
單元 16 - 18：{ 老闆我要漢堡跟可樂 }
- 偵測滑鼠動作的 CSS 語法、如何讓滑鼠碰到的物件動起來？▶點擊切換漢堡跟可樂的動畫製作
單元 19 - 21：{ 永遠不停站的火車 }
- 多影格的動畫語法介紹、讓動畫更順的動畫加減速 ▶ 播不停的火車動畫繪製
課程解鎖
在課程上線前，只要有達到解鎖人數就能開啟解鎖課程，已解鎖的課程會與正式課程一起上線。
300% 解鎖
單元 22 - { CSS 動畫在網頁上的應用 } - 網頁上常見的按鈕動畫範例製作
單元 23 - { CSS 動畫在網頁上的應用 } - 網頁上常見的 Loading 動畫範例製作
需準備的軟體/工具
- 文字編輯器（推薦 Sublime Text3，若不想安裝可使用線上文字編輯器 Codepen）
- 網頁瀏覽器（Chrome 為最佳）
需具備的背景知識
- 需了解基本 HTML 及 CSS 撰寫格式
- 需了解 HTML 基本標籤（ex. div、span）
- 需了解 CSS 基本屬性（ex. background、color、border）
- 需了解如何使用 CSS 指定 HTML 物件
不需具備的背景知識
- 不需有 CSS 繪圖經驗
- 不需有設計繪圖基礎
- 不需有 HTML / CSS 以外的程式經驗
Cat Sun（ 孫于婷 ）
- 畢業於嶺東科技大學-視覺傳達設計學系
- 現任五倍紅寶石-前端工程師、網頁設計師
- 2016 Rails Girls Weekly 從零開始的網頁設計-講師
- 2017 Rails Girls Weekly 從零開始的網頁設計-講師
嗨！我是Cat，現任網頁設計師、前端工程師，著迷於利用 CSS code 寫出設計作品，享受感性設計與理性 Coding 的腦內衝突，希望能夠透過教學讓更多人愛上 CSS。
因為喜歡美的事物，所以在大學時選擇視傳系就讀，希望自己能從接收美麗事物的角色變成創造美麗事物的角色，在就學過程中接觸到了網頁設計，因此對程式碼開始產生興趣，畢業後花了半年時間學習網頁相關知識，並成為前端工程師。
是個喜歡在詩句內抒發感性情緒也喜歡在懸疑小說裡推理找犯人的女子，因此著迷於利用 CSS code 寫出設計作品，認為能將感性的影像以理性的程式碼撰寫出來是一件很迷人的事情。
想看更多作品的話，歡迎到我的 Facebook 或 Codepen 來找我玩 :)
講師 CSS 繪圖作品
