卡斯伯提供的教學資源：
鐵人賽 4 - OOCSS 容器與內容分離 (最佳實踐)
結構與樣式分離，對於網頁的樣式設計是一種解放，所有元件的樣式組合搭配及擴增變得更自由。 這篇要介紹的是容器與內容分離，簡單來說我們可以把元件分為兩大類型： 容器型元件：如 grid、card、form 內容型元件：如 button、input、progress-bar 而不同類型的元件設計上應當...
鐵人賽 3 - OOCSS 結構與樣式、容器與內容(實際範例)
結構與樣式在執行的概念上就是這樣的白話，目標即是將這兩者分離，上一篇我們用建築物的結構與外觀樣式做分離，再依不同的需求去做組合。 CSS 上也是相同的道理，比如說我們可以做這樣的分類： 結構：margin、padding、display、vertical-align 樣式： 色彩樣式：color、...
鐵人賽 2 - OOCSS 結構與樣式、容器與內容
以前剛進入這行，掌握了 CSS2 的大部分關鍵之後，對於製作網頁非常有成就感，因為當時寫一個站不需要太多時間(整個網站約落在 800 ~ 1200 行 CSS)，而且 CSS2 語法數量也不多，查找時間也不需要太長，自然覺得世界美好(!?) 這樣快速入門時會有一些難以發現的問題，網站是否易於維護、C...
鐵人賽 1 - 前言，CSS 最重要的事？
鐵人賽系列文又開始囉，這次的主題是 CSS 你覺得 CSS 最重要的是什麼勒？ 如果換個方式思考，寫 CSS 最 痛苦 的事情是什麼呢？ 載入速度緩慢 遇到不會解的問題 接別人寫的 CSS 接別人寫的 CSS，然後還看不懂在寫什麼 兩個月後維護自己寫的 CSS ，然後還看不懂在寫什麼 稍有資歷的...
CSS 失控的 Margin top
失控的 margin-top 是指在使用 margin 時常出現的問題，內元素的 margin 被外層所吸收，導致無法正確的顯示，這我們稱為 Collapsing margins，本篇來教大家怎麼應對這個問題。...
響應式網站設計實作坊 - 高雄前端社群
本篇拖了很久很久才寫，主要原因是因為最近實在很忙，加上一直想跳到 Wordpress 平台上去寫作…(Server 都準備好了)，但 Wordpress的 Server 可能還會被我拿去做其他用途，所以又回來寫了，哈哈哈哈。 這是高雄前端社群久久難得一次的 Responsive 課程，也很難得出現秒...
第二次 CSS 讀書會 - Sass 環境建置
這次是第二次的 CSS 讀書會，目標是要教大家 Sass 的環境建立，也算是比較大的挑戰，因為要在線上及現場教大家怎麼運行 Sass 的編譯環境，且主要的目標族群包含了設計師、網頁設計師，甚至是沒有碰過 command line 的開發者…。...
第一次 CSS 讀書會
這次在高雄舉辦了 CSS 讀書會 (Grid syetem)，主要是之前參加了 javascript 讀書會，認為CSS 也能辦相同的聚會，在第一次試辦時有許多測試水溫的方式： 想先瞭解受眾類型 估計參與人數 直播的方式是否可行 未來讀書會的方向 ...