切版與CSS：打造工具箱與切版施工流程！

轉往前端的第一大關便是切版，這工藝主要由HTML5、CSS3作為底層技術，搭配切版心法，並在各家瀏覽器上呈現畫面，切版是種思維，面對更複雜的細節，要考量到變動彈性，合乎設計邏輯與使用者體驗，並且預防各種爆掉，跑版情況。
本系列整理我在學習過程遇過困惑與體會，每個人或許遇到的痛點都不同，這裡就單純分享個人經驗，我依然繼續走在這路上持續修練，短短三十天是無法說完切版這件事，但希望能提供些流程上個人見解，如果內容有技術上不完備之處，歡迎留言交流。

學習歷程

WebCamp訓練方式，有七個版要切，會給張圖片作為設計稿，假裝自己是兼職設計師，去思考如何切?尺寸如何設定(RWD)？如何組裝元件？哪些地方要讓使用者明白用意等等，從無到有的切出來，並經過數次Code Review與學長姐及Mentor交流。

系列結構

第一步：江湖在跑，願我有個好習慣

主要是分享初入前端江湖的小小白，在探索過程覺得有些概念真的太重要了！例如：問問題、找資料、如何看待爆炸的屬性、學習看文件等等。或許沒有跟切版技術直接相關，但這就是種習慣養成吧！願我有個好習慣：）

第二步：Web江湖走跳，CSS概念扎根去

這裡就會深入CSS啦，內容會有，CSS重要概念、盒模型、選擇器、偽類與偽元素、常用屬性、Animation 、Transition等等，除了回顧之前困惑與體會，我希望這次能夠深入理解這些內容，這裡會搭配規範來看看。

第三步：切版施工流程和些概念

這部分提及一些切版遇到的大小事，不會太深入這些工具的應用方法，但會跟大家分享我對工具和流程的一些看法，主要分享內容包括：如何命名？什麼是把版切好？

詳細目錄請見 Day30 完賽感想與系列目錄