切版練習室 ♦ 初學者如何開始並有效地練習切版(Html, CSS)技巧
本篇將分享「切版」練習的心法，僅供參考！
雖然人們常說「Practice makes Perfect」，但錯誤且雜亂無章的練習方式，不僅沒辦法完整的學習切版，過程中也會因為難以有顯著的成長而中途放棄。
但成為切版達人並非一件難事，只是你用對方法了嗎？在《刻意練習》一書中，提到著名的一萬小時定律認為投資「一萬小時」這個黃金數字在練習上，就能夠成為某方面的專家，但作者認為並非如此。
實際上並非無條件投資一萬小時來練習，就能夠把事情做到專家的地步，因為重點在於是否「正確的」進行練習。專注、一致並且以目標為導向的訓練為刻意練習的重點。
天才與庸才之間的差別不在基因、不在天分，在「刻意練習」！
㊀ 切版的刻意練習
練習一定可以提高經驗值，用「對的方式」練習更能夠事半功倍。如果要有效的學習切版，就必須用刻意練習的方法。
在此歸納刻意練習的三個重點，設定目標、專注、意見回饋。
① 首先，設定目標是非常重要的，但切勿好高騖遠！
有目標的學習方法，能促使自己持續地增進技能和填補不足，但如果沒有制定目標就很容易會東學一點、西學一點，卻無法有系統性且穩定的成長。
然而，我們可以嚮往自己未來成為切版方面的大師，也要明白無法一步登天這個道理。所以一開始不要設定過於遠大的目標，因為無法在短期內達成會帶來失落和挫敗感，反而在過程中因為灰心而無法繼續前進。
我常常看到學生剛開始學習切版時，連基本Html標籤跟CSS屬性的用法都不太熟練，就妄想要開始練習一個完整頁面的切版，這樣做是難以成長的！因為一個頁面當中需瞭解的觀念非常多，在沒有基礎的情況下就直接去做，反而會帶來反效果。
應該要由小到大漸進性有目標的學習，才能從基礎開始並確實扎根，因此，有智慧且合理的訂下學習計畫吧！
② 專注，指的是一次只專心做好一件事
很多人並不是缺乏積極、學習的心，但卻因為急於求成，所以只要看到不懂的東西，就瘋狂搜尋資料，，但都無法扎下根基。
現代因網路發達，方便隨時隨地使用智慧型手機上網，所以大多數的人都有「一遇到問題就上網google一下」的習慣。但也因為資訊時代，可以獲得資訊的管道和方法太多，一次就得到超出預期的資訊量，讓許多人有了「資訊焦慮症」。
我也觀察到有很多學生，在練習範例時，明明是要學習「CSS的權重」觀念，他卻因為看到題目上有範例提到他不太瞭解的內容，就急於去了解它，反而本末倒置，沒有將該學的東西學起來。
每次訂下一個小目標，例如，今天想要好好學習flexbox的用法，那就確實、專注地把它搞懂，而不要同時又想看看Grid有什麼差別、又要研究CSS選擇器有哪些，到頭來沒有一件事情搞清楚。
所以，在進入切版練習室之前，請大家務必丟掉雜亂的想法，按部就班的把基礎打好，才能扎實的往下一個階段邁進。
③ 想要寫出好的樣式，就要多參考意見回饋
我認為所謂的意見回饋，並非是指別人針對你的程式碼給予評論，因為我們無法期待有人能夠無條件給我們協助。但我們自己可以透過參考別人撰寫的程式碼，來學習更好的作法。
例如，可以到codepen上去看看有沒有其他人寫過同樣的內容，他的寫法和思考方式是什麼？跟自己的對比，是否更好？或者有哪些可以參考的，自己沒有嘗試過的方法？
我認為在切版這件事上沒有絕對標準的答案，但多參考其他人的寫法也有助於我們切版時的想法更靈活。
㊁ 切版原子訓練
切版練習室的訓練方法參考了設計理論中的原子設計，也就是靈感於化學元素週期表與物質組成的法則，從最小的單位原子（元素）開始，再進一步結合成為分子、組織、頁面。
① 一切從原子（元素）開始
HTML的標籤稱之為Element(元素)，表示網頁的組成也是從最小單位如原子般的元素開始，所以初學者一開始一定要先對於Html標籤的用法有所瞭解。
例如：input標籤的用法
・如何使用不同的type屬性來呈現不同的表單樣式？
・該標籤還能使用哪些屬性來進行設定？
…
接著，在思考如果要修改這個元素的預設外觀，可以用什麼CSS屬性來完成？
例如：如何用CSS刻出上圖的input框
・標籤在不同瀏覽器或裝置時的預設樣式為何？
・要如何改掉預設的樣式？
・各瀏覽器或裝置是否都有正常顯示？
…
② 原子＋原子=分子
在這裡的分子可以是指由兩個以上的Html標籤組合而成，可以單獨表示一個功能或意義。
例如：
・input輸入框與button按鈕組成的搜尋框
・兩個ul清單組成的下拉選單
・頭像圖片img與名稱標題h1組成的個人基本資料等等。
③ 接著，將原子和分子組合而成為一個組織
這裡指的組織是由多個Html標籤所組成的元件，在網頁中可以視為一個單獨區塊。
例如：
・由Logo、導覽列、搜尋框所組成Navbar
・所有input與送出按鈕組成的表單Form
・一個文字跟圖片結合的卡片Card等等。
④ 由各個組織（區塊）合成一個完整的頁面
再進一步結合網格系統、排版(flexbox, Grid)技巧，將這類型組織組合成一個完整的頁面。
⑤ 各種響應式尺寸的調整
頁面完成之後再來調整響應式各尺寸的內容，並微調頁面細節。
⑥ 互動性的動態功能(Dynamic)與特效(Animation)
最後則是透過JS或JQ完成頁面上資料的串接，以及CSS Animation的互動性特效，完成最後網頁動態的部分。
㊂ 切版的練習步驟
統整來說，學習切版的步驟應該為
①首先，正確了解HTML標籤的用法，和常見的CSS屬性
原子練習的意思為，一次練習一個HTML標籤的應用，先能夠html預設的屬性進行修改，並瞭解該標籤的基本用法和常用屬性(attribute)。
CSS屬性(property)則是熟練：
・基本外觀（如color、background、box-shadow、width、height等）
・文字樣式（font-family、font-size、font-weight、text-align等）
・盒模型（margin、padding、border）
等幾種最常使用的屬性。
② 接著，練習將二到三個html標籤結合，並加入簡單的排版
我會將可以單獨呈現一個功能或意義的組合定義為 分子，例如搜尋框（input框加按鈕）、頭像與名稱(img加文字)、ul或ol清單。
分子的概念即為原子與原子的結合，所以除了修改每個原子的外觀，也要考量到結合時的排版與位置，因此，要確實瞭解Html區塊元素與行內元素的差別，並能夠透過CSS屬性display去進行調整。
③當熟練大部分html標籤後，就可以組合成為一個完整的組織
組織在頁面上可以視為獨立的區塊，例如header、footer、table、card等。
在這個階段會更深入了解許多CSS的用法，例如：
・position定位、float浮動的用法
・border、background屬性的用法
較複雜的排版會有定位邏輯，所以需要學習並瞭解position的用法，並且在這個階段開始學習CSS選擇器的應用與權重的計算方法。
④到頁面層級，就進入中級的切版了
將各個區塊組合成為一個頁面，會需要用到複雜排版技巧，例如：
・flexbox排版的技巧
・z-index層級的問題等
水平、垂直置中也是切版中的一大學問，到這裡你應該要對於這些常用技巧都瞭若指掌了。
⑤你的網頁RWD了嗎？
沒有製作響應式的頁面就不能夠說是完成，因此從這裡開始要學習viewpoint、media query查詢等用法。
在切版領域中一個很重要的概念，就是格線系統(Grid System)，我會在這個階段去熟悉他，並學習如何用CSS Grid屬性來切版。
我也會在這階段去深入瞭解html的<head>標籤中很多<meta>的設定方式與意義。
⑥ 再加入微動畫之前，透過JS或JQ將網頁基本功能完善
頁面中有很多互動的效果是由JS或JQ來執行的，例如行動頁面的導覽列開關、風琴式資料卡片的收合、分頁的點擊顯示、輪播圖的跳轉等，都是切版中常見的效果。這些功能也應該在切版完成。
雖然部分從事切版工作的人並非工程師，而是設計師頭銜，所以會對於使用JS或JQ撰寫功能畏懼，但如果正確理解程式的運作方式和邏輯，就能夠快速地上手。
⑦最後用微動畫來增加與使用者的互動
頁面的基本切版，包含響應式、功能都完成之後，就可以進行CSS Animation的撰寫了。
建議將這塊放在最後面學習，在切版的實作流程中也是把撰寫動畫放在最後面，因為在沒有完整的排版和內容之前，製作微動畫不僅沒辦法確認最後的呈現效果，動畫一旦啟動，也會影響切版過程中頁面的預覽。
⑧初學者可以藉由上述步驟，逐一進行Html、Css和簡單的JS/JQ應用的磨練，如果對Html和Css都有一定程度的瞭解，建議可以從①開始提升難度，尋找較複雜的設計進行練習。
以上為切版練習的方法，提供想要精進切版實力的人參考。
如具備扎實的切版實力，在各式網站開發的過程中，就等於擁有了好的開始，如同把房子建立在磐石上一般。
