卡斯伯提供的教學資源：
鐵人賽 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 ，然後還看不懂在寫什麼 稍有資歷的...
Yarn - Node.js 的套件管理工具
NPM 每次在安裝的時候，都會安裝很久很久，就算是好幾個類似的專案，每次在執行 npm install 時都需要花費大量的時間，而且在網路不穩定的環境下還可能造成中斷。Yarn 可以讓這些問題好轉些，在實測時，安裝一次以上的套件時間將只需要原本的 20% 時間(甚至更短)，將大幅減少逛 FB 的機會...
CSS 失控的 Margin top
失控的 margin-top 是指在使用 margin 時常出現的問題，內元素的 margin 被外層所吸收，導致無法正確的顯示，這我們稱為 Collapsing margins，本篇來教大家怎麼應對這個問題。...
讓使用者愛上你的表單，提升客戶轉換率
不知道你們在使用手機填寫表單的時候，會發現這樣的狀況，填寫地址跳出中文、填寫 E-mail 表單跳出中文、填寫電話也是跳出中文，甚至是日期欄位也是跳出中文，這樣其實對於使用者來說是很不便利的。如果這個狀況發生在結帳前，很高的機率導致使用者失去耐心，甚至離開網站，如果在表單上多花點小心思，就可以讓使用...
轉行工程師必須克服的三大痛點
本篇是以設計師轉工程師為主要觀點 在研究所那年，我投入大量的時間學程式，由於當時的 Flash 相當火紅，所以決定從 Actionscript 3.0 開始入手，那時也遇到相當多的挫折，印象很深的是在床上看著短短的程式碼 (手打沒問題，重點是我想了解原理，才會在床上看書…)，那段寫著什麼是 “變數”...
